Έλεγχος οθόνης LED 7 τμημάτων με χρήση διακομιστή Web ESP8266: 8 βήματα (με εικόνες)

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

Το έργο μου διαθέτει ένα Nodemcu ESP8266 το οποίο ελέγχει μια οθόνη 7 τμημάτων μέσω του διακομιστή http χρησιμοποιώντας τη μορφή html.

Βήμα 1: ΣΧΕΤΙΚΑ ΜΕ ΑΥΤΟ ΤΟ ΕΡΓΟ

Είναι ένα έργο IOT που αναπτύχθηκε χρησιμοποιώντας μονάδα wifi ESP8266 (NodeMCU). Το κίνητρο του έργου είναι η δημιουργία ενός διακομιστή ιστού στη μονάδα που μπορεί να φιλοξενήσει πολλούς πελάτες μέσω του δικτύου. Εδώ, απαιτούνται βασικές γνώσεις html και javaScript για να κατανοήσω το έργο μου. Μερικά εκ των προτέρων θέματα που θα συζητήσω εδώ σχετικά με το ESP8266 και το javaScript είναι:

1. Μεταφόρτωση αρχείων στο SPIFFS του ESP8266 για αποδοτικότερη χρήση αυτών των αρχείων στον κώδικα arduino.

2. Αποθήκευση Ιστού χρησιμοποιώντας javaScript

SPIFFS

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

SPIFFS ένα ελαφρύ σύστημα αρχείων για μικροελεγκτές με τσιπ flash SPI. Το ενσωματωμένο τσιπ flash του ESP8266 έχει άφθονο χώρο για τις ιστοσελίδες σας, ειδικά αν έχετε την έκδοση 1MB, 2MB ή 4MB. Μπορείτε να καταλάβετε πώς μπορείτε να προσθέσετε εργαλεία στο λογισμικό arduino για τη μεταφόρτωση αρχείων στο SPIFFS ακολουθώντας τον παρακάτω σύνδεσμο:

Σε αυτό το έργο, έχω 2 αρχεία html και ένα αρχείο javascript. Όλα αυτά τα αρχεία μεταφορτώνονται στο SPIFFS χωριστά από το σκίτσο, έτσι ώστε η αλλαγή σε αυτά τα αρχεία να είναι ανεξάρτητη από το κύριο σκίτσο.

Και τα δύο αρχεία html ανακτώνται από το prepaFile () όπως φαίνεται παρακάτω:

void PrepaFile () {

bool ok = SPIFFS.begin (); if (ok) {Αρχείο f = SPIFFS.open ("/index.html", "r"); Αρχείο f1 = SPIFFS.open ("/index1.html", "r"); δεδομένα = f.readString (); data1 = f1.readString (); στ. κλείσιμο (); f1.κλείστε (); } else Serial.println ("Δεν βρέθηκε τέτοιο αρχείο."); }

ενώ το αρχείο javascript διαβάζεται χρησιμοποιώντας το loadScript () όπως φαίνεται παρακάτω:

void loadScript (διαδρομή συμβολοσειράς, τύπος συμβολοσειράς) {

if (SPIFFS.exists (path)) {File file = SPIFFS.open (path, "r"); server.streamFile (αρχείο, τύπος); }}

ΤΟΠΙΚΗ ΑΠΟΘΗΚΕΥΣΗ ΓΙΑ ΕΦΑΡΜΟΓΕΣ ΔΙΑΔΙΚΤΥΟΥ

Μπορείτε να καταλάβετε πώς να χρησιμοποιείτε διαφορετικά αντικείμενα και μεθόδους τοπικής αποθήκευσης σε HTML5 χρησιμοποιώντας javascript από το ακόλουθο άρθρο: https://diveintohtml5.info/storage.html. Θα συζητήσω τη χρήση της τοπικής αποθήκευσης στο έργο μου στην ενότητα εργασίας.

Βήμα 2: Απαιτείται υλικό

Μονάδα NodeMCU ESP8266 12E Wifi

Χαρτόνι χωρίς κόλλα

Σύρμα βραχυκυκλωτήρα

7 Segent Display (Common Cathode)

Αντίσταση 1K ohm

Καλώδιο Micro-USB (για σύνδεση NodeMCU με τον υπολογιστή σας)

Βήμα 3: Κύκλωμα & συνδέσεις

Οι συνδέσεις είναι πραγματικά εύκολες. Στο παραπάνω διάγραμμα κυκλώματος, οι ακίδες του nodemcu συνδέονται με τον ακόλουθο τρόπο:

Α Δ1

Β Δ2

C D3

D D4

Ε Δ6

F D7

G D8

όπου A, B, C, D, E & F είναι τα τμήματα της οθόνης 7Segment

Το Αγνοήστε το DP της οθόνης 7 τμημάτων. Μην το συνδέσετε με τον πείρο D5 του ESP

Βήμα 4: ΕΡΓΑΣΙΑ

Όπως συζητήθηκε προηγουμένως, έχουμε δύο αρχεία html. Μία από τις οποίες είναι η ριζική σελίδα html που ονομάζεται όταν ο διακομιστής ESP8266 έλαβε "/" δηλ. Εάν ζητηθεί το URI '/', ο διακομιστής θα πρέπει να απαντήσει με έναν κωδικό κατάστασης HTTP 200 (Ok) και στη συνέχεια να στείλει μια απάντηση με το "ευρετήριο". html "αρχείο.

Το δεύτερο αρχείο html θα σταλεί όταν ο πελάτης ζητήσει από τη ριζική σελίδα υποβάλλοντας μια είσοδο στη φόρμα. Μόλις ο διακομιστής λάβει την είσοδο POSTED από τη φόρμα, τη συγκρίνει με τη σταθερή τιμή συμβολοσειράς και στέλνει τη δεύτερη σελίδα html σε απάντηση.

if (server.arg ("nam") == "0") {server.send (200, "text/html", data1); επτάSeg (0); }

Δεδομένου ότι το html για τη 2η σελίδα δεν ορίζεται στο σκίτσο, γι 'αυτό εδώ αναφερόμαστε στο "data1" που έχει ήδη διαβαστεί οι κώδικες html χρησιμοποιώντας το SPIFFS.readString ()

Αρχείο f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

Εδώ το heftSeg () καλείται επίσης με ένα όρισμα "0", έτσι ώστε να μπορεί να χρησιμοποιηθεί για την εμφάνιση του "0" με εναλλαγή και απενεργοποίηση διαφορετικών τμημάτων. Εδώ, έκανα το όνομα του fuction αυτονόητο δηλ. Το onA () θα ενεργοποιήσει το τμήμα Α της οθόνης 7 seg στο breadboard, ομοίως εκτόςA θα το απενεργοποιήσει.

Έτσι, σε αυτήν την περίπτωση για να εμφανιστεί το "0", πρέπει να αλλάξουμε όλα τα τμήματα εκτός από το G (το DP αγνοείται καθώς δεν είναι συνδεδεμένο σε κανένα pin του ESP8266). Έτσι η λειτουργία μου μοιάζει με:

εάν (num == 0) {onA (); onB (); onC (); onD (); ένας(); onF (); offG (); }

Βήμα 5: ΚΩΔΙΚΟΣ HTML & JAVASCRIPT

Το index.html έχει έναν καμβά με επίδειξη 7 τμημάτων σε κατάσταση απενεργοποίησης και μορφή κάτω από αυτό. Αυτό βλέπετε μετά το άνοιγμα:

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

Εδώ μπορείτε να δείτε ότι ο σύνδεσμος σε δράση είναι η ίδια διεύθυνση IP που παραχωρείται στο nodeMCU μετά τη σύνδεση σε οποιοδήποτε wifi (ή hotspot). Η ετικέτα φόρμας μετά την προσαρμογή μοιάζει με:

Εδώ, χρησιμοποιώ το web stroge του προγράμματος περιήγησης για να αποθηκεύσω την τιμή εισόδου του χρήστη έτσι ώστε η τιμή που έχει εισαχθεί στο index.html να αποθηκεύεται στο πρόγραμμα περιήγησης τοπικά (όπως cookie). Αυτή η τιμή μεταφέρεται από το index1.html και ο αριθμός εμφανίζεται στην οθόνη των 7 τμημάτων σε καμβά html. Mightσως κατανοήσετε αυτήν τη διαδικασία ακολουθώντας το βίντεο:

video_attach

Βήμα 6: Βασικές σημειώσεις

Αυτό το έργο θα συνεργαστεί με το nodemcu εάν φροντίσετε τα ακόλουθα σημεία:

1. Ο σύνδεσμος στο χαρακτηριστικό ενέργειας του ριζικού αρχείου html θα πρέπει να είναι "https:// (IP σε σειριακή οθόνη ή IP που έχει παραχωρηθεί στο ESP σας)/υποβολή".

2. Χρησιμοποιήστε την τελευταία έκδοση του προγράμματος περιήγησης που υποστηρίζει html5 και νέες ετικέτες και λειτουργίες.

3. Το SPIFFS θα λειτουργήσει μόνο εάν τα index.html, index1.html και main.js συγκεντρωθούν στο φάκελο δεδομένων. Μπορείτε να κλωνοποιήσετε το αρχείο κώδικα από το github μου

Βήμα 7: ΚΩΔ

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

Σύνδεσμος αποθετηρίου GitHub

Βήμα 8: Εκπαιδευτικό βίντεο

Αν Βοηθάει, Εγγραφείτε