Carica la tua pagina web di configurazione Arduino/ESP dal cloud: 7 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Quando crei un progetto Arduino / ESP (ESP8266/ESP32), puoi semplicemente codificare tutto. Ma il più delle volte succede qualcosa e finirai per ricollegare il tuo dispositivo IoT al tuo IDE. Oppure hai solo più persone che accedono alla configurazione e vuoi fornire un'interfaccia utente invece di aspettarti che capiscano il funzionamento interno.

Questa istruzione ti dirà come mettere la maggior parte dell'interfaccia utente nel cloud invece che su Arduino / ESP. Farlo in questo modo ti farà risparmiare spazio e utilizzo della memoria. Un servizio che fornisce pagine Web statiche gratuite è particolarmente adatto come "cloud", come GitHub Pages, ma probabilmente funzioneranno anche altre opzioni.

La creazione della pagina Web in questo modo richiede che il browser dell'utente esegua 4 passaggi:

1. Richiedi l'URL di root da Arduino / ESP
2. Ricevi una pagina web molto semplice, che dice a:
3. Richiedi un file JavaScript dal cloud
4. Ricevi il codice che costruisce la pagina effettiva

Questo Instructable spiegherà anche come interagire con Arduino/ESP una volta che la pagina è pronta secondo i passaggi precedenti.

Il codice creato su questo istruibile può essere trovato anche su GitHub.

Prerequisiti

Questa istruzione presuppone che tu abbia accesso a determinati materiali e alcune conoscenze pregresse:

• Un Arduino (con accesso alla rete) / ESP
• Un computer a cui collegare quanto sopra
• Accesso WiFi connesso a Internet
• L'IDE Arduino installato (anche per ESP32)
• Sai come caricare uno schizzo sul tuo dispositivo IoT
• Sai come usare Git e GitHub

Passaggio 1: iniziare con un semplice schizzo del server Web

Inizieremo nel modo più semplice possibile e da qui in poi lo lasceremo crescere.

#includere

const char* ssid = "yourssid"; const char* password = "yourpasswd"; Server WiFi(80); void setup() { //Inizializza seriale e aspetta che la porta si apra: Serial.begin(115200); while(!Serial) {; // attendi che la porta seriale si connetta. Necessario solo per la porta USB nativa } WiFi.begin(ssid, password); while(WiFi.status() != WL_CONNECTED) { ritardo(500); Serial.print("."); } Serial.println("WiFi connesso."); Serial.println("Indirizzo IP: "); Serial.println(WiFi.localIP()); server.begin(); } void loop() { // ascolta i client in entrata WiFiClient client = server.available(); // ascolta i client in entrata bool sendResponse = false; // impostare su true se vogliamo inviare una risposta String urlLine = ""; // crea una stringa per contenere l'URL richiesto if(client) // se ottieni un client, { Serial.println("Nuovo client."); // stampa un messaggio dalla porta seriale String currentLine = ""; // crea una stringa per contenere i dati in arrivo dal client while(client.connected()) // esegue il ciclo mentre il client è connesso { if(client.available()) // se ci sono byte da leggere dal client, { char c = client.read(); // legge un byte, quindi if(c == '\n') // se il byte è un carattere di nuova riga { // se la riga corrente è vuota, hai due caratteri di nuova riga di seguito. // questa è la fine della richiesta HTTP del client, quindi invia una risposta: if(currentLine.length() == 0) { sendResponse = true; // è tutto ok! rottura; // esci dal ciclo while } else // se hai una nuova riga, quindi cancella currentLine: { if(currentLine.indexOf("GET /") >= 0) // questa dovrebbe essere la riga dell'URL { urlLine = currentLine; // salvalo per un uso successivo } currentLine = ""; // ripristina la stringa currentLine } } else if(c != '\r') // se hai qualcos'altro tranne un carattere di ritorno a capo, { currentLine += c; // aggiungilo alla fine della riga corrente } } } if(sendResponse) { Serial.print("Client richiesto "); Serial.println(urlLine); // Le intestazioni HTTP iniziano sempre con un codice di risposta (ad es. HTTP/1.1 200 OK) // e un tipo di contenuto in modo che il client sappia cosa sta arrivando, quindi una riga vuota: client.println("HTTP/1.1 200 OK"); client.println("Tipo di contenuto:testo/html"); client.println(); if(urlLine.indexOf("GET / ") >= 0) // se l'URL è solo un "/" { // il contenuto della risposta HTTP segue l'intestazione: client.println("Hello world!"); } // La risposta HTTP termina con un'altra riga vuota: client.println(); } // chiude la connessione: client.stop(); Serial.println("Cliente disconnesso."); } }

Copia il codice sopra o scaricalo dal commit su GitHub.

Non dimenticare di modificare l'SSID e la password in modo che corrispondano alla tua rete.

Questo sketch utilizza il noto Arduino

impostare()

e

ciclo continuo()

funzioni. Nel

impostare()

funzione viene inizializzata la connessione seriale all'IDE e anche il WiFi. Una volta che il WiFi è connesso a detto SSID, l'IP viene stampato e il server web viene avviato. In ogni iterazione del

ciclo continuo()

funzione il server web viene controllato per i client connessi. Se un client è connesso la richiesta viene letta e l'URL richiesto viene salvato in una variabile. Se tutto sembra a posto, viene eseguita una risposta dal server al client in base all'URL richiesto.

AVVERTIMENTO! Questo codice usa la classe Arduino String per semplificare. Le ottimizzazioni delle stringhe non rientrano nell'ambito di questa istruzione. Leggi di più su questo sull'istruzione sulla manipolazione delle stringhe di Arduino utilizzando la RAM minima.

Passaggio 2: creazione del JavaScript remoto

Arduino / ESP dirà al browser dei visitatori di caricare questo file. Tutto il resto sarà fatto da questo codice JavaScript.

In questo Instructable faremo uso di jQuery, questo non è strettamente necessario, ma renderà le cose più facili.

Questo file deve essere accessibile dal web, è sufficiente un server di pagine statiche per farlo funzionare, ad esempio le pagine GitHub. Quindi probabilmente vorrai creare un nuovo repository GitHub e creare un

gh-pages

ramo. Inserisci il seguente codice all'interno di a

.js

file nel repository nel ramo corretto.

Copia il codice sopra o scaricalo dal commit su GitHub.

Controlla se il tuo file è accessibile. In caso di pagine GitHub vai su https://username.github.io/repository/your-file.j… (sostituisci

nome utente

,

deposito

e

tuo-file.js

per i parametri corretti).

Passaggio 3: caricamento del file JavaScript remoto nel browser dei visitatori

Ora che abbiamo impostato tutto, è il momento di far caricare alla pagina Web il file JavaScript remoto.

Puoi farlo cambiando la linea 88 dello schizzo da

client.println("Ciao mondo!"); T

client.println("");

(cambiare il

src

attributo per puntare al tuo file JavaScript). Questa è una piccola pagina web html, tutto ciò che fa è caricare il file JavaScript nel browser dei visitatori.

Il file alterato può essere trovato anche nel commit corrispondente su GitHub.

Carica lo schizzo modificato sul tuo Arduino / ESP.

Passaggio 4: aggiunta di nuovi elementi alla pagina

Una pagina vuota è inutile, quindi è ora di aggiungere un nuovo elemento alla pagina web. Per ora questo sarà un video di YouTube. In questo esempio verranno utilizzati alcuni codici jQuery per farlo.

Aggiungi la seguente riga di codice a

dentro()

funzione:

$('').prop({ src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0' }).css({ larghezza: '608px', altezza: '342px' }).appendTo('corpo');

Questo creerà un

iframe

elemento, impostare il corretto

src

attributo e imposta la dimensione usando css e aggiungi l'elemento al corpo della pagina.

jQuery ci aiuta a selezionare e modificare facilmente gli elementi nella pagina web, alcune cose di base da sapere:

• $('corpo')

• seleziona qualsiasi elemento già esistente, è possibile utilizzare anche altri selettori CSS

• $(' ')

  crea un nuovo

• elemento (ma non lo aggiunge al documento)

• .appendTo('.main')

• aggiunge l'elemento selezionato/creato a un elemento con classe css 'main'

• Altre funzioni per aggiungere elementi sono

  .aggiungere()

  ,

  .prependi()

  ,

  .prependTo()

  ,

  .inserire()

  ,

  .inserisciDopo()

  ,

  .inserisciPrima()

  ,

  .dopo()

  ,

  .prima()

Dai un'occhiata al commit corrispondente su GitHub se qualcosa non è chiaro.

Passaggio 5: elementi interattivi

Un video è divertente, ma lo scopo di questo istruibile è interagire con Arduino/ESP. Sostituiamo il video con un pulsante che invia informazioni ad Arduino/ESP e attende anche una risposta.

Avremo bisogno di un

$('')

da aggiungere alla pagina e allegare un eventlistener ad essa. L'ascoltatore di eventi chiamerà la funzione di callback quando si verifica l'evento specificato:

$('').text('un pulsante').on('click', function()

{ // il codice qui verrà eseguito quando si fa clic sul pulsante }).appendTo('body');

E aggiungi una richiesta AJAX alla funzione di callback:

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

{ // qui il codice verrà eseguito al termine della richiesta AJAX });

Una volta terminata la richiesta, i dati restituiti verranno aggiunti alla pagina:

$('

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

In sintesi, il codice sopra crea un pulsante, lo aggiunge alla pagina Web, quando si fa clic sul pulsante verrà inviata una richiesta e la risposta verrà aggiunta anche alla pagina Web.

Se è la prima volta che usi i callback, potresti voler controllare il commit su GitHub per vedere come tutto è nidificato.

Passaggio 6: rispondere all'elemento interattivo

Naturalmente, la richiesta AJAX richiede una risposta.

Per creare la risposta corretta per il

/ajax

url dovremo aggiungere an

altrimenti se()

subito dopo la parentesi quadra di chiusura dell'istruzione if che verifica il

/

URL.

else if(urlLine.indexOf("GET /ajax ") >= 0)

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

Nel commit su GitHub ho anche aggiunto un contatore per mostrare al browser che ogni richiesta è unica.

Passaggio 7: conclusione

Questa è la fine di questo istruibile. Ora hai un Arduino / ESP che serve una piccola pagina web che dice al browser del visitatore di caricare un file JavaScript dal cloud. Una volta caricato JavaScript, costruisce il resto del contenuto della pagina Web fornendo un'interfaccia utente per consentire all'utente di comunicare con Arduino/ESP.

Ora sta alla tua immaginazione creare più elementi sulla pagina web e salvare le impostazioni localmente su un qualche tipo di ROM (EEPROM / NVS / ecc).

Grazie per aver letto e non esitare a dare un feedback!