Įkelkite „Arduino“/ESP konfigūracijos tinklalapį iš debesies: 7 veiksmai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:48

Kurdami „Arduino“/ ESP (ESP8266 / ESP32) projektą, galite tiesiog viską koduoti. Tačiau dažniausiai kažkas pasirodo ir galų gale vėl prijungsite savo „IoT“įrenginį prie savo IDE. Arba tiesiog pritraukėte daugiau žmonių prieigai prie konfigūracijos ir norite pateikti vartotojo sąsają, o ne tikėtis, kad jie supras vidinę veiklą.

Ši pamoka jums pasakys, kaip didžiąją dalį vartotojo sąsajos įdėti į debesį, o ne į „Arduino“/ ESP. Jei tai padarysite, sutaupysite vietos ir atminties naudojimo. Paslauga, teikianti nemokamus statinius tinklalapius, yra ypač tinkama kaip „debesys“, kaip „GitHub Pages“, tačiau tikriausiai veiks ir kitos parinktys.

Norint sukurti tinklalapį tokiu būdu, vartotojo naršyklė turi atlikti 4 veiksmus:

1. Prašykite pagrindinio URL iš „Arduino“/ ESP
2. Gaukite labai paprastą tinklalapį, kuriame nurodoma:
3. Pateikite „JavaScript“failo užklausą iš debesies
4. Gaukite kodą, kuris sukuria tikrąjį puslapį

Ši instrukcija taip pat paaiškins, kaip sąveikauti su „Arduino“/ ESP, kai puslapis bus paruoštas, kaip nurodyta aukščiau.

Šioje instrukcijoje sukurtą kodą taip pat galima rasti „GitHub“.

Būtinos sąlygos

Šioje pamokoje daroma prielaida, kad turite prieigą prie tam tikros medžiagos ir tam tikrų išankstinių žinių:

• „Arduino“(su prieiga prie tinklo) / ESP
• Kompiuteris, prie kurio galima prijungti aukščiau pateiktą informaciją
• „WiFi“prieiga prie interneto
• Įdiegta „Arduino IDE“(taip pat skirta ESP32)
• Jūs žinote, kaip įkelti eskizą į savo daiktų interneto įrenginį
• Jūs žinote, kaip naudotis „Git & GitHub“

1 veiksmas: pradėkite nuo paprasto tinklalapio eskizo

Pradėsime kuo paprasčiau ir nuo šiol leiskite jam augti.

#įtraukti

