Ciao!
Sto creando un sistema di monitoraggio per il mio impianto termico su WebServer con Mega+Ethernet Shield.
Grazie all'ottimo startingelectronics.org sono praticamente riuscito a fare tutto quello che avevo in mente ma mi sono arenato sulla parte grafica.
Tramite Ajax e XML visualizzo le temperature che mi servono su una pagina web, ma con lo stesso principio, invece di richiamare un valore numerico, vorrei richiamare un link ad una immagine piuttosto che ad un'altra.
Mi spiego meglio...
In base allo stato digitale del Pin22, nella pagina web, tramite XML, mi cambia il testo tra Pompa ON e Pompa OFF.
cl.print("<digitalinput1>");
if (digitalRead(22)) {
cl.print("Pompa ON");
}
else {
cl.print("Pompa OFF");
}
cl.print("</digitalinput1>");
Ma non riesco a fare visualizzare, in base allo stato del Pin24, una immagine al posto di un'altra:
cl.print("<digitalinput2>");
if (digitalRead(24)) {
cl.print("https://s9.postimg.org/yup9g3c9r/pompa.gif");
}
else {
cl.print("https://thumbs.gfycat.com/FrenchMemorableBongo-max-1mb.gif");
}
cl.print("</digitalinput2>");
Qui di seguito la parte il file index.htm presente sulla SD:
<html>
<head>
<title>Monitoraggio Impianto Termico</title>
<script>
function GetArduinoInputs()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// extract XML data from XML file (containing switch states and analog value)
document.getElementById("input1").innerHTML =
this.responseXML.getElementsByTagName('digitalinput1')[0].childNodes[0].nodeValue;
document.getElementById("input2").innerHTML =
this.responseXML.getElementsByTagName('digitalinput2')[0].childNodes[0].nodeValue;
}
}
}
}
request.open("GET", "ajax_inputs" + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
}
</script>
</head>
<body onload="GetArduinoInputs()">
<div style="position: absolute; z-index: 0; left: 0px; top: 0px"><img src="https://s9.postimg.org/unztmx03z/Impianto.png" height="639" width="1136"></img></div>
<div style="position: absolute; z-index: 5; left: 400px; top: 100px; font-size: 50pt"><span id="input1">...</span></div>
<div style="position: absolute; z-index: 5; left: 400px; top: 400px"><img src="input2"></img></div>
</body>
</html>
E qui il codice di Arduino per intero (per semplificare ho lasciato solo la parte che mi da problemi, escludendo tutte temperature):
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 50
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80
File webFile; // the web page file on the SD card
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
void setup()
{
pinMode(22, INPUT);
pinMode(24, INPUT);
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600); // for debugging
// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}
void loop()
{
// *** INIZIO CREAZIONE LOGICA PAGINA ***
EthernetClient client = server.available(); // try to get client
if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
if (c == '\n' && currentLineIsBlank) {
client.println("HTTP/1.1 200 OK");
if (StrContains(HTTP_req, "ajax_inputs")) {
client.println("Content-Type: text/xml");
client.println("Connection: keep-alive");
client.println();
XML_response(client);
}
else { // web page request
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
webFile = SD.open("index.htm"); // open web page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
}
Serial.println(HTTP_req);
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
break;
}
if (c == '\n') {
currentLineIsBlank = true;
}
else if (c != '\r') {
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
// *** FINE CREAZIONE LOGICA PAGINA ***
//link immagine sfondo: https://s9.postimg.org/unztmx03z/Impianto.png
//link gif animata: https://s9.postimg.org/yup9g3c9r/pompa.gif
//link altra gif animata: https://thumbs.gfycat.com/FrenchMemorableBongo-max-1mb.gif
// *** INIZIO LOGICHE PERSONALI ***
void XML_response(EthernetClient cl)
{
cl.print("<?xml version = \"1.0\" ?>");
cl.print("<inputs>");
cl.print("<digitalinput1>");
if (digitalRead(22)) {
cl.print("Pompa ON");
}
else {
cl.print("Pompa OFF");
}
cl.print("</digitalinput1>");
cl.print("<digitalinput2>");
if (digitalRead(24)) {
cl.print("https://s9.postimg.org/yup9g3c9r/pompa.gif");
}
else {
cl.print("https://thumbs.gfycat.com/FrenchMemorableBongo-max-1mb.gif");
}
cl.print("</digitalinput2>");
cl.print("</inputs>");
}
// *** FINE LOGICHE PERSONALI ***
Immagino che il problema sia nel perche facendo il debug della pagina HTML creata da Arduino "input2" non viene sostituito con il link che vorrei...
In allegato i 2 file
WebServer.zip (2.58 KB)