ESP8266 και Visuino: DHT11 Θερμοκρασία και υγρασία Web Server: 12 βήματα

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

Οι μονάδες ESP8266 είναι εξαιρετικοί ανεξάρτητοι ελεγκτές χαμηλού κόστους με ενσωματωμένο Wi-Fi και ήδη έκανα μια σειρά οδηγιών σχετικά με αυτά.

Οι DTH11/DTH21/DTH22 και AM2301 είναι πολύ δημοφιλείς συνδυασμένοι αισθητήρες θερμοκρασίας και υγρασίας Arduino, και έκανα επίσης μια σειρά από οδηγίες, συμπεριλαμβανομένου ενός Instructable on Remote Thermometer and Humidity Sensor με 2 ESP8266 συνδεδεμένα στο δικό τους ιδιωτικό δίκτυο Wi-Fi.

Σε αυτό το Instructable θα σας δείξω πώς μπορείτε να δημιουργήσετε έναν διακομιστή θερμοκρασίας και υγρασίας Web με ESP8266 και DHT11 και να συνδεθείτε σε αυτόν στο υπάρχον δίκτυο Wi-Fi από πολλές συσκευές με ένα πρόγραμμα περιήγησης ιστού.

Βήμα 1: Στοιχεία

1. Πίνακας OneNodeMCU ESP8266 (χρησιμοποίησα την έκδοση NodeMCU 0.9, αλλά οποιαδήποτε άλλη, ή ακόμα και μεμονωμένη ESP-12 ή ESP-01 θα λειτουργήσει)
2. Μια μονάδα αισθητήρα DHT11 πήρα από αυτό το φθηνό σετ αισθητήρων 37
3. 3 Γυναικεία-Γυναικεία καλώδια βραχυκυκλωτήρων

Βήμα 2: Συνδέστε το DHT11 στη μονάδα NodeMCU ESP8266

1. Συνδέστε την τροφοδοσία (Κόκκινο καλώδιο), τη Γείωση (Μαύρο καλώδιο) και τα Δεδομένα (Γκρι σύρμα) στη μονάδα DHT11 (Η εικόνα 1 δείχνει 2 διαφορετικούς τύπους μονάδων αισθητήρα DHT11. Όπως μπορείτε να δείτε, οι ακίδες μπορεί να διαφέρουν, οπότε συνδέστε προσεκτικά!)
2. Συνδέστε το άλλο άκρο του καλωδίου γείωσης (Μαύρο καλώδιο) με τον πείρο γείωσης της μονάδας ESP8266 (Εικόνα 2)
3. Συνδέστε το άλλο άκρο του καλωδίου τροφοδοσίας (Κόκκινο καλώδιο) στον ακροδέκτη τροφοδοσίας 3.3V της μονάδας ESP8266 (Εικόνα 2)
4. Συνδέστε το άλλο άκρο του καλωδίου δεδομένων (γκρι σύρμα) στο ψηφιακό pin 2 της μονάδας ESP8266 (εικόνα 3)
5. Η εικόνα 4 δείχνει πού βρίσκονται η γείωση, η ισχύς των 3.3V και οι ψηφιακές 2 ακίδες του NodeMCU 0.9

Βήμα 3: Ξεκινήστε το Visuino και επιλέξτε τον τύπο πλακέτας ESP8266

Για να ξεκινήσετε τον προγραμματισμό του Arduino, θα πρέπει να έχετε εγκαταστήσει το Arduino IDE από εδώ:

Λάβετε υπόψη ότι υπάρχουν ορισμένα κρίσιμα σφάλματα στο Arduino IDE 1.6.6

Βεβαιωθείτε ότι έχετε εγκαταστήσει 1.6.7 ή νεότερη έκδοση, διαφορετικά αυτό το Instructable δεν θα λειτουργήσει!

Εάν δεν το έχετε κάνει ακολουθήστε τα βήματα σε αυτό το Instructable για να ρυθμίσετε το Arduino IDE στο πρόγραμμα ESP 8266

Το Visuino: https://www.visuino.com πρέπει επίσης να εγκατασταθεί.

