Վերահսկեք ձեր Arduino- ն HTML/Javascript- ով `հեշտ ճանապարհով. 8 քայլ

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

Այս ձեռնարկը ցույց է տալիս, թե ինչպես կարելի է վերահսկել arduino- ն ajax կանչով adafruit Huzzah- ից ՝ օգտագործելով միայն javascript գործառույթներ: Հիմնականում դուք կարող եք օգտագործել javascript- ը html էջում, որը թույլ կտա ձեզ հեշտությամբ գրել html ինտերֆեյսեր javascript- ի պարզ գործառույթներով, որոնք օգտագործում են ajax- ի հետադարձ կապը: Թույլատրել ESP8266- ին հաղորդակցվել arduino- ի հետ: Հետեւաբար, բոլոր կապումները կարող են սահմանվել javascript գործառույթից: Նմանապես, մենք կարող ենք կարդալ արժեքը ցանկացած քորոցից ՝ օգտագործելով javascript գործառույթը: Հուսով եմ, որ դա օգնում է ավելի հեշտ դարձնել html փաստաթղթից arduino- ի կառավարումը: Ես հասկացա, որ այնտեղ շատ մարդիկ կան, ովքեր կարող են html գրել: Նրանցից շատերը չեն ցանկանում անհանգստանալ ՝ փորձելով բջջային հեռախոսի հավելված ստեղծել java կամ xcode կամ այլ շրջանակով: Սա մարդկանց համար շատ դյուրին կդարձնի, քանի որ այն ամենը, ինչ նրանք պետք է անեն, javascript ֆունկցիայի օգտագործումն է ՝ կապումներից արժեքներ սահմանելու և կարդալու համար: Օրինակ, շատ ավելի հեշտ չէ գրել

Միացնել

Կոճակ միացնելու համար: Գեղեցկությունն այն է, որ չկա այլ arduino ծրագրավորում, բացի pinMode- ի հայտարարումից (12, INPUT); Ձեր կարգաբերման գործառույթում: Քանի դեռ քորոցը հայտարարված է, JavaScript- ը կարող է օգտագործվել մնացած ամեն ինչի համար:

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Սա այն ամենն է, ինչ դուք պետք է անեք, որպեսզի ստանաք անալոգային 0 -ի արժեքը և արդյունքը վերադարձնեք div- ի մեջ: Այսպիսով, սա պետք է լինի հեշտ միջոց, որպեսզի մարդիկ կարողանան ստեղծել html էջեր, որոնք վերահսկում են arduino- ն: Ինչպես նաև ստեղծել ինտերֆեյս, որպեսզի arduino- ի կապերը կարողանան սահմանվել և կարդալ javascript- ով:

Քայլ 1: Այն, ինչ ձեզ հարկավոր կլինի

Ես կառուցեցի այս նախագիծը այն օգտվողների համար, ովքեր ցանկանում են կառավարել իրենց arduino- ն html էջով ESP8266- ի վրա: Այս նախագծի նպատակն է ստեղծել պարզ մեթոդ ՝ ձեր arduino- ում կապերի արժեքները սահմանելու համար ՝ javascript գործառույթով: For examplate onclick = "SetPin (12, 1, 0)" - ը ձեր arduino- ի Pin 12 -ը կդնի բարձր:

Այս ձեռնարկի համար ձեզ հարկավոր կլինեն հետևյալ կետերը ՝ ճշգրիտ հետևելու համար: Այնուամենայնիվ, ես ենթադրում եմ, որ այն պետք է աշխատի arduino- ի և ESP8266 համակցությունների մեծ մասի վրա: Այնուամենայնիվ, այն, ինչ ես այստեղ ունեմ, հետևելու համար ձեզ հարկավոր կլինեն հետևյալ բաղադրիչները.

Arduino Uno - Պետք է աշխատի ցանկացած arduino համատեղելիի հետ, որն ունի սերիական Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 low power LED's Analog Turpidity testor - անալոգային ելք ապահովող ցանկացած անալոգային տվիչ կկատարի Wire Wifi երթուղիչի բջջային հեռախոս շարժական դիտարկիչ Arduino գրադարաններով:

Քայլ 2. Arduino ID- ի պատրաստում

Այս նախագիծը պահանջում է նոր arduino գրադարաններ և որոշակի կոնֆիգուրացիա և հանուն ժամանակի: Ես չեմ դնի յուրաքանչյուր էկրանի սքրինշոթ, և ես պարզապես պատրաստվում եմ անցնել այն, ինչ ձեզ հարկավոր է ՝ այս կազմաձևման և գործարկման համար: Փորձեցի հնարավորինս հեշտացնել օգտվողի համար:

Աշխատելու համար ծածկագիրը օգտագործում է մի շարք գրադարաններ: Սկզբում մենք կկենտրոնանանք arduino- ի ստեղծման վրա ESP8266- ի համար, որը ես օգտագործում եմ Adafruit Huzzah- ը այս օրինակում, քանի որ adafruit- ի արտադրանքը ես համարում եմ ամենահուսալին և լավագույն աջակցությունը: Քանի դեռ չեք փորձում աջակցություն ստանալ Adafruit Discord սերվերից: Աջակցության ֆորումներում օգնություն ստանալու համար շատ ավելի հաջողակ կլինեք:

Ամեն դեպքում, ես օգտագործում եմ հետևյալ գրադարանները ESP8266- ում

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT Սա ձեռնարկ չէ գրադարաններ ներբեռնելու և տեղադրելու վերաբերյալ, սակայն դրանք գրադարաններն են, որոնք օգտագործվում են HUZZAH- ում: Այսպիսով, խնդրում ենք գտնել դրանք և տեղադրել դրանք: Դուք նաև պետք է տեղադրեք HUZZAH- ի տախտակի սահմանումները, որպեսզի գնաք Ֆայլ> Նախընտրանքներ Լրացուցիչ խորհուրդների մենեջերի URL- ներ գրող վանդակում ավելացրեք հետևյալը. Http://arduino.esp8266.com/stable/package_esp8266c… ինչ -որ բան այս ոլորտում, քան համոզվեք, որ այնտեղ ստորակետ եք ավելացնում ՝ տախտակի լրացուցիչ url ավելացնելու համար: Կտտացրեք լավ, գնացեք

Գործիքներ> Տախտակ> Տախտակների կառավարիչ Քանզի փնտրեք ESP8266, քան տեղադրեք ESP8266 ESP8266 համայնքի կողմից:

Գերազանց այժմ թույլ է տալիս համոզվել, որ մենք ունենք այն ամենը, ինչ մեզ անհրաժեշտ է, որպեսզի աշխատի arduino կոդը: Arduino- ից մեկը Կողքը arduino- ն այս ձեռնարկի համար օգտագործում է ընդամենը 2 գրադարան:

SoftwareSerialArduinoJSON որը դուք արդեն պետք է ունենաք:

Քայլ 3. ESP8266- ի պատրաստում

Այժմ մենք պատրաստվում ենք ծածկագիրը տեղադրել ESP8266 (Adafruit HUZZAH) վրա և պատրաստել այն Arduino- ին միանալու համար: Բացեք HUZZAH- ի ծածկագիրը և բացեք ուրվագիծը: 11 -րդ և 12 -րդ տողերում ssid- ը և գաղտնաբառը փոխեք ձեր տեղական ցանցի ձեր WIFI կապի գաղտնաբառի: Դուք կնկատեք, որ կա 2 ֆայլ ՝ էսքիզային ֆայլը և index.h ֆայլը: Index.h ֆայլը այն վայրն է, որտեղ պահվում է html- ը, որը կցուցադրվի ձեր հեռախոսում:

SSիշտ SSID- ի և գաղտնաբառի սահմանումը ձեր WiFi- ին կարող եք կազմել կոդը և բեռնել այն ձեր ESP8266- ում: HUZZAH- ում դուք պետք է պահեք GPIO0 մակնշված կոճակը, այնուհետև կտտացրեք մնացած կոճակին, քան բաց թողեք GPIO0 կոճակը ՝ չիպը բեռնման ռեժիմի մեջ դնելու համար: Եթե չիպը հաջողությամբ դրվել է բեռնման ռեժիմի վրա, կարմիր լույս կվառվի ՝ նշելով, որ չիպը գտնվում է բեռնման ռեժիմում:

ESP8266- ին միանալու համար ձեզ հարկավոր է սերիական մալուխ կամ USB- ից դեպի սերիա ադապտեր, կամ FDTI չիպ: Այս դեպքում ես օգտագործում եմ adafruit- ի մալուխը, ինչպես նշված է հրահանգներում: Այնուամենայնիվ, դուք կարող եք միացնել չիպը մի քանի եղանակով ՝ օգտագործելով TTL- ը Tx և Rx կապում: Ինչը ես հույս ունեմ, որ մարդիկ, ովքեր դիտում են դա, գիտեն, թե ինչպես միանալ չիպին ՝ դրա վրա ծածկագիրը բեռնելու համար: Ինչևէ, առաջ գնացեք և միացրեք այս չիպը zip ֆայլի ծածկագրով, որը կցված է այս քայլին:

Քայլ 4. Arduino- ի պատրաստում

Արդուինոյի վրա կոդը բեռնելու համար փոխեք ձեր տախտակի սահմանումը Arduino/Genuino Uno: Այնուհետև բացեք ֆայլը, որը կցված է այս քայլին: Քան վերբեռնել այն ardunio- ում: Բավականին պարզ, ամբողջ ծանր աշխատանքը արդեն կատարվել է ձեզ համար: Ես արդեն անցել եմ սխալի փորձնական գործընթաց, այնպես որ մնում է միայն վերբեռնել կոդը:

Քայլ 5: Ամեն ինչ միասին միացրեք

Լավ, էլեկտրագծերի համար ես ունեմ վերևում եղածի նկարը:

Միացրեք Tx- ը Huzzah- ին arduino- ի 2 -րդին: Միացրեք Rx- ը Huzzah- ին arduino- ի 3 -ին: Ես ստեղծեցի ևս մեկ սերիական վարդակ arduino- ի 2 և 3 կապում ՝ կանխադրված Serial Console- ն ազատելու համար:

Արդվինոյից միացրեք Pin V+ և En- ը 5v- ին: - Adafruit Huzzah- ն ունի ներկառուցված 3.3 վ լարման կարգավորիչ, այնպես որ այս կապումներն այսպես միացնելը կարող է չաշխատել բոլոր ESP8266 մոդուլների հետ: Հնարավոր է, որ անհրաժեշտ լինի միացնել ձեր սեփական լարման կարգավորիչը: Ես խորհուրդ եմ տալիս օգտագործել Huzzah- ը, եթե ցանկանում եք, որ իրը հեշտությամբ աշխատի: Միացրեք GND- ն arduino- ի GND- ին

Ձեր LED- ների arduino լարի 12 -րդ, 11 -րդ, 9 -րդ, 8 -րդ կապում ես օգտագործեցի այստեղ ցածր էներգիայի լուսադիոդներ, որովհետև նրանք, ովքեր չափազանց շատ հոսանք են քաշում, կարող են չափազանց մեծ ուժ քաշել ՝ հանուն այս փորձի պարզության:

Ավելի քան A0 անալոգային Pin 0 -ի arduino- ում ես միացրել եմ Turpitity tester- ի ելքային գիծը: Այնուամենայնիվ, դուք կարող եք միացնել հիմնականում ցանկացած սենսորի ելքը, որը ձեզ անալոգային ընթերցում կտա: Դա այն ամենն է, ինչ դուք պետք է անեք սա լարելու համար:

Քայլ 6: Մուտք դեպի վեբ էջ

Այժմ, երբ arduino- ն միացված է և ամեն ինչ բեռնված է ձեր տախտակների վրա, անհրաժեշտ է, որպեսզի կարողանաք դիտել html- ը ձեր բջջային հեռախոսի վրա: Այժմ ես ուզում եմ, որ դուք միանաք նույն wifi երթուղիչին, որի համար SSID- ն ու գաղտնաբառը սահմանել եք Huzzah- ի ծածկագրում: Դրանից հետո դուք պետք է պարզեք, թե որ IP հասցեն է ձեր երթուղիչը փոխանցել ձեր սարքին: Սովորաբար, եթե մուտք եք գործում ձեր երթուղիչների կազմաձևում, պետք է լինի հաճախորդների ցուցակ: Դա ցույց է տալիս ձեր Wifi կապին միացված բոլոր սարքերի IP հասցեները: Այնուամենայնիվ, եթե չեք կարող գտնել այս IP հասցեն, ապա կարող եք այն միացնել arduino- ից և նորից գործարկել սերիական մալուխով: Եթե սարքի վրա բացեք սերիական մխիթարիչը, այն այլ սարքով չգտնելու դեպքում սարքի վրա կտպագրի IP հասցեն սերիական վահանակում: Ամեն դեպքում, երբ բջջային հեռախոսով միանաք նույն Wifi ցանցին: Ձեր բջջային վեբ դիտարկիչին մատնանշեք Huzzah- ի IP հասցեն: Ինչը, հավանաբար, նման է դրան: https://192.168.0.107 կամ շատ նման բան: Այնտեղ ես տեղադրեցի հիմնական էջ, որը թույլ կտա միացնել և անջատել 4 Leds- ը, ինչպես նաև կարդալ անալոգային սենսորի արժեքը:

Քայլ 7: Javascipt- ի օգտագործումը

ESP8266Code ուրվագծում index.h կոչվող ֆայլում այն պետք է հանդես գա որպես առանձին ներդիր arduino խմբագրիչում: Դուք կարող եք տեսնել հիմնական օրինակը, որը ես արել եմ այստեղ: Հիմնականում այն, թե ինչպես է այն աշխատում, այսպիսին է.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}}, {IsAnalog 1 Yes 0 No})

Սա թվային կապի 12 -ի արժեքը կդարձնի բարձր

SetPin (4, 0, 0);

Սա թվային կապի 4 -ի արժեքը կդնի ցածր

SetPin (A2, 439, 1) Սա անալոգային կապ 2 -ի արժեքը կդարձնի 439

Նմանապես, GetJSON ֆունկցիան կվերադարձնի պահանջվող արժեքը քորոցից և կտեղադրի այն html- ում, որը բաժանված է նշված div Id- ով:

GetJSON ('A0', 1, 'resp_i') GetJSON ({PIN համարը}, {IsAnalog 1 Այո 0 Ոչ}, {HTML Element- ի Id ՝ արդյունքը վերադարձնելու համար})

Սա հարցում կուղարկի arduino- ին `խնդրելով անալոգային 0 -ի արժեքը և արդյունքը վերադարձնել Div- ով` resp_iGetJSON ID- ով (12, 0, 'mydiv'); Սա arduino- ին կխնդրի ստանալ թվային կապի 0 արժեքը և արդյունքը վերադարձնել html տարրի մեջ mydiv- ի և Id- ի հետ

Քայլ 8: Աջակցություն

Հուսով եմ, որ իմ սցենարը կօգնի ձեզանից նրանց, ովքեր ցանկանում են օգտագործել այն: Ես այստեղ օգտագործեցի մի շատ հիմնական html օրինակ ՝ հույսով, որ այլ մարդիկ կքննարկեն դրա բոլոր հնարավորությունները, որոնք ես չեմ կարող: Այնուամենայնիվ, սա պետք է ցույց տա, թե ինչպես ajax- ը կարող է օգտագործվել arduino- ն կառավարելու համար ՝ առանց HTML էջի բեռների և այդ բնույթի իրերի:

Եթե ունեք որևէ մեկնաբանություն, խնդրում եմ ազատ զգալ ինձ հարցնել, ես կանեմ հնարավորինս լավագույնը, որպեսզի կարողանամ պատասխանել: Ես կցանկանայի ևս մեկ անգամ ընդլայնել դրա ֆունկցիոնալությունը, բայց ինձ ժամանակ և գումար սպառվեց: Այնուամենայնիվ, ես աշխատում եմ դրա ավելի ամուր իրականացման վրա, որը ֆայլերը պահում է սովորական վեբ սերվերի վրա, այլ ոչ թե ESP8266- ի վրա:

Շնորհակալություն ժամանակ տրամադրելու համար ՝ իմ կոդը տեսնելու համար:

Andոն Անդերսոն

Վերմոնտի ինտերնետային դիզայն ՍՊԸ

www.vermontinternetdesign.com