Učitajte svoju Arduino/ESP konfiguracijsku web stranicu iz oblaka: 7 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

Prilikom stvaranja Arduino / ESP (ESP8266 / ESP32) projekta, sve možete jednostavno kodirati. No češće se događa da se nešto ne dogodi pa ćete na kraju ponovno priključiti svoj IoT uređaj na IDE. Ili ste upravo dobili više ljudi koji pristupaju konfiguraciji i želite omogućiti korisničko sučelje umjesto da očekujete da razumiju unutarnji rad.

Ova instrukcija će vam reći kako većinu korisničkog sučelja staviti u oblak umjesto na Arduino / ESP. Na ovaj način uštedjet ćete na prostoru i korištenju memorije. Usluga koja pruža besplatne statičke web stranice posebno je prikladna kao "oblak", poput GitHub stranica, ali vjerojatno će raditi i druge opcije.

Izgradnja web stranice na ovaj način zahtijeva da preglednik korisnika prođe kroz 4 koraka:

1. Zatražite korijenski url od Arduina / ESP -a
2. Primite vrlo jednostavnu web stranicu koja govori:
3. Zatražite JavaScript datoteku iz oblaka
4. Primite kôd koji gradi stvarnu stranicu

Ovaj Instructable također će objasniti kako komunicirati s Arduinom / ESP -om nakon što stranica bude spremna prema gornjim koracima.

Kod kreiran na ovom uputstvu može se pronaći i na GitHubu.

Preduvjeti

Ovo uputstvo pretpostavlja da imate pristup određenim materijalima i neko prethodno znanje:

• Arduino (s mrežnim pristupom) / ESP
• Računalo za priključivanje gore navedenog
• WiFi pristup spojen na internet
• Arduino IDE instaliran (također za ESP32)
• Znate kako prenijeti skicu na svoj IoT uređaj
• Znate koristiti Git & GitHub

Korak 1: Počnite s jednostavnom skicom web poslužitelja

Započet ćemo što je moguće jednostavnije, a od sada dalje rasti.

#uključi

const char* ssid = "yourssid"; const char* lozinka = "yourpasswd"; WiFiServer poslužitelj (80); void setup () {// Pokreni serijski broj i pričekaj da se port otvori: Serial.begin (115200); while (! Serijski) {; // čekati povezivanje serijskog porta. Potrebno samo za izvorni USB port} WiFi.begin (ssid, lozinka); while (WiFi.status ()! = WL_CONNECTED) {odgoda (500); Serial.print ("."); } Serial.println ("WiFi povezan."); Serial.println ("IP adresa:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// osluškivanje dolaznih klijenata WiFiClient client = server.available (); // osluškivanje dolaznih klijenata bool sendResponse = false; // postavljeno na true ako želimo poslati odgovor String urlLine = ""; // napraviti niz za držanje traženog URL -a ako (klijent) // ako dobijete klijenta, {Serial.println ("Novi klijent."); // ispis poruke sa serijskog porta String currentLine = ""; // napraviti niz za držanje dolaznih podataka od klijenta dok (client.connected ()) // petlja dok je klijent povezan {if (client.available ()) // ako ima bajtova za čitanje s klijenta, {char c = client.read (); // čitajte bajt, tada if (c == '\ n') // ako je bajt znak novog retka {// ako je trenutni redak prazan, imate dva znaka novog retka u nizu. // to je kraj HTTP zahtjeva klijenta, pa pošaljite odgovor: if (currentLine.length () == 0) {sendResponse = true; // sve je u redu! pauza; // probiti se iz while petlje} else // ako imate novi redak, tada izbrišite currentLine: {if (currentLine.indexOf ("GET /")> = 0) // ovo bi trebao biti URL redak {urlLine = currentLine; // spremamo za kasniju upotrebu} currentLine = ""; // resetiranje trenutnog niza}} else if (c! = '\ r') // ako imate bilo što drugo osim znaka za vraćanje nosača, {currentLine += c; // dodamo ga na kraj trenutne linije}}} if (sendResponse) {Serial.print ("Client zatražen"); Serial.println (urlLine); // HTTP zaglavlja uvijek započinju kodom odgovora (npr. HTTP/1.1 200 OK) // i vrstom sadržaja tako da klijent zna što dolazi, zatim praznim retkom: client.println ("HTTP/1.1 200 OK"); client.println ("Vrsta sadržaja: tekst/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // ako je URL samo " /" {// sadržaj HTTP odgovora slijedi zaglavlje: client.println ("Pozdrav svijetu!"); } // HTTP odgovor završava drugim praznim retkom: client.println (); } // zatvaranje veze: client.stop (); Serial.println ("Klijent nije povezan."); }}

Kopirajte gornji kod ili ga preuzmite iz urezivanja na GitHubu.

Ne zaboravite promijeniti SSID i lozinku kako bi odgovarali vašoj mreži.

Ova skica koristi dobro poznati Arduino

postaviti()

i

petlja()

funkcije. U

postaviti()

Funkcija pokreće serijsku vezu s IDE -om, pa tako i WiFi. Nakon što se WiFi spoji na navedeni SSID, IP se ispisuje i web poslužitelj se pokreće. U svakoj iteraciji datoteke

petlja()

funkciju web poslužitelj provjerava ima li povezanih klijenata. Ako je klijent spojen, zahtjev se čita i traženi URL se sprema u varijablu. Ako se čini da je sve u redu, odgovor poslužitelja klijentu izvodi se na temelju traženog URL -a.

UPOZORENJE! Ovaj kôd koristi klasu Arduino String kako bi bio jednostavan. Optimizacije nizova nisu unutar opsega ovog uputstva. Pročitajte više o ovome na uputama o manipulaciji nizovima Arduino pomoću minimalnog rama.

Korak 2: Stvaranje udaljenog JavaScripta

Arduino / ESP će posjetiteljevom pregledniku reći da učita ovu jednu datoteku. Sve ostalo bit će učinjeno ovim JavaScript kodom.

U ovom Instructableu koristit ćemo jQuery, to nije strogo potrebno, ali će olakšati stvari.

Ova datoteka mora biti dostupna s weba, poslužitelj statičkih stranica dovoljan je za to, na primjer stranice GitHub. Stoga ćete vjerojatno htjeti napraviti novo GitHub spremište i stvoriti

gh-stranice

podružnica. Umetnite sljedeći kôd u a

.js

datoteku u spremištu u ispravnoj grani.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // kreirajte element script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // postavite src = "" attribute script.onload = function () // funkcija povratnog poziva, koja se poziva nakon učitavanja datoteke jquery {$ = window.jQuery; // čini jQuery pristupačnom kao globalna $ varijabla init (); // poziva funkciju init}}; document. getElementsByTagName ('head') [0].appendChild (script); // dodajte kreiranu oznaku u dokument, ovo će početi učitavanje jQuery lib}) (); function init () {// Gotovo učitavanje jQueryja, kasnije će se ovdje dodati kôd…}

Kopirajte gornji kod ili ga preuzmite iz urezivanja na GitHubu.

Provjerite je li vaša datoteka dostupna. U slučaju GitHub stranica idite na https://username.github.io/repository/your-file.j… (zamijenite

Korisničko ime

,

spremište

i

your-file.js

za ispravne parametre).

Korak 3: Učitavanje udaljene JavaScript datoteke u preglednik posjetitelja

Sad kad smo sve postavili, vrijeme je da web stranica učita udaljenu JavaScript datoteku.

To možete učiniti mijenjanjem retka 88 skice iz

client.println ("Zdravo svijete!"); t

client.println ("");

(promijeni

src

atribut koji upućuje na vašu vlastitu JavaScript datoteku). Ovo je mala html web stranica, samo učitava JavaScript datoteku u preglednik posjetitelja.

Izmijenjena datoteka se također može pronaći u odgovarajućem urezivanju na GitHubu.

Prenesite prilagođenu skicu na svoj Arduino / ESP.

Korak 4: Dodavanje novih elemenata na stranicu

Prazna stranica je beskorisna, pa je sada vrijeme za dodavanje novog elementa na web stranicu. Za sada će ovo biti YouTube video. U ovom primjeru će se za to upotrijebiti neki jQuery kodovi.

Dodajte sljedeći redak koda u

u tome()

funkcija:

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

To će stvoriti

iframe

element, postavite ispravno

src

atribut i postavite veličinu pomoću css -a i dodajte element u tijelo stranice.

jQuery nam pomaže da lako odaberemo i promijenimo elemente na web stranici, neke osnovne stvari koje trebamo znati:

• $ ('tijelo')

• odabire već postojeći element, mogu se koristiti i drugi css birači

• $(' ')

  stvara novu

• element (ali ga ne dodaje u dokument)

• .appendTo ('. main')

• dodaje odabrani/stvoreni element u element s css klasom 'main'

• Ostale funkcije za dodavanje elemenata su

  .dodati()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .umetnuti()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .nakon()

  ,

  .prije()

Ako ništa nije jasno, pogledajte odgovarajuće urezivanje na GitHubu.

Korak 5: Interaktivni elementi

Videozapis je zabavan, ali svrha ovog uputstva je interakcija s Arduinom / ESP -om. Zamijenimo video zapis za gumb koji šalje informacije na Arduino / ESP i također čeka odgovor.

Trebat će nam a

$('')

za dodavanje na stranicu i na nju priložite događaj za praćenje događaja. Slušalica događaja će pozvati funkciju povratnog poziva kada se dogodi navedeni događaj:

$ (''). text ('gumb'). on ('klik', funkcija ()

{// kôd će se ovdje izvršiti kada se pritisne gumb}). appendTo ('body');

I dodajte AJAX zahtjev funkciji povratnog poziva:

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

{// kôd će se ovdje izvršiti kada se dovrši AJAX zahtjev});

Nakon što zahtjev završi, vraćeni podaci bit će dodani na stranicu:

$('

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

Ukratko, gornji kôd stvara gumb, dodaje ga na web stranicu, kada se pritisne gumb, bit će poslan zahtjev, a odgovor će također biti dodan na web stranicu.

Ako vam je ovo prvi put da koristite povratne pozive, možda biste htjeli provjeriti urezivanje na GitHubu kako biste vidjeli kako je sve ugniježđeno.

Korak 6: Odgovorite na interaktivni element

Naravno, zahtjev za AJAX zahtijeva odgovor.

Da biste stvorili točan odgovor za

/ajax

url moramo dodati an

inače ako ()

odmah nakon završne zagrade if naredbe koja provjerava

/

url.

inače if (urlLine.indexOf ("GET /ajax")> = 0)

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

U urezivanju na GitHubu također sam dodao brojač koji pokazuje pregledniku da je svaki zahtjev jedinstven.

Korak 7: Zaključak

Ovo je kraj ovog uputstva. Sada imate Arduino / ESP koji poslužuje malu web stranicu koja govori pregledniku posjetitelja da učita JavaScript datoteku iz oblaka. Nakon učitavanja JavaScript -a izgrađuje se ostatak sadržaja web stranice pružajući korisničko sučelje za komunikaciju korisnika s Arduinom / ESP -om.

Sada je na vašoj mašti stvaranje više elemenata na web stranici i spremanje postavki lokalno na neku vrstu ROM -a (EEPROM / NVS / itd.).

Hvala vam na čitanju i slobodno nam pošaljite povratne informacije!