1. Ξεκινήστε το Visuinoas που εμφανίζεται στην πρώτη εικόνα
2. Κάντε κλικ στο κουμπί "Εργαλεία" στο στοιχείο Arduino (Εικόνα 1) στο Visuino
3. Όταν εμφανιστεί το παράθυρο διαλόγου, επιλέξτε "NodeMCU ESP-12" όπως φαίνεται στην εικόνα 2

Βήμα 4: Στο Visuino: Ορίστε όνομα κεντρικού υπολογιστή και σημείο πρόσβασης

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

1. Στο Object Inspector, επεκτείνετε την ιδιότητα "Modules" και, στη συνέχεια, την υπο -ιδιότητα "WiFi"
2. Στο Object Inspector ορίστε την τιμή της ιδιότητας "HostName" σε "dht11server" (Εικόνα 1)
3. Στο Object Inspector, επεκτείνετε την δευτερεύουσα ιδιότητα "AccessPoints" του "WiFi" και κάντε κλικ στο κουμπί "…" δίπλα στην τιμή του (Εικόνα 2)
4. Στο πρόγραμμα επεξεργασίας "AccessPoins", επιλέξτε "Σημείο πρόσβασης WiFi" στη δεξιά προβολή και, στη συνέχεια, κάντε κλικ στο κουμπί "+" στα αριστερά για να προσθέσετε το σημείο πρόσβασης (Εικόνα 2)
5. Στο Object Inspector, ορίστε την τιμή της ιδιότητας "SSID" στο SSID του Wi-Fi Hotspot (Σημείο πρόσβασης) (Εικόνα 4)
6. Εάν το Wi-Fi Hotspot (Σημείο πρόσβασης) απαιτεί κωδικό πρόσβασης, στο Object Inspector, ορίστε τον κωδικό πρόσβασης στην τιμή της ιδιότητας "Κωδικός πρόσβασης" (Εικόνα 4)
7. Κλείστε το παράθυρο διαλόγου "AccessPoints"

Βήμα 5: Στο Visuino: Προσθέστε μια υποδοχή διακομιστή TCP/IP για την επικοινωνία

Στη συνέχεια, πρέπει να προσθέσουμε μια υποδοχή διακομιστή TCP/IP για την επικοινωνία.

1. Στο Object Inspector, κάντε κλικ στο κουμπί "…" δίπλα στην τιμή της υπο -ιδιότητας "Υποδοχές" του WiFi (Εικόνα 1)
2. Στο πρόγραμμα επεξεργασίας υποδοχών επιλέξτε "TCP/IP Server" και, στη συνέχεια, κάντε κλικ στο κουμπί "+" (Εικόνα 2) για να προσθέσετε ένα (Εικόνα 3)
3. Κλείστε το παράθυρο διαλόγου "Υποδοχές"

Βήμα 6: Στο Visuino: Προσθέστε DTH11 και Διαμορφωμένο συστατικό κειμένου με 2 αναλογικά κανάλια

Για να ελέγξουμε και να διαβάσουμε τη θερμοκρασία και την υγρασία από το DHT11, πρέπει να προσθέσουμε συστατικό για αυτό στο Visuino.

Πρέπει επίσης να δημιουργήσουμε την ιστοσελίδα από τα δεδομένα. Η σελίδα είναι απλώς ένα έγγραφο κειμένου HTML, οπότε μπορούμε να χρησιμοποιήσουμε το στοιχείο Μορφοποιημένο κείμενο για να το δημιουργήσουμε.

1. Πληκτρολογήστε "dht" στο πλαίσιο Φίλτρο της Εργαλειοθήκης εξαρτημάτων και, στη συνέχεια, επιλέξτε το στοιχείο "Υγρασία και θερμόμετρο DHT11/21/22/AM2301" (Εικόνα 1) και αφήστε το στην περιοχή σχεδίασης
2. Πληκτρολογήστε "φόρμα" στο πλαίσιο Φίλτρο της Εργαλειοθήκης συστατικών και, στη συνέχεια, επιλέξτε το στοιχείο "Μορφοποιημένο κείμενο" (Εικόνα 2) και αφήστε το στην περιοχή σχεδίασης
3. Κάντε κλικ στο κουμπί "Εργαλεία" του στοιχείου FormattedText1 (Εικόνα 3)
4. Στο πρόγραμμα επεξεργασίας στοιχείων, επιλέξτε το Αναλογικό στοιχείο στα δεξιά και κάντε κλικ 2 φορές στο κουμπί "+" στα αριστερά (Εικόνα 4), για να προσθέσετε 2 από αυτά (Εικόνα 5)
5. Κλείστε τον επεξεργαστή "Elements"

