Buongiorno a tutti, scrivo questo post per chiarire a tanti che scrivono come creare un impianto domotico con una interfaccia grafica degna di un bel impianto.
Girovagando sul forum e su internet si trovano svariati esempi di codice con interfacce più o meno carine, io personalmente trovo che l'interfaccia uomo macchina deve essere innanzitutto accattivante e intuitiva.
Per questo ho voluto utilizzare Jquery Mobile che oltre a creare una grafica bella e supportata da tutti i browser e permette di creare più pagine in una e inoltre si adatta in automatico a tutte le dimensione di schermi.
Io non sono un genio e a malapena conosco HTML ma vi assicuro che scrivere una web app con Jquery Mobile è veramente facile.
Adesso vi posto il codice che ho scritto e cercato di commentare il più possibile. Provatela e poi mi dite.
#include <SPI.h>
#include <Ethernet.h>
int PIN_TEMP=0; //Assegniamo alla variabile il pin di ingresso analogico scelto
int temp; //Dichiariamo la variabile che conterrà il valore della temperatura
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 0,0,0,0 };//SCRIVERE QUI L'INDIRIZZO IP DEL VOSTRO ARDUINO
EthernetServer server(80);
String query;
void setup()
{
query = String("");
Ethernet.begin(mac, ip);
server.begin();
pinMode(5,OUTPUT);
}
void loop()
{
temp= analogRead(PIN_TEMP)*0.5;//Assegniamo alla variabile temp il valore restituito dalle lettura del pin 0
delay(100); //Aspettiamo 100 mS prima di leggere un nuovo valore
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c = client.read();
query.concat(c);
if (c == '\n') {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.print("html");
//SCRIPT PER FUNZIONAMENTO
client.print("<head>");
client.print("<meta name='viewport' content='width=device-width, initial-scale=1'>");
client.print("<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css'/>");
client.print("<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.min.js'></script>");
client.print("<script type='text/javascript' src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>");
client.print("</head>");
client.print("<body>");
client.print("<div data-role='page' id='home'data-theme='a'>");//APRO LA PAGINA
client.print("<div data-role='header'><h1>My Home</h1></div>");//APRO L'INTESTAZIONE
client.print("<div data-role='content'>");//APRO IL CONTENUTO DELLA PAGINA
//POPUP PER LA LETTURA DELLA TEMPERATURA
client.print("<a href ='#codeSample' data-rel = 'popup' data-role='button' data-inline='true'data-position-to='window'data-transition='flip'>Temperatura Garage</a> ");
client.print("<div data-role='popup' id='codeSample' data-theme='a'>");
client.print("<center><h3>La temperatura</h3></center>");
client.print(" ");
client.print("<center><h3>attuale e di:</h3></center>");
client.print(" ");
client.print("<center><h3>");
client.print(temp);
client.print("°");
client.print("C");
client.print("</h3></center>");
client.print(" ");
client.print("</div>");
//CHIUDO IL POPUP
//AUTOMAZIONE CANCELLO
client.print("<div data-role='collapsible' data-theme='a' data-content-theme='a'>");
client.print("<h3>Cancello</h3>");
client.print("<a href='accendi5'data-role='button'data-inline='true'data-transition='flip'>ON</a>");
if (query.indexOf("accendi") > 0) {
digitalWrite(5,HIGH);
client.print("Inserito");
}
client.print("<a href='spegni5'data-role='button'data-inline='true'data-transition='flip'>OFF</a>");
if (query.indexOf("spegni") > 0) {
digitalWrite(5,LOW);
client.print("Disinserito");
}
client.print("</div>");
//CHIUDO IL CONTROLLO CANCELLO
//APRO IL FONDO PAGINA
client.print("<div data-role='footer'>");
client.print("<p><a href='#one'data-role='button'data-icon='arrow-r'data-inline='true'>RUN</a></p>");
client.print("<h4>Tecnica Impianti</h4>");
client.print("</div>");//CHIUDO IL FONDO PAGINA
client.print("</div>");//CHIUDO LA PAGINA
client.print("</body>");
client.print("</html>");
break;//fermo il ciclo
}
}
}
delay(1);
client.stop();
query = String("");
}
}BUON PROSEGUIMENTO
