Beheer van 7-segment LED-skerm met behulp van ESP8266-webbediener: 8 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:26

My projek het 'n Nodemcu ESP8266 wat 'n 7-segment-skerm deur die http-bediener beheer met behulp van html-vorm.

Stap 1: OOR HIERDIE PROJEK

Dit is 'n IOT -projek wat ontwikkel is met behulp van die ESP8266 (NodeMCU) wifi -module. Die motief van die projek is om 'n webbediener op die module te skep wat verskeie kliënte oor die netwerk kan huisves. Hier is basiese kennis van html en javaScript nodig om my projek te verstaan. Enkele vooraf onderwerp wat ek hier sal bespreek rakende ESP8266 en javaScript is:

1. Laai lêers op na die SPIFFS van die ESP8266 om die lêer doeltreffender in ons arduino -kode te gebruik.

2. Webberging met javaScript

SPIFFS

Tot dusver het ons altyd die HTML vir ons webblaaie as string letterlik in ons skets opgeneem. Dit maak ons kode baie moeilik om te lees, en u sal vinnig geheue opraak.

SPIFFS 'n ligte lêerstelsel vir mikrobeheerders met 'n SPI-flitsskyfie. Die ingeboude flitsskyfie van die ESP8266 het baie ruimte vir u webblaaie, veral as u die weergawe van 1 MB, 2 MB of 4 MB het. U kan verstaan hoe u gereedskap in u arduino -sagteware kan byvoeg om lêers na SPIFFS op te laai, deur die volgende skakel:

In hierdie projek het ek 2 html -lêers en 'n javascript -lêer. Al hierdie lêers word na die SPIFFS gelaai, geskei van die skets, sodat die verandering in hierdie lêers onafhanklik is van die hoofskets.

Beide die html -lêers word deur preparFile () opgetel soos hieronder getoon:

leegmaak preparFile () {

bool ok = SPIFFS.begin (); as (ok) {File f = SPIFFS.open ("/index.html", "r"); Lêer f1 = SPIFFS.open ("/index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } anders Serial.println ("Geen so 'n lêer gevind nie."); }

terwyl die javascript -lêer gelees word met behulp van die loadScript () soos hieronder getoon:

void loadScript (string pad, string string) {

as (SPIFFS.exists (pad)) {File file = SPIFFS.open (pad, "r"); server.streamFile (lêer, tipe); }}

PLAASLIKE SToor vir webtoepassings

U kan verstaan hoe u verskillende voorwerpe en metodes vir plaaslike berging in HTML5 kan gebruik met behulp van javascript uit die volgende artikel: https://diveintohtml5.info/storage.html. Ek sal in die werksafdeling die gebruik van plaaslike berging in my projek bespreek.

Stap 2: hardeware benodig

NodeMCU ESP8266 12E Wifi -module

Soldeerlose broodbord

Springdraad

7 segment vertoning (algemene katode)

1K ohm weerstand

Mikro-USB-kabel (vir die verbinding van NodeMCU met u rekenaar)

Stap 3: Kring en verbindings

Die verbindings is regtig maklik. In die bogenoemde stroomdiagram word penne van nodemcu op die volgende manier verbind:

'N D1

B D2

C D3

D D4

E D6

F D7

G D8

waar A, B, C, D, E & F die segmente van 7Segment Display is

. Ignoreer die DP van die 7 -segment -skerm. Moenie dit verbind met die pen D5 van ESP nie

Stap 4: WERK

Soos vroeër bespreek, het ons twee html -lêers. Een daarvan is die root html -bladsy wat genoem word toe ESP8266 -bediener "/" ontvang het, dws as die URI '/' versoek word, moet die bediener antwoord met 'n HTTP -statuskode van 200 (Ok) en dan 'n antwoord stuur met die "indeks". html "lêer.

Die tweede html -lêer sal gestuur word wanneer die kliënt van die hoofblad af versoek deur 'n invoer op die vorm in te dien. Sodra die bediener die invoer van die vorm af geplaas het, vergelyk dit dit met die vaste stringwaarde en stuur die tweede html -bladsy as antwoord.

as (server.arg ("nam") == "0") {server.send (200, "text/html", data1); sewe Seg (0); }

Aangesien die html vir die 2de bladsy nie in die skets gedefinieer is nie, verwys ons hier na 'data1' wat reeds die html -kodes gelees het met behulp van SPIFFS.readString ()

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

Hier word sevenSeg () ook genoem met 'n argument "0" sodat dit gebruik kan word om "0" te vertoon deur verskillende segmente AAN en UIT te skakel. Hier het ek die naam van fuction selfverduidelikend gemaak, naamlik dat onA () die A -segment van 7 seg -skerm op broodbord sal aanskakel, net so sal A uitskakel.

Dus, in hierdie geval, om '0' te vertoon, moet ons alle segmente behalwe G verander (DP word geïgnoreer, aangesien dit nie aan enige pen van ESP8266 gekoppel is nie). My funksie lyk dus soos volg:

as (num == 0) {onA (); onB (); onC (); onD (); onE (); onF (); afG (); }

Stap 5: HTML & JAVASCRIPT KODE

Die index.html het 'n doek met 7 segment vertoon in af modus en vorm daaronder. Dit is wat u sien nadat u dit oopgemaak het:

As ons ons webblad sonder ESP8266 wil gebruik, is dit moontlik deur die skakel in die aksie -kenmerk van u vorm te verander. Tans is dit die skakel in aksie:

Hier kan u sien dat die skakel in werking dieselfde IP -adres is wat aan u nodeMCU toegeken word nadat u met enige wifi (of hotspot) verbind is. Die vormplaatjie na aanpassing lyk soos volg:

Hier gebruik ek die webblaaier van die blaaier om die invoerwaarde van die gebruiker te stoor sodat die waarde wat in index.html ingevoer is, plaaslik in die blaaier gestoor word (soos koekie). Die waarde word deur die index1.html gehaal en die getal word op die 7 -segment -skerm op html -doek vertoon. U kan hierdie prosedure verstaan deur die volgende video te volg:

video_aanheg

Stap 6: SLEUTELNOTAS

Hierdie projek werk saam met u nodemcu as u na die volgende punte kyk:

1. Die skakel in die aksiekenmerk van die root -html -lêer moet "https:// (IP op seriële monitor of IP toegeken aan u ESP)/submit" wees.

2. Gebruik die nuutste weergawe van die blaaier wat html5 en nuwe etikette en funksies ondersteun.

3. SPIFFS werk slegs as u index.html, index1.html en main.js in die datavouer saamgestel is. U kan die kode -lêer vanaf my github kloon

Stap 7: KODE

Dit is die bewaarplekskakel van die kode van my projek. As u met SPIFFS in ESP8266 werk, kan u verstaan waarom ek die html- en javascript -lêers in die data -lêergids geplaas het. Gebruik dit as dit.

GitHub -bewaarplekskakel

Stap 8: Video -tutoriaal

As dit help, teken asseblief in