Βήμα 7: Στο Visuino: Ορίστε μορφοποιημένο κείμενο για την απάντηση διακομιστή

Πρέπει να καθορίσουμε το κείμενο HTML που θα δημιουργηθεί όταν ένας πελάτης ιστού συνδεθεί στο διακομιστή.

Θα καθορίσουμε τη σύνδεση που θα κλείσει μετά τα δεδομένα που έστειλα και επίσης θα δώσουμε εντολή στο πρόγραμμα περιήγησης να επανασυνδεθεί (Ανανέωση) μετά από 5 δευτερόλεπτα προσθέτοντας "Ανανέωση: 5" στο έγγραφο. Με αυτόν τον τρόπο η ιστοσελίδα ανανεώνεται κάθε 5 δευτερόλεπτα.

1. Στην περιοχή σχεδίασης, επιλέξτε το στοιχείο FormattedText1 (Εικόνα 1)
2. Στο Object Inspector επιλέξτε την ιδιότητα "Text" και κάντε κλικ στο κουμπί "…" δίπλα στην τιμή της (Εικόνα 1)
3. Στο πρόγραμμα επεξεργασίας "Text" πληκτρολογήστε: "HTTP/1.1 200 OK" "Content-Type: text/html" "Connection: close" "Refresh: 5" "" """"""" Θερμοκρασία: %0 "" Υγρασία: %1 "" "" (Εικόνα 2) Το %0 θα αντικατασταθεί με την τιμή από το AnalogElement1 και το %1 θα αντικατασταθεί με την τιμή από το AnalogElement2
4. Κάντε κλικ στο κουμπί OK για να κλείσετε το παράθυρο διαλόγου

Βήμα 8: Στο Visuino: Συνδέστε το στοιχείο DHT11

1. Συνδέστε τον πείρο εξόδου "Θερμοκρασία" του στοιχείου HumidityThermometer1 με τον πείρο "In" του AnalogElement1 του στοιχείου FormattedText1 (Εικόνα 1)
2. Συνδέστε τον πείρο εξόδου "Υγρασία" του στοιχείου HumidityThermometer1 με τον πείρο "In" του AnalogElement2 του στοιχείου FormattedText1 (Εικόνα 2)
3. Συνδέστε τον πείρο "Αισθητήρας" του στοιχείου HumidityThermometer1 με τον "Digitalηφιακό" ακροδέκτη εισόδου του καναλιού "Digitalηφιακό [2]" του στοιχείου Arduino (Εικόνα 3)

Βήμα 9: Στο Visuino: Προσθήκη και σύνδεση στοιχείου εντοπισμού άκρων

Πρέπει να στέλνουμε το κείμενο HTML κάθε φορά που υπάρχει νέα σύνδεση. Πριν στείλουμε, πρέπει να περιμένουμε λίγο, καθώς τα προγράμματα περιήγησης ιστού πρέπει να στείλουν ένα αίτημα πριν περιμένουν να δουν το αποτέλεσμα. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε το στοιχείο Delay που είναι συνδεδεμένο στο pin "Connected" της υποδοχής διακομιστή TCP/IP.

1. Πληκτρολογήστε "καθυστέρηση" στο πλαίσιο Φίλτρο της Εργαλειοθήκης εξαρτημάτων και, στη συνέχεια, επιλέξτε το στοιχείο "Καθυστέρηση" (Εικόνα 1) και αφήστε το στην περιοχή σχεδίασης
2. Στις ιδιότητες ορίστε την τιμή της ιδιότητας "Interval (uS)" 200000 (Εικόνα 2)
3. Συνδέστε το pin "Connected" του "Modules. WiFi. Sockets. TCPServer1" του στοιχείου "NodeMCU ESP-12", στο pin "In" του στοιχείου Delay1 (Εικόνα 3)
4. Συνδέστε τον πείρο "Out" του στοιχείου Delay1 με τον ακροδέκτη εισόδου "Clock" του στοιχείου FormattedText1 (Εικόνα 4)

