Last Arduino/ESP Config -nettsiden din fra skyen: 7 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:24

Når du oppretter et Arduino / ESP (ESP8266 / ESP32) prosjekt, kan du bare hardkode alt. Men oftere enn ikke dukker det opp noe, og du vil ende opp med å koble IoT-enheten til IDE-en din igjen. Eller du har nettopp fått flere til å få tilgang til konfigurasjonen, og du vil tilby et brukergrensesnitt i stedet for å forvente at de forstår det indre.

Denne instruksen vil fortelle deg hvordan du legger det meste av brukergrensesnittet i skyen i stedet for på Arduino / ESP. Hvis du gjør det på denne måten, sparer du plass og minnebruk. En tjeneste som tilbyr gratis statiske nettsider er spesielt egnet som "sky", som GitHub Pages, men andre alternativer vil sannsynligvis også fungere.

For å bygge nettsiden på denne måten må brukerens nettleser gå gjennom fire trinn:

1. Be om root -url fra Arduino / ESP
2. Motta en veldig enkel webside, og forteller til:
3. Be om en JavaScript -fil fra skyen
4. Motta koden som bygger opp den faktiske siden

Denne instruksen vil også forklare hvordan du samhandler med Arduino / ESP når siden er klar i henhold til trinnene ovenfor.

Koden som er opprettet på denne instruerbare, finnes også på GitHub.

Forutsetninger

Denne instruksen forutsetter at du har tilgang til visse materialer og noen forkunnskaper:

• En Arduino (med nettverkstilgang) / ESP
• En datamaskin å feste ovenstående til
• WiFi -tilgang koblet til internett
• Arduino IDE installert (også for ESP32)
• Du vet hvordan du laster opp en skisse til din IoT-enhet
• Du vet hvordan du bruker Git & GitHub

Trinn 1: Start med en enkel Webserver Sketch

Vi starter så enkelt som mulig, og lar det vokse fra nå av.

#inkludere

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer -server (80); void setup () {// Initialize serial and wait for port to open: Serial.begin (115200); mens (! Seriell) {; // vent på at seriell port kobles til. Nødvendig for bare USB -port} WiFi.begin (ssid, passord); mens (WiFi.status ()! = WL_CONNECTED) {forsinkelse (500); Serial.print ("."); } Serial.println ("WiFi tilkoblet."); Serial.println ("IP -adresse:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// lytte etter innkommende klienter WiFiClient -klient = server.available (); // lytte etter innkommende klienter bool sendResponse = false; // satt til true hvis vi vil sende et svar String urlLine = ""; // lage en streng for å beholde den forespurte URL -adressen hvis (klient) // hvis du får en klient, {Serial.println ("Ny klient."); // skrive ut en melding ut den serielle porten String currentLine = ""; // lage en streng for å lagre innkommende data fra klienten mens (client.connected ()) // loop mens klienten er tilkoblet {if (client.available ()) // hvis det er byte å lese fra klienten, {char c = client.read (); // les en byte, så hvis (c == '\ n') // hvis byten er et nytt linjetegn {// hvis gjeldende linje er tom, har du to nylinjetegn på rad. // det er slutten på klientens HTTP -forespørsel, så send et svar: if (currentLine.length () == 0) {sendResponse = true; // alt er fint! gå i stykker; // bryte ut av mensløkken} annet // hvis du har en ny linje, fjern deretter currentLine: {if (currentLine.indexOf ("GET /")> = 0) // dette skal være URL -linjen {urlLine = currentLine; // lagre den for senere bruk} currentLine = ""; // tilbakestill currentLine String}} else if (c! = '\ r') // hvis du har noe annet enn en vognretur, {currentLine += c; // legg den til slutten av currentLine}}} if (sendResponse) {Serial.print ("Klient forespurt"); Serial.println (urlLine); // HTTP-hoder starter alltid med en responskode (f.eks. HTTP/1.1 200 OK) // og en innholdstype slik at klienten vet hva som kommer, deretter en tom linje: client.println ("HTTP/1.1 200 OK"); client.println ("Innholdstype: tekst/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // hvis nettadressen bare er en " /" {// innholdet i HTTP -svaret følger overskriften: client.println ("Hello world!"); } // HTTP -svaret ender med en annen tom linje: client.println (); } // Lukk tilkoblingen: client.stop (); Serial.println ("Klient frakoblet."); }}

Kopier over koden ovenfor, eller last den ned fra forpliktelsen på GitHub.

Ikke glem å endre SSID og passord for å matche nettverket ditt.

Denne skissen bruker den velkjente Arduino

oppsett ()

og

Løkke()

funksjoner. I

oppsett ()

funksjon seriell tilkobling til IDE initialiseres og det samme er WiFi. Når WiFi er koblet til nevnte SSID, skrives ut IP -adressen og webserveren startes. I hver iterasjon av

Løkke()

funksjon er webserveren kontrollert for tilkoblede klienter. Hvis en klient er tilkoblet, leses forespørselen og den forespurte URL -en lagres i en variabel. Hvis alt virker i orden, utføres et svar fra serveren til klienten basert på den forespurte URL -adressen.

ADVARSEL! Denne koden bruker Arduino String -klassen for å holde det enkelt. Strengoptimaliseringer er ikke innenfor dette instruksjonsområdet. Les mer om dette på instruksjonene om Arduino String Manipulation Using Minimal Ram.

Trinn 2: Opprette Remote JavaScript

Arduino / ESP vil fortelle den besøkende nettleseren å laste denne ene filen. Resten vil bli gjort med denne JavaScript -koden.

I denne instruksen bruker vi jQuery, dette er ikke strengt nødvendig, men vil gjøre ting enklere.

Denne filen må være tilgjengelig fra nettet, en statisk sider -server er nok til å få dette til å fungere, for eksempel GitHub -sider. Så du vil sannsynligvis lage et nytt GitHub -depot og lage et

gh-sider

gren. Sett inn følgende kode i a

.js

filen i depotet i riktig gren.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // lag et element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // sett src = "" attributt script.onload = function () // tilbakeringingsfunksjon, kalt når jquery -filen er lastet inn {$ = window.jQuery; // gjør jQuery tilgjengelig som den globale $ variabelen init (); // kall init -funksjonen}; dokument. getElementsByTagName ('head') [0].appendChild (script); // legg til den opprettede taggen i dokumentet, dette starter lasting av jQuery lib}) (); function init () {// Ferdig med å laste inn jQuery, legger til kode her senere…}

Kopier over koden ovenfor, eller last den ned fra forpliktelsen på GitHub.

Sjekk om filen din er tilgjengelig. Når det gjelder GitHub-sider, gå til https://username.github.io/repository/your-file.j… (erstatt

brukernavn

,

oppbevaringssted

og

din-file.js

for de riktige parameterne).

Trinn 3: Laster inn den eksterne JavaScript -filen i besøksleseren

Nå som vi har satt opp alt, er det på tide å få nettsiden til å laste inn den eksterne JavaScript -filen.

Du kan gjøre dette ved å endre linje 88 i skissen fra

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

client.println ("");

(endre

src

attributt for å peke på din egen JavaScript -fil). Dette er en liten html -webside, alt det gjør er å laste inn JavaScript -filen i besøkende nettleser.

Den endrede filen finnes også i den tilsvarende forpliktelsen på GitHub.

Last opp den justerte skissen til Arduino / ESP.

Trinn 4: Legge til nye elementer på siden

En tom side er ubrukelig, så det er nå på tide å legge til et nytt element på nettsiden. For nå vil dette være en YouTube -video. I dette eksemplet vil noen jQuery -koder bli brukt for å oppnå dette.

Legg til følgende kodelinje i

i det()

funksjon:

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

Dette vil skape en

iframe

element, sett inn riktig

src

attributt og angi størrelsen ved hjelp av css og legg elementet til brødteksten på siden.

jQuery hjelper oss med å enkelt velge og endre elementer på nettsiden, noen grunnleggende ting å vite:

• $ ('body')

• velger et eksisterende element, kan andre css -velgere også brukes

• $(' ')

  skaper en ny

• element (men legger det ikke til i dokumentet)

• .appendTo ('. main')

• legger det valgte/opprettede elementet til et element med css -klassen 'main'

• Andre funksjoner for å legge til elementer er

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .sett inn()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .etter()

  ,

  .før()

Ta en titt på den tilsvarende forpliktelsen på GitHub hvis noe er uklart.

Trinn 5: Interaktive elementer

En video er morsom, men formålet med denne instruksen er å samhandle med Arduino / ESP. La oss erstatte videoen for en knapp som sender informasjon til Arduino / ESP og også venter på svar.

Vi trenger en

$('')

for å legge til siden, og legge ved en eventlistener til den. Eventlistener vil ringe tilbake funksjonen når den angitte hendelsen skjer:

$ (''). tekst ('en knapp'). på ('klikk', funksjon ()

{// koden her vil bli utført når du klikker på knappen}). appendTo ('body');

Og legg til en AJAX -forespørsel til tilbakeringingsfunksjonen:

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

{// koden her vil bli utført når AJAX -forespørselen er ferdig});

Når forespørselen er ferdig, blir de returnerte dataene lagt til på siden:

$('

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

Oppsummert oppretter koden ovenfor en knapp, legger den til på websiden. Når du klikker på knappen vil en forespørsel bli sendt ut og svaret vil også bli lagt til på websiden.

Hvis dette er første gang du bruker tilbakeringinger, vil du kanskje sjekke forpliktelsen på GitHub for å se hvordan alt er nestet.

Trinn 6: Svar på det interaktive elementet

Selvfølgelig krever AJAX -forespørselen et svar.

For å lage riktig svar for

/ajax

url må vi legge til en

eller hvis()

rett etter lukkebraketten til if -setningen som kontrollerer

/

url.

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

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

I forpliktelsen på GitHub har jeg også lagt til en teller for å vise nettleseren at hver forespørsel er unik.

Trinn 7: Konklusjon

Dette er slutten på dette instruerbare. Du har nå en Arduino / ESP som serverer en liten webside som forteller besøkendes nettleser å laste inn en JavaScript -fil fra nettskyen. Når JavaScript er lastet opp, bygger det opp resten av innholdet på websiden som gir brukergrensesnittet for brukeren å kommunisere med Arduino / ESP.

Nå er det opp til fantasien din å lage flere elementer på websiden og lagre innstillingene lokalt på en slags ROM (EEPROM / NVS / etc).

Takk for at du leser, og kom gjerne med noen tilbakemeldinger!