ESP8266: Πώς να παρακολουθείτε τη θερμοκρασία και την υγρασία: 12 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:37

Στο σημερινό σεμινάριο, θα χρησιμοποιήσουμε ένα ESP-01, το οποίο είναι το ESP8266 στη διαμόρφωση 01 (με μόνο 2 GPIO), για μετρήσεις θερμοκρασίας και υγρασίας του αισθητήρα DHT22. Θα σας δείξω ένα ηλεκτρικό διάγραμμα και το μέρος προγραμματισμού ESP με ένα Arduino. Το παράδειγμα είναι απλό, κατανοητό και συνοδεύεται επίσης από το PDF που χρησιμοποιείται στο βίντεο για βοήθεια στη συναρμολόγηση.

Στη σχεδίαση, έχουμε στη συνέχεια το ESP01, την πηγή που μετατρέπει 110 ή 220 σε 5 βολτ, ρυθμιστή τάσης 3v3 και το DHT22, που είναι ο αισθητήρας. Στην οθόνη του smartphone, θα έχετε την τοπική διεύθυνση IP εκτός από τον κώδικα JavaScript που παρέχεται από το ESP. Αυτή η οθόνη θα λάβει συνεπώς τις παραμέτρους της θερμοκρασίας και της υγρασίας και θα εκτυπώσει αυτές τις τιμές, οι οποίες θα ενημερώνονται κάθε πέντε δευτερόλεπτα. Για να γίνει αυτό, δεν θα χρειαστείτε καμία εφαρμογή σε τηλέφωνα και tablet και αυτό ισχύει τόσο για το λειτουργικό σύστημα Android όσο και για το IOS.

Βήμα 1: Συναρμολόγηση

Το ηλεκτρικό σχήμα είναι αρκετά απλό, όπως και το μέρος της συναρμολόγησης, το οποίο θα περιλαμβάνει το ESP01 ως διακομιστή. Το ESPO1 θα προγραμματιστεί σαν να ήταν Arduino: μέσω της γλώσσας C. Επισημαίνω ότι μέρος του κώδικα εκτυπώνεται από το πρόγραμμα περιήγησης. Αυτό σημαίνει ότι στέλνει κώδικα JavaScript στο πρόγραμμα περιήγησης. Παρακάτω, θα εξηγήσω καλύτερα για το πώς λειτουργεί αυτό.

Επιστρέφοντας στο διάγραμμα καλωδίωσης, έβαλα μια πηγή μεταγωγής 5 βολτ συνδεδεμένη σε ρυθμιστή τάσης 3v3 για να τροφοδοτήσει το ESP01. Έχουμε ακόμα το DHT22 με τέσσερις ακίδες. Ένα από αυτά, τα δεδομένα, δεν χρησιμοποιείται. Ωστόσο, χρειάζεται μια αντίσταση έλξης.

Βήμα 2: Κωδικός

Το πρώτο βήμα είναι να συμπεριλάβουμε τα λίμπα που θα χρησιμοποιήσουμε. Το DHT lib μπορεί να προστεθεί με την επιλογή Sketch> Include Library> Manage Libraries…

Στο παράθυρο που ανοίγει, αναζητήστε τη βιβλιοθήκη αισθητήρων DHT.

Μετά από αυτό, δημιουργήσαμε μια μεταβλητή του τύπου ESP8266WebServer που θα είναι ο διακομιστής μας και θα απαντά σε αιτήματα HTTP (θύρα 80).

Δημιουργούμε επίσης μια μεταβλητή DHT με τις παραμέτρους 0 (που είναι ο ακροδέκτης GPIO 0) και τον τύπο (στην περίπτωσή μας DHT22).

#include #include #include #include // Criamos uma variável do tipo ESP8266WebServer που μπορεί να λειτουργήσει // που βοηθάει στον υπολογιστή σας μέσω του ESP8266 και αποκρίνεται ESP8266WebServer server (80); // Variável do tipo DHT que possui funções para controlarmos o módulo dht // επιτρέποντας τη θερμοκρασία και το umidade DHT dht (0, DHT22);

Βήμα 3: Ρύθμιση

Στη ρύθμιση, θα προετοιμάσουμε το Serial μόνο έτσι ώστε να έχουμε ένα αρχείο καταγραφής. Αυτό θα συμβεί εάν το ESP8266 είναι συνδεδεμένο στον υπολογιστή μέσω του σειριακού για χρήση της σειριακής οθόνης.

Θα κάνουμε το ESP8266 να συνδεθεί στο δίκτυό μας. Στην περίπτωσή μας, χρησιμοποιούμε το δίκτυο TesteESP με τον κωδικό πρόσβασης 87654321, αλλά θα πρέπει να το αλλάξετε ανάλογα με το δίκτυο που χρησιμοποιείτε.

// Πραγματοποιήστε μια Σειριακή απενεργοποίηση μιας σειράς ESP8266 conectado ao computador pela serla queira ter um log // για να διευκολύνετε το 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"); // Σχόλια για τη χρήση του o Serial Serial.println (""); Serial.print ("Conectando");

Περιμένουμε να συνδεθεί το ESP8266 στο δίκτυο και αφού συνδεθεί, στέλνουμε τις ρυθμίσεις δικτύου. Αλλάξτε ανάλογα με το δίκτυό σας.

// Esperamos até que o módulo se conecte à rede while (WiFi.status ()! = WL_CONNECTED) {καθυστέρηση (500); Serial.print ("."); } // Ρυθμίσεις παραμέτρων IP fixo. Você pode alterar conforme a sua rede IPAddress ip (192, 168, 3, 11); Πύλη IPAddress (192, 168, 3, 1). Υποδίκτυο IPAddress (255, 255, 255, 0); Serial.print ("Configurando IP fixo para:"); Serial.println (ip); // Envia a configuração WiFi.config (ip, gateway, subnet);

Οι επόμενες εντολές είναι μόνο στην περίπτωση που έχετε ESP8266 συνδεδεμένο στον υπολογιστή μέσω του σειριακού, έτσι ώστε να έχετε ανατροφοδότηση από τη Σειριακή οθόνη.

Μπορείτε να ελέγξετε το IP που έλαβε το ESP8266 για να δείτε αν είναι το ίδιο με αυτό των ρυθμίσεων.

// 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 ("Connectado"); Serial.print ("IP:"); Serial.println (WiFi.localIP ());

Εδώ, αρχίζουμε να ορίζουμε ποιες συναρτήσεις θα εκτελούνται για κάθε αίτημα.

Στην παρακάτω οδηγία, κάθε φορά που το ESP8266 λαμβάνει ένα αίτημα HTTP του τύπου GET στη διαδρομή / θερμοκρασία, η συνάρτηση getTemperature θα εκτελείται.

// Aqui definimos qual a função será Exeada 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 dependendo da sua configuração) a função getTemperature será exeada server.on ("/temperature", HTTP_GET, getTemperature);

Σε αυτήν την άλλη δήλωση, κάθε φορά που το ESP8266 λαμβάνει ένα αίτημα HTTP τύπου GET στη διαδρομή / υγρασία, η συνάρτηση 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 dependendo da sua configuração) a função getHumidity será εκτελέστε server.on ("/υγρασία", HTTP_GET, getHumidity);

Σε αυτήν την οδηγία, κάθε φορά που το ESP8266 λαμβάνει ένα αίτημα HTTP τύπου GET στη διαδρομή / οθόνη, η λειτουργία showMonitor θα εκτελείται.

Η συνάρτηση showMonitor είναι υπεύθυνη για την επιστροφή του κύριου html που θα εμφανίζει τις τιμές θερμοκρασίας και υγρασίας.

// Nesse caso quando houver uma requisição http do tipo GET no caminho https://192.168.2.8/monitor // (pode ser outro ip dependendo da sua configuração) a funcão showMonitor será εκτελέστε. // 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);

Ακολουθεί ο ορισμός της συνάρτησης που πρέπει να εκτελεστεί όταν δεν βρεθεί η διαδρομή που ζητήθηκε.

// Για ορισμένες λειτουργίες, μπορείτε να εκτελέσετε ένα πρόγραμμα ή να ζητήσετε από τον πελάτη να εγγραφεί στο server.onNotFound (onNotFound);

Εδώ προετοιμάζουμε τον διακομιστή μας που είχαμε δηλώσει προηγουμένως στη θύρα 80.

Αυτό είναι το τέλος της εγκατάστασης.

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

Βήμα 4: Βρόχος

Χάρη στο lib ESP8266WebServer, δεν χρειάζεται να ελέγχουμε τον βρόχο εάν υπάρχουν πελάτες και ποια είναι η διαδρομή αιτήματος. Απλώς πρέπει να καλέσουμε το handleClient () και το αντικείμενο θα ελέγξει εάν κάποιος πελάτης υποβάλλει αιτήματα και θα ανακατευθυνθεί στην αντίστοιχη λειτουργία που καταχωρήσαμε πριν.

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

Βήμα 5: Το αίτημα δεν βρέθηκε

Αυτή είναι η λειτουργία που συνδεθήκαμε προηγουμένως για εκτέλεση όταν ο πελάτης υποβάλλει αιτήματα που δεν έχουν καταχωρηθεί.

Η συνάρτηση επιστρέφει μόνο τον κωδικό 404 (προεπιλεγμένος κωδικός όταν δεν υπάρχει πόρος), τον τύπο δεδομένων που επιστρέφεται (στην περίπτωση του απλού κειμένου) και ένα κείμενο με τις λέξεις "Δεν βρέθηκε".

// Λειτουργία που μπορεί να καθοριστεί για να σας ζητήσει να εγγραφείτε για να καταχωρήσετε το κενό onNotFound () {server.send (404, "text/plain", "Not Found"); }

Βήμα 6: Επιστροφή της θερμοκρασίας

Αυτή είναι η συνάρτηση που θα επιστρέψει ένα json με τα δεδομένα θερμοκρασίας όταν ο πελάτης κάνει ένα αίτημα GET σε / θερμοκρασία.