Βήμα 10: Στο Visuino: Συνδέστε το στοιχείο μορφοποιημένου κειμένου και προσθέστε και συνδέστε το στοιχείο καθυστέρησης

1. Συνδέστε τον πείρο "Out" του στοιχείου FormattedText1 με τον "In" του "Modules. WiFi. Sockets. TCPServer1" του στοιχείου "NodeMCU ESP-12" (Εικόνα 1)
2. Πληκτρολογήστε "καθυστέρηση" στο πλαίσιο Φίλτρο της Εργαλειοθήκης εξαρτημάτων και, στη συνέχεια, επιλέξτε το στοιχείο "Καθυστέρηση" (Εικόνα 2) και αφήστε το στην περιοχή σχεδίασης
3. Συνδέστε τον πείρο "Out" του στοιχείου FormattedText1 με τον ακροδέκτη "In" του στοιχείου Delay2 (Εικόνα 3)
4. Συνδέστε τον πείρο "Out" του στοιχείου Delay2 με τον πείρο εισόδου "Disconnect" του "Modules. WiFi. Sockets. TCPServer1" του στοιχείου "NodeMCU ESP-12" (Εικόνα 4)

Το στοιχείο Delay θα αποσυνδέσει την πρίζα λίγο μετά την αποστολή του κειμένου.

Βήμα 11: Δημιουργία, μεταγλώττιση και μεταφόρτωση του κώδικα Arduino

1. Στο Visuino, πατήστε F9 ή κάντε κλικ στο κουμπί που εμφανίζεται στην εικόνα 1 για να δημιουργήσετε τον κωδικό Arduino και ανοίξτε το Arduino IDE
2. Συνδέστε τη μονάδα NodeMCU με καλώδιο USB στον υπολογιστή
3. Επιλέξτε τον τύπο του πίνακα και τη σειριακή θύρα όπως σας έχω δείξει σε αυτό το Instructable
4. Στο Arduino IDE, κάντε κλικ στο κουμπί Μεταφόρτωση, για να μεταγλωττίσετε και να ανεβάσετε τον κώδικα (Εικόνα 2)

Βήμα 12: Και παίξτε…

Συγχαρητήρια! Έχετε δημιουργήσει διακομιστή Web θερμοκρασίας και υγρασίας Wi-Fi.

Στην εικόνα 1 και στο βίντεο μπορείτε να δείτε το συνδεδεμένο και ενεργοποιημένο έργο. Χρησιμοποίησα ένα μικρό USB Power Bank για την τροφοδοσία της μονάδας.

Βεβαιωθείτε ότι στο έργο στο Βήμα 4 έχετε εισαγάγει το σωστό SSID και Κωδικό πρόσβασης για το Wi-Fi hotspot

Εάν ανοίξετε ένα πρόγραμμα περιήγησης ιστού στον υπολογιστή ή την κινητή συσκευή σας και πληκτρολογήσετε:

dht11server./

Και πατήστε Enter, θα δείτε τη θερμοκρασία και την υγρασία που μετράται από τη μονάδα. Η ένδειξη θα ανανεώνεται κάθε 5 δευτερόλεπτα, όπως καθορίζεται στο βήμα 7.

Βεβαιωθείτε ότι έχετε προσθέσει την τελεία στο τέλος του ονόματος, διαφορετικά τα Windows δεν θα μπορούν να επιλύσουν το όνομα τομέα

Στην εικόνα 2 μπορείτε να δείτε το πλήρες διάγραμμα Visuino.

Επισυνάπτεται επίσης το έργο Visuino, που δημιούργησα για αυτό το Instructable. Μπορείτε να το κατεβάσετε και να το ανοίξετε στο Visuino: