Indholdsfortegnelse:

Indlæs din Arduino/ESP Config -webside fra skyen: 7 trin
Indlæs din Arduino/ESP Config -webside fra skyen: 7 trin

Video: Indlæs din Arduino/ESP Config -webside fra skyen: 7 trin

Video: Indlæs din Arduino/ESP Config -webside fra skyen: 7 trin
Video: ESP32 Turorial 1 - Introduction to SunFounder's ESP32 IoT Learnig kit Software and Arduino IDE 2024, November
Anonim
Indlæs din Arduino/ESP Config -webside fra skyen
Indlæs din Arduino/ESP Config -webside fra skyen

Når du opretter et Arduino / ESP (ESP8266 / ESP32) projekt, kan du bare hardcode alt. Men oftere end ikke dukker der noget op, og du ender med at slutte din IoT-enhed til din IDE igen. Eller du har lige fået flere mennesker til at få adgang til konfigurationen, og du vil give et brugergrænseflade i stedet for at forvente, at de forstår det indre arbejde.

Denne instruktive vil fortælle dig, hvordan du sætter det meste af brugergrænsefladen i skyen i stedet for på Arduino / ESP. Hvis du gør det på denne måde, sparer du plads og hukommelsesforbrug. En tjeneste, der leverer gratis statiske websider, er især velegnet som "sky", ligesom GitHub Pages, men andre muligheder fungerer sandsynligvis også.

Opbygning af websiden på denne måde kræver, at brugerens browser gennemgår fire trin:

Billede
Billede
  1. Anmod om root -url fra Arduino / ESP
  2. Modtag en meget enkel webside, der fortæller:
  3. Anmod om en JavaScript -fil fra skyen
  4. Modtag den kode, der opbygger den faktiske side

Denne instruktionsbog vil også forklare, hvordan man interagerer med Arduino / ESP, når siden er klar i henhold til ovenstående trin.

Koden oprettet på denne instruerbare kan også findes på GitHub.

Forudsætninger

Denne instruktive forudsætter, at du har adgang til visse materialer og noget forudgående viden:

  • En Arduino (med netværksadgang) / ESP
  • En computer til at vedhæfte ovenstående til
  • WiFi -forbindelse forbundet til internettet
  • Arduino IDE installeret (også til ESP32)
  • Du ved, hvordan du uploader en skitse til din IoT-enhed
  • Du ved, hvordan du bruger Git & GitHub

Trin 1: Start med en simpel Webserver -skitse

Starter med en enkel Webserver -skitse
Starter med en enkel Webserver -skitse

Vi starter så enkelt som muligt, og lader det vokse herfra.

