ESP8266 վեբ սերվերի միջոցով 7-հատվածի LED ցուցադրման վերահսկում. 8 քայլ (նկարներով)

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:48

Իմ նախագիծն ունի Nodemcu ESP8266, որը վերահսկում է 7 հատվածի ցուցադրումը http սերվերի միջոցով ՝ օգտագործելով html ձև:

Քայլ 1: Այս նախագծի մասին

Դա IOT նախագիծ է, որը մշակվել է ESP8266 (NodeMCU) wifi մոդուլի միջոցով: Նախագծի շարժառիթը մոդուլի վրա վեբ սերվեր ստեղծելն է, որը կարող է ցանցում տեղավորել բազմաթիվ հաճախորդների: Այստեղ անհրաժեշտ է html և javaScript տարրական գիտելիքներ ՝ իմ նախագիծը հասկանալու համար: Որոշ նախնական թեման, որը ես այստեղ կքննարկեմ ESP8266- ի և javaScript- ի վերաբերյալ են.

1. ESP8266- ի SPIFFS- ի վրա ֆայլեր վերբեռնելու համար `այդ ֆայլը մեր arduino կոդի մեջ ավելի արդյունավետ օգտագործելու համար:

2. Վեբ պահեստավորում ՝ օգտագործելով javaScript

SPIFFS

Մինչ այժմ մենք միշտ մեր էսքիզների HTML- ն ընդգրկում էինք մեր էսքիզների մեջ որպես տողերի տառատեսակներ: Սա շատ դժվար է դարձնում մեր կոդը կարդալը, և բավական արագ կկորցնեք հիշողությունը:

SPIFFS թեթև քաշային ֆայլային համակարգ միկրոկոնտրոլերների համար ՝ SPI ֆլեշ չիպով: ESP8266- ի ֆլեշ չիպը շատ տեղ ունի ձեր վեբ էջերի համար, հատկապես, եթե ունեք 1 ՄԲ, 2 ՄԲ կամ 4 ՄԲ տարբերակ: Դուք կարող եք հասկանալ, թե ինչպես կարելի է գործիքներ ավելացնել ձեր arduino ծրագրում ՝ ֆայլերը SPIFFS- ին վերբեռնելու համար ՝ հետևյալ հղումով ՝

Այս նախագծում ես ունեմ 2 html ֆայլ և javascript ֆայլ: Այս բոլոր ֆայլերը բեռնվում են ուրվագծից առանձնացված SPIFFS- ում, որպեսզի այս ֆայլերի փոփոխությունը անկախ լինի հիմնական ուրվագծից:

Երկու HTML ֆայլերն էլ առբերվում են prepaFile () - ով, ինչպես ցույց է տրված ստորև.

void prepaFile () {

bool ok = SPIFFS.begin (); եթե (լավ) {Ֆայլ f = SPIFFS.open ("/index.html", "r"); Ֆայլ f1 = SPIFFS.open ("/index1.html", "r"); տվյալներ = f.readString (); data1 = f1.readString (); f. փակել (); f1. փակել (); } else Serial.println ("Նման ֆայլ չի գտնվել"); }

մինչդեռ javascript ֆայլը կարդացվում է օգտագործելով loadScript () - ը, ինչպես ցույց է տրված ստորև.

void loadScript (լարային ուղի, տողի տեսակը) {

if (SPIFFS.exists (path)) {File file = SPIFFS.open (path, "r"); server.streamFile (ֆայլ, տեսակ); }}

ՏԵԱԿԱՆ ՊԱՀՊԱՆՈՄ WEB ԴԻՄՈՄՆԵՐԻ ՀԱՄԱՐ

Դուք կարող եք հասկանալ, թե ինչպես օգտագործել HTML5- ում տեղական պահպանման տարբեր օբյեկտներ և մեթոդներ ՝ օգտագործելով javascript հետևյալ հոդվածից ՝ https://diveintohtml5.info/storage.html: Աշխատանքային բաժնում ես կքննարկեմ իմ նախագծում տեղական պահեստների օգտագործումը:

Քայլ 2: Պահանջվում է սարքավորում

NodeMCU ESP8266 12E Wifi մոդուլ

Առանց զոդման տախտակ

Jumper մետաղալար

7 սեգենտային էկրան (ընդհանուր կաթոդ)

1K ohm դիմադրություն

Միկրո USB մալուխ (NodeMCU- ը ձեր համակարգչին միացնելու համար)

Քայլ 3: Շղթա և միացումներ

Կապերն իսկապես հեշտ են: Վերոնշյալ սխեմայի գծում nodemcu- ի քորոցները միացված են հետևյալ կերպ.

A D1

B D2

C D3

D D4

E D6

F D7

G D8

որտեղ A, B, C, D, E & F- ը 7Segment Display- ի հատվածներն են

. Անտեսել 7 հատվածի ցուցադրման DP- ն: Մի միացրեք այն ESP- ի D5 կապի հետ

Քայլ 4: ԱՇԽԱՏԱՆՔ

Ինչպես արդեն նշվեց, մենք ունենք երկու html ֆայլ: Նրանցից մեկը արմատային html էջն է, որը կոչվում է ESP8266 սերվերի կողմից «/» ընդունվելիս, այսինքն, եթե URI '/' է պահանջվում, սերվերը պետք է պատասխանի HTTP կարգավիճակի 200 կոդով (Ok), այնուհետև պատասխան ուղարկի «ինդեքսով»: html »ֆայլը:

Երկրորդ html ֆայլը կուղարկվի, երբ հաճախորդը պահանջի արմատային էջից `մուտքագրելով ձևի մուտքագրում: Հենց որ սերվերը մուտքագրում է ձևից ՓՈՍՏԱՎԱ, այն համեմատում է ֆիքսված տողի արժեքի հետ և ի պատասխան ուղարկում երկրորդ HTML էջը:

if (server.arg ("nam") == "0") {server.send (200, "text/html", data1); յոթSeg (0); }

Քանի որ html- ի 2 -րդ էջը ուրվագծում սահմանված չէ, ուստի այստեղ մենք հղում ենք կատարում «data1» - ին, որն արդեն կարդում է html կոդերը ՝ օգտագործելով SPIFFS.readString ()

Ֆայլ f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

Այստեղ յոթՍեգը () կոչվում է նաև «0» արգումենտով, որպեսզի այն կարողանա օգտագործվել «0» –ը ցուցադրելու համար ՝ միացնելով և անջատելով տարբեր հատվածներ: Այստեղ ես դրել եմ fuction- ի ինքնաբացատրվող անունը, այսինքն ՝ onA () միացնելու է տախտակի վրա 7 seg ցուցադրման A հատվածը, նույն կերպ A- ն այն անջատելու է:

Այսպիսով, այս դեպքում «0» ցուցադրելու համար մենք պետք է փոխենք բոլոր հատվածները, բացառությամբ G- ի (DP- ն անտեսվում է, քանի որ այն միացված չէ ESP8266- ի որևէ կապին): Այսպիսով, իմ գործառույթը նման է.

եթե (num == 0) {onA (); onB (); onC (); onD (); onE (); onF (); offG (); }

Քայլ 5: HTML & JAVASCRIPT CODE

Index.html- ում կա մի կտավ, որն ունի 7 հատվածի ցուցադրում անջատված ռեժիմում և ձև ներքևում: Ահա այն, ինչ տեսնում եք այն բացելուց հետո.

Եթե մենք ցանկանում ենք օգտագործել մեր կայքը առանց ESP8266- ի, դա հնարավոր կլինի փոխել ձեր ձևի գործողության հատկանիշի հղումը: Ներկայումս սա գործողության հղումն է.

Այստեղ դուք կարող եք տեսնել, որ գործող հղումը նույն IP հասցեն է, որը հատկացված է ձեր nodeMCU- ին ՝ ցանկացած wifi (կամ թեժ կետ) միանալուց հետո: Կարգավորումից հետո ձևի պիտակը նման է.

Այստեղ ես օգտագործում եմ զննարկչի վեբ հարվածը ՝ օգտագործողի մուտքային արժեքը պահելու համար այնպես, որ ինդեքսում մուտքագրված արժեքը: html պահվում է բրաուզերում տեղական մակարդակում (ինչպես cookie- ն): Այդ արժեքը բերվում է index1.html- ով և համարը ցուցադրվում է html կտավի վրա 7 հատվածի ցուցադրման վրա: Դուք կարող եք հասկանալ այս ընթացակարգը հետևյալ տեսանյութով.

վիդեո_ կցել

Քայլ 6: Հիմնական նշումներ

Այս նախագիծը կաշխատի ձեր nodemcu- ի հետ, եթե հաշվի առնեք հետևյալ կետերը.

1. Արմատային html ֆայլի գործողության հատկանիշի հղումը պետք է լինի «https:// (IP սերիական մոնիտորի վրա կամ ձեր ESP- ին հատկացված IP)/ներկայացնել»:

2. Օգտագործեք դիտարկիչի վերջին տարբերակը, որն ապահովում է html5 և նոր պիտակներ և գործառույթներ:

3. SPIFFS- ը կաշխատի միայն այն դեպքում, եթե ձեր index.html, index1.html և main.js- ը միասին դրվեն տվյալների թղթապանակում: Դուք կարող եք ծածկագրել կոդի ֆայլը իմ github- ից

Քայլ 7: ԿՈԴ

Սա իմ նախագծի ծածկագրի շտեմարանի հղումն է: Եթե դուք աշխատում եք SPIFFS- ի հետ ESP8266- ում, կարող եք հասկանալ, թե ինչու եմ html և javascript ֆայլերը տեղադրել տվյալների պանակում: Օգտագործեք այնպես, ինչպես դա:

GitHub շտեմարանի հղում

Քայլ 8: Վիդեո ձեռնարկ

Եթե դա օգնում է, խնդրում ենք բաժանորդագրվել