Kontrolli i ekranit LED me 7 segmente duke përdorur serverin e uebit ESP8266: 8 hapa (me fotografi)

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:20

Projekti im ka një Nodemcu ESP8266 i cili po kontrollon një ekran me 7 segmente përmes serverit http duke përdorur formën html.

Hapi 1: P THR KIST PROJEKT

Shtë një projekt IOT i zhvilluar duke përdorur modulin wifi ESP8266 (NodeMCU). Motivi i projektit është krijimi i një serveri në internet në modul që mund të presë klientë të shumtë në rrjet. Këtu, njohuritë themelore të html dhe javaScript janë të nevojshme për të kuptuar projektin tim. Disa tema të përparuara për të cilat do të diskutoj këtu në lidhje me ESP8266 dhe javaScript janë:

1. Ngarkimi i skedarëve në SPIFFS të ESP8266 për t'i përdorur ato në mënyrë më efikase në kodin tonë arduino.

2. Magazinimi në internet duke përdorur javaScript

SPIFFS

Deri më tani, ne gjithmonë e kemi përfshirë HTML -në për faqet tona të internetit si fjalë për fjalë në skicën tonë. Kjo e bën kodin tonë shumë të vështirë për t’u lexuar, dhe ju do të mbaroni nga kujtesa mjaft shpejt.

SPIFFS një sistem skedar me peshë të lehtë për mikrokontrolluesit me një çip flash SPI. Çipi flash në bord i ESP8266 ka shumë hapësirë për faqet tuaja në internet, veçanërisht nëse keni versionin 1MB, 2MB ose 4MB. Ju mund të kuptoni se si të shtoni mjete në programin tuaj arduino për ngarkimin e skedarëve në SPIFFS duke përdorur lidhjen në vijim:

Në këtë projekt, kam 2 skedarë html dhe një skedar javascript. Të gjithë këta skedarë ngarkohen në SPIFFS të ndarë nga skica në mënyrë që ndryshimi në këto skedarë të jetë i pavarur nga skica kryesore.

Të dy skedarët html merren nga prepaFile () siç tregohet më poshtë:

void PrepaFile () {

bool ok = SPIFFS.filloj (); nëse (ok) {Skedari f = SPIFFS.open ("/index.html", "r"); Skedari f1 = SPIFFS.open ("/index1.html", "r"); të dhëna = f.readString (); data1 = f1.readString (); f. mbyll (); f1.mbylle (); } else Serial.println ("Asnjë skedar i tillë nuk u gjet."); }

ndërsa skedari javascript lexohet duke përdorur loadScript () siç tregohet më poshtë:

void loadScript (Rruga e vargut, Lloji i vargut) {

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

RUAJTJA LOKALE P FORR APLIKIMET WEB

Ju mund të kuptoni se si të përdorni objekte dhe metoda të ndryshme të ruajtjes lokale në HTML5 duke përdorur javascript nga artikulli i mëposhtëm: https://diveintohtml5.info/storage.html. Unë do të diskutoj përdorimin e ruajtjes lokale në projektin tim në seksionin e punës.

Hapi 2: Kërkohet harduer

Moduli NodeMCU ESP8266 12E Wifi

Dërrasë buke pa saldim

Tela bluzë

7 Ekran Segent (Katodë e zakonshme)

Rezistencë 1K ohm

Kabllo mikro-USB (për lidhjen e NodeMCU me kompjuterin tuaj)

Hapi 3: Qarku & Lidhjet

Lidhjet janë vërtet të lehta. Në diagramin e mësipërm të qarkut, kunjat e nodemcu janë të lidhura në mënyrën e mëposhtme:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

ku A, B, C, D, E & F janë segmentet e 7Segment Display

Me Injoroni PD -në e ekranit me 7 segmente. Mos e lidhni me pinin D5 të ESP

Hapi 4: PUNA

Siç u diskutua më parë, ne kemi dy skedarë html. Njëra prej të cilave është faqja rrënjësore html e quajtur kur serveri ESP8266 ka marrë "/" dmth Nëse kërkohet URI '/', serveri duhet të përgjigjet me një kod statusi HTTP prej 200 (Ok) dhe pastaj të dërgojë një përgjigje me "indeksin". html "skedar.

Skedari i dytë html do të dërgohet kur kërkesa e klientit nga faqja rrënjësore duke paraqitur një hyrje në formular. Sapo, serveri merr hyrjen POSTED nga formulari, e krahason atë me vlerën fikse të vargut dhe dërgon faqen e dytë html në përgjigje.

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

Meqenëse html për faqen e dytë nuk është përcaktuar në skicë, kështu që këtu po i referohemi "data1" që tashmë është lexuar kodet html duke përdorur SPIFFS.readString ()

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

Këtu heftSeg () quhet gjithashtu me një argument "0" në mënyrë që të mund të përdoret për të shfaqur "0" duke ndezur dhe fikur segmente të ndryshme. Këtu, unë bëra emrin e fuction vetë -shpjegues dmth onA () do të aktivizojë segmentin A të ekranit 7 seg në dërrasën e bukës, në mënyrë të ngjashme offA do ta fikë atë.

Pra, në këtë rast për të shfaqur "0", ne duhet të ndërrojmë të gjithë segmentin përveç G (DP injorohet pasi nuk është i lidhur me asnjë kunj të ESP8266). Pra, funksioni im duket si:

nëse (num == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

Hapi 5: KOD HTML & JAVASCRIPT

Index.html ka një kanavacë që ka 7 segmente të shfaqur në modalitetin e fikur dhe formën nën të. Kjo është ajo që shihni pasi e hapni:

Nëse duam të përdorim faqen tonë pa ESP8266, do të jetë e mundur duke ndryshuar lidhjen në atributin e veprimit të formularit tuaj. Aktualisht kjo është lidhja në veprim:

Këtu mund të shihni që lidhja në veprim është e njëjta adresë ip e cila ndahet në nodeMCU tuaj pasi të lidheni me ndonjë wifi (ose pikë të nxehtë). Etiketa e formularit pas rregullimit duket si:

Këtu, unë jam duke përdorur web stroge të shfletuesit për të ruajtur vlerën hyrëse të përdoruesit në mënyrë që vlera e futur në index.html të ruhet në shfletuesin në vend (si cookie). Kjo vlerë merret nga indeksi 1.html dhe numri shfaqet në ekranin e segmentit 7 në kanavacën html. Ju mund ta kuptoni këtë procedurë duke ndjekur videon e mëposhtme:

video_shtoj

Hapi 6: SH NOTNIMET KRYESORE

Ky projekt do të punojë me nodemcu tuaj nëse kujdeseni për pikat e mëposhtme:

1. Lidhja në atributin e veprimit të skedarit html rrënjë duhet të jetë "https:// (IP në monitorin serial ose IP të alokuar në ESP tuaj)/paraqit".

2. Përdorni versionin më të fundit të shfletuesit që mbështet html5 dhe etiketa dhe funksione të reja.

3. SPIFFS do të funksionojë vetëm nëse index.html, index1.html dhe main.js vendosen së bashku në dosjen e të dhënave. Ju mund të kloni skedarin e kodit nga github im

Hapi 7: KODI

Kjo është lidhja e depove të kodit të projektit tim. Nëse jeni duke punuar me SPIFFS në ESP8266, mund të kuptoni pse i kam vendosur skedarët html dhe javascript në dosjen e të dhënave. Përdoreni ashtu si ajo.

Lidhja e depove të GitHub

Hapi 8: Video Tutorial

Nëse Ndihmon, Ju lutemi Regjistrohuni