Upravljanje 7-segmentnim LED zaslonom pomoću ESP8266 web servera: 8 koraka (sa slikama)

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:07

Moj projekat ima Nodemcu ESP8266 koji kontroliše 7-segmentni prikaz preko http servera koristeći html formu.

Korak 1: O OVOM PROJEKTU

Riječ je o IOT projektu razvijenom pomoću WiFi modula ESP8266 (NodeMCU). Motiv projekta je stvaranje web servera na modulu koji može ugostiti više klijenata preko mreže. Ovdje je potrebno osnovno znanje o html -u i javaScript -u za razumijevanje mog projekta. Neke napredne teme o kojima ću ovdje raspravljati vezano za ESP8266 i javaScript su:

1. Otpremanje datoteka na SPIFFS ESP8266 radi efikasnije upotrebe tih datoteka u našem arduino kodu.

2. Web skladište koristeći javaScript

SPIFFS

Do sada smo uvijek uključivali HTML za naše web stranice kao literalne nizove u našu skicu. Zbog toga je naš kôd vrlo težak za čitanje i brzo ćete ostati bez memorije.

SPIFFS lagani datotečni sistem za mikrokontrolere sa SPI flash čipom. Ugrađeni flash čip ESP8266 ima dovoljno prostora za vaše web stranice, posebno ako imate verziju od 1 MB, 2 MB ili 4 MB. Možete razumjeti kako dodati alate u svoj arduino softver za postavljanje datoteka na SPIFFS slijedeći vezu:

U ovom projektu imam 2 html datoteke i javascript datoteku. Sve ove datoteke se učitavaju u SPIFFS odvojeno od skice, tako da je promjena ovih datoteka nezavisna od glavne skice.

Obje html datoteke dohvaća PrepaFile () kao što je prikazano u nastavku:

void PrepareFile () {

bool ok = SPIFFS.begin (); if (ok) {File f = SPIFFS.open ("/index.html", "r"); Datoteka f1 = SPIFFS.open ("/index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } else Serial.println ("Takva datoteka nije pronađena."); }

dok se javascript datoteka čita pomoću loadScript () kao što je prikazano ispod:

void loadScript (Staza niza, Vrsta niza) {

if (SPIFFS.exists (path)) {File file = SPIFFS.open (path, "r"); server.streamFile (datoteka, tip); }}

LOKALNO SKLADIŠTENJE ZA WEB APLIKACIJE

Možete razumjeti kako koristiti različite objekte i metode lokalne pohrane u HTML5 pomoću javascripta iz sljedećeg članka: https://diveintohtml5.info/storage.html. O upotrebi lokalne memorije u svom projektu ću raspravljati u radnom odjeljku.

Korak 2: Potreban hardver

NodeMCU ESP8266 12E Wifi modul

Mašina za lemljenje

Žica za kratkospojnike

7 Segent Display (zajednička katoda)

1K ohm otpornik

Mikro-USB kabl (za povezivanje NodeMCU sa računarom)

Korak 3: Krug i veze

Veze su zaista jednostavne. Na gornjoj shemi kola, pinovi nodemcu -a povezani su na sljedeći način:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

gdje su A, B, C, D, E & F segmenti 7 -segmentnog prikaza

. Zanemarite DP 7 -segmentnog ekrana. Nemojte ga povezivati s pinom D5 ESP -a

Korak 4: RADITE

Kao što je ranije rečeno, imamo dvije html datoteke. Jedna od njih je root html stranica koja se poziva kada je ESP8266 server primio "/" tj. Ako se traži URI '/', server bi trebao odgovoriti sa HTTP statusnim kodom od 200 (U redu), a zatim poslati odgovor s "indeksom". html "datoteku.

Druga html datoteka bit će poslana kada klijent zatraži od korijenske stranice podnošenjem unosa u obrazac. Čim poslužitelj dobije unos POSTED iz obrasca, uspoređuje ga s fiksnom vrijednošću niza i šalje drugu html stranicu kao odgovor.

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

Budući da html za 2. stranicu nije definiran na skici, ovdje se pozivamo na "data1" koji je već pročitao html kodove pomoću SPIFFS.readString ()

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

Ovdje se sedamSeg () također poziva s argumentom "0" tako da se može koristiti za prikaz "0" uključivanjem i isključivanjem različitih segmenata. Ovdje sam napravio naziv funkcije sam po sebi razumljiv, tj. OnA () će uključiti A segment od 7 segmenta prikaza na matičnoj ploči, na sličan način offA će ga isključiti.

Dakle, u ovom slučaju za prikaz "0" moramo promijeniti sve segmente osim G (DP se zanemaruje jer nije spojen na bilo koji pin ESP8266). Dakle, moja funkcija izgleda ovako:

if (broj == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

Korak 5: HTML & JAVASCRIPT KOD

Indeks.html ima platno sa prikazom od 7 segmenata u isključenom načinu i ispod njega. Evo šta vidite nakon otvaranja:

Ako želimo koristiti našu web stranicu bez ESP8266, to će biti moguće promjenom veze u atributu radnje vašeg obrasca. Trenutačno je ovo veza u akciji:

Ovdje možete vidjeti da je aktivna veza ista ip adresa koja je dodijeljena vašem nodeMCU nakon povezivanja na bilo koju wifi (ili hotspot). Oznaka obrasca nakon prilagođavanja izgleda ovako:

Ovdje koristim web stroge preglednika za spremanje ulazne vrijednosti korisnika tako da se vrijednost upisana u index.html pohranjuje u pregledniku lokalno (poput kolačića). Tu vrijednost dohvaća index1.html, a broj se prikazuje na 7 -segmentnom ekranu na html platnu. Ovu proceduru možete razumjeti slijedeći video:

video_attach

Korak 6: KLJUČNE NAPOMENE

Ovaj će projekt funkcionirati s vašim nodemcu -om ako vodite računa o sljedećim točkama:

1. Veza u atributu radnje root html datoteke trebala bi biti "https:// (IP na serijskom monitoru ili IP dodijeljen vašem ESP -u)/submit".

2. Koristite najnoviju verziju preglednika koji podržava html5 i nove oznake i funkcije.

3. SPIFFS će raditi samo ako su vaši index.html, index1.html i main.js stavljeni zajedno u fasciklu sa podacima. Možete klonirati datoteku koda sa mog github -a

Korak 7: KOD

Ovo je spremište koda mog projekta. Ako radite sa SPIFFS -om u ESP8266, možete razumjeti zašto sam stavio html i javascript datoteke u folder podataka. Koristite to kako je to.

Link za spremište GitHub -a

Korak 8: Video vodič

Ako pomaže, pretplatite se