Visualizzare immagini in una pagina web gestita da Arduino
Quando utilizziamo Arduino Ethernet (o EthernetShield) in modalità webserver, non è disponibile una funzione nativa che permetta di visualizzare una immagine nella pagina web generata da Arduino. Esiste però un metodo molto semplice che permette di visualizzare delle immagini, di piccole dimensioni, utilizzando la codifica Base64.
L’idea è quella di utilizzare una stringa che codifica un file immagine, da inserire nello sketch. Diversi siti web offrono un convertitore online che codifica un file immagine (jpg, gif o png) in una stringa equivalente in standard Base64.
Per questo tutorial ho utilizzato il servizio di webcodertools.com disponibile a questo indirizzo. Basta caricare un file immagine per ottenere direttamente una stringa Base64 con in aggiunta il tag html img.
Ad esempi questo file immagine png :
viene convertito nella seguente stringa
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWklEQVQ4ja1TMUvDQBT+7iztWsSlHZLJZigFC12FiINzx26SKVtnHcxlcXcyixEnR107FPIDChXEoTpoMrRLkYIuLdjnYO+4tA1Y8YPj4H3v+97du3eMiKBj69SrzA2zBUAgDcGT+Pbr3H/Wg0w3YEHorREuQ5Dr+CsGLAgpU7IG5DoMALhWeSNIDeMnZ5W5YQ4AYG9nG8V8AZPZFA/j95RgHceT2MotGobrg30cW7tKEA1HaHa6AIC7o0PY5ZLi7l9jNDtdzA2zxXB5RaJRh9eogwWhfkdEwxEAwC6XVji/14fo9X960K5VUwmLO8Iul1Jich3FtWtVqCYWC3mVINcyZEzuUpMDgLePT+WcBRaEINdROZPpTJ1A3AxeVqrKHkTDUerokrt4fAIAoZ7xL6/Ak9hiRKRGeMM5EOQ6/v+MshYQv9AKKU4ZLEx8nsRWhpHgSWzpPxEAvgHST7pu8mrutQAAAABJRU5ErkJggg==" />
mentre il codice seguente è uno sketch webserver che crea una pagina html con l’immagine codificata:
[c]
/*
Semplice Controllo remoto
Gennaio 2012
Marco Lai
*/
//Librerie impiegate per il progetto
#include <SPI.h>
#include <Ethernet.h>
//Creao un array di byte per specificare il mac address
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
//creo un array di byte per specificare l’indirizzo ip
byte ip[] = {xxx, xxx, xxx, xxx}; //modificate questo valore in base alla vostra rete
char Data_RX;
//creao un oggetto server che rimane in ascolto sulla porta
//specificata
EthernetServer ArduinoServer(80);
void setup()
{
//inizializza lo shield con il mac e l’ip
Ethernet.begin(mac, ip);
//inizializza l’oggetto server
ArduinoServer.begin();
}
void loop()
{
EthernetClient pc_client = ArduinoServer.available();
//controllo se pc_client è true
if (pc_client != false)
{
//controllo continuamente che il client sia connesso
while (pc_client.connected())
{
//Controllo se ci sono byte disponibili per la lettura
if (pc_client.available())
{
//leggo i byte disponibili
//provenienti dal client
Data_RX = pc_client.read();
//Attendo che tutti i byte siano letti
//quando Data_RX contiene il carattere
//di nuova line capisco tutti i byte sono
//stati letti
if (Data_RX == ‘\n’)
{
//Invio la risposta al client
//invio lo status code
pc_client.println("HTTP/1.1 200 OK");
//imposto il data type
pc_client.println("Content-Type: text/html");
pc_client.println();
//invio codice html
pc_client.print("<html><body>");
pc_client.print("<head>");
//questo codice html permette di eseguireil refresh automatico
//della pagina html
pc_client.print("<META HTTP-EQUIV=’refresh’ CONTENT=’5; /’>");
pc_client.print("</head>");
pc_client.print("Arduino visualizza l’immagine ");
pc_client.print("<img alt=\"\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWklEQVQ4ja1TMUvDQBT+7iztWsSlHZLJZigFC12FiINzx26SKVtnHcxlcXcyixEnR107FPIDChXEoTpoMrRLkYIuLdjnYO+4tA1Y8YPj4H3v+97du3eMiKBj69SrzA2zBUAgDcGT+Pbr3H/Wg0w3YEHorREuQ5Dr+CsGLAgpU7IG5DoMALhWeSNIDeMnZ5W5YQ4AYG9nG8V8AZPZFA/j95RgHceT2MotGobrg30cW7tKEA1HaHa6AIC7o0PY5ZLi7l9jNDtdzA2zxXB5RaJRh9eogwWhfkdEwxEAwC6XVji/14fo9X960K5VUwmLO8Iul1Jich3FtWtVqCYWC3mVINcyZEzuUpMDgLePT+WcBRaEINdROZPpTJ1A3AxeVqrKHkTDUerokrt4fAIAoZ7xL6/Ak9hiRKRGeMM5EOQ6/v+MshYQv9AKKU4ZLEx8nsRWhpHgSWzpPxEAvgHST7pu8mrutQAAAABJRU5ErkJggg==\" />");
pc_client.print("</body></html>");
//aspetto 1 ms affinche la risposta giunga al browser del client
delay(1);
//esco dal ciclo while una volta completato l’invio della risposta
break;
}
}
}
//chiudo la connessione
pc_client.stop();
}
}
[/c]
Con questo metodo sarà più semplice creare pagine html più accattivanti utilizzando codice html e immagini codificate in Base64.
L’unica limitazione sta nella dimensione dell’immagine, infatti con un file grande otterremo una stringa enorme, saturando cosi la memoria dell’Arduino, in questo caso però potremmo utilizzare la memoria microSD.