const char* ssid = "tavo"; const char* slaptažodis = "yourpasswd"; „WiFiServer“serveris (80); void setup () {// Inicijuokite seriją ir palaukite, kol bus atidarytas prievadas: Serial.begin (115200); while (! Serial) {; // laukti, kol serijinis prievadas prisijungs. Reikalingas tik vietiniam USB prievadui} WiFi.begin (ssid, slaptažodis); while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serijinis atspaudas ("."); } Serial.println ("prijungtas" WiFi "); Serial.println ("IP adresas:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// klausytis gaunamų klientų WiFiClient client = server.available (); // klausytis gaunamų klientų bool sendResponse = false; // nustatykite į true, jei norime išsiųsti atsakymą String urlLine = ""; // sukurkite eilutę, kurioje būtų prašomas URL, jei (klientas) // jei gausite klientą, {Serial.println ("Naujas klientas"); // išspausdinti pranešimą iš nuoseklaus prievado String currentLine = ""; // sukurkite eilutę, kuri saugotų įeinančius duomenis iš kliento, kol (client.connected ()) // ciklas, kol klientas yra prijungtas {if (client.available ()) // jei yra baitų, kuriuos reikia skaityti iš kliento, {char c = client.read (); // skaitykite baitą, tada jei (c == '\ n') // jei baitas yra naujos eilutės simbolis {// jei dabartinė eilutė tuščia, gavote du naujos eilutės simbolius iš eilės. // tai kliento HTTP užklausos pabaiga, todėl atsiųskite atsakymą: if (currentLine.length () == 0) {sendResponse = true; // Viskas gerai! pertrauka; // išeiti iš ciklo while}} // jei gavote naują eilutę, tada išvalykite currentLine: {if (currentLine.indexOf ("GET /")> = 0) // tai turėtų būti URL eilutė {urlLine = currentLine; // išsaugoti vėlesniam naudojimui} currentLine = ""; // iš naujo nustatyti dabartinės eilutės eilutę}} else if (c! = '\ r') // jei turite ką nors kita, išskyrus vežimo grąžinimo simbolį, {currentLine += c; // pridėkite jį prie dabartinės eilutės pabaigos}}} if (sendResponse) {Serial.print („Klientas paprašytas“); Serial.println (urlLine); // HTTP antraštės visada prasideda nuo atsakymo kodo (pvz., HTTP/1.1 200 OK) // ir turinio tipo, kad klientas žinotų, kas bus, tada tuščia eilutė: client.println („HTTP/1.1 200 OK“); client.println ("Turinio tipas: tekstas/html"); klientas.println (); if (urlLine.indexOf ("GET /")> = 0) // jei URL yra tik " /" {// HTTP atsakymo turinys seka antraštę: client.println ("Labas pasaulis!"); } // HTTP atsakymas baigiasi kita tuščia eilute: client.println (); } // uždaryti ryšį: client.stop (); Serial.println („Klientas atjungtas“); }}

Nukopijuokite aukščiau esantį kodą arba atsisiųskite jį iš „GitHub“įsipareigojimo.

Nepamirškite pakeisti SSID ir slaptažodžio, kad atitiktų jūsų tinklą.

Šiame eskize naudojamas gerai žinomas „Arduino“

sąranka ()

ir

kilpa ()

funkcijas. Viduje konors

sąranka ()

funkcija inicijuoja nuoseklųjį ryšį su IDE, taip pat „WiFi“. Kai „WiFi“yra prijungtas prie minėto SSID, IP atspausdinamas ir paleidžiama žiniatinklio serveris. Kiekvienoje iteracijoje

kilpa ()

patikrinta, ar žiniatinklio serveryje nėra prijungtų klientų. Jei klientas prijungtas, užklausa skaitoma ir prašomas URL išsaugomas kintamajame. Jei viskas atrodo gerai, serverio atsakymas klientui atliekamas pagal prašomą URL.

ĮSPĖJIMAS! Šis kodas naudoja „Arduino String“klasę, kad būtų paprasta. Eilutės optimizavimas nepatenka į šią instrukciją. Skaitykite daugiau apie tai instrukcijoje apie manipuliavimą „Arduino String“naudojant minimalų ram.

2 veiksmas: kurkite nuotolinį „JavaScript“

„Arduino“/ ESP lieps lankytojų naršyklei įkelti šį failą. Visa kita bus padaryta naudojant šį „JavaScript“kodą.

Šioje instrukcijoje mes naudosime „jQuery“, tai nėra būtina, tačiau tai palengvins.

Šis failas turi būti pasiekiamas iš žiniatinklio, tam pakanka statinio puslapių serverio, pavyzdžiui, „GitHub“puslapių. Taigi tikriausiai norėsite sukurti naują „GitHub“saugyklą ir sukurti

gh-puslapiai

šaka. Įdėkite šį kodą į a

.js

failą saugykloje tinkamame filiale.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // sukurti elementą script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // nustatyti src = "" atributas script.onload = function () // atgalinio ryšio funkcija, iškviečiama įkėlus „jquery“failą {$ = window.jQuery; // padaryti „jQuery“prieinamą kaip visuotinį $ kintamąjį init (); // iškviesti init funkciją}; dokumentas. getElementsByTagName ('galva') [0].appendChild (scenarijus); // pridėkite sukurtą žymą prie dokumento, tai pradės įkelti „jQuery lib}“) (); function init () {// Baigta įkelti „jQuery“, vėliau čia pridės kodą …}

Nukopijuokite aukščiau esantį kodą arba atsisiųskite jį iš „GitHub“įsipareigojimo.

Patikrinkite, ar jūsų failas yra prieinamas. Jei naudojate „GitHub“puslapius, eikite į https://username.github.io/repository/your-file.j… (pakeisti

Vartotojo vardas

,

saugykla

ir

jūsų failas.js

už teisingus parametrus).

3 veiksmas: nuotolinio „JavaScript“failo įkėlimas į lankytojų naršyklę

Dabar, kai viskas yra paruošta, laikas priversti tinklalapį įkelti nuotolinį „JavaScript“failą.

Tai galite padaryti pakeisdami eskizo 88 eilutę iš

client.println („Labas pasaulis!“); t

client.println ("");

(pakeisti

src

atributas, nurodantis jūsų „JavaScript“failą). Tai nedidelis html tinklalapis, viskas, ką reikia, yra įkelti „JavaScript“failą į lankytojų naršyklę.

Pakeistą failą taip pat galima rasti atitinkamame „GitHub“įsipareigojime.

Įkelkite sureguliuotą eskizą į „Arduino“/ ESP.

4 veiksmas: naujų elementų pridėjimas prie puslapio

Tuščias puslapis yra nenaudingas, todėl atėjo laikas į tinklalapį įtraukti naują elementą. Kol kas tai bus „YouTube“vaizdo įrašas. Šiame pavyzdyje tam bus naudojami kai kurie „jQuery“kodai.

Pridėkite šią kodo eilutę prie

init ()

funkcija:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({width: '608px', height: '342px'}). AppendTo ('body');

Tai sukurs an

iframe

elementą, nustatykite teisingą

src

atributą ir nustatykite dydį naudodami css ir pridėkite elementą prie puslapio turinio.

„jQuery“padeda lengvai pasirinkti ir pakeisti tinklalapio elementus, kuriuos reikia žinoti:

• $ ('body')

• pasirenka bet kurį jau esamą elementą, taip pat gali būti naudojami kiti css selektoriai

• $(' ')

  sukuria naują

• elementas (bet neprideda jo prie dokumento)

• .appendTo ('. main')

• prideda pasirinktą/sukurtą elementą prie elemento, turinčio css klasę „main“

• Kita elementų pridėjimo funkcija yra

  .pridėti ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  . Įdėti()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .po ()

  ,

  .prieš ()

Jei kas neaišku, peržiūrėkite atitinkamą „GitHub“įsipareigojimą.

5 žingsnis: interaktyvūs elementai

Vaizdo įrašas yra įdomus, tačiau šios instrukcijos tikslas yra bendrauti su „Arduino“/ ESP. Pakeiskite vaizdo įrašą mygtuku, kuris siunčia informaciją į „Arduino“/ ESP ir taip pat laukia atsakymo.

Mums reikės a

$('')

pridėti prie puslapio ir prie jo pridėti įvykių klausytoją. Įvykių klausytojas iškvies atgalinio ryšio funkciją, kai įvyks nurodytas įvykis:

$ (''). text ('a button'). on ('click', function ()

{// kodas čia bus vykdomas spustelėjus mygtuką})). appendTo ('body');

Prie atšaukimo funkcijos pridėkite AJAX užklausą:

$.get ('/ajax', funkcija (duomenys)

{// kodas čia bus vykdomas, kai AJAX užklausa bus baigta});

Kai užklausa bus baigta, grąžinti duomenys bus pridėti prie puslapio:

$('

').text (data).appendTo (' body ');

Apibendrinant galima pasakyti, kad aukščiau pateiktas kodas sukuria mygtuką, prideda jį prie tinklalapio, spustelėjus mygtuką, bus išsiųsta užklausa, o atsakymas taip pat bus pridėtas prie tinklalapio.

Jei tai yra pirmas kartas, kai naudojate atgalinius skambučius, galbūt norėsite patikrinti „GitHub“įsipareigojimą, kad pamatytumėte, kaip viskas įdėta.

6 veiksmas: atsakykite į interaktyvų elementą

Žinoma, į AJAX užklausą reikia atsakyti.

Norėdami sukurti teisingą atsakymą į

/ajax

url, turėsime pridėti

kitaip, jei ()

iškart po uždarymo skliausto if, kuris tikrina

/

url.

else if (urlLine.indexOf ("GET /ajax")> = 0)

{client.print („Labas!“); }

Įvykdydamas „GitHub“taip pat pridėjau skaitiklį, kad parodytų naršyklei, kad kiekviena užklausa yra unikali.

7 žingsnis: Išvada

Tai yra šio pamokymo pabaiga. Dabar turite „Arduino“/ ESP, aptarnaujantį nedidelį tinklalapį, kuris liepia lankytojo naršyklei įkelti „JavaScript“failą iš debesies. Įkėlus „JavaScript“, jis sukuria likusią tinklalapio turinio dalį, suteikdamas vartotojui sąsają su „Arduino“/ ESP.

Dabar jūsų vaizduotė gali sukurti daugiau elementų tinklalapyje ir išsaugoti nustatymus vietoje tam tikrame ROM (EEPROM / NVS / etc).

Dėkojame, kad skaitote, ir nedvejodami duokite atsiliepimų!