Steuern der 7-Segment-LED-Anzeige mit dem ESP8266-Webserver - Gunook

2025 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2025-01-23 12:52

Mein Projekt hat einen Nodemcu ESP8266, der eine 7-Segment-Anzeige über den http-Server mit HTML-Form steuert.

Schritt 1: ÜBER DIESES PROJEKT

Es ist ein IOT-Projekt, das mit dem WLAN-Modul ESP8266 (NodeMCU) entwickelt wurde. Das Motiv des Projekts besteht darin, einen Webserver auf dem Modul zu erstellen, der mehrere Clients über das Netzwerk hosten kann. Hier sind Grundkenntnisse in HTML und Javascript erforderlich, um mein Projekt zu verstehen. Einige fortgeschrittene Themen, die ich hier in Bezug auf ESP8266 und Javascript besprechen werde, sind:

1. Hochladen von Dateien auf die SPIFFS des ESP8266, um diese Dateien in unserem Arduino-Code effizienter zu verwenden.

2. Webspeicherung mit Javascript

SPIFFS

Bisher haben wir den HTML-Code für unsere Webseiten immer als String-Literale in unseren Sketch eingebunden. Dadurch ist unser Code sehr schwer zu lesen, und Ihnen wird der Speicher ziemlich schnell ausgehen.

SPIFFS ein leichtes Dateisystem für Mikrocontroller mit einem SPI-Flash-Chip. Der On-Board-Flash-Chip des ESP8266 bietet viel Platz für Ihre Webseiten, insbesondere wenn Sie die 1MB-, 2MB- oder 4MB-Version haben. Unter folgendem Link erfahren Sie, wie Sie Ihrer Arduino-Software Tools zum Hochladen von Dateien auf SPIFFS hinzufügen:

In diesem Projekt habe ich 2 HTML-Dateien und eine Javascript-Datei. Alle diese Dateien werden getrennt von der Skizze in die SPIFFS hochgeladen, so dass die Änderung in diesen Dateien unabhängig von der Hauptskizze ist.

Beide HTML-Dateien werden von PrepareFile() wie unten gezeigt abgerufen:

void PrepareFile(){

bool ok = SPIFFS.begin(); if (ok) { Datei f = SPIFFS.open("/index.html", "r"); Datei f1=SPIFFS.open("/index1.html", "r"); Daten = f.readString(); data1=f1.readString(); f.schließen(); f1.close(); } else Serial.println ("Keine solche Datei gefunden."); }

während die Javascript-Datei mit loadScript() wie unten gezeigt gelesen wird:

void loadScript(String-Pfad, String-Typ){

if(SPIFFS.exists(path)){ Datei file=SPIFFS.open(path, "r"); server.streamFile(Datei, Typ); } }

LOKALER SPEICHER FÜR WEBANWENDUNGEN

Im folgenden Artikel erfahren Sie, wie Sie verschiedene Objekte und Methoden der lokalen Speicherung in HTML5 mithilfe von Javascript verwenden: https://diveintohtml5.info/storage.html. Ich werde die Verwendung von lokalem Speicher in meinem Projekt im Arbeitsabschnitt diskutieren.

Schritt 2: Hardware erforderlich

NodeMCU ESP8266 12E Wifi-Modul

Lötfreies Steckbrett

Überbrückungskabel

7-Segment-Anzeige (gemeinsame Kathode)

1K Ohm Widerstand

Micro-USB-Kabel (zum Verbinden von NodeMCU mit Ihrem Computer)

Schritt 3: Schaltung & Anschlüsse

Die Verbindungen sind wirklich einfach. Im obigen Schaltplan sind die Pins von Nodemcu wie folgt verbunden:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

wobei A, B, C, D, E & F die Segmente der 7-Segment-Anzeige sind

. Ignorieren Sie den DP der 7-Segment-Anzeige. Verbinden Sie es nicht mit dem Pin D5 von ESP

Schritt 4: ARBEITEN

Wie bereits erwähnt, haben wir zwei HTML-Dateien. Eine davon ist die Root-HTML-Seite, die aufgerufen wird, wenn der ESP8266-Server "/" empfangen hat. html"-Datei.

Die zweite HTML-Datei wird gesendet, wenn der Client von der Stammseite aus eine Eingabe im Formular absendet. Sobald der Server die Eingabe POSTED aus dem Formular erhält, vergleicht er sie mit einem festen String-Wert und sendet als Antwort die zweite HTML-Seite.

if(server.arg("nam") == "0") { server.send(200, "text/html", data1); siebenSeg(0); }

Da das HTML für die 2. Seite nicht in der Skizze definiert ist, verweisen wir hier auf "data1", das bereits die HTML-Codes mit SPIFFS.readString() gelesen hat.

Datei f1=SPIFFS.open("/index1.html", "r");data1=f1.readString();

Auch hier wird sevenSeg() mit einem Argument „0“aufgerufen, um durch Ein- und Ausschalten verschiedener Segmente „0“anzuzeigen. Hier habe ich den Namen der Funktion selbsterklärend gemacht, dh onA () schaltet das A-Segment der 7-seg-Anzeige auf dem Steckbrett ein, ähnlich schaltet offA es aus.

Um in diesem Fall "0" anzuzeigen, müssen wir alle Segmente außer G umschalten (DP wird ignoriert, da es nicht mit einem Pin von ESP8266 verbunden ist). Meine Funktion sieht also so aus:

if(num==0){ onA(); onB(); onC(); onD(); einer(); onF(); ausG(); }

Schritt 5: HTML & JAVASCRIPT-CODE

Die index.html hat eine Leinwand mit einer 7-Segment-Anzeige im ausgeschalteten Modus und einem darunter liegenden Formular. Das sehen Sie nach dem Öffnen:

Wenn wir unsere Webseite ohne ESP8266 verwenden möchten, ist dies durch Ändern des Links im Aktionsattribut Ihres Formulars möglich. Derzeit ist dies der Link in Aktion:

Hier können Sie sehen, dass der Link in Aktion dieselbe IP-Adresse ist, die Ihrer nodeMCU zugewiesen ist, nachdem Sie eine Verbindung zu einem WLAN (oder Hotspot) hergestellt haben. Das Formular-Tag nach der Anpassung sieht so aus:

Hier verwende ich Webstroge des Browsers, um den Eingabewert des Benutzers so zu speichern, dass der in index.html eingegebene Wert lokal im Browser gespeichert wird (wie ein Cookie). Dieser Wert wird von index1.html abgerufen und die Zahl wird auf der 7-Segment-Anzeige im HTML-Canvas angezeigt. Sie können dieses Verfahren anhand des folgenden Videos verstehen:

video_attach

Schritt 6: WICHTIGE HINWEISE

Dieses Projekt funktioniert mit Ihrem nodemcu, wenn Sie folgende Punkte beachten:

1. Der Link im Aktionsattribut der Root-HTML-Datei sollte "https://(IP auf dem seriellen Monitor oder Ihrem ESP zugewiesene IP)/submit" lauten.

2. Verwenden Sie die neueste Browserversion, die HTML5 und neue Tags und Funktionen unterstützt.

3. SPIFFS funktioniert nur, wenn Ihre index.html, index1.html und main.js im Datenordner zusammengefasst sind. Sie können die Codedatei von meinem Github klonen

Schritt 7: CODE

Dies ist der Repository-Link des Codes meines Projekts. Wenn Sie mit SPIFFS in ESP8266 arbeiten, können Sie verstehen, warum ich die HTML- und Javascript-Dateien im Datenordner abgelegt habe. Verwenden Sie das wie es ist.

GitHub-Repository-Link

Schritt 8: Video-Tutorial

Wenn es hilft, bitte abonnieren