ESP8266: Jak monitorować temperaturę i wilgotność: 12 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

W dzisiejszym samouczku użyjemy ESP-01, czyli ESP8266 w konfiguracji 01 (tylko z 2 GPIO), do odczytów temperatury i wilgotności czujnika DHT22. Pokażę schemat elektryczny i część programowania ESP z Arduino. Przykład jest prosty, łatwy do zrozumienia, a także zawiera plik PDF użyty w filmie, aby pomóc w montażu.

W projekcie mamy wtedy ESP01, źródło zamieniające 110 lub 220 na 5 woltów, regulator napięcia 3v3 oraz DHT22, który jest czujnikiem. Na ekranie smartfona będziesz miał lokalny adres IP oprócz kodu JavaScript dostarczonego przez ESP. Ekran ten otrzyma zatem parametry temperatury i wilgotności i wydrukuje te wartości, które będą aktualizowane co pięć sekund. Aby to zrobić, nie potrzebujesz żadnych aplikacji na telefony i tablety, a dotyczy to zarówno systemu operacyjnego Android, jak i IOS.

Krok 1: Montaż

Schemat elektryczny jest dość prosty, podobnie jak część dotycząca montażu, w której ESP01 będzie pełnił rolę serwera. ESPO1 zostanie zaprogramowany tak, jakby był Arduino: poprzez język C. Zaznaczam, że część kodu jest drukowana z przeglądarki. Oznacza to, że wysyła kod JavaScript do przeglądarki. Poniżej wyjaśnię lepiej, jak to działa.

Wracając do schematu elektrycznego, umieściłem 5-woltowe przełączane źródło podłączone do regulatora napięcia 3v3, aby zasilić ESP01. Nadal mamy DHT22 z czterema pinami. Jeden z nich, dane, nie jest używany. Jednak wymaga rezystora podciągającego.

Krok 2: Kod

Pierwszym krokiem jest uwzględnienie bibliotek, z których będziemy korzystać. Bibliotekę DHT można dodać za pomocą opcji Szkic> Dołącz bibliotekę> Zarządzaj bibliotekami…

W oknie, które się otworzy, poszukaj biblioteki czujników DHT.

Następnie utworzyliśmy zmienną typu ESP8266WebServer, która będzie naszym serwerem i będzie odpowiadać na żądania HTTP (port 80).

Tworzymy również zmienną DHT z parametrami 0 (czyli pin 0 GPIO) i typem (w naszym przypadku DHT22).

#include #include #include #include //Criamos to różne typy ESP8266WebServer z dodatkowymi funkcjami //pomocnicze dołączenie do ESP8266 dla serwera odpowiadającego ESP8266WebServer(80); //Variável do tipo DHT que possui funções para controlarmos o módulo dht //permitindo ler a temperatura e a umidade DHT dht(0, DHT22);

Krok 3: Konfiguracja

W konfiguracji zainicjujemy tylko Serial, aby mieć dziennik. Nastąpi to, jeśli ESP8266 jest podłączony do komputera przez port szeregowy, aby korzystać z monitora szeregowego.

Sprawimy, że ESP8266 połączy się z naszą siecią. W naszym przypadku używamy sieci TesteESP z hasłem 87654321, ale będziesz musiał to zmienić w zależności od sieci, z której korzystasz.

//Zainicjuj Serial apenas caso esteja com o ESP8266 conectado 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 se conectar à 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"); //Informacja zwrotna może być użyta o Monitor Serial Serial.println(""); Serial.print("Połącz");

Czekamy, aż ESP8266 połączy się z siecią, a po połączeniu wysyłamy ustawienia sieciowe. Zmień w zależności od sieci.

//Esperamos até que o módulo se conecte à rede while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } //Konfiguracja do naprawy IP. Você pode alterar conforme a sua rede IPAddress ip(192, 168, 3, 11); Brama IPAddress(192, 168, 3, 1); Podsieć adresu IP (255, 255, 255, 0); Serial.print("Konfiguracja poprawki IP dla para: "); Serial.println(ip); //Envia a configuração WiFi.config(ip, brama, podsieć);

Kolejne komendy są tylko w przypadku gdy masz ESP8266 podłączony do komputera przez port szeregowy, dzięki czemu masz informację zwrotną z Monitora Szeregowego.

Możesz sprawdzić adres IP, który otrzymał ESP8266, aby sprawdzić, czy jest taki sam jak w ustawieniach.

//Mostramos no Monitor Serial o ip com o qual o esp8266 se conectou para ver se está de acordo com o que configuramos Serial.println(""); Serial.println("Połączenie"); Serial.print ("IP:"); Serial.println(WiFi.localIP());

Tutaj zaczynamy określać, które funkcje będą wykonywane dla każdego żądania.

W poniższej instrukcji za każdym razem, gdy ESP8266 odbierze żądanie HTTP typu GET w ścieżce/temperaturze, zostanie wykonana funkcja getTemperature.

//Aqui definimos qual a função será executada para o caminho e tipo dado. //Nesse Caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/temperature //(pode ser outro ip zależy od tej konfiguracji) funkcja getTemperature sera executada server.on("/temperature", HTTP_GET, pobierz temperaturę);

W tej drugiej instrukcji, za każdym razem, gdy ESP8266 odbierze żądanie HTTP typu GET w ścieżce/wilgotności, zostanie wykonana funkcja getHumidity.

//Nesse outo caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/humidity //(pode ser outro ip zależy od sua configuração) a função getHumidity será executada server.on("/humidity", HTTP_GET, getHumidity);

W tej instrukcji za każdym razem, gdy ESP8266 odbierze żądanie HTTP typu GET w ścieżce/monitorze, zostanie wykonana funkcja showMonitor.

Funkcja showMonitor odpowiada za zwrócenie głównego html, który będzie wyświetlał wartości temperatury i wilgotności.

//Nesse caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/monitor //(pode ser outro IP zależy od tej konfiguracji) função showMonitor sera executada. //Esta função retornará a página principal que mostrará os valores //da temperatura e da umidade e recarregará essas informações de tempos em tempos server.on("/monitor", HTTP_GET, showMonitor);

Oto definicja funkcji, która powinna zostać wykonana, gdy żądana ścieżka nie zostanie znaleziona.

//Aqui definimos qual função será executada caso o caminho que o cliente requisitou não tenha sido registrado server.onNotFound(onNotFound);

Tutaj inicjujemy nasz serwer, który wcześniej zadeklarowaliśmy na porcie 80.

To jest koniec instalacji.

//Zapoczątkowanie serwera que criamos na porta 80 server.begin(); Serial.println("Zainicjowano serwer HTTP"); }

Krok 4: Pętla

Dzięki lib ESP8266WebServer nie musimy sprawdzać w pętli, czy są klienci i jaka jest ścieżka żądania. Wystarczy wywołać handleClient(), a obiekt sprawdzi, czy jakiś klient wysyła jakieś żądania i przekieruje do odpowiedniej funkcji, którą zarejestrowaliśmy wcześniej.

void loop() { //Zweryfikuj wymagania algumy dla klienta serwera.handleClient(); }

Krok 5: Nie znaleziono prośby

Jest to funkcja, którą wcześniej logowaliśmy do wykonania, gdy klient wysyła jakiekolwiek żądania, które nie zostały zarejestrowane.

Funkcja zwraca tylko kod 404 (domyślny kod, gdy zasób nie zostanie znaleziony), zwrócony typ danych (w przypadku zwykłego tekstu) oraz tekst ze słowami „Nie znaleziono”.

//Função que definimos for ser chamada quando o caminho requisitado no foi registrado void onNotFound() { server.send(404, "text/plain", "Not Found"); }

Krok 6: Przywrócenie temperatury

Jest to funkcja, która zwróci json z danymi temperatury, gdy klient wyśle żądanie GET w / temperature.

//Função que definimos que sera executada quando o cliente fizer uma requisição//do tipo GET no caminho https://192.168.2.8/temperature (podejście do wyjścia ip zależne od konfiguracji) void getTemperature() { //Fazemos a 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 para o cliente com o código 200, que é o código quando a requisição foi realizada com sucesso server.send (200, "application/json", json); }

Krok 7: Przywracanie wilgoci

Jest to funkcja, która zwróci json z danymi dotyczącymi wilgotności, gdy klient wyśle żądanie GET w / wilgotność.

//Função que definimos que será executada quando o cliente fizer uma requisição//do tipo GET no caminho https://192.168.2.8/humidity (pode ser outro ip dependendo da sua configuração) void getHumidity() { //Faturamos a lei da umidade através do módulo dht float h = dht.readHumidity(); //Cria um json com os dados da umidade String json = "{"wilgotność\":"+String(h)+"}"; //Envia o json para o cliente com o código 200, que é o código quando a requisição foi realizada com sucesso server.send(200, "application/json", json); }

Krok 8: HTML

Jest to funkcja, która zwróci kod html, gdy klient przejdzie do dostępu/monitora. Ta strona pokaże wartości temperatury i wilgotności i od czasu do czasu będzie ponownie wczytywać dane. Część, która jest pomiędzy i a stylem>

definiuje wygląd strony i możesz go dowolnie zmieniać.

//Função que definimos que sera executada quando o cliente fizer uma requisição//do tipo GET no caminho https://192.168.2.8/monitor (pode ser outro ip zależy od konfiguracji) void showMonitor() { String html = "" "" ""

„Monitor DHT”

"ciało{"

"dopełnienie:35px;"

"kolor tła: #222222;" "}"

Krok 9: Kontynuacja stylu HTML

"h1{" "kolor: #FFFFFF;" "rodzina czcionek: bezszeryfowa;" "}" "p{" "kolor: #EEEEEE;" "rodzina czcionek: bezszeryfowa;" "rozmiar czcionki:18px;" "}" ""

Tutaj mamy główną część html. W nim mamy dwa akapity, które pokażą temperaturę i wilgotność. Zwróć uwagę na identyfikatory paragrafów, bo to za ich pośrednictwem odzyskamy te paragrafy, aby wprowadzić wartości temperatury i wilgotności po zapotrzebowaniu.

Monitor DHT

Temperatura:

Wilgotność:

Krok 10: JavaScript

Tutaj zaczynamy definiować skrypt, który co jakiś czas będzie odczytywał wartości temperatury i wilgotności. Funkcja refresh() wywołuje funkcje refreshTemperature() i refreshHumdity(), a setInterval wywołuje funkcję refresh co 5000 milisekund (5 sekund).

"odświeżać();" "setInterval(odśwież, 5000);" "funkcja odśwież()" "{" "odświeżTemperatura()" "odświeżHumidity();" "}"

Funkcja refreshTemperature() wykonuje żądanie w / temperature, analizuje informacje zawarte w json i dodaje do paragrafu temperaturę id.

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

Funkcja refreshHumidity() wysyła żądanie do/wilgotności, analizuje informacje zawarte w json i dodaje do paragrafu wilgotność id. I na tym kończymy html, który wyślemy w żądaniach w / monitor.

"function refreshHumidity()" "{" "var xmlhttp = new XMLHttpRequest();" "xmlhttp.onreadystatechange = function() {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200){" "document.getElementById('wilgotność').innerHTML = 'Wilgotność: ' + JSON. parse(xmlhttp.responseText).wilgotność + '%';" "}" "};" "xmlhttp.open('POBIERZ', 'https://192.168.2.8/wilgotność', prawda);" "xmlhttp.send();" "}"

"";

Krok 11: Kończenie ShowMonitor

Teraz, gdy napis z html, który wyślemy, jest gotowy, możemy wysłać go do klienta. Na tym kończy się funkcja showMonitor i kod.

//Envia o html para o cliente com o código 200, que é o código quando a requisição foi realizada com sucesso server.send(200, "text/html", html); }

Krok 12: Testowanie

Teraz otwórz przeglądarkę i wpisz https://192.168.2.8/monitor (możesz potrzebować innego adresu IP w zależności od konfiguracji).