Բեռնեք ձեր Arduino/ESP կազմաձևման կայքը ամպից ՝ 7 քայլ

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

Arduino / ESP (ESP8266 / ESP32) նախագիծ ստեղծելիս կարող եք պարզապես կոդավորել ամեն ինչ: Բայց ավելի հաճախ ինչ-որ բան հայտնվում է, և դուք կավարտեք նորից ձեր IoT սարքը կրկին IDE- ին կցելը: Կամ դուք պարզապես ավելի շատ մարդկանց եք մուտք գործել կոնֆիգուրացիա, և ցանկանում եք տրամադրել UI ՝ փոխարենը ակնկալելով, որ նրանք կհասկանան ներքին աշխատանքը:

Այս հրահանգը ձեզ կասի, թե ինչպես UI- ի մեծ մասը տեղադրել ամպի մեջ ՝ Arduino / ESP- ի փոխարեն: Այս կերպ վարվելը կփրկի ձեզ տարածության և հիշողության օգտագործման մեջ: Անվճար ստատիկ վեբ էջեր տրամադրող ծառայությունը հատկապես հարմար է որպես «ամպ», ինչպես GitHub Pages- ը, բայց այլ տարբերակներ, հավանաբար, նույնպես կաշխատեն:

Այս կերպ վեբ էջի ստեղծումը պահանջում է, որ օգտագործողի դիտարկիչն անցնի 4 քայլ.

1. Հարցրեք արմատային հասցեն Arduino / ESP- ից
2. Ստացեք շատ պարզ վեբ էջ ՝ ասելով.
3. Ամպից պահանջեք JavaScript ֆայլ
4. Ստացեք կոդը, որը կառուցում է իրական էջը

Այս հրահանգը նաև կբացատրի, թե ինչպես կարելի է համագործակցել Arduino / ESP- ի հետ, երբ էջը պատրաստ լինի վերը նշված քայլերի համաձայն:

Այս հրահանգի վրա ստեղծված կոդը կարելի է գտնել նաև GitHub- ում:

Նախադրյալներ

Այս հրահանգը ենթադրում է, որ դուք մուտք եք գործել որոշակի նյութեր և որոշ նախնական գիտելիքներ.

• Arduino (ցանցի հասանելիությամբ) / ESP
• Համակարգիչ `վերը նշվածը ամրացնելու համար
• WiFi- ին միացված է ինտերնետին
• Arduino IDE- ն տեղադրված է (նաև ESP32- ի համար)
• Դուք գիտեք, թե ինչպես էսքիզ տեղադրել ձեր IoT սարքում
• Դուք գիտեք, թե ինչպես օգտագործել Git & GitHub- ը

Քայլ 1: Սկսեք պարզ վեբ սերվերի ուրվագծով

Մենք կսկսենք հնարավորինս պարզ, և թող այն աճի այստեղից:

#ներառում

const char* ssid = "Yoursid"; const char* գաղտնաբառ = "yourpasswd"; WiFiServer սերվեր (80); void setup () {// Նախաստորագրեք սերիալը և սպասեք նավահանգստի բացմանը. Serial.begin (115200); իսկ (! Սերիա) {; // սպասեք սերիական նավահանգստի միացմանը: Անհրաժեշտ է միայն մայրենի USB պորտի համար} WiFi.begin (ssid, գաղտնաբառ); while (WiFi.status ()! = WL_CONNECTED) {ուշացում (500); Serial.print ("."); } Serial.println ("WiFi- ն միացված է"); Serial.println ("IP հասցե` "); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// լսեք մուտքային հաճախորդների համար WiFiClient client = server.available (); // լսել մուտքային հաճախորդների համար bool sendResponse = false; // սահմանել true, եթե ցանկանում ենք պատասխան ուղարկել String urlLine = ""; // կազմեք տող ՝ պահանջվող URL- ն պահելու համար, եթե (հաճախորդ) // եթե հաճախորդ եք ստանում, {Serial.println («Նոր հաճախորդ»); // հաղորդագրություն տպել սերիական նավահանգստից String currentLine = ""; // կատարել տող ՝ հաճախորդի մուտքային տվյալները պահելու համար (client.connected ()) // հանգույց, իսկ հաճախորդը միացված է {if (client.available ()) // եթե հաճախորդից կարդալու բայթեր կան, {char c = client.read (); // կարդալ բայթ, ապա եթե (c == '\ n') // եթե բայթը նոր տողի նիշ է {// եթե ընթացիկ տողը դատարկ է, անընդմեջ ստացել եք երկու նոր տողի նիշ: // սա հաճախորդի HTTP հարցման վերջն է, այնպես որ ուղարկեք պատասխան. if (currentLine.length () == 0) {sendResponse = true; // ամեն ինչ լավ է! ընդմիջում; // դուրս գալ while loop- ից} else // եթե նոր գիծ ունեք, ապա ջնջեք currentLine- ը ՝ {if (currentLine.indexOf ("GET /")> = 0) // սա պետք է լինի URL տողը {urlLine = currentLine; // պահպանել այն հետագա օգտագործման համար} currentLine = ""; // զրոյացնել ընթացիկ գծի տողը}} այլ դեպքում, եթե (c! = '\ r') // եթե այլ բան ունեք, քան կառքը վերադարձնելու նշանը, {currentLine += c; // ավելացնել այն ընթացիկ գծի վերջում}}} if (sendResponse) {Serial.print («Հաճախորդը պահանջվել է»); Serial.println (urlLine); // HTTP վերնագրերը միշտ սկսվում են պատասխան կոդով (օրինակ ՝ HTTP/1.1 200 OK) // և բովանդակության տեսակով, որպեսզի հաճախորդը իմանա, թե ինչ է սպասվում, այնուհետև դատարկ տող ՝ client.println («HTTP/1.1 200 OK»); client.println ("Բովանդակության տեսակ. տեքստ/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // եթե URL- ն ընդամենը a / / է {// HTTP պատասխանի բովանդակությունը հետևում է վերնագրին ՝ client.println ("Բարև աշխարհ!"); } // HTTP պատասխանը ավարտվում է մեկ այլ դատարկ տողով ՝ client.println (); } // փակել կապը. client.stop (); Serial.println ("Հաճախորդն անջատված է"); }}

Պատճենեք վերը նշված կոդը կամ ներբեռնեք այն GitHub- ի կատարումից:

Մի մոռացեք փոխել SSID- ը և գաղտնաբառը ՝ ձեր ցանցին համապատասխանելու համար:

Այս ուրվագիծը օգտագործում է հայտնի Arduino- ն

կարգավորում ()

եւ

հանգույց ()

գործառույթները: Մեջ

կարգավորում ()

գործառույթը IDE- ի հետ սերիական կապը նախաստորագրված է, ինչպես նաև WiFi- ն: Երբ WiFi- ն միացված է նշված SSID- ին, IP- ն տպվում է և գործարկվում է վեբ սերվերը: -Ի յուրաքանչյուր կրկնության մեջ

հանգույց ()

գործառույթը, վեբ սերվերը ստուգվում է կապված հաճախորդների համար: Եթե հաճախորդը միացված է, հարցումը կարդացվում է, և պահանջվող URL- ը պահվում է փոփոխականի մեջ: Եթե ամեն ինչ կարգին է թվում, սերվերից հաճախորդին պատասխանը կատարվում է ՝ հիմնված պահանջվող URL- ի վրա:

WԳՈՇԱՈՄ Այս կոդը օգտագործում է Arduino String դասը `այն պարզ պահելու համար: Լարային օպտիմալացումն այս հրահանգի շրջանակներում չէ: Այս մասին ավելին կարդացեք Arduino լարային մանիպուլյացիայի մասին `նվազագույն խաչի միջոցով:

Քայլ 2: Ստեղծեք հեռակա JavaScript

Arduino / ESP- ը այցելուների դիտարկիչին կասի բեռնել այս մեկ ֆայլը: Մնացած բոլորը կկատարվեն այս JavaScript ծածկագրով:

Այս Instructable- ում մենք կօգտագործենք jQuery- ը, սա խիստ անհրաժեշտ չէ, բայց ամեն ինչ կդյուրացնի:

Այս ֆայլը պետք է հասանելի լինի համացանցից, ստատիկ էջերի սերվեր բավական է, որպեսզի այն աշխատի, օրինակ ՝ GitHub էջերը: Այսպիսով, հավանաբար կցանկանաք ստեղծել նոր GitHub պահոց և ստեղծել

gh- էջեր

մասնաճյուղ: Տեղադրեք հետևյալ ծածկագիրը a- ի ներսում

.js

ֆայլը պահեստում `ճիշտ մասնաճյուղում:

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (գործառույթ () {var script = document.createElement ('script'); // ստեղծել տարր script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // սահմանել src = "" հատկանիշ script.onload = գործառույթ () // հետադարձման գործառույթ, որը կոչվում է jquery ֆայլը բեռնվելուց հետո {$ = window.jQuery; // jQuery- ին հասանելի դարձնել որպես գլոբալ $ փոփոխական init (); // զանգահարել init գործառույթ}; փաստաթուղթ: getElementsByTagName ('գլուխ') [0].appendChild (սցենար); // ավելացնել ստեղծված պիտակը փաստաթղթում, սա կսկսի jQuery lib} - ի բեռնումը) (); գործառույթը init () {// Կատարված է jQuery- ի բեռնումը, ավելի ուշ այստեղ կավելացնի կոդը…}

Պատճենեք վերը նշված կոդը կամ ներբեռնեք այն GitHub- ի կատարումից:

Ստուգեք, արդյոք ձեր ֆայլը հասանելի է: GitHub- ի էջերի դեպքում անցեք https://username.github.io/repository/your-file.j… (փոխարինեք

օգտագործողի անունը

,

շտեմարան

եւ

your-file.js

ճիշտ պարամետրերի համար):

Քայլ 3: Հեռակա JavaScript ֆայլը բեռնեք Այցելուների դիտարկիչում

Այժմ, երբ մենք ամեն ինչ կարգավորել ենք, ժամանակն է ստիպել վեբ էջին բեռնել հեռակա JavaScript ֆայլը:

Դուք կարող եք դա անել ՝ փոխելով ուրվագծի 88 -րդ տողը

client.println («Բարև աշխարհ»); տ

client.println ("");

(փոխել

src

հատկանիշ ՝ մատնանշելու ձեր սեփական JavaScript ֆայլը): Սա փոքր HTML վեբ էջ է, այն ամենը, ինչ անում է, JavaScript ֆայլը բեռնել այցելուների բրաուզերում:

Փոփոխված ֆայլը կարող եք գտնել նաև GitHub- ի համապատասխան կատարման մեջ:

Վերբեռնեք ճշգրտված ուրվագիծը ձեր Arduino / ESP- ում:

Քայլ 4: Նոր տարրեր ավելացնել էջին

Դատարկ էջն անիմաստ է, ուստի ժամանակն է, որ նոր տարր ավելացնենք վեբ էջին: Առայժմ սա կլինի YouTube տեսանյութ: Այս օրինակում դա կատարելու համար կօգտագործվեն որոշ jQuery կոդեր:

Կոդին ավելացրեք հետևյալ տողը

init ()

գործառույթը:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({լայնությունը `'608px', բարձրությունը: '342px'}): appendTo ('մարմին');

Սա կստեղծի մի

iframe

տարր, սահմանեք ճիշտը

src

վերագրել և սահմանել չափը css- ի միջոցով և տարրը ավելացնել էջի մարմնին:

jQuery- ն օգնում է մեզ հեշտությամբ ընտրել և փոփոխել վեբ էջի տարրերը ՝ որոշ հիմնական բաներ, որոնք պետք է իմանալ.

• $ («մարմին»)

• ընտրում է արդեն գոյություն ունեցող ցանկացած տարր, կարող են օգտագործվել նաև այլ css ընտրիչներ

• $(' ')

  ստեղծում է նորը

• տարր (բայց չի ավելացնում այն փաստաթղթին)

• .appendTo ('. հիմնական')

• ընտրված/ստեղծված տարրը կցում է css դասի «հիմնական» տարրին

• Այլ գործառույթներ են ՝ տարրեր ավելացնելու համար

  .հավելել ()

  ,

  .հավելել ()

  ,

  .prependTo ()

  ,

  .տեղադրել ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .հետո ()

  ,

  .նախքան()

Եթե ինչ -որ բան անհասկանալի է, նայեք GitHub- ի համապատասխան պարտավորությանը:

Քայլ 5: Ինտերակտիվ տարրեր

Տեսանյութը զվարճալի է, բայց այս ուսուցանելու նպատակը Arduino / ESP- ի հետ փոխգործակցությունն է: Եկեք տեսանյութը փոխարինենք կոճակով, որը տեղեկատվություն է փոխանցում Arduino / ESP- ին և նաև սպասում պատասխանին:

Մեզ պետք կլինի ա

$('')

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

$ (''). տեքստ ('մի կոճակ'). վրա ('սեղմել', գործառույթ ()

{// կոդը այստեղ կկատարվի, երբ կոճակը սեղմվի}). appendTo ('body');

Եվ հետադարձ կապի գործառույթին ավելացրեք AJAX հարցումը.

$.get ('/ajax', գործառույթ (տվյալներ)

{// կոդը այստեղ կկատարվի, երբ AJAX հարցումն ավարտվի});

Հարցումն ավարտվելուց հետո վերադարձված տվյալները կավելացվեն էջին.

$('

').տեքստ (տվյալներ).appendTo (' մարմին ');

Ամփոփելով ՝ վերը նշված ծածկագիրը ստեղծում է կոճակ, ավելացնում այն վեբ էջին, երբ կոճակը սեղմելու դեպքում հարցումը կուղարկվի և պատասխանը նույնպես կավելացվի վեբ էջին:

Եթե սա առաջին անգամն է, երբ հետադարձ կապ եք օգտագործում, գուցե ցանկանաք ստուգել GitHub- ի կատարումը `տեսնելու համար, թե ինչպես է ամեն ինչ տեղադրված:

Քայլ 6: Արձագանքեք ինտերակտիվ տարրին

Իհարկե, AJAX- ի հարցումը պահանջում է պատասխան:

Forիշտ պատասխան ստեղծելու համար

/այաքս

url մենք պետք է ավելացնենք

այլ դեպքում, եթե ()

if հայտարարության փակման փակագծից անմիջապես հետո, որը ստուգում է

/

url

այլապես, եթե (urlLine.indexOf ("GET /ajax")> = 0)

{client.print («Բարև!»); }

GitHub- ում կատարված պարտավորության մեջ ես ավելացրել եմ նաև հաշվիչ ՝ դիտարկիչին ցույց տալու համար, որ յուրաքանչյուր հարցում յուրահատուկ է:

Քայլ 7: Եզրակացություն

Սա ուսանելիի ավարտն է: Դուք այժմ ունեք Arduino / ESP, որը սպասարկում է մի փոքր վեբ էջ, որը այցելուների դիտարկիչին ասում է ամպից JavaScript ֆայլ բեռնելու մասին: JavaScript- ը բեռնվելուց հետո այն հավաքում է վեբ էջի մնացած բովանդակությունը `օգտվողին տրամադրելով UI Arduino / ESP- ի հետ հաղորդակցման միջերես:

Այժմ ձեր երևակայության խնդիրն է ՝ ստեղծել ավելի շատ տարրեր վեբ էջում և պարամետրերը պահպանել տեղական ռոմի վրա (EEPROM / NVS / և այլն):

Շնորհակալություն կարդալու համար, և խնդրում ենք ազատ զգալ տալ որոշ կարծիքներ: