Costruzione web server domotico

Salve, sto cominciando a costruire un web server domotico che in seguito verrà presentato come progetto per l’esame di maturità :fearful:.
La mia idea è quella di controllare da remoto degli attuatori (in questo caso simulati dai led).
Cercando sul forum ho trovato il codice postato da ‘pablos’ http://forum.arduino.cc/index.php?topic=148233.0,
partendo da quel codice ho aggiunto la lettura di due sensori e adesso sto provando a rendere più compatta e “bella” la pagina html.
Nel fare questo sto riscontrando dei problemi:
1)Nonostante abbia inserito delle righe vuote gli stati degli attuatori appaiono a fianco alla tabella (vedi foto)
2)Come faccio a cambiare il colore della scritta “Acceso” o “spento”

if (digitalRead(Luce1)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");  
 else client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Spento\" STYLE=\"background-color:#C0C0C0\"/>");
  1. vorrei aggiungere un pulsante per aggiornare lo stato dei sensori.
    4)Perche la temperatura registrata dal mio lm35DZ oscilla da 19°C a 45°C?

Se avete dei consigli su come migliorare il progetto dite pure.

Ecco il codice

#include <String.h>
#include <SPI.h> 
#include <Ethernet.h>
 
 
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // indirizzo mac
byte ip[] = { 192, 168, 1, 12 }; // indirizzo ip da assegnare ad arduino
byte gateway[] = { 192, 168, 1, 1 }; // gateway
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //porta del server

String readString;

//Inizzio Temperatura
float Temperatura;
int SensoreTemperatura = A8;
//Fine Temperatura

//Inizzio Luminosità
int Luminosita;
int Fotoresistenza = A9;
//Fine Luminosità

//Inizzio Attuatori
int Luce1 = 22;
int Luce2 = 23;
int Luce3 = 24;
int Luce4 = 25;
int Luce5 = 26;
//Fine Attuatori

void setup()
{ 
  Ethernet.begin(mac, ip, gateway, subnet);
  Serial.begin(9600);
  pinMode(SensoreTemperatura, INPUT);
  pinMode(Fotoresistenza, INPUT);
  pinMode(Luce1, OUTPUT);
  pinMode(Luce2, OUTPUT);
  pinMode(Luce3, OUTPUT); 
  pinMode(Luce4, OUTPUT);
  pinMode(Luce5, OUTPUT);
}

void loop(){
  
  //Inizzio Temperatura
  Temperatura = analogRead(SensoreTemperatura);
  Temperatura = (5.0 * Temperatura * 100.0)/1024.0;
  Serial.println(Temperatura);
  //Fine Temperatura
  
  //Inizzio Luminosità
  Luminosita = analogRead(Fotoresistenza);
  Serial.println(Luminosita);
    //Fine Luminosità
  
  EthernetClient  client = server.available();

  if (client) {
    boolean currentLineIsBlank = true;

    while (client.connected()) {
      if (client.available()) { 
        char c = client.read();
        readString.concat(c);   
        if (c == '\n' && currentLineIsBlank) {


          if(readString.indexOf("on_1") > 0) digitalWrite(Luce1,   HIGH);        
          if(readString.indexOf("off_1") > 0) digitalWrite(Luce1, LOW);          
          if(readString.indexOf("on_2") > 0) digitalWrite(Luce2, HIGH);        
          if(readString.indexOf("off_2") > 0) digitalWrite(Luce2, LOW);          
          if(readString.indexOf("on_3") > 0) digitalWrite(Luce3, HIGH);        
          if(readString.indexOf("off_3") > 0) digitalWrite(Luce3, LOW); 
          if(readString.indexOf("on_4") > 0) digitalWrite(Luce4, HIGH);        
          if(readString.indexOf("off_4") > 0) digitalWrite(Luce4, LOW);
          if(readString.indexOf("on_5") > 0) digitalWrite(Luce5, HIGH);        
          if(readString.indexOf("off_5") > 0) digitalWrite(Luce5, LOW);
          
          
           //  PAGINA HTML      
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();
        client.print("<html><head><title>ARDUINO Controllo WEB</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' ></head><body>");
       
        
        client.print("<p>");
        client.print("<table align='left' border='1' cellpadding='1' cellspacing='1' height='100' width='201'>");
        client.print("<tbody>");
        client.print("<tr>");
        client.print("<td>");
        client.println("<p>Temperatura");
        client.print("</td>");
        client.print("<td>");
        client.print(Temperatura);
        client.print("</td>");
        client.print("<td>");
        client.println(" C");
        client.print("</td>");
        client.print("</tr>");
        

        client.print("<tr>");
        client.print("<td>");
        client.println("<p>Luminosita'");
        client.print("</td>");
        client.print("<td>");
        client.print(Luminosita);
        client.print("</td>");
        client.print("</tr>");
        client.print("</tbody>");
        client.print("</table>");
        client.println("</p>");
        
        client.print("<p>");
        client.print("<span>STATO LUCE 1 </span>");
        if (digitalRead(Luce1)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");  
        else client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Spento\" STYLE=\"background-color:#C0C0C0\"/>");       
        client.print("<p><p/>");   
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Accendi\" onclick =\" location.href='/?on_1'\">");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Spegni\" onclick =\" location.href='/?off_1'\">");
        client.print("<p/>");
        
         client.print("<p>");
        client.print("<span>STATO LUCE 2 </span>");       
        if (digitalRead(Luce2)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");  
        else client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Spento\" STYLE=\"background-color:#C0C0C0\"/>");       
        client.print("<p><p/>"); 
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Accendi\" onclick =\" location.href='/?on_2'\">");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Spegni\" onclick =\" location.href='/?off_2'\">");
        client.print("<p/>");
        
        client.print("<span>STATO LUCE 3 </span>");
        if (digitalRead(Luce3)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");  
        else client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Spento\" STYLE=\"background-color:#C0C0C0\"/>");
        client.print("<p><p/>");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Accendi\" onclick =\" location.href='/?on_3'\">");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Spegni\" onclick =\" location.href='/?off_3'\">");        
        client.print("<p><p/>");
        
        client.print("<span>STATO LUCE 4 </span>");
        if (digitalRead(Luce4)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");  
        else client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Spento\" STYLE=\"background-color:#C0C0C0\"/>");
        client.print("<p><p/>");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Accendi\" onclick =\" location.href='/?on_4'\">");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Spegni\" onclick =\" location.href='/?off_4'\">");        
        client.print("<p><p/>");
        
        client.print("<span>STATO LUCE 5 </span>");
        if (digitalRead(Luce5)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");  
        else client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Spento\" STYLE=\"background-color:#C0C0C0\"/>");
        client.print("<p><p/>");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Accendi\" onclick =\" location.href='/?on_5'\">");
        client.print("<input type=\"button\" style=\"width:60px; height:40px\" value=\"Spegni\" onclick =\" location.href='/?off_5'\">");
        client.println("</body></html>");
         
        readString="";
        
        delay(1);
        client.flush();
        client.stop(); 
        }
      }
    }
  }
}

Grazie anticipatamente.

Riguardo alle scritte accanto alla tabella noto che il codice della riga della luminosità ha una cella in meno rispetto a quella della temperatura, prova intanto a modificare aggiungendo un altro client.println("").

Purtroppo ti rispondo dal tablet e non posso fare prove in ogni caso per la grafica della pagina html potresti provare ad usare dreamweaver o il più semplice microsoft frontpage e copiare dentro lo sketch l’html che ne viene fuori…

Per le altre domande la parola a chi se ne intende di più…

Per andare a capo in pagine html devi usare "
" e non una riga vuota. Gli spazi html se ne frega. :smiley:
Sempre che il tutto non sia una tabella, nel qual caso devi portare quella parte in nuova riga come suggerito da @Lippi90

Per l’1:
Da questo:

client.print("<p>");
client.print("<table align='left' border='1' cellpadding='1' cellspacing='1' height='100' width='201'>");
.........
client.print("</table>");
client.println("</p>");

A questo:

client.print("<table align='left' border='1' cellpadding='1' cellspacing='1' height='100' width='201'>");
.........
client.print("</table>");
client.println("
");    // <---- modifica

Per il 2:

Da questo:

if (digitalRead(Luce3)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00\"/>");

A questo:

if (digitalRead(Luce3)== true) client.print("<input disabled=\"disabled\" maxLength=\"50\" size=\"12\" value=\"Acceso\" STYLE=\"background-color:#00FF00;  color:#ff0000\"/>");

la tabella corretta

client.print(F("<table border=\"1\">"));
        client.print(F("<tr><td>Temperatura</td>"));       
        client.print(F("<td>")); 
        client.print(Temperatura); 
        client.print(F("</td></tr>"));
        client.print(F("<tr><td>Luminosita</td>"));
        client.print(F("<td>")); 
        client.print(Luminosita); 
        client.print(F("</td></tr>"));
        client.print(F("</table>"));

Per aggiornare i valori non ti serve un tasto, basta aggiornare il browser, comunque puoi sempre farlo automatico
refresh pagina ogni n secondi

client.println(F("HTTP/1.1 200 OK"));
        client.println(F("Content-Type: text/html"));
        client.println(F("Connection: close"));
        client.println(F("Refresh: 3"));
        client.println();
        client.print(F("<html><head><title>ARDUINO Controllo WEB</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' ></head><body>"));

i colori di acceso spento sono su questa riga value=“Acceso” STYLE="background-color:#00FF00
#00FF00 è il codice hex verde, se vai sulle tabelle color html o generatori tipo jaykay - Hex Colour Codes, ce ne sono a centinaia di pagine sui colori

Per le oscillazioni dei valori, dipende dallo schema, dall’alimentazione, dai campionamenti ecc, se cerchi sull’argomento trovi abbastanza.

ciao

grazie a tutti per le risposte, il problema dell’allineamento delle scritte a fianco della tabella era dovuto al fatto che questa era allineata a sinistra

client.print("<table align='left' border='1' cellpadding='1' cellspacing='1' height='100' width='201'>");

eliminando align=‘left’

client.print("<table border='1' cellpadding='1' cellspacing='1' height='100' width='201'>");

il problema si è risolto.

per quanto riguarda il pulsante per aggiornare i sensori preferirei se possibile inserirlo, nonostante abbia già inserito il refresh automatico della pagina.

per la grafica della pagina non posso usare dreamwear perche uso linux ma ora che mi hai consigliato mi documenterò
per le scritte colorate ho risolto.
devo ancora documentarmi per quanto riguarda il sensore di temperatura.

Volevo sapere se fosse possibile caricare lo sketch sulla scheda micro sd per poi eseguirlo da arduino e in caso come dovrebbe essere il codice per aprire lo sketch che si trova nella micro sd e avviarlo.

Specifico che al momento sto usando arduino mega 2560 + ethernet shield

Volevo sapere se fosse possibile caricare lo sketch sulla scheda micro sd per poi eseguirlo da arduino

http://forum.arduino.cc/index.php/topic,113049.0.html

attento a come imposti le domande perchè quello che chiedi è un argomento molto complesso le persone che l'hanno fatto le conti su una mano e non mi sembri preparato per questo tipo di cose

Forse intendevi caricare le pagine html su SD :D

No intendevo proprio caricare gli sketch da sd ma non mi sembra il caso visto quello che bisognerebbe fare. come funziona il caricare la pagina html su sd? poi come faccio ad integrarla col programma? caricando la pagina html su sd posso eventualmente inserire anche delle immagini (che fanno parte della pagina html) sulla scheda sd? grazie

come si possono includere delle immagini presenti nella sd nella pagina html scritta con le client.print?

TuonoPayne: come si possono includere delle immagini presenti nella sd nella pagina html scritta con le client.print?

non puoi, dovresti codificarla in char e piazzarla in ram per poi inviarla col client. print, non hai ram sufficiente per farlo. In tal caso si ovvia caricando interamente la pagina html da sd senza usare client.print ma client.write, sarà l'struzione sull' html scr....img a richiamare il file. che sarà tipo image.jpg A questo punto non avrai più un problema di ram, ma di velocità ... i tempi sono di circa 1MB/minuto, in breve le tue pagine devono comunque essere leggere comprese le immagini, a meno che non crei una connessione websocket facendo una sorta di installazione sul client prelevando il necessario dalla SD la prima volta, nei successivi collegamenti ad arduino non dovrai più fare i download delle pagine, ma solo spedire e ricevere dati in maniera molto veloce facendo semplicemente un connect, ma questo comporta molto lavoro.

ciao

Allora domani chiedo se nell’esame ho la possiblità di connettermi a internet e in caso si vedrà cosa fare.
intanto non riesco a capire il perche con il seguente codice:

           //  PAGINA HTML      
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();
        client.print("<body background=\"https://lh5.googleusercontent.com/-AVyd4o55VMQ/U3HiZEqf9pI/AAAAAAAAADc/p52og8we2ZQ/s720/Sfondo.jpg\">");
        client.print("<html><head><title>Web server domotico</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' ></head><body>");
        client.print("

");

l’immagine di sfondo venga visualizzata nel seguente modo (vedi immagine)
l’immagine ha una risoluzzione di 3000×1947 pixels, come faccio a inserirla in modo che non venga ripetutà?
grazie

up

Rispondi ogni 3 giorni ... io non riesco a seguirti sorry. Porta pazienza qualcun'altro prima o poi passerà Ciao

Allora ultimamente sono stato un po assente per via dell'esame. Ricapitolando, sono riuscito a risolvere il problema dell'immagine di sfondo ripetuta più volte che era dovuto al fatto che picasa aveva ridimensionato l'immagine. Non sono riuscito a risolvere il problema del sensore di temperatura lm35dz che continua a registrare valori che vanno dai 10°C ai 53°C, ho gia provato ad alimentare il sensore con un alimentatore esterno ma niente. Ora mi piacerebbe implementare alcune cose nel progetto: 1)visualizzare i consumi energetici e ho pensato di acquistare questo: http://www.ebay.it/itm/121212262314?ssPageName=STRK:MEWAX:IT&_trksid=p3984.m1423.l2649 cosa ne pensate? 2)Vorrei fare in modo che la pagina html con i comandi sia raggiungibile da qualunque dispositivo che sia connesso ad internet e non solo ai dispositivi connessi in LAN come posso fare questo? grazie, cercherò di essere più partecipe possibile d'ora in poi.