Kudhibiti Uonyesho wa LED wa Sehemu 7 Kutumia ESP8266 Seva ya Wavuti: Hatua 8 (na Picha)

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:52

Mradi wangu una Nodemcu ESP8266 ambayo inadhibiti onyesho la sehemu 7 kupitia seva ya http kutumia fomu ya html.

Hatua ya 1: KUHUSU MRADI HUU

Ni mradi wa IOT uliotengenezwa kwa kutumia moduli ya wifi ya ESP8266 (NodeMCU). Kusudi la mradi ni kuunda seva ya wavuti kwenye moduli inayoweza kukaribisha wateja wengi kwenye mtandao. Hapa, maarifa ya kimsingi ya html na javaScript inahitajika kuelewa mradi wangu. Mada kadhaa ya mapema ambayo nitajadili hapa kuhusu ESP8266 na javaScript ni:

1. Kupakia faili kwenye SPIFFS ya ESP8266 kutumia faili hizo kwa ufanisi zaidi katika nambari yetu ya arduino.

2. Hifadhi ya wavuti kwa kutumia javaScript

MABIBU

Hadi sasa, tumekuwa tukijumuisha HTML kwa kurasa zetu za wavuti kama fasihi ya kamba kwenye mchoro wetu. Hii inafanya nambari yetu kuwa ngumu sana kusoma, na utakosa kumbukumbu haraka sana.

SPIFFS mfumo wa faili ya uzani mwepesi kwa watawala wadogo na chipu ya SPI. Chip kwenye ubao wa bodi ya ESP8266 ina nafasi nyingi kwa kurasa zako za wavuti, haswa ikiwa una toleo la 1MB, 2MB au 4MB. Unaweza kuelewa jinsi ya kuongeza zana kwenye programu yako ya arduino ya kupakia faili kwa SPIFFS kwa kufuata kiunga:

Katika mradi huu, nina faili 2 ya html na faili ya javascript. Faili hizi zote zimepakiwa kwa SPIFFS zilizotengwa na mchoro ili mabadiliko katika faili hizi yajitegemea na mchoro kuu.

Faili zote za html zinapatikana na kuandaaFile () kama inavyoonyeshwa hapa chini:

batili kuandaaFile () {

bool ok = SPIFFS. anza (); ikiwa (sawa) {File f = SPIFFS.open ("/ index.html", "r"); Faili f1 = SPIFFS. Fungua ("/ index1.html", "r"); data = f.readString (); data1 = f1.readString (); f. karibu (); f1. karibu (); } mwingine Serial.println ("Hakuna faili kama hiyo iliyopatikana."); }

wakati faili ya javascript inasomwa kwa kutumia mzigoScript () kama inavyoonyeshwa hapa chini:

utupu wa mzigo (Njia ya kamba, aina ya Kamba) {

ikiwa (SPIFFS.exists (path)) {File file = SPIFFS.open (path, "r"); server.streamFile (faili, aina); }}

Uhifadhi wa Mitaa kwa Maombi ya Wavuti

Unaweza kuelewa jinsi ya kutumia vitu na njia tofauti za uhifadhi wa ndani kwenye HTML5 ukitumia javascript kutoka kwa nakala ifuatayo: https://diveintohtml5.info/storage.html. Nitajadili matumizi ya uhifadhi wa ndani katika mradi wangu katika sehemu ya kazi.

Hatua ya 2: Vifaa vya vifaa vinahitajika

NodeMCU ESP8266 12E moduli ya Wifi

Bodi ya mkate isiyo na waya

Waya wa jumper

Onyesho kali la 7 (Katoliki ya kawaida)

Kinga ya 1K ohm

Cable ya Micro-USB (ya kuunganisha NodeMCU na kompyuta yako)

Hatua ya 3: Mzunguko na Muunganisho

Uunganisho ni rahisi sana. Katika mchoro wa mzunguko hapo juu, pini za nodemcu zimeunganishwa kwa mtindo unaofuata:

D1

B D2

C D3

D D4

E D6

F D7

G D8

ambapo A, B, C, D, E & F ni sehemu za Uonyesho wa Sehemu ya 7

. Puuza DP ya Uonyesho wa sehemu 7. Usiunganishe na pini D5 ya ESP

Hatua ya 4: KUFANYA KAZI

Kama ilivyojadiliwa hapo awali, tuna faili mbili za html. Moja ambayo ni ukurasa wa html inayoitwa wakati seva ya ESP8266 ilipokea "/" yaani Ikiwa URI '/' imeombwa, seva inapaswa kujibu na nambari ya hali ya HTTP ya 200 (Ok) kisha itume majibu na "index. html "faili.

Faili ya pili ya html itatumwa wakati ombi la mteja kutoka kwa ukurasa wa mizizi kwa kuwasilisha maoni kwenye fomu. Mara tu, seva inapata pembejeo POSTED kutoka kwa fomu, inalinganisha na thamani ya kamba iliyowekwa na tuma ukurasa wa pili wa html kujibu.

ikiwa (server.arg ("nam") == "0") {server.send (200, "text / html", data1); Sehemu saba (0); }

Kwa kuwa html ya ukurasa wa 2 haijafafanuliwa kwenye mchoro, kwa hivyo hapa tunarejelea "data1" ambayo tayari imesomwa nambari za html kwa kutumia SPIFFS.readString ()

Faili f1 = SPIFFS. Fungua ("/ index1.html", "r"); data1 = f1.readString ();

Hapa sabaSeg () pia inaitwa na hoja "0" ili iweze kutumiwa kuonyesha "0" kwa kuwasha sehemu tofauti ON na OFF. Hapa, nilifanya jina la kujifafanua mwenyewe i.e. onA () itawasha sehemu ya A ya onyesho la 7 seg kwenye ubao wa mkate, vile vile offA itaizima.

Kwa hivyo, katika kesi hii kuonyesha "0", lazima tugeuze sehemu zote isipokuwa G (DP inapuuzwa kwani haijaunganishwa na pini yoyote ya ESP8266). Kwa hivyo kazi yangu inaonekana kama:

ikiwa (num == 0) {onA (); onB (); onC (); onD (); onE (); onF (); mbaliG (); }

Hatua ya 5: HTML & JAVASCRIPT CODE

Index.html ina turubai iliyo na sehemu 7 ya onyesho katika hali ya kuzima na fomu chini yake. Hii ndio unayoona baada ya kuifungua:

Ikiwa tunataka kutumia ukurasa wetu wa wavuti bila ESP8266, itawezekana kwa kubadilisha kiunga katika sifa ya hatua ya fomu yako. Hivi sasa hiki ni kiunga kinachotumika:

Hapa unaweza kuona kwamba kiunga kinachotumika ni anwani sawa ya ip ambayo imepewa nodeMCU yako baada ya kuunganisha kwa wifi yoyote (au hotspot). Lebo ya fomu baada ya marekebisho inaonekana kama:

Hapa, ninatumia mtandao wa kivinjari kuhifadhi kivinjari cha pembejeo cha mtumiaji kama kwamba thamani iliyoingizwa kwenye index.html imehifadhiwa kwenye kivinjari kijijini (kama kuki). Thamani hiyo hupatikana na index1.html na nambari inaonyeshwa kwenye onyesho la sehemu 7 kwenye turubai ya html. Unaweza kuelewa utaratibu huu kwa kufuata video:

ambatisha video

Hatua ya 6: MAELEZO MUHIMU

Mradi huu utafanya kazi na nodemcu yako ikiwa utatunza vidokezo vifuatavyo:

1. Kiunga katika sifa ya kitendo cha faili ya mizizi html inapaswa kuwa "https:// (IP kwenye mfuatiliaji wa serial au IP iliyopewa ESP yako) / wasilisha".

2. Tumia toleo la hivi karibuni la kivinjari kinachounga mkono html5 na vitambulisho vipya na utendaji.

3. SPIFFS itafanya kazi tu ikiwa index.html yako, index1.html na main.js zimewekwa pamoja kwenye folda ya data. Unaweza kubatilisha faili ya nambari kutoka kwa github yangu

Hatua ya 7: CODE

Hiki ni kiunga cha hazina ya mradi wangu. Ikiwa unafanya kazi na SPIFFS katika ESP8266, unaweza kuelewa ni kwanini nimeweka html na faili za javascript kwenye folda ya data.

Kiungo cha Hifadhi ya GitHub

Hatua ya 8: Mafunzo ya Video

Ikiwa Inasaidia, Tafadhali Jisajili