Ielādējiet savu Arduino/ESP konfigurācijas tīmekļa vietni no mākoņa: 7 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Veidojot Arduino / ESP (ESP8266 / ESP32) projektu, jūs varētu vienkārši visu kodēt. Bet biežāk kaut kas parādās, un jūs atkal pievienosit savu IoT ierīci savai IDE. Vai arī jūs tikko saņēmāt vairāk cilvēku, kas piekļūst konfigurācijai, un vēlaties nodrošināt lietotāja saskarni, nevis gaidīt, ka viņi saprot iekšējo darbību.

Šī pamācība jums pateiks, kā lielāko daļu lietotāja saskarnes ievietot mākonī, nevis Arduino / ESP. Šādi rīkojoties, ietaupīsiet vietu un atmiņas izmantošanu. Pakalpojums, kas nodrošina bezmaksas statiskas tīmekļa lapas, ir īpaši piemērots kā “mākonis”, piemēram, GitHub Pages, taču, iespējams, derēs arī citas iespējas.

Lai izveidotu tīmekļa lapu šādā veidā, lietotāja pārlūkprogrammai ir jāveic četras darbības:

1. Pieprasiet saknes URL no Arduino / ESP
2. Saņemiet ļoti vienkāršu tīmekļa lapu, kurā teikts:
3. Pieprasiet JavaScript failu no mākoņa
4. Saņemiet kodu, kas veido faktisko lapu

Šajā pamācībā tiks arī paskaidrots, kā mijiedarboties ar Arduino / ESP, kad lapa ir gatava, kā norādīts iepriekš.

Šajā pamācībā izveidotais kods ir atrodams arī vietnē GitHub.

Priekšnosacījumi

Šajā pamācībā tiek pieņemts, ka jums ir piekļuve noteiktiem materiāliem un dažas iepriekšējas zināšanas:

• Arduino (ar piekļuvi tīklam) / ESP
• Dators, kuram pievienot iepriekš minēto
• Wi -Fi piekļuve internetam
• Instalēta Arduino IDE (arī ESP32)
• Jūs zināt, kā augšupielādēt skici savā IoT ierīcē
• Jūs zināt, kā izmantot Git & GitHub

1. darbība. Sāciet ar vienkāršu tīmekļa servera skici

Mēs sāksim pēc iespējas vienkāršāk un turpmāk ļausim tam augt.

#iekļaut

const char* ssid = "tavsids"; const char* parole = "yourpasswd"; WiFi servera serveris (80); void setup () {// Inicializējiet sēriju un gaidiet porta atvēršanu: Serial.begin (115200); while (! Serial) {; // pagaidiet, līdz tiek izveidots seriālais ports. Nepieciešams tikai vietējam USB portam} WiFi.begin (ssid, parole); while (WiFi.status ()! = WL_CONNECTED) {kavēšanās (500); Sērijas nospiedums ("."); } Serial.println ("savienots WiFi"); Serial.println ("IP adrese:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// klausīties ienākošos klientus WiFiClient client = server.available (); // klausīties ienākošos klientus bool sendResponse = false; // iestatiet uz true, ja vēlamies nosūtīt atbildi String urlLine = ""; // izveidojiet virkni, lai turētu pieprasīto URL, ja (klients) // ja saņemat klientu, {Serial.println ("Jauns klients"); // izdrukāt ziņojumu no seriālā porta String currentLine = ""; // izveidojiet virkni, lai turētu ienākošos datus no klienta, kamēr (client.connected ()) // cilpa, kamēr klients ir savienots {if (client.available ()) // ja ir baiti, ko nolasīt no klienta, {char c = klients.lasīt (); // lasiet baitu, tad, ja (c == '\ n') // ja baits ir jaunas rindas rakstzīme {// ja pašreizējā rinda ir tukša, jums ir divas jaunas rindas rakstzīmes pēc kārtas. // ar to beidzas klienta HTTP pieprasījums, tāpēc nosūtiet atbildi: if (currentLine.length () == 0) {sendResponse = true; // viss kārtībā! pārtraukums; // izlauzties no cikla cilpas} else // ja jums ir jauna rinda, tad notīriet currentLine: {if (currentLine.indexOf ("GET /")> = 0) // šai jābūt URL rindai {urlLine = currentLine; // saglabājiet to vēlākai lietošanai} currentLine = ""; // atiestatīt currentLine virkni}} else if (c! = '\ r') // ja jums ir kaut kas cits, izņemot vagonu atgriešanās rakstzīmi, {currentLine += c; // pievienojiet to pašreizējās rindas beigām}}} if (sendResponse) {Serial.print ("Klients pieprasīts"); Serial.println (urlLine); // HTTP galvenes vienmēr sākas ar atbildes kodu (piemēram, HTTP/1.1 200 OK) // un satura tipu, lai klients zinātu, kas nāk, tad tukšu rindu: client.println ("HTTP/1.1 200 OK"); client.println ("Satura tips: teksts/html"); klients.println (); if (urlLine.indexOf ("GET /")> = 0) // ja URL ir tikai " /" {// HTTP atbildes saturs seko galvenei: client.println ("Sveika pasaule!"); } // HTTP atbilde beidzas ar citu tukšu rindu: client.println (); } // slēgt savienojumu: client.stop (); Serial.println ("Klients atvienots."); }}

Kopējiet iepriekš minēto kodu vai lejupielādējiet to no GitHub apņemšanās.

Neaizmirstiet nomainīt SSID un paroli, lai tie atbilstu jūsu tīklam.

Šajā skicē tiek izmantots labi pazīstamais Arduino

uzstādīt()

un

cilpa ()

funkcijas. Iekš

uzstādīt()

funkcija ir inicializēts seriālais savienojums ar IDE, tāpat kā WiFi. Kad WiFi ir savienots ar minēto SSID, tiek izdrukāts IP un palaists tīmekļa serveris. Katrā atkārtojumā

cilpa ()

Lai pārbaudītu, vai tīmekļa serveris nav saistīts ar klientiem. Ja klients ir savienots, pieprasījums tiek nolasīts un pieprasītais URL tiek saglabāts mainīgajā. Ja viss šķiet kārtībā, servera atbilde klientam tiek veikta, pamatojoties uz pieprasīto URL.

BRĪDINĀJUMS! Šis kods izmanto klasi Arduino String, lai tā būtu vienkārša. Virkņu optimizācija neietilpst šajā instrukcijā. Lasiet vairāk par to pamācībā par Arduino stīgu manipulāciju, izmantojot minimālo ram.

2. darbība. Attālā JavaScript izveide

Arduino / ESP pateiks apmeklētāju pārlūkprogrammai ielādēt šo vienu failu. Viss pārējais tiks veikts ar šo JavaScript kodu.

Šajā pamācībā mēs izmantosim jQuery, tas nav absolūti nepieciešams, bet atvieglos lietas.

Šim failam jābūt pieejamam no tīmekļa, pietiek ar statisku lapu serveri, lai tas darbotos, piemēram, GitHub lapas. Tāpēc jūs, iespējams, vēlēsities izveidot jaunu GitHub krātuvi un izveidot

gh-lapas

filiāle. Ievietojiet šādu kodu a

.js

failu repozitorijā pareizajā nozarē.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // izveidot elementu script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // iestatiet src = "" atribūts script.onload = function () // atzvanīšanas funkcija, ko sauc pēc jquery faila ielādes {$ = window.jQuery; // padarīt jQuery pieejamu kā globālo $ mainīgo init (); // izsaukt init funkciju}; document. getElementsByTagName ('galva') [0].appendChild (skripts); // pievienojiet izveidoto tagu dokumentam, tas sāks ielādēt jQuery lib}) (); function init () {// Gatavs, ielādējot jQuery, vēlāk šeit pievienos kodu…}

Kopējiet iepriekš minēto kodu vai lejupielādējiet to no GitHub apņemšanās.

Pārbaudiet, vai jūsu fails ir pieejams. GitHub lapu gadījumā dodieties uz vietni https://username.github.io/repository/your-file.j… (aizstāt

lietotājvārds

,

krātuve

un

jūsu fails.js

par pareiziem parametriem).

3. darbība. Attālā JavaScript faila ielāde apmeklētāju pārlūkprogrammā

Tagad, kad viss ir sagatavots, ir pienācis laiks likt tīmekļa lapai ielādēt attālo JavaScript failu.

To var izdarīt, mainot skices 88. rindu no

client.println ("Sveika pasaule!"); t

client.println ("");

(nomaini

src

atribūtu, lai norādītu uz jūsu pašu JavaScript failu). Šī ir neliela html tīmekļa lapa. Viss, kas nepieciešams, ir ielādēt JavaScript failu apmeklētāju pārlūkprogrammā.

Izmainīto failu var atrast arī atbilstošajā GitHub apņemšanās.

Augšupielādējiet pielāgoto skici savā Arduino / ESP.

4. solis: jaunu elementu pievienošana lapai

Tukša lapa ir bezjēdzīga, tāpēc tagad ir pienācis laiks tīmekļa vietnei pievienot jaunu elementu. Pagaidām tas būs YouTube video. Šajā piemērā, lai to paveiktu, tiks izmantoti daži jQuery kodi.

Pievienojiet šai koda rindai

tajā()

funkcija:

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

Tas radīs

iframe

elements, iestatiet pareizo

src

atribūtu un iestatiet izmēru, izmantojot css, un pievienojiet elementu lapas pamattekstam.

jQuery palīdz mums viegli izvēlēties un mainīt tīmekļa lapas elementus, dažas pamata lietas, kas jāzina:

• $ ('body')

• atlasa jebkuru jau esošu elementu, var izmantot arī citus css atlasītājus

• $(' ')

  rada jaunu

• elements (bet nepievieno to dokumentam)

• .appendTo ('. galvenais')

• pievieno izvēlēto/izveidoto elementu elementam ar css klasi 'main'

• Citas elementu pievienošanas funkcijas ir

  .pielikt ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  . pēc ()

  ,

  .pirms ()

Apskatiet atbilstošo saistību vietnē GitHub, ja kaut kas nav skaidrs.

5. darbība. Interaktīvie elementi

Video ir jautrs, taču šīs pamācības mērķis ir mijiedarboties ar Arduino / ESP. Aizstāsim videoklipu uz pogas, kas nosūta informāciju uz Arduino / ESP un arī gaida atbildi.

Mums vajadzēs a

$('')

lai pievienotu lapai un pievienotu tai notikumu klausītāju. Notikumu klausītājs izsauks atzvanīšanas funkciju, kad notiks norādītais notikums:

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

{// kods šeit tiks izpildīts, noklikšķinot uz pogas}). appendTo ('body');

Un atzvanīšanas funkcijai pievienojiet AJAX pieprasījumu:

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

{// kods šeit tiks izpildīts, kad AJAX pieprasījums būs pabeigts});

Kad pieprasījums ir pabeigts, atgrieztie dati tiks pievienoti lapai:

$('

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

Rezumējot, iepriekš minētais kods izveido pogu, pievieno to tīmekļa lapai, noklikšķinot uz pogas, tiks nosūtīts pieprasījums un atbilde tiks pievienota arī tīmekļa lapai.

Ja šī ir pirmā reize, kad izmantojat atzvanīšanu, iespējams, vēlēsities pārbaudīt saistības vietnē GitHub, lai redzētu, kā viss ir ligzdots.

6. darbība. Atbildiet uz interaktīvo elementu

Protams, AJAX pieprasījums prasa atbildi.

Lai izveidotu pareizo atbildi uz

/ajax

url mums būs jāpievieno

citādi, ja ()

tūlīt pēc paziņojuma if, kas pārbauda

/

url.

cits, ja (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Sveiki!"); }

Saistībā ar GitHub esmu pievienojis arī skaitītāju, lai pārlūkprogrammai parādītu, ka katrs pieprasījums ir unikāls.

7. solis. Secinājums

Tas ir šīs pamācības beigas. Tagad jums ir Arduino / ESP, kas apkalpo nelielu tīmekļa lapu, kas apmeklētāja pārlūkprogrammai liek ielādēt JavaScript failu no mākoņa. Kad JavaScript ir ielādēts, tas veido pārējo tīmekļa lapas saturu, nodrošinot lietotājam saskarni ar Arduino / ESP.

Tagad jūsu iztēle ir atkarīga no tā, vai tīmekļa vietnē izveidot vairāk elementu un lokāli saglabāt iestatījumus kādā ROM (EEPROM / NVS / utt.).

Paldies, ka lasījāt, un, lūdzu, sniedziet atsauksmes!