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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:35

Moj projekt ima Nodemcu ESP8266 koji kontrolira 7-segmentni prikaz putem http poslužitelja koristeći html obrazac.

Korak 1: O OVOM PROJEKTU

To je IOT projekt razvijen pomoću WiFi modula ESP8266 (NodeMCU). Motiv projekta je stvaranje web poslužitelja 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 u vezi s ESP8266 i javaScript -om su:

1. Prijenos datoteka na SPIFFS ESP8266 za učinkovitiju upotrebu tih datoteka u našem arduino kodu.

2. Web pohrana pomoću javaScript -a

SPIFFS

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

SPIFFS lagani datotečni sustav 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 prijenos datoteka na SPIFFS slijedeći vezu:

U ovom projektu imam 2 html datoteke i javascript datoteku. Sve se te datoteke učitavaju u SPIFFS odvojeno od skice, tako da je promjena u tim datotekama neovisna o glavnoj skici.

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 u nastavku:

void loadScript (Staza niza, Vrsta niza) {

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

LOKALNO SKLADIŠTENJE ZA WEB PRIJAVE

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 korištenju lokalne pohrane raspravljat ću u svom projektu u radnom odjeljku.

Korak 2: Potreban hardver

NodeMCU ESP8266 12E Wifi modul

Mašina za lemljenje

Žica kratkospojnika

7 Segent Display (zajednička katoda)

1K ohmski otpornik

Mikro-USB kabel (za povezivanje NodeMCU-a s računalom)

Korak 3: Krug i veze

Veze su zaista jednostavne. Na gornjoj shemi spojeva, pinovi nodemcua 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 7Segmentnog zaslona

. Zanemarite DP 7 -segmentnog zaslona. Nemojte ga spajati s pinom D5 ESP -a

Korak 4: RAD

Kao što je ranije rečeno, imamo dvije html datoteke. Jedna od njih je korijenska html stranica koja se poziva kada je ESP8266 poslužitelj primio "/" tj. Ako se traži URI '/', poslužitelj bi trebao odgovoriti s 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 slanjem 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 fukcije sam po sebi razumljiv, tj. OnA () će uključiti A segment od 7 segmenta prikaza na ploči, slično će ga isključiti i A.

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 (); jedan(); onF (); offG (); }

Korak 5: HTML & JAVASCRIPT KOD

Indeks.html ima platno sa 7 segmentnog prikaza u isključenom načinu i ispod njega. Evo što 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 na djelu:

Ovdje možete vidjeti da je aktivna veza ista ip adresa koja je dodijeljena vašem nodeMCU nakon povezivanja na bilo koji wifi (ili hotspot). Oznaka obrasca nakon prilagodbe 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 zaslonu na html platnu. Ovaj postupak možete razumjeti slijedeći video:

video_attach

Korak 6: KLJUČNE BILJEŠKE

Ovaj će projekt funkcionirati s vašim nodemcuom 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. Upotrijebite 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 mapu s podacima. Možete klonirati datoteku koda s 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 podatkovnu mapu. Koristite to tako.

Veza na spremište GitHub

Korak 8: Video vodič

Ako pomaže, pretplatite se