7-segmenten LED-display bedienen met behulp van ESP8266 webserver - Ajarnpa

2025 Auteur: John Day | [email protected]. Laatst gewijzigd: 2025-01-23 15:01

Mijn project heeft een Nodemcu ESP8266 die een 7-segments display bestuurt via de http-server met behulp van html-formulier.

Stap 1: OVER DIT PROJECT

Het is een IOT-project ontwikkeld met behulp van ESP8266 (NodeMCU) wifi-module. Het motief van het project is om een webserver op de module te creëren die meerdere clients via het netwerk kan hosten. Hier is basiskennis van html en javascript nodig om mijn project te begrijpen. Een aantal geavanceerde onderwerpen die ik hier zal bespreken met betrekking tot ESP8266 en javaScript zijn:

1. Bestanden uploaden naar de SPIFFS van de ESP8266 om die bestanden efficiënter te gebruiken in onze arduino-code.

2. Webopslag met javaScript

SPIFFS

Tot nu toe hebben we de HTML voor onze webpagina's altijd als letterlijke tekenreeksen in onze schets opgenomen. Dit maakt onze code erg moeilijk te lezen en je hebt vrij snel geen geheugen meer.

SPIFFS een lichtgewicht bestandssysteem voor microcontrollers met een SPI-flashchip. De on-board flashchip van de ESP8266 biedt voldoende ruimte voor je webpagina's, zeker als je de 1MB, 2MB of 4MB versie hebt. U kunt begrijpen hoe u tools in uw Arduino-software kunt toevoegen voor het uploaden van bestanden naar SPIFFS door de volgende link te volgen:

In dit project heb ik 2 html-bestanden en een javascript-bestand. Al deze bestanden worden gescheiden van de schets naar de SPIFFS geüpload, zodat de wijziging in deze bestanden onafhankelijk is van de hoofdschets.

Beide html-bestanden worden opgehaald door prepareFile() zoals hieronder weergegeven:

void prepareFile(){

bool ok = SPIFFS.begin(); if (ok) { Bestand f = SPIFFS.open("/index.html", "r"); Bestand f1=SPIFFS.open("/index1.html", "r"); gegevens = f.readString(); data1=f1.readString(); f.sluiten(); f1.sluiten(); } else Serial.println("Zo'n bestand is niet gevonden."); }

terwijl het javascript-bestand wordt gelezen met de loadScript() zoals hieronder getoond:

void loadScript (tekenreekspad, tekenreekstype){

if(SPIFFS.exists(pad)){ Bestandsbestand=SPIFFS.open(pad, "r"); server.streamFile(bestand, type); } }

LOKALE OPSLAG VOOR WEB-TOEPASSINGEN

U kunt in het volgende artikel begrijpen hoe u verschillende objecten en methoden voor lokale opslag in HTML5 kunt gebruiken met behulp van javascript: https://diveintohtml5.info/storage.html. Ik zal het gebruik van lokale opslag in mijn project bespreken in de werksectie.

Stap 2: Hardware vereist

NodeMCU ESP8266 12E Wifi-module

Soldeerloze breadboard

Doorverbindingsdraad

7 Segent-display (gemeenschappelijke kathode)

1K ohm weerstand

Micro-USB-kabel (om NodeMCU met uw computer te verbinden)

Stap 3: Circuit en verbindingen

De verbindingen zijn heel eenvoudig. In het bovenstaande schakelschema zijn de pinnen van nodemcu op de volgende manier aangesloten:

Een D1

B D2

C D3

D D4

E D6

F D7

G D8

waarbij A, B, C, D, E & F de segmenten zijn van 7Segment Display

. Negeer de DP van 7 segment Display. Sluit het niet aan op pin D5 van ESP

Stap 4: WERKEN

Zoals eerder besproken, hebben we twee html-bestanden. Een daarvan is de root-html-pagina die wordt aangeroepen toen de ESP8266-server "/" ontving, dwz als de URI '/' wordt gevraagd, moet de server antwoorden met een HTTP-statuscode van 200 (Ok) en vervolgens een antwoord verzenden met de "index. html" bestand.

Het tweede html-bestand wordt verzonden wanneer de klant dit opvraagt vanaf de hoofdpagina door een invoer op het formulier in te dienen. Zodra de server de invoer GEPLAATST van het formulier krijgt, vergelijkt deze deze met de vaste tekenreekswaarde en stuurt de tweede html-pagina als reactie.

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

Omdat de html voor de 2e pagina niet is gedefinieerd in de schets, verwijzen we hier naar "data1" die de html-codes al heeft gelezen met SPIFFS.readString()

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

Hier wordt sevenSeg() ook aangeroepen met een argument "0", zodat het kan worden gebruikt om "0" weer te geven door verschillende segmenten AAN en UIT te schakelen. Hier heb ik de naam van de functie voor zichzelf gemaakt, d.w.z. onA() zal het A-segment van 7 seg-display op breadboard inschakelen, op dezelfde manier zal offA het uitschakelen.

Dus, in dit geval, om "0" weer te geven, moeten we alle segmenten omschakelen behalve G (DP wordt genegeerd omdat het niet verbonden is met een pin van ESP8266). Dus mijn functie ziet er als volgt uit:

if(getal==0){ opA(); opB(); opC(); opD(); een(); opF(); uitG(); }

Stap 5: HTML & JAVASCRIPT-CODE

De index.html heeft een canvas met een weergave van 7 segmenten in de uit-modus en eronder. Dit is wat je ziet nadat je het hebt geopend:

Als we onze webpagina willen gebruiken zonder ESP8266, kan dat door de link in het actieattribuut van uw formulier te wijzigen. Momenteel is dit de link in actie:

Hier kunt u zien dat de link in actie hetzelfde ip-adres is dat aan uw nodeMCU is toegewezen nadat u verbinding hebt gemaakt met een wifi (of hotspot). De formuliertag ziet er na aanpassing als volgt uit:

Hier gebruik ik web stroge van de browser om de invoerwaarde van de gebruiker op te slaan, zodat de waarde die is ingevoerd in index.html lokaal in de browser wordt opgeslagen (zoals een cookie). Die waarde wordt opgehaald door de index1.html en het nummer wordt weergegeven op het 7-segments display op html-canvas. U kunt deze procedure misschien begrijpen door de video te volgen:

video_attach

Stap 6: BELANGRIJKSTE OPMERKINGEN

Dit project werkt met uw nodemcu als u voor de volgende punten zorgt:

1. De link in het actiekenmerk van het root-html-bestand moet "https://(IP op seriële monitor of IP toegewezen aan uw ESP)/submit" zijn.

2. Gebruik de nieuwste versie van de browser die html5 ondersteunt en nieuwe tags en functionaliteit.

3. SPIFFS werkt alleen als uw index.html, index1.html en main.js samen in de gegevensmap staan. Je kunt het codebestand van mijn github klonen

Stap 7: CODE

Dit is de repository-link van de code van mijn project. Als je met SPIFFS in ESP8266 werkt, begrijp je waarom ik de html- en javascript-bestanden in de gegevensmap heb geplaatst. Gebruik dat als zodanig.

GitHub-opslagplaatskoppeling

Stap 8: Video-tutorial

Als het helpt, abonneer je dan