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

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

Prilikom stvaranja Arduino / ESP (ESP8266 / ESP32) projekta, sve možete jednostavno kodirati. Ali češće se događa da se nešto pojavi i na kraju ćete ponovo priključiti svoj IoT uređaj na IDE. Ili ste upravo dobili više ljudi koji pristupaju konfiguraciji i želite pruž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 ćete uštedjeti prostor i memoriju. Usluga koja nudi besplatne statičke web stranice posebno je pogodna kao "oblak", poput GitHub stranica, ali i druge opcije će vjerojatno funkcionirati.

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

1. Zatražite root URL od Arduino / 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 će također objasniti kako komunicirati s Arduinom / ESP -om nakon što stranica bude spremna prema gornjim koracima.

Kod kreiran na ovoj instrukciji može se pronaći i na GitHub -u.

Preduslovi

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

• Arduino (sa mrežnim pristupom) / ESP
• Računar na koji je potrebno priložiti gore navedeno
• WiFi pristup povezan s internetom
• Arduino IDE instaliran (takođe za ESP32)
• Znate kako prenijeti skicu na svoj IoT uređaj
• Znate kako koristiti Git & GitHub

Korak 1: Počnite s jednostavnom skicom web servera

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

#include

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer server (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) {kašnjenje (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 = ""; // napravimo String da sadrži traženi URL ako (klijent) // ako dobijete klijenta, {Serial.println ("Novi klijent."); // ispisuje poruku sa serijskog porta String currentLine = ""; // napravi String za čuvanje dolaznih podataka od klijenta dok (client.connected ()) // petlja dok je klijent povezan {if (client.available ()) // ako ima bajtova za čitanje od klijenta, {char c = client.read (); // čitajte bajt, tada if (c == '\ n') // ako je bajt znak novog reda {// ako je trenutni red prazan, imate dva znaka novog reda u nizu. // to je kraj HTTP zahtjeva klijenta, pa pošaljite odgovor: if (currentLine.length () == 0) {sendResponse = true; // sve je u redu! break; // izlazi iz while petlje} else // ako imate novi red, tada izbrišite currentLine: {if (currentLine.indexOf ("GET /")> = 0) // ovo bi trebao biti URL red {urlLine = currentLine; // sačuvaj za kasniju upotrebu} currentLine = ""; // resetiranje trenutnog niza}} else if (c! = '\ r') // ako imate bilo šta drugo osim znaka za vraćanje nosača, {currentLine += c; // dodajemo ga na kraj trenutne linije}}} if (sendResponse) {Serial.print ("Klijent je zatražen"); Serial.println (urlLine); // HTTP zaglavlja uvijek započinju kodom odgovora (npr. HTTP/1.1 200 OK) // i tipom sadržaja kako bi klijent znao što dolazi, zatim praznom linijom: 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 prati zaglavlje: client.println ("Zdravo svijete!"); } // HTTP odgovor završava drugom praznom linijom: client.println (); } // prekida vezu: client.stop (); Serial.println ("Klijent nije povezan."); }}

Kopirajte gornji kod ili ga preuzmite iz urezivanja na GitHub -u.

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 je pokrenula serijsku vezu s IDE -om, pa tako i WiFi. Nakon što je WiFi povezan s navedenim SSID -om, 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 povezan, zahtjev se čita i traženi URL se sprema u varijablu. Ako se čini da je sve u redu, odgovor poslužitelja klijentu se izvodi na osnovu tražene URL adrese.

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 za Arduino manipulaciju nizovima pomoću minimalnog rama.

Korak 2: Kreiranje udaljenog JavaScripta

Arduino / ESP će reći pregledaču posjetitelja da učita ovu jednu datoteku. Sve ostalo će biti učinjeno ovim JavaScript kodom.

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

Ovoj datoteci je potrebno pristupiti s weba, poslužitelj statičkih stranica dovoljan je za to, na primjer GitHub stranice. Stoga ćete vjerojatno htjeti napraviti novo GitHub spremište i stvoriti

gh-stranice

grana. Umetnite sljedeći kod 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 () {// Učitavanje jQuery je završeno, kasnije će se dodati kôd…}

Kopirajte gornji kod ili ga preuzmite iz urezivanja na GitHub -u.

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 promjenom linije 88 skice iz

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

client.println ("");

(promijenite

src

atribut koji upućuje na vašu vlastitu JavaScript datoteku). Ovo je mala html web stranica, sve što čini je učitavanje JavaScript datoteke u preglednik posjetitelja.

Izmenjena datoteka se takođe može naći u odgovarajućem urezivanju na GitHub -u.

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 koristiti neki jQuery kodovi.

Dodajte sljedeći red 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');

Ovo ć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/kreirani element elementu s css klasom 'main'

• Druge funkcije za dodavanje elemenata su

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .after ()

  ,

  .prije ()

Pogledajte odgovarajuće urezivanje na GitHub -u ako nešto nije jasno.

Korak 5: Interaktivni elementi

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

Trebat će nam a

$('')

za dodavanje na stranicu i pridružite mu učesnika događaja. Slušalica događaja će pozvati funkciju povratnog poziva kada se desi navedeni događaj:

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

{// kôd će se izvršiti kada se klikne na dugme}). appendTo ('body');

I dodajte AJAX zahtjev funkciji povratnog poziva:

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

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

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

$('

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

Ukratko, gornji kôd stvara dugme, dodaje ga na web stranicu, kada se klikne na dugme, zahtjev će biti poslan, a odgovor će biti dodat na web stranicu.

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

Korak 6: Odgovorite na interaktivni element

Naravno, AJAX zahtjev zahtijeva odgovor.

Da biste stvorili ispravan 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 ("Zdravo!"); }

U urezivanju na GitHub -u takođe sam dodao brojač koji pokazuje pregledaču da je svaki zahtev 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 JavaScripta, on izgrađuje 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!