Ladda din Arduino/ESP Config -webbsida från molnet: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

När du skapar ett Arduino / ESP (ESP8266 / ESP32) -projekt kan du bara hårdkoda allt. Men oftare dyker det upp något och du kommer att ansluta din IoT-enhet till din IDE igen. Eller så har du precis fått fler att komma åt konfigurationen och du vill tillhandahålla ett användargränssnitt istället för att förvänta sig att de förstår det inre.

Denna instruerbara kommer att berätta hur du lägger det mesta av användargränssnittet i molnet istället för på Arduino / ESP. Om du gör det på det här sättet kommer du att spara utrymme och minnesanvändning. En tjänst som tillhandahåller gratis statiska webbsidor är särskilt lämplig som "moln", som GitHub Pages, men andra alternativ kommer förmodligen också att fungera.

För att bygga upp webbsidan på detta sätt krävs att användarens webbläsare går igenom fyra steg:

1. Begär root -url från Arduino / ESP
2. Få en mycket enkel webbsida som säger till:
3. Begär en JavaScript -fil från molnet
4. Ta emot koden som bygger upp den faktiska sidan

Denna instruktionsbok kommer också att förklara hur man interagerar med Arduino / ESP när sidan är klar enligt ovanstående steg.

Koden som skapats på denna instruerbara finns också på GitHub.

Förkunskaper

Denna instruerbara förutsätter att du har tillgång till visst material och vissa förkunskaper:

• En Arduino (med nätverksaccess) / ESP
• En dator att fästa ovanstående på
• WiFi -anslutning ansluten till internet
• Arduino IDE installerad (även för ESP32)
• Du vet hur du laddar upp en skiss till din IoT-enhet
• Du vet hur du använder Git & GitHub

Steg 1: Börja med en enkel webbserversskiss

Vi börjar så enkelt som möjligt och låter det växa härifrån.

#omfatta

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer -server (80); void setup () {// Initialize serial and wait for port to open: Serial.begin (115200); medan (! Seriell) {; // vänta på att seriell port ska anslutas. Behövs endast för inbyggd USB -port} WiFi.begin (ssid, lösenord); medan (WiFi.status ()! = WL_CONNECTED) {fördröjning (500); Serial.print ("."); } Serial.println ("WiFi -ansluten."); Serial.println ("IP -adress:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// lyssna efter inkommande klienter WiFiClient -klient = server.available (); // lyssna efter inkommande klienter bool sendResponse = false; // satt till true om vi vill skicka ett svar String urlLine = ""; // gör en sträng för att hålla den begärda URL: en om (klient) // om du får en klient, {Serial.println ("Ny klient."); // skriv ut ett meddelande från den seriella porten String currentLine = ""; // gör en sträng för att hålla inkommande data från klienten medan (client.connected ()) // loop medan klienten är ansluten {if (client.available ()) // om det finns byte att läsa från klienten, {char c = client.read (); // läs en byte, om (c == '\ n') // om byten är ett nyradstecken {// om den aktuella raden är tom får du två nyradstecken i rad. // det är slutet på klientens HTTP -begäran, så skicka ett svar: if (currentLine.length () == 0) {sendResponse = true; // allt är bra! ha sönder; // bryt ut ur medan -slingan} annars // om du fick en ny rad, rensa sedan currentLine: {if (currentLine.indexOf ("GET /")> = 0) // detta ska vara webbadressen {urlLine = currentLine; // spara den för senare användning} currentLine = ""; // återställ currentLine String}} else if (c! = '\ r') // om du har något annat än en vagnretur, {currentLine += c; // lägg till det i slutet av currentLine}}} if (sendResponse) {Serial.print ("Klient begärd"); Serial.println (urlLine); // HTTP-rubriker börjar alltid med en svarskod (t.ex. HTTP/1.1 200 OK) // och en innehållstyp så att klienten vet vad som kommer, sedan en tom rad: client.println ("HTTP/1.1 200 OK"); client.println ("Innehållstyp: text/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // om webbadressen bara är en " /" {// innehållet i HTTP -svaret följer rubriken: client.println ("Hej världen!"); } // HTTP -svaret slutar med en annan tom rad: client.println (); } // stäng anslutningen: client.stop (); Serial.println ("Client Disconnected."); }}

Kopiera över koden ovan eller ladda ner den från åtagandet på GitHub.

Glöm inte att ändra SSID och lösenord för att matcha ditt nätverk.

Denna skiss använder den välkända Arduino

uppstart()

och

slinga()

funktioner. I

uppstart()

funktion seriell anslutning till IDE initieras och så är WiFi. När WiFi är anslutet till nämnda SSID skrivs IP -adressen ut och webbservern startas. I varje iteration av

slinga()

funktion webbservern kontrolleras för anslutna klienter. Om en klient är ansluten läses förfrågan och den begärda URL: en sparas i en variabel. Om allt verkar okej utförs ett svar från servern till klienten baserat på den begärda URL: en.

VARNING! Denna kod använder Arduino String -klassen för att hålla det enkelt. Strängoptimeringar är inte inom ramen för denna instruerbara. Läs mer om detta på instruktionsboken om Arduino String Manipulation Using Minimal Ram.

Steg 2: Skapa Remote JavaScript

Arduino / ESP kommer att berätta för besökarens webbläsare att ladda den här filen. Resten kommer att göras med denna JavaScript -kod.

I denna instruktionsbok använder vi oss av jQuery, detta är inte strikt nödvändigt, men kommer att göra det enklare.

Den här filen måste vara tillgänglig från webben, en statisk sidserver räcker för att få detta att fungera, till exempel GitHub -sidor. Så du kommer förmodligen att vilja skapa ett nytt GitHub -arkiv och skapa ett

gh-sidor

gren. Sätt följande kod i a

.js

fil i förvaret i rätt gren.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // skapa ett element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // ställ in src = "" attribut script.onload = function () // callback -funktion, kallas när jquery -filen har laddats {$ = window.jQuery; // gör jQuery tillgänglig som den globala $ variabel init (); // call init -funktionen}; dokument. getElementsByTagName ('head') [0].appendChild (script); // lägg till den skapade taggen i dokumentet, detta kommer att börja ladda jQuery lib}) (); function init () {// Klar att ladda jQuery, lägger till kod här senare …}

Kopiera över koden ovan eller ladda ner den från åtagandet på GitHub.

Kontrollera om din fil är tillgänglig. För GitHub-sidor, gå till https://username.github.io/repository/your-file.j… (ersätt

Användarnamn

,

förvar

och

din-fil.js

för de rätta parametrarna).

Steg 3: Ladda den externa JavaScript -filen i besökarens webbläsare

Nu när vi har allt klart är det dags att låta webbsidan ladda den fjärr -JavaScript -filen.

Du kan göra detta genom att ändra rad 88 i skissen från

client.println ("Hej världen!"); t

client.println ("");

(ändra

src

attribut för att peka på din egen JavaScript -fil). Detta är en liten html -webbsida, allt det gör är att ladda JavaScript -filen i besökarens webbläsare.

Den ändrade filen finns också i motsvarande åtagande på GitHub.

Ladda upp den justerade skissen till din Arduino / ESP.

Steg 4: Lägga till nya element på sidan

En tom sida är värdelös, så det är nu dags att lägga till ett nytt element på webbsidan. För tillfället kommer detta att vara en YouTube -video. I detta exempel kommer några jQuery -koder att användas för att uppnå detta.

Lägg till följande kodrad i

i det()

fungera:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', ramgräns: '0'}). css ({bredd: '608px', höjd: '342px'}). AppendTo ('body');

Detta kommer att skapa en

iframe

element, ställ in rätt

src

attribut och ställ in storleken med css och lägg till elementet på sidens kropp.

jQuery hjälper oss att enkelt välja och ändra element på webbsidan, några grundläggande saker att veta:

• $ ('body')

• väljer alla redan existerande element, andra css -väljare kan också användas

• $(' ')

  skapar en ny

• element (men lägger inte till det i dokumentet)

• .appendTo ('. main')

• lägger till det valda/skapade elementet till ett element med css -klassen 'main'

• Andra funktioner för att lägga till element är

  .bifoga()

  ,

  .addera till början()

  ,

  .prependTo ()

  ,

  . Föra in()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .efter()

  ,

  .innan()

Ta en titt på motsvarande engagemang på GitHub om något är oklart.

Steg 5: Interaktiva element

En video är kul, men syftet med denna instruerbara är att interagera med Arduino / ESP. Låt oss ersätta videon för en knapp som skickar information till Arduino / ESP och också väntar på ett svar.

Vi behöver en

$('')

att lägga till på sidan och bifoga en eventlistener till den. Eventlistener ringer upp återuppringningsfunktionen när den angivna händelsen inträffar:

$ (''). text ('en knapp'). på ('klicka', funktion ()

{// kod här körs när knappen klickas}). appendTo ('body');

Och lägg till en AJAX -begäran till återuppringningsfunktionen:

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

{// koden här körs när AJAX -begäran är klar});

När begäran är klar kommer de returnerade uppgifterna att läggas till på sidan:

$('

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

Sammanfattningsvis skapar ovanstående kod en knapp, lägger till den på webbsidan, när du klickar på knappen skickas en begäran ut och svaret läggs också till webbsidan.

Om det här är första gången du använder återuppringningar kanske du vill kontrollera åtagandet på GitHub för att se hur allt är kapslat.

Steg 6: Svara på det interaktiva elementet

Naturligtvis kräver AJAX -begäran ett svar.

För att skapa rätt svar för

/ajax

url måste vi lägga till en

annat om ()

strax efter stängningsfästet för if -satsen som kontrollerar

/

url.

annars om (urlLine.indexOf ("GET /ajax")> = 0)

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

I åtagandet på GitHub har jag också lagt till en räknare för att visa webbläsaren att varje begäran är unik.

Steg 7: Slutsats

Detta är slutet på denna instruerbara. Du har nu en Arduino / ESP som serverar en liten webbsida som berättar besökarens webbläsare att ladda en JavaScript -fil från molnet. När JavaScript har laddats bygger det upp resten av innehållet på webbsidan som ger ett användargränssnitt för användaren att kommunicera med Arduino / ESP.

Nu är det upp till din fantasi att skapa fler element på webbsidan och spara inställningarna lokalt på någon sorts ROM (EEPROM / NVS / etc).

Tack för att du läste, och ge gärna feedback!