ESP8266: Com controlar la temperatura i la humitat: 12 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

Al tutorial d’avui utilitzarem un ESP-01, que és l’ESP8266 de la configuració 01 (amb només 2 GPIO), per a la lectura de temperatura i humitat del sensor DHT22. Us mostraré un esquema elèctric i la part de programació ESP amb un Arduino. L'exemple és senzill, fàcil d'entendre i també inclou el PDF utilitzat al vídeo per facilitar el muntatge.

Al disseny, tenim l’ESP01, la font que converteix 110 o 220 en 5 volts, un regulador de voltatge de 3v3 i el DHT22, que és el sensor. A la pantalla del telèfon intel·ligent, tindreu l'adreça IP local a més del codi JavaScript proporcionat per l'ESP. Per tant, aquesta pantalla rebrà els paràmetres de temperatura i humitat i imprimirà aquests valors, que s’actualitzaran cada cinc segons. Per fer-ho, no necessitareu cap aplicació als telèfons i a les tauletes, i això s'aplica tant al sistema operatiu Android com a IOS.

Pas 1: Muntatge

L’esquema elèctric és bastant senzill, així com la part sobre el muntatge, que implicarà l’ESP01 com a servidor. L'ESPO1 es programarà com si fos un Arduino: a través del llenguatge C. Apunto que part del codi s’imprimeix des del navegador. Això significa que envia codi JavaScript al navegador. A continuació, explicaré millor com funciona.

Tornant al diagrama de cablejat, vaig posar una font commutada de 5 volts connectada a un regulador de voltatge de 3v3 per alimentar l’ESP01. Encara tenim el DHT22 amb quatre passadors. Una d’aquestes, les dades, no s’utilitza. No obstant això, es necessita una resistència de tracció.

Pas 2: Codi

El primer pas és incloure les libs que farem servir. La llibreta DHT es pot afegir mitjançant l'opció Esbós> Inclou biblioteca> Gestiona biblioteques …

A la finestra que s’obre, cerqueu la biblioteca de sensors DHT.

Després d'això, vam crear una variable del tipus ESP8266WebServer que serà el nostre servidor i que respondrà a les sol·licituds HTTP (port 80).

També creem una variable DHT amb els paràmetres 0 (que és el pin GPIO 0) i el tipus (en el nostre cas DHT22).

#include #include #include #include // Criamos uma variável do type ESP8266WebServer que ja pot fer funcions // que auxiliam na criação das rotas que o ESP8266 vai responder ESP8266WebServer server (80); // Variável do type DHT que possui funções per controlarmos o módulo dht // permitindo ler a temperatura e a umidade DHT dht (0, DHT22);

Pas 3: Configuració

A la configuració, inicialitzarem el serial només perquè tinguem un registre. Això es produirà si l'ESP8266 està connectat a l'ordinador mitjançant la sèrie per utilitzar el monitor de sèrie.

Farem que l’ESP8266 es connecti a la nostra xarxa. En el nostre cas, utilitzem la xarxa TesteESP amb la contrasenya 87654321, però haurà de canviar-la segons la xarxa que utilitzi.

// Inicialize a Serial apenas caso esteja com o ESP8266 connectado ao computador pela serla queira ter um log // para facilitar saber o que está acontecendo com o ESP8266 Serial.begin (115200); // Instrução para o ESP8266 es connecta a rede. // No nosso caso o nome da rede é TesteESP e a senha é 87654321. // Você deve alterar com as informações da sua rede WiFi.begin ("TesteESP", "87654321"); // Feedback caso esteja using o Monitor Serial Serial.println (""); Serial.print ("Conectant");

Esperem que l’ESP8266 es connecti a la xarxa i, després que es connecti, enviem la configuració de la xarxa. Canvieu segons la vostra xarxa.

// Esperamos até que o módulo se connecta a rede while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } // Configurações do IP fixo. Você can alterar conforme a sua rede IPAddress ip (192, 168, 3, 11); Passarel·la IPAddress (192, 168, 3, 1); Subxarxa IPAddress (255, 255, 255, 0); Serial.print ("Configurant IP fix per:"); Serial.println (ip); // Envia una configuració WiFi.config (ip, passarel·la, subxarxa);

Les següents ordres només es donen en cas que tingueu ESP8266 connectat a l'ordinador mitjançant la sèrie, de manera que tingueu comentaris del monitor de sèrie.

Podeu comprovar la IP que va rebre l’ESP8266 per veure si és la mateixa que a la configuració.

// Mostramos no Monitor Serial o ip com o qual o esp8266 es connecta per veure si està d’acord com que configurem Serial.println (""); Serial.println ("Connectat"); Serial.print ("IP:"); Serial.println (WiFi.localIP ());

Aquí comencem a definir quines funcions s’executaran per a cada sol·licitud.

A la instrucció següent, cada vegada que ESP8266 rep una sol·licitud HTTP del tipus GET al camí / temperatura, s'executarà la funció getTemperature.

// Aqui definimos qual a função serà executat per a caminho e tipo dado. // Nesse caso quan houver uma requisição http do tipo GET no caminho https://192.168.2.8/temperature // (pot ser un altre IP depenent de la seva configuració) a la funció getTemperature serà executada server.on ("/ temperature", HTTP_GET, getTemperature);

En aquesta altra sentència, cada vegada que ESP8266 rep una sol·licitud HTTP de tipus GET al camí / humitat, s'executarà la funció getHumidity.

// Nesse outo case when houver uma requisição http do tipo GET no caminho https://192.168.2.8/humidity // (Podeu ser un altre IP depenent de la seva configuració) a la funció getHumidity serà executada server.on ("/ moist", HTTP_GET, getHumidity);

En aquesta instrucció, cada vegada que ESP8266 rep una sol·licitud HTTP de tipus GET al camí / monitor, s'executarà la funció showMonitor.

La funció showMonitor s’encarrega de retornar l’html principal que mostrarà els valors de temperatura i humitat.

// Nesse caso quan houver uma requisição http do tipo GET no caminho https://192.168.2.8/monitor // (pode ser outro ip dependendo da su configuración) a função showMonitor serà executat. // Aquesta funció retornarà a la pàgina principal que mostrarà els valors // da temperatura e da umidade e recarregará essas informações de tempos em tempos server.on ("/ monitor", HTTP_GET, showMonitor);

Aquí teniu la definició de la funció que s’hauria d’executar quan no es trobi la ruta sol·licitada.

// Aqui definits qual função serà executat cas o caminho que o client requerit no ha estat registrat server.onNotFound (onNotFound);

Aquí inicialitzem el nostre servidor que prèviament havíem declarat al port 80.

Aquest és el final de la configuració.

// Inicializamos o server que criamos en porta 80 server.begin (); Serial.println ("Servidor HTTP iniciado"); }

Pas 4: bucle

Gràcies al lib ESP8266WebServer, no cal que comprovem el bucle si hi ha clients i quin és el camí de sol·licitud. Només hem de trucar a handleClient (), i l’objecte comprovarà si algun client fa sol·licituds i es redirigirà a la funció corresponent que hem registrat abans.

