 |
 |
 |
WEB SERVER CON PIC161825 E ESP8266 V.3.0
CHIUNQUE PUO' REALIZZARE IL PROPRIO WEB SERVER
|
|
|
V.2.0: velocizzata la fase di avviamento del ESP8266. Nova gestione della pagina Web: è possibile inviare pagine con più di 2048 Byte. Le pagine devono essere spacchettate in più pacchetti manualmente.
V.3.0: Ulteriore ottimizzazione del codice. Aumento della velocità di aggiornamento della pagina web. Unica funzione per conteggio/invio pacchetto.
IL PROGETTO |
Presentare un modulo commerciale come ESP8266 è a dir poco banale. In rete si trova qualunque tipo di informazione sul ESP8266 e non perderemo tempo nel ripetere ciò che abbonda in centinaia di siti.
Attirati dal basso costo, anche noi ci siamo avvicinati con una certa diffidenza al modulino WiFi e, dopo avere scaricato una marea di informazioni, ci siamo cimentati in qualche progettino di prova. Abbiamo constatato che in effetti le capacità del modulo sono notevoli e l’unico problema che abbiamo notato è il consumo piuttosto elevato e, mentre nella modalità “station” lo sleep è gestibile, in “Access Point” non lo è affatto. L’unico modo di mandarlo in sleep è quello di resettarlo. Non ci occuperemo di questo dettaglio nel presente articolo, ma in successivi progetti dovremmo analizzare bene il problema in particolare in quelle realizzazioni da alimentare con le pile.
Ripartiamo da quello che si trova in rete, in particolare alle applicazioni di domotica o comunque di piccole automazioni, ci riferiamo al Web Server che con l’implementazione di una o più pagine web si possono controllare e gestire un’infinità di dispositivi diversi. Ciò che è possibile scaricare e visionare sono quasi sempre le stesse realizzazioni più o meno modificate, a volte l’unica differenza sta nel titolo che ognuno personalizza prima di pubblicarlo nel proprio sito o nel forum di turno. In pratica si tratta di alcuni tag affiancati alla ben in meglio nell’intento di creare un paginetta web con i soliti due pulsanti che agiscono su altrettanti LED. Il tutto immerso nel firmware del microcontrollore rendendo le modifiche alquanto laboriose se non macchinose.
Su queste prerogative non proprio positive, è nato il presente progetto che non vuole essere una realizzazione definitiva, ma la base di nuove esperienze. Anche il tutorial proposto è finalizzato alla diffusione del progetto e tutte le istruzioni contenute nel tutorial sono pienamente sfruttabili e modificabili a piacere. Ovviamente quanto proposto non è tutto ciò che è possibile integrare nel progetto, confidiamo però nel lettore che, se interessato, non mancherà aggiornare il tutto con nuove idee.
Vediamo in dettaglio in cosa consiste il progetto del web server.
Quattro pagine web. Se non sono sufficienti possono essere aumentate o, al contrario, diminuite. Sono sganciate dal codice che le gestisce, quindi facilmente modificabili. Di norma viene utilizzato il semplice HTML, ma sono presenti, a titolo dimostrativo, altri linguaggi di supporto come CSS o figli di stile e un esempio di AJAX che permette l’aggiornamento periodico di alcuni dati senza dovere ricaricare inutilmente l’intera pagina web. Per quanto riguarda i fogli di stile proponiamo una barra colorata di lunghezza proporzionale al dato visualizzato. Anche il colore della barra è gestibile dal firmware e può cambiare in base ad un evento o una soglia. Siamo certi che incontrerà il favore dell’hobbista di elettronica, poiché sono molteplici le opportunità di utilizzo, come la misura di una tensione o una corrente, di colore verde se il valore rientra nella normalità e rosso se tale valore viene superato o risulta inferiore a una determinata soglia.
 |
 |
 |
 |
Ogni pagina web è gestita come un’unica stringa. Come vedete dalle foto, le 4 pagine hanno in comune l’intestazione formata dal nome del progetto e da un barra degli indirizzi. Al fine di limitare l’uso di Byte a disposizione del PIC, è stata creata un’ulteriore stringa comune a tutte le pagine. Iniziamo la descrizione da questa, perché alcuni punti della stringa non devono essere modificati, se vogliamo evitare che il firmware del PIC riconosca , su richiesta del browser, quale pagina inviare.
La parte grafica della pagina:
La parte in rosso visualizza il nome o altre informazioni sulla barra degli indirizzi come riportato nella figura seguente
Può essere sostituita da info personalizzate, è importante che si trovi all’interno del tag <title>
Quella in verde è la scritta che avremmo in comune come titolo di presentazione
Ovviamente ciascuno assegnerà al titolo le proprie referenze.
In viola i nomi delle pagine che nel presente progetto sono state chiamate banalmente Home, pagina 2, pagina 3 e pagina4. Possono essere rinominate con sostantivi personalizzati che richiamano le funzioni della pagina (p.e. “LUCI GIARDINO”, “PRODUZIONE PANNELLI”, ECC.).
Non va assolutamente modificato ciò che abbiamo cerchiato di arancio. Sono gli identificativi di pagina web. Quando clicchiamo su uno di essi, il browser inserisce il nome della pagina nella richiesta
L’ESP8266 riceve la richiesta dal browser e la gira, tramite la seriale, al PIC
Che cerca la pagina “p0” (home) e la invia al ESP8266 che la gira al browser. È chiaro che se modifichiamo quanto cerchiato in arancio e non modifichiamo il firmware, il PIC non trova la pagina richiesta e risponde con la pagina di errore.
Vi consigliamo di non modificare l’indirizzo dalla pagina per non essere costretti a modificare il firmware.
Le stringhe che contengono le pagine web sono:
page_head (intestazione comune a tutte le pagine web)
indexpage (pagina principale: viene visualizzata per prima ad ogni avvio del browser)
p2 (seconda pagina)
p3 (terza pagina)
p4 (quarta pagina)
AJAX (aggiornamento periodico di dati o info)
style (fogli di stile formattazione barra)
error_page (quando il PIC non trova la pagina richiesta, risponde con l’invio di questa)
ATTENZIONE: al pari degli indirizzi delle pagine contenuti in “page_head”, i nomi delle stringhe NON vanno cambiati. Solo il contenuto può essere modificato a piacere.
Come sfruttare al massimo il progetto verrà discusso nel tutorial, in questa sezione vi diamo alcune dritte su come gestire le stringhe contenenti le pagine web.
Stiamo programmando in C quindi vanno rispettate le regole basilari del linguaggio.
const code char *error_page = " WEB PAGE ";
<a href=\"p0\">RETURN TO MAIN PAGE</a>
</BODY>\
</HTML>
</table>\
\
</body>\
Nel continuare la descrizione delle particolarità del presente senza scendere in particolari che verranno discussi ampiamente nell’apposita sezione, vogliamo soffermarci nel meccanismo che rende dinamiche le pagine web. L’idea non è nostra, ma proposta dallo stack TCP-IP di Microchip fino alla versione 4.0, ovvero l’inserimento nelle pagine web di variabili che vengono aggiornate ad ogni richiamo della pagina. Le variabili hanno come nome un valore numerico che va da 00 a 99 ed è preceduto da un tilde al fine di permettere al firmware del PIC di riconoscere le variabili da aggiornare dal resto del codice HTML o javascript che sia.
Analiziamo una piccola parte di codice HTML
<td>AN 0</td><td>~00</td>\
la variabile “~00” rappresenta un valore analogico. Quale sia il formato, il calcolo per arrivare al risultato, al momento non ci interessa, basti pensare che il PIC invia ogni carattere che incontra senza modificarlo, arrivato al tilde, prende in consegna il numero di variabile e va in una funzione creata per aggiornare le variabili. È in questa funzione e solo in questa, che dovremmo aggiungere del codice C congruo alla funzione adottata per la variabile 00. Una soluzione potrebbe essere questa:
case 0: { // ADC 0
cnt = ADC_Read(4); // Canale 4
cnt *= K_Volt;
cnt/=100; // tmp/=100; ==> 1 decimale
Word_to_str_wout_zeros_virgola();
break;
}
Praticamente il nome della funzione diventa il riferimento al costrutto switch-case e solo in questo punto del firmware del PIC si deve agire, le restanti funzioni non vanno toccate. Sta tutto in questo meccanismo la semplicità di utilizzo del web server che vi stiamo presentando.
Analogamente per accendere e spegnere un LED si agirà in un’altra funzione sfrutando lo stesso metodo adottato per l’aggiornamento delle variabili.
Inoltre è possibile utilizzare dei form, molto comodi quando si renda necessario spostare delle informazioni dall’esterno all’interno del PIC.
SE NON SI DISPONE DI UN ROUTER
Nessun problema, l’ESP8266 dispone, se richiesto, di un efficiente Access Point ed è possibile, tramite questo, accedere alle pagine web e al servizio che sono in grado di gestire. Come prima azione è necessario collegare il computer, tablet o smartfone al Access Point del ESP8266
Di default l’access point dell’ESP8266 si chiama “AI-THINKER_10D967” e non ha nessuna protezione, quindi è collegabile direttamente senza password.
Aprire il browser e digitare l’indirizzo IP dalla barra degli indirizzi “192.168.4.1”.
Nel caso il browser si ostini a segnalare la mancanza di un collegamento internet, precedere l’indirizzo da “http://” (diventa: “http://192.168.4.1”).
 |
|
 |
Ti può interessare: Tutorial Web Server
SCARICA il firmware del pic V.2.0
SCARICA il firmware del pic V.3.0
Pacchetto completo per ambiente Mikroc pro for PIC