Laai u Arduino/ESP Config -webbladsy vanaf die wolk: 7 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:27

As u 'n Arduino / ESP (ESP8266 / ESP32) -projek skep, kan u alles hardkodeer. Maar meer dikwels gebeur daar iets, en u sal weer u IoT-toestel aan u IDE koppel. Of u kry net meer mense toegang tot die konfigurasie en u wil 'n UI bied, in plaas daarvan om te verwag dat hulle die innerlike werking verstaan.

Hierdie instruksies sal u vertel hoe u die grootste deel van die UI in die wolk kan plaas in plaas van op die Arduino / ESP. Deur dit op hierdie manier te doen, bespaar u ruimte en geheueverbruik. 'N Diens wat gratis statiese webblaaie bied, is veral geskik as' wolk ', soos GitHub Pages, maar ander opsies sal waarskynlik ook werk.

Die opbou van die webbladsy vereis dat die gebruiker se blaaier 4 stappe volg:

1. Versoek die root -url van die Arduino / ESP
2. Ontvang 'n baie eenvoudige webblad wat vertel:
3. Versoek 'n JavaScript -lêer uit die wolk
4. Ontvang die kode wat die werklike bladsy opbou

Hierdie instruksie sal ook verduidelik hoe u met die Arduino / ESP kan omgaan sodra die bladsy gereed is volgens die bogenoemde stappe.

Die kode wat op hierdie instruksies geskep is, kan ook op GitHub gevind word.

Voorvereistes

Hierdie instruksies veronderstel dat u toegang tot sekere materiaal en vooraf kennis gehad het:

• 'N Arduino (met netwerk toegang) / ESP
• 'N Rekenaar om bogenoemde aan te heg
• WiFi -toegang gekoppel aan die internet
• Die Arduino IDE geïnstalleer (ook vir die ESP32)
• U weet hoe u 'n skets na u IoT-toestel kan oplaai
• U weet hoe u Git en GitHub moet gebruik

Stap 1: Begin met 'n eenvoudige skets van die webserver

Ons begin so eenvoudig as moontlik en laat dit van hier af groei.

#insluit

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer -bediener (80); ongeldige opstelling () {// Initialiseer reeks en wag totdat poort oopmaak: Serial.begin (115200); terwyl (! Serial) {; // wag totdat die seriële poort verbind is. Net nodig vir inheemse USB -poort} WiFi.begin (ssid, wagwoord); terwyl (WiFi.status ()! = WL_CONNECTED) {vertraging (500); Serial.print ("."); } Serial.println ("WiFi gekoppel."); Serial.println ("IP -adres:"); Serial.println (WiFi.localIP ()); bediener.begin (); } void loop () {// luister na inkomende kliënte WiFiClient client = server.available (); // luister na inkomende kliënte bool sendResponse = false; // op true gestel as ons 'n antwoord wil stuur String urlLine = ""; // maak 'n string om die aangevraagde URL te hou as (kliënt) // as u 'n kliënt kry, {Serial.println ("Nuwe kliënt."); // druk 'n boodskap uit die seriële poort String currentLine = ""; // maak 'n string om inkomende data van die kliënt te hou terwyl (client.connected ()) // loop terwyl die kliënt gekoppel is aan {if (client.available ()) // as daar grepe is om van die kliënt af te lees, {char c = client.read (); // lees 'n greep, en as (c == '\ n') // as die byte 'n nuwe reël is {// as die huidige reël leeg is, kry jy twee nuwe reëlkarakters in 'n ry. // dit is die einde van die HTTP -versoek van die kliënt, stuur 'n antwoord: if (currentLine.length () == 0) {sendResponse = true; // alles is reg! breek; // breek uit die while -lus} anders // as jy 'n nuwe lyn kry, maak die huidige lyn skoon: {if (currentLine.indexOf ("GET /")> = 0) // dit moet die URL -lyn {urlLine = currentLine wees; // stoor dit vir latere gebruik} currentLine = ""; // stel die currentLine String}} anders terug as (c! = '\ r') // as jy iets anders het as 'n koetsretourkarakter, {currentLine += c; // voeg dit by aan die einde van die currentLine}}} if (sendResponse) {Serial.print ("Kliënt versoek"); Serial.println (urlLine); // HTTP-opskrifte begin altyd met 'n antwoordkode (bv. HTTP/1.1 200 OK) // en 'n inhoudstipe sodat die kliënt weet wat kom, dan 'n leë reël: client.println ("HTTP/1.1 200 OK"); client.println ("Inhoudstipe: teks/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // as die URL slegs 'n " /" {// is, die inhoud van die HTTP -antwoord volg die kop: client.println ("Hello world!"); } // Die HTTP -antwoord eindig met nog 'n leë reël: client.println (); } // sluit die verbinding: client.stop (); Serial.println ("Kliënt ontkoppel."); }}

Kopieer die kode hierbo, of laai dit af van die commit op GitHub.

Moenie vergeet om die SSID en wagwoord te verander om by u netwerk te pas nie.

Hierdie skets gebruik die bekende Arduino

stel op()

en

lus ()

funksies. In die

stel op()

Die seriële verbinding met IDE word geïnisialiseer, en die WiFi ook. Sodra die WiFi aan die genoemde SSID gekoppel is, word die IP gedruk en die webbediener begin. In elke herhaling van die

lus ()

funksie word die webserver nagegaan vir gekoppelde kliënte. As 'n kliënt gekoppel is, word die versoek gelees en word die versoekte URL in 'n veranderlike gestoor. As alles goed lyk, word 'n antwoord van die bediener aan die kliënt uitgevoer op grond van die versoekte URL.

WAARSKUWING! Hierdie kode gebruik die Arduino String -klas om dit eenvoudig te hou. Stringoptimalisering is nie binne die omvang van hierdie instruksies nie. Lees meer hieroor in die instruksies oor Arduino String Manipulation Using Minimal Ram.

Stap 2: Skep die eksterne JavaScript

Die Arduino / ESP sal die blaaier van besoekers vertel om hierdie lêer te laai. Die res word deur hierdie JavaScript -kode gedoen.

In hierdie instruksies maak ons gebruik van jQuery; dit is nie streng nodig nie, maar dit sal dinge makliker maak.

Hierdie lêer moet vanaf die internet toeganklik wees; 'n statiese bladsybediener is genoeg om dit te laat werk, byvoorbeeld GitHub -bladsye. U sal dus waarskynlik 'n nuwe GitHub -bewaarplek wil maak en 'n

gh-bladsye

tak. Plaas die volgende kode in a

.js

lêer in die bewaarplek in die korrekte tak.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // skep 'n element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // stel die src = "" kenmerk script.onload = function () // terugbelfunksie, genoem sodra jquery -lêer gelaai is {$ = window.jQuery; // maak jQuery toeganklik as die globale $ veranderlike init (); // bel die init -funksie}; document. getElementsByTagName ('head') [0].appendChild (script); // voeg die geskepte merker by die dokument, dit laai die jQuery lib}) (); funks init () {// Laai jQuery af, sal later hier kode byvoeg …}

Kopieer die kode hierbo, of laai dit af van die commit op GitHub.

Kyk of u lêer toeganklik is. Gaan na GitHub-bladsye na https://username.github.io/repository/your-file.j… (vervang

gebruikersnaam

,

bewaarplek

en

jou-file.js

vir die korrekte parameters).

Stap 3: Laai die eksterne JavaScript -lêer in die besoekersblaaier

Noudat ons alles opgestel het, is dit tyd dat die webblad die eksterne JavaScript -lêer laai.

U kan dit doen deur reël 88 van die skets te verander vanaf

client.println ("Hallo wêreld!"); t

client.println ("");