void loop () {// Verifica se ha alguma requisição de algum client server.handleClient (); }

Pas 5: no s'ha trobat la sol·licitud

Aquesta és la funció que vam iniciar prèviament per executar quan el client realitza qualsevol sol·licitud que no s'hagi registrat.

La funció només retorna el codi 404 (codi per defecte quan no es troba un recurs), el tipus de dades retornat (en el cas de text pla) i un text amb les paraules "No trobat".

// Funció que es defineix per a un canvi quan no s'ha de registrar void onNotFound () {server.send (404, "text / plain", "Not Found"); }

Pas 6: retornar la temperatura

Aquesta és la funció que retornarà un json amb les dades de temperatura quan el client faci una sol·licitud GET a / temperature.

// Funció que defineix que serà executada quan el client fizer uma requisição // do tipo GET no caminho https://192.168.2.8/temperature (pot ser un altre IP depenent de la seva configuració) void getTemperature () {// Fasemos una leitura da temperatura através do módulo dht float t = dht.readTemperature (); // Cria um json com os dados da temperatura String json = "{" temperature / ":" + String (t) + "}"; // Envia o json per al client com o codi 200, que és o codi quan es requereix una realització amb un servidor servidor.send (200, "application / json", json); }

Pas 7: retorn de la humitat

Aquesta és la funció que retornarà un json amb les dades d'humitat quan el client faci una sol·licitud GET in / humitat.

// Funció que defineix que serà executada quan el client fizer uma requisição // do tipo GET no caminho https://192.168.2.8/humidity (pot ser un altre IP depenent de la seva configuració) void getHumidity () {// Fazemos a leitura da umidade através do módulo dht float h = dht.readHumidity (); // Cria um json com os dados da umidade String json = "{" moisture / ":" + String (h) + "}"; // Envia o json per al client com o codi 200, que és o codi quan es requereix una realització amb un servidor servidor.send (200, "application / json", json); }

Pas 8: HTML

Aquesta és la funció que retornarà l'html quan el client vagi a accedir / supervisar. Aquesta pàgina mostrarà els valors de temperatura i humitat i recarregarà les dades de tant en tant. La part que hi ha entre i i l'estil>

defineix l’aspecte de la pàgina i podeu canviar-la com vulgueu.

// Funció que defineix que serà executada quan el client fizer uma requisição // do tipo GET no caminho https://192.168.2.8/monitor (pot ser un altre IP depenent de la seva configuració) void showMonitor () {String html = "" "" ""

"Monitor DHT"

"cos {"

"farcit: 35 px;"

"background-color: # 222222;" "}"

Pas 9: continuació de l'estil HTML

"h1 {" "color: #FFFFFF;" "font-family: sans-serif;" "}" "p {" "color: #EEEEEE;" "font-family: sans-serif;" "font-size: 18px;" "}" ""

Aquí tenim la part principal de html. En ell, tenim dos paràgrafs que mostraran la temperatura i la humitat. Presteu atenció a les identificacions dels paràgrafs, perquè és a través d’ells que recuperarem aquests paràgrafs per introduir els valors de temperatura i humitat després de les sol·licituds.

Monitor DHT

Temperatura:

Humitat:

Pas 10: JavaScript

Aquí comencem a definir el guió que de tant en tant llegirà els valors de temperatura i humitat. La funció refresh () crida a les funcions refreshTemperature () i refreshHumdity () i setInterval crida a la funció refresh cada 5.000 mil·lisegons (5 segons).

"actualització();" "setInterval (refresc, 5000);" "function refresh ()" "{" "refreshTemperature ()" "refreshHumidity ();" "}"

La funció refreshTemperature () fa una sol·licitud a / temperature, analitza la informació continguda a json i afegeix al paràgraf la temperatura id.

"funció refreshTemperature ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('temperature'). innerHTML = 'Temperature:' + JSON. analitzar (xmlhttp.responseText).temperature + 'C'; " "}" "};" "xmlhttp.open ('GET', 'https://192.168.2.8/temperature', true);" "xmlhttp.send ();" "}"

La funció refreshHumidity () fa una sol·licitud de / humitat, analitza la informació continguda a json i afegeix al paràgraf la id humitat. I amb això, acabem l’html que enviarem a les sol·licituds a / monitor.

"funció refreshHumidity ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('humitat'). innerHTML = 'Humitat:' + JSON. analitzeu (xmlhttp.responseText).humitat + '%'; " "}" "};" "xmlhttp.open (" GET "," https://192.168.2.8/humidity ", cert);" "xmlhttp.send ();" "}"

"";

Pas 11: Acabar ShowMonitor

Ara que la cadena amb l'html que enviarem està a punt, la podem enviar al client. Això completa la funció showMonitor i el codi.

// Envia o html per al client com a codi 200, que és o codi quan es requereix una realització amb un servidor.send (200, "text / html", html); }

Pas 12: proves

Ara obriu el navegador i introduïu https://192.168.2.8/monitor (és possible que necessiteu una IP diferent segons la vostra configuració).