Tswj 7-Segment LED Zaub Siv ESP8266 Web Server: 8 Kauj Ruam (nrog Duab)

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:27

Kuv txoj haujlwm muaj Nodemcu ESP8266 uas yog tswj 7-ntu zaub los ntawm http server siv html daim ntawv.

Kauj Ruam 1: HAIS TIAS YUAV UA LI CAS

Nws yog qhov haujlwm IOT tsim los siv ESP8266 (NodeMCU) wifi module. Lub hom phiaj ntawm txoj haujlwm yog los tsim lub vev xaib server ntawm tus qauv uas tuaj yeem tuav ntau tus neeg siv khoom hla lub network. Ntawm no, kev paub pib ntawm html thiab javaScript xav tau kom nkag siab kuv txoj haujlwm. Qee cov ncauj lus ua ntej uas kuv yuav tham txog ntawm no hais txog ESP8266 thiab javaScript yog:

1. Xa cov ntaub ntawv ntawm SPIFFS ntawm ESP8266 los siv cov ntawv ntawd kom zoo dua hauv peb cov lej arduino.

2. Web cia siv javaScript

SPIFFS

Txog tam sim no, peb ib txwm suav nrog HTML rau peb cov nplooj ntawv web raws li cov ntawv sau hauv peb daim duab. Qhov no ua rau peb cov lej nyuaj rau nyeem, thiab koj yuav tsis nco ntau dua.

SPIFFS lub teeb-hnyav cov ntaub ntawv kaw lus rau microcontrollers nrog SPI flash nti. Cov nyob ntawm pawg tsav flash ntawm ESP8266 muaj ntau qhov chaw rau koj lub vev xaib, tshwj xeeb tshaj yog tias koj muaj 1MB, 2MB lossis 4MB version. Koj tuaj yeem nkag siab yuav ua li cas ntxiv cov cuab yeej hauv koj software arduino rau xa cov ntaub ntawv mus rau SPIFFS los ntawm kev txuas hauv qab no:

Hauv txoj haujlwm no, kuv muaj 2 daim ntawv html thiab cov ntaub ntawv javascript. Txhua cov ntaub ntawv no tau xa mus rau SPIFFS sib cais los ntawm daim duab kos kom cov kev hloov pauv hauv cov ntaub ntawv no yog ywj siab ntawm daim duab loj.

Ob qhov html cov ntaub ntawv tau khaws los ntawm prepaFile () raws li qhia hauv qab no:

void npaj ntaub ntawv () {

bool ok = SPIFFS.begin (); yog (ok) {Cov ntaub ntawv f = SPIFFS.open ("/index.html", "r"); Cov ntaub ntawv f1 = SPIFFS.open ("/index1.html", "r"); cov ntaub ntawv = f.readString (); data1 = f1.readString (); cov f.close (); f1.cov (); } lwm Serial.println ("Tsis pom cov ntawv zoo li no."); }

thaum cov ntaub ntawv javascript tau nyeem siv loadScript () raws li qhia hauv qab no:

void loadScript (Txoj hlua txoj hauv kev, Hom hlua) {

yog (SPIFFS.exists (path)) {Cov ntaub ntawv file = SPIFFS.open (txoj kev, "r"); server.streamFile (ntaub ntawv, hom); }}

ZOO TSHAJ PLAWS RAU WEB APPLICATIONS

Koj tuaj yeem nkag siab yuav siv cov khoom sib txawv thiab txheej txheem ntawm kev khaws cia hauv zos hauv HTML5 siv javascript los ntawm kab lus hauv qab no: https://diveintohtml5.info/storage.html. Kuv yuav tham txog kev siv cov chaw khaws khoom hauv zos hauv kuv qhov haujlwm hauv ntu ua haujlwm.

Kauj ruam 2: Yuav tsum kho vajtse

NodeMCU ESP8266 12E Wifi module

Solderless breadboard

Jumper hlau

7 Segent Zaub (Common Cathode)

1K ohm tiv thaiv

Micro-USB cable (txuas NodeMCU nrog koj lub computer)

Kauj Ruam 3: Circuit & Kev Sib Txuas

Cov kev sib txuas yog yooj yim heev. Hauv daim duab kab lus saum toj no, tus pin ntawm nodemcu txuas nrog hauv qab no:

UA D1

IB D2

C D3 ua

D D4 ua

E D6 ib

F D7 ib

G D8 ua

qhov twg A, B, C, D, E & F yog ntu ntawm 7Segment Display

. Tsis quav ntsej DP ntawm 7 ntu Zaub Zaub. Tsis txhob txuas nws nrog tus pin D5 ntawm ESP

Kauj ruam 4: Ua haujlwm

Raws li tau tham ua ntej, peb muaj ob daim ntawv html. Ib qho uas yog lub hauv paus html nplooj ntawv hu thaum ESP8266 server tau txais "/" piv txwv li Yog tias URI '/' tau thov, tus neeg rau zaub mov yuav tsum teb nrog HTTP xwm txheej chaws ntawm 200 (Ok) thiab tom qab ntawd xa cov lus teb nrog "index. html "cov ntaub ntawv.

Cov ntaub ntawv html thib ob yuav raug xa thaum tus neeg thov los ntawm nplooj ntawv hauv paus los ntawm kev xa cov lus tawm ntawm daim ntawv. Sai li sai tau, tus neeg rau zaub mov tau txais cov tswv yim POSTED los ntawm daim ntawv, nws sib piv nws nrog cov hlua ruaj ruaj thiab xa cov nplooj ntawv html thib ob los teb.

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

Txij li html rau nplooj 2 tsis tau hais tseg hauv daim duab, yog li ntawm no peb tau hais txog "data1" uas twb tau nyeem cov lej html siv SPIFFS.readString ()

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

Ntawm no xyaSeg () kuj tseem hu nrog kev sib cav "0" yog li nws tuaj yeem siv los tso saib "0" los ntawm kev hloov pauv ntu sib txawv ON thiab OFF. Ntawm no, Kuv tau ua lub npe ntawm kev txhawb tus kheej piav qhia piv txwv li ntawm A () yuav tig rau ntu A ntawm 7 seg zaub ntawm lub rooj noj mov, zoo ib yam tawm A yuav hloov nws tawm.

Yog li, qhov xwm txheej no los tso saib "0", peb yuav tsum hloov pauv txhua ntu tshwj tsis yog G (DP tsis quav ntsej vim nws tsis txuas nrog ib tus pin ntawm ESP8266). Yog li kuv txoj haujlwm zoo li:

yog (num == 0) {onA (); onB (); nco (); onD (); rau (); ntawm F (); offG (); }

Kauj ruam 5: HTML & JAVASCRIPT CODE

Index.html muaj daim ntaub thaiv uas muaj 7 ntu tso rau hauv hom tawm thiab tsim hauv qab no. Nov yog qhov koj pom tom qab qhib nws:

Yog tias peb xav siv peb lub vev xaib yam tsis muaj ESP8266, nws yuav ua tau los ntawm kev hloov qhov txuas hauv tus yam ntxwv ntawm koj daim ntawv. Tam sim no qhov no yog qhov txuas hauv kev ua:

Ntawm no koj tuaj yeem pom tias qhov txuas hauv kev ua yog tib tus IP chaw nyob uas tau faib rau koj nodeMCU tom qab txuas rau ib lub wifi (lossis hotspot). Daim ntawv teev npe tom qab hloov kho zoo li:

Ntawm no, Kuv tab tom siv lub web stroge ntawm qhov browser khaws cov nqi nkag ntawm tus neeg siv xws li tus nqi nkag mus rau hauv index.html tau khaws cia hauv qhov browser hauv zos (zoo li cov ncuav qab zib). Tus nqi ntawd tau txais los ntawm index1.html thiab tus lej tau nthuav tawm ntawm 7 ntu ntu ntawm html canvas. Koj yuav nkag siab cov txheej txheem no los ntawm cov vis dis aus hauv qab no:

video_tab

Kauj Ruam 6: KEY NOTES

Txoj haujlwm no yuav ua haujlwm nrog koj nodemcu yog tias koj saib xyuas cov ntsiab lus hauv qab no:

1. Qhov txuas hauv qhov kev coj ua ntawm lub hauv paus html cov ntaub ntawv yuav tsum yog "https:// (IP ntawm Serial monitor lossis IP faib rau koj ESP)/xa".

2. Siv qhov browser tshiab tshaj plaws uas txhawb nqa html5 thiab cim npe tshiab thiab ua haujlwm zoo.

3. SPIFFS yuav ua haujlwm nkaus xwb yog tias koj qhov index.html, index1.html thiab main.js muab tso ua ke hauv cov ntaub ntawv tais ceev tseg. Koj tuaj yeem clone cov lej code los ntawm kuv github

Kauj ruam 7: CODE

Nov yog qhov txuas txuas ntawm qhov chaws ntawm kuv qhov haujlwm. Yog tias koj tab tom ua haujlwm nrog SPIFFS hauv ESP8266, koj tuaj yeem nkag siab tias vim li cas kuv thiaj tso html thiab javascript cov ntaub ntawv hauv cov ntaub ntawv tais ceev tseg. Ua raws li nws.

GitHub Repository Link

Kauj Ruam 8: Tutorial Video

Yog Nws Pab, Thov Pab Subscribe