(verander die

src

kenmerk om na u eie JavaScript -lêer te verwys). Dit is 'n klein html -webblad, al wat u hoef te doen is om die JavaScript -lêer in die besoekersblaaier te laai.

Die gewysigde lêer kan ook gevind word in die ooreenstemmende verbintenis op GitHub.

Laai die aangepaste skets op na u Arduino / ESP.

Stap 4: Voeg nuwe elemente by die bladsy

'N Leë bladsy is nutteloos, daarom is dit nou tyd om 'n nuwe element op die webblad te voeg. Vir eers sal dit 'n YouTube -video wees. In hierdie voorbeeld sal 'n paar jQuery -kodes gebruik word om dit te bereik.

Voeg die volgende reël kode by die

init ()

funksie:

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

Dit sal 'n

iframe

element, stel die korrekte

src

kenmerk en stel die grootte in met behulp van css en voeg die element by die liggaam van die bladsy.

jQuery help ons om elemente op die webblad maklik te kies en te verander, 'n paar basiese dinge om te weet:

• $ ('liggaam')

• kies 'n bestaande element, en ander css -keurders kan ook gebruik word

• $(' ')

  skep 'n nuwe

• element (maar voeg dit nie by die dokument nie)

• .appendTo ('. main')

• voeg die geselekteerde/geskepte element by 'n element met die css -klas 'main'

• Ander funksies om elemente by te voeg is

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .invoeg ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .after ()

  ,

  .voor ()

Kyk na die ooreenstemmende verbintenis op GitHub as iets onduidelik is.

Stap 5: Interaktiewe elemente

'N Video is lekker, maar die doel van hierdie instruksies is om interaksie te hê met die Arduino / ESP. Kom ons vervang die video vir 'n knoppie wat inligting na die Arduino / ESP stuur en wag ook op 'n antwoord.

Ons sal 'n

$('')

om by die bladsy te voeg en 'n gebeurtenis -luisteraar daaraan te koppel. Die eventlistener sal die terugbelfunksie bel as die gespesifiseerde gebeurtenis plaasvind:

$ (''). teks (''n knoppie'). op ('klik', funksie ()

{// kode hier word uitgevoer as op die knoppie geklik word}). appendTo ('body');

En voeg 'n AJAX -versoek by die terugbelfunksie:

$.get ('/ajax', funksie (data)

{// kode hier sal uitgevoer word wanneer die AJAX -versoek voltooi is});

Sodra die versoek voltooi is, sal die teruggestuurde data op die bladsy gevoeg word:

$('

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

Samevattend, die kode hierbo skep 'n knoppie, voeg dit by die webblad, as op die knoppie geklik word, word 'n versoek gestuur en die antwoord sal ook by die webblad gevoeg word.

As dit die eerste keer is dat u terugbelle gebruik, kan u die verbintenis op GitHub nagaan om te sien hoe alles geneste is.

Stap 6: Reageer op die interaktiewe element

Die AJAX -versoek vereis natuurlik 'n antwoord.

Om die korrekte antwoord vir die

/ajax

url moet ons 'n

Anders as()

regs na die sluitingshaak van die if -verklaring wat die

/

url.

anders as (urlLine.indexOf ("GET /ajax")> = 0)

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

In die verbintenis op GitHub het ek ook 'n toonbank bygevoeg om die blaaier te wys dat elke versoek uniek is.

Stap 7: Gevolgtrekking

Dit is die einde van hierdie instruksies. U het nou 'n Arduino / ESP wat 'n klein webblad bedien wat die besoeker se blaaier vertel om 'n JavaScript -lêer uit die wolk te laai. Sodra die JavaScript gelaai is, bou dit die res van die inhoud van die webblad op en bied 'n UI vir die gebruiker om met die Arduino / ESP te kommunikeer.

Nou is dit aan u verbeelding om meer elemente op die webblad te skep en die instellings plaaslik op 'n soort ROM (EEPROM / NVS / ens) te stoor.

Dankie dat u gelees het, en gee gerus terugvoer!