#omfatte

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer -server (80); void setup () {// Initialiser seriel og vent på port åbnes: Serial.begin (115200); mens (! Seriel) {; // vent på, at den serielle port skal oprette forbindelse. Kræves kun til indbygget USB -port} WiFi.begin (ssid, adgangskode); mens (WiFi.status ()! = WL_CONNECTED) {forsinkelse (500); Serial.print ("."); } Serial.println ("WiFi tilsluttet."); Serial.println ("IP -adresse:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// lyt efter indgående klienter WiFiClient -klient = server.available (); // lyt efter indgående klienter bool sendResponse = false; // sat til true, hvis vi vil sende et svar String urlLine = ""; // lav en streng for at holde den ønskede URL, hvis (klient) // hvis du får en klient, {Serial.println ("Ny klient."); // udskriv en besked ud af den serielle port String currentLine = ""; // lav en streng for at gemme indgående data fra klienten, mens (client.connected ()) // loop, mens klienten er forbundet {if (client.available ()) // hvis der er bytes at læse fra klienten, {char c = client.read (); // læs en byte, så hvis (c == '\ n') // hvis byten er et nylinjetegn {// hvis den aktuelle linje er tom, har du to nylinjetegn i en række. // det er slutningen på klientens HTTP -anmodning, så send et svar: if (currentLine.length () == 0) {sendResponse = true; // alt er fint! pause; // bryde ud af mens loop} ellers // hvis du fik en ny linje, skal du rydde currentLine: {if (currentLine.indexOf ("GET /")> = 0) // dette skal være webadresselinjen {urlLine = currentLine; // gem det til senere brug} currentLine = ""; // nulstil currentLine String}} else if (c! = '\ r') // hvis du har andet end en vognretur, {currentLine += c; // tilføj det til slutningen af currentLine}}} if (sendResponse) {Serial.print ("Klient anmodet"); Serial.println (urlLine); // HTTP-headere starter altid med en svarskode (f.eks. HTTP/1.1 200 OK) // og en indholdstype, så klienten ved, hvad der kommer, derefter en tom linje: client.println ("HTTP/1.1 200 OK"); client.println ("Indholdstype: tekst/html"); client.println (); hvis (urlLine.indexOf ("GET /")> = 0) // hvis webadressen kun er en " /" {// indholdet af HTTP -svaret følger overskriften: client.println ("Hej verden!"); } // HTTP -svaret slutter med en anden tom linje: client.println (); } // luk forbindelsen: client.stop (); Serial.println ("Klient afbrudt."); }}

Kopiér ovenstående kode, eller download den fra forpligtelsen på GitHub.

Glem ikke at ændre SSID og adgangskode for at matche dit netværk.

Denne skitse bruger den velkendte Arduino

Opsætning()

og

loop ()

funktioner. I

Opsætning()

funktion seriel forbindelse til IDE initialiseres, og det samme er WiFi. Når WiFi er forbundet til det nævnte SSID, udskrives IP'en, og webserveren startes. I hver iteration af

loop ()

funktion webserveren kontrolleres for tilsluttede klienter. Hvis en klient er tilsluttet, læses anmodningen, og den ønskede URL gemmes i en variabel. Hvis alt virker i orden, udføres et svar fra serveren til klienten baseret på den ønskede URL.

ADVARSEL! Denne kode bruger Arduino String -klassen til at holde det enkelt. Strengoptimeringer er ikke inden for denne instruks. Læs mere om dette på instruktionsbogen om Arduino String Manipulation Using Minimal Ram.

Trin 2: Oprettelse af Remote JavaScript

Arduino / ESP vil fortælle de besøgende browser at indlæse denne ene fil. Resten sker med denne JavaScript -kode.

I denne instruks vil vi gøre brug af jQuery, dette er ikke strengt nødvendigt, men vil gøre tingene lettere.

Denne fil skal være tilgængelig fra internettet. En statisk siderserver er nok til at få dette til at fungere, f.eks. GitHub -sider. Så du vil sandsynligvis gerne oprette et nyt GitHub -lager og oprette et

gh-sider

afdeling. Indsæt følgende kode i a

.js

fil i depotet i den korrekte gren.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (funktion () {var script = document.createElement ('script'); // opret et element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // indstil src = "" attribut script.onload = function () // callback -funktion, kaldet når jquery -filen er indlæst {$ = window.jQuery; // gør jQuery tilgængelig som den globale $ variabel init (); // kalder init -funktionen}; dokument. getElementsByTagName ('head') [0].appendChild (script); // tilføj det oprettede tag til dokumentet, dette indlæser jQuery lib}) (); function init () {// Udført indlæsning af jQuery, tilføjer kode her senere…}

Kopiér ovenstående kode, eller download den fra forpligtelsen på GitHub.

Kontroller, om din fil er tilgængelig. I tilfælde af GitHub-sider skal du gå til https://username.github.io/repository/your-file.j… (erstat

brugernavn

,

depot

og

din-file.js

for de korrekte parametre).

Trin 3: Indlæsning af den eksterne JavaScript -fil i besøgerbrowseren

Nu hvor vi har fået alt sat op, er det tid til at få websiden til at indlæse den eksterne JavaScript -fil.

Du kan gøre dette ved at ændre linje 88 i skitsen fra

client.println ("Hej verden!"); t

client.println ("");

(ændre

src

attribut til at pege på din egen JavaScript -fil). Dette er en lille html -webside, alt det gør er at indlæse JavaScript -filen i besøgende browser.

Den ændrede fil kan også findes i den tilsvarende forpligtelse på GitHub.

Upload den justerede skitse til din Arduino / ESP.

Trin 4: Tilføjelse af nye elementer til siden

En tom side er ubrugelig, så det er nu tid til at tilføje et nyt element til websiden. For nu vil dette være en YouTube -video. I dette eksempel vil nogle jQuery -koder blive brugt til at opnå dette.

Tilføj følgende kodelinje til

i det()

fungere:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', ramme: '0'}). css ({bredde: '608px', højde: '342px'}). AppendTo ('body');

Dette vil skabe en

iframe

element, indstil det korrekte

src

attribut og indstil størrelsen ved hjælp af css og tilføj elementet til sidens brødtekst.

jQuery hjælper os med let at vælge og ændre elementer på websiden, nogle grundlæggende ting at vide:

  • $ ('krop')

  • vælger ethvert allerede eksisterende element, kan andre css -vælgere også bruges
  • $(' ')

    skaber en ny

  • element (men føjer det ikke til dokumentet)
  • .appendTo ('. main')

  • tilføjer det valgte/oprettede element til et element med css -klassen 'main'
  • Andre funktioner til tilføjelse af elementer er

    . Tilføj()

    ,

    .prepend ()

    ,

    .prependTo ()

    ,

    .insert ()

    ,

    .insertAfter ()

    ,

    .insertBefore ()

    ,

    .efter()

    ,

    . Før()

Tag et kig på den tilsvarende forpligtelse på GitHub, hvis noget er uklart.

Trin 5: Interaktive elementer

En video er sjov, men formålet med denne instruerbare er at interagere med Arduino / ESP. Lad os erstatte videoen med en knap, der sender information til Arduino / ESP og også venter på et svar.

Vi får brug for en

$('')

for at tilføje til siden, og vedhæfte en eventlistener til den. Eventlistener vil kalde tilbagekaldsfunktionen, når den angivne hændelse sker:

$ (''). tekst ('en knap'). på ('klik', funktion ()

{// kode her udføres, når der klikkes på knappen}). appendTo ('body');

Og tilføj en AJAX -anmodning til tilbagekaldsfunktionen:

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

{// kode her udføres, når AJAX -anmodningen er færdig});

Når anmodningen er færdig, tilføjes de returnerede data til siden:

$('

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

Sammenfattende skaber ovenstående kode en knap, tilføjer den til websiden, når der klikkes på knappen, sendes der en anmodning, og svaret tilføjes også til websiden.

Hvis det er første gang, du bruger tilbagekald, vil du måske tjekke forpligtelsen på GitHub for at se, hvordan alt er indlejret.

Trin 6: Svar på det interaktive element

Selvfølgelig kræver AJAX -anmodningen et svar.

For at oprette det korrekte svar for

/ajax

url skal vi tilføje en

ellers hvis ()

lige efter lukningsrammen for if -sætningen, der kontrollerer

/

url.

ellers hvis (urlLine.indexOf ("GET /ajax")> = 0)

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

I forpligtelsen på GitHub har jeg også tilføjet en tæller for at vise browseren, at hver anmodning er unik.

Trin 7: Konklusion

Dette er slutningen på dette instruerbare. Du har nu en Arduino / ESP, der betjener en lille webside, der fortæller den besøgendes browser at indlæse en JavaScript -fil fra skyen. Når JavaScript er indlæst, opbygger det resten af indholdet på websiden, hvilket giver et brugergrænseflade for brugeren at kommunikere med Arduino / ESP.

Nu er det op til din fantasi at oprette flere elementer på websiden og gemme indstillingerne lokalt på en slags ROM (EEPROM / NVS / etc).

Tak fordi du læste, og giv gerne lidt feedback!

Anbefalede: