Kontrollera 7-segmentig LED-display med ESP8266-webbserver: 8 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:45

Mitt projekt har en Nodemcu ESP8266 som styr en 7-segmentskärm via http-servern med html-formulär.

Steg 1: OM DETTA PROJEKT

Det är ett IOT -projekt som utvecklats med hjälp av ESP8266 (NodeMCU) wifi -modul. Motivet för projektet är att skapa en webbserver på modulen som kan vara värd för flera klienter över nätverket. Här behövs grundläggande kunskaper i html och javaScript för att förstå mitt projekt. Några förhandsämnen som jag kommer att diskutera här angående ESP8266 och javaScript är:

1. Ladda upp filer på SPIFFS för ESP8266 för att använda filen mer effektivt i vår arduino -kod.

2. Webblagring med javaScript

SPIFFS

Hittills har vi alltid inkluderat HTML för våra webbsidor som strängbokstavar i vår skiss. Detta gör vår kod väldigt svårläst, och du kommer att ta slut på minnet ganska snabbt.

SPIFFS är ett lätt filsystem för mikrokontroller med ett SPI-flashchip. Det inbyggda flashchipet på ESP8266 har gott om plats för dina webbsidor, särskilt om du har versionen 1 MB, 2 MB eller 4 MB. Du kan förstå hur du lägger till verktyg i din arduino -programvara för att ladda upp filer till SPIFFS genom att följa länken:

I det här projektet har jag 2 html -filer och en javascript -fil. Alla dessa filer laddas upp till SPIFFS separerade från skissen så att ändringen i dessa filer är oberoende av huvudskissen.

Båda html -filerna hämtas av preparFile () enligt nedan:

void preparFile () {

bool ok = SPIFFS.begin (); om (ok) {File f = SPIFFS.open ("/index.html", "r"); Fil f1 = SPIFFS.open ("/index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } annars Serial.println ("Ingen sådan fil hittades."); }

medan javascript -filen läses med loadScript () enligt nedan:

void loadScript (strängväg, strängtyp) {

if (SPIFFS.exists (sökväg)) {Filfil = SPIFFS.open (sökväg, "r"); server.streamFile (fil, typ); }}

LOKAL FÖRVARING FÖR WEBBPLAN

Du kan förstå hur du använder olika objekt och metoder för lokal lagring i HTML5 med hjälp av javascript från följande artikel: https://diveintohtml5.info/storage.html. Jag kommer att diskutera användningen av lokal lagring i mitt projekt i arbetsdelen.

Steg 2: Hårdvara krävs

NodeMCU ESP8266 12E Wifi -modul

Lödlös brödbräda

Bygeltråd

7 segmentvisning (vanlig katod)

1K ohm motstånd

Micro-USB-kabel (för anslutning av NodeMCU till din dator)

Steg 3: Krets och anslutningar

Anslutningarna är verkligen enkla. I kretsschemat ovan är stift på nodemcu anslutna på följande sätt:

En D1

B D2

C D3

D D4

E D6

F D7

G D8

där A, B, C, D, E & F är segmenten i 7Segment Display

. Ignorera DP för 7 -segment Display. Anslut den inte med stift D5 på ESP

Steg 4: ARBETE

Som diskuterats tidigare har vi två html -filer. En av dem är root -html -sidan som anropades när ESP8266 -servern mottog "/" dvs Om URI '/' begärs bör servern svara med en HTTP -statuskod på 200 (Ok) och sedan skicka ett svar med "index". html "-fil.

Den andra html -filen skickas när klienten begär från rotsidan genom att skicka in en ingång på formuläret. Så snart, servern får inmatningen POSTAD från formuläret, jämför den den med fast strängvärde och skickar den andra html -sidan som svar.

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

Eftersom html för 2: a sidan inte är definierad i skissen, så här hänvisar vi till "data1" som redan har läst HTML -koder med SPIFFS.readString ()

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

Här kallas också SevenSeg () med argumentet "0" så att det kan användas för att visa "0" genom att slå på och stänga av olika segment. Här gjorde jag namnet på fuction självförklarande, dvs onA () kommer att slå på A -segmentet med 7 seg -displayen på brödbrädan, på samma sätt avA kommer att stänga av det.

Så, i det här fallet för att visa "0", måste vi byta alla segment utom G (DP ignoreras eftersom det inte är anslutet till någon stift av ESP8266). Så min funktion ser ut så här:

if (num == 0) {onA (); onB (); onC (); onD (); ett(); onF (); offG (); }

Steg 5: HTML & JAVASCRIPT -KOD

Index.html har en duk med 7 segmentvisning i avstängt läge och form nedanför. Det här ser du efter att du öppnat det:

Om vi vill använda vår webbsida utan ESP8266, är det möjligt genom att ändra länken i åtgärdsattributet i ditt formulär. För närvarande är detta länken i aktion:

Här kan du se att länken i aktion är samma ip -adress som tilldelas din nodeMCU efter anslutning till någon wifi (eller hotspot). Formuläretiketten efter justering ser ut så här:

Här använder jag webbläsaren i webbläsaren för att lagra användarens inmatningsvärde så att värdet som anges i index.html lagras i webbläsaren lokalt (som cookie). Det värdet hämtas av index1.html och numret visas på 7 -segmentdisplayen på html -duk. Du kanske förstår denna procedur genom att följa videon:

video_attach

Steg 6: NYCKELNOTER

Detta projekt fungerar med din nodemcu om du tar hand om följande punkter:

1. Länken i åtgärdsattributet för root -html -filen ska vara "https:// (IP på seriell bildskärm eller IP tilldelad din ESP)/skicka".

2. Använd den senaste versionen av webbläsaren som stöder html5 och nya taggar och funktioner.

3. SPIFFS fungerar bara om index.html, index1.html och main.js sätts ihop i datamappen. Du kan klona kodfilen från min github

Steg 7: KOD

Detta är förvarslänken till koden för mitt projekt. Om du arbetar med SPIFFS i ESP8266, kan du förstå varför jag har placerat html- och javascript -filerna i datamappen. Använd det som det.

GitHub Repository Link

Steg 8: Videohandledning

Om det hjälper kan du prenumerera