// Função que definimos que será exeada quando o cliente fizer uma requisição // do tipo GET no caminho https://192.168.2.8/temperature (pode ser outro ip dependendo da sua configuração) 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)+"}"; // Ενδιαφέρον για τον πελάτη com o código 200, που πρέπει να πραγματοποιήσετε και να πραγματοποιήσετε μια επιταγή διακομιστή. Αποστολή (200, "application/json", json); }

Βήμα 7: Επιστροφή υγρασίας

Αυτή είναι η συνάρτηση που θα επιστρέψει ένα json με τα δεδομένα υγρασίας όταν ο πελάτης κάνει ένα αίτημα GET σε / υγρασία.

// Funchão que definimos que será exeada 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 () {// 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 = "{" υγρασία / ":"+String (h)+"}"; // Ενδιάμεση τιμή για τον πελάτη com o código 200, που πρέπει να υποβληθεί για να πραγματοποιήσει τον εξυπηρετητή server.send (200, "application/json", json); }

Βήμα 8: HTML

Αυτή είναι η συνάρτηση που θα επιστρέψει το html όταν ο πελάτης μεταβεί στην πρόσβαση / οθόνη. Αυτή η σελίδα θα εμφανίζει τις τιμές θερμοκρασίας και υγρασίας και θα επαναφορτώνει τα δεδομένα κατά διαστήματα. Το κομμάτι που βρίσκεται μεταξύ και και στυλ>

καθορίζει την εμφάνιση της σελίδας και μπορείτε να την αλλάξετε όπως θέλετε.

// Λειτουργία που μπορεί να εκτελεστεί και να εκτελεστεί από τον πελάτη σας ή να ζητήσετε // κάντε συμβουλές GET no caminho https://192.168.2.8/monitor (pode ser out out ip dependendo da sua configuração) void showMonitor () {String html = "" "" ""

"Οθόνη DHT"

"σώμα{"

"padding: 35px;"

"χρώμα φόντου: #222222;" "}"

Βήμα 9: Συνέχεια στυλ HTML

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

Εδώ έχουμε το κύριο μέρος του html. Σε αυτό, έχουμε δύο παραγράφους που θα δείχνουν τη θερμοκρασία και την υγρασία. Δώστε προσοχή στα αναγνωριστικά των παραγράφων, διότι μέσω αυτών θα ανακτήσουμε αυτές τις παραγράφους για να εισαγάγουμε τις τιμές θερμοκρασίας και υγρασίας μετά τις απαιτήσεις.

Οθόνη DHT

Θερμοκρασία:

Υγρασία:

Βήμα 10: JavaScript

Εδώ αρχίζουμε να ορίζουμε το σενάριο που θα διαβάζει κατά καιρούς τις τιμές θερμοκρασίας και υγρασίας. Η συνάρτηση refresh () καλεί τις συναρτήσεις refreshTemperature () και refreshHumdity () και το setInterval καλεί τη λειτουργία ανανέωσης κάθε 5000 χιλιοστά του δευτερολέπτου (5 δευτερόλεπτα).

"φρεσκάρω();" "setInterval (ανανέωση, 5000);" "λειτουργία ανανέωση ()" "{" "refreshTemperature ()" "refreshHumidity ();" "}"

Η συνάρτηση refreshTemperature () κάνει ένα αίτημα σε / θερμοκρασία, αναλύει τις πληροφορίες που περιέχονται στο json και προσθέτει στην παράγραφο τη θερμοκρασία id.

"function refreshTemperature ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('θερμοκρασία'). innerHTML = 'Θερμοκρασία:' + JSON ανάλυση (xmlhttp.responseText).temperature + 'C'; " "}" "};" "xmlhttp.open (" GET "," https://192.168.2.8/temperature ", true);" "xmlhttp.send ();" "}"

Η συνάρτηση refreshHumidity () κάνει ένα αίτημα / υγρασία, αναλύει τις πληροφορίες που περιέχονται στο json και προσθέτει στην παράγραφο την υγρασία id. Και με αυτό, τελειώνουμε το html που θα στείλουμε στα αιτήματα στο / monitor.

"function refreshHumidity ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = λειτουργία () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById (" υγρασία "). innerHTML = 'Υγρασία:' + JSON ανάλυση (xmlhttp.responseText). υγρασία + '%'; " "}" "};" "xmlhttp.open (" GET "," https://192.168.2.8/humidity ", true);" "xmlhttp.send ();" "}"

"";

Βήμα 11: Φινίρισμα ShowMonitor

Τώρα που η συμβολοσειρά με το html που θα στείλουμε είναι έτοιμη, μπορούμε να την στείλουμε στον πελάτη. Αυτό ολοκληρώνει τη λειτουργία showMonitor και τον κώδικα.

// Ενδιάμεση html για τον πελάτη com o código 200, ή για το código quando a requisição foi realizada com sucesso server.send (200, "text/html", html); }

Βήμα 12: Δοκιμή

Τώρα ανοίξτε το πρόγραμμα περιήγησής σας και πληκτρολογήστε https://192.168.2.8/monitor (μπορεί να χρειαστείτε διαφορετικό ip ανάλογα με τη διαμόρφωσή σας).