jQuery Mobile e WebServer

Ciao Ragazzi,
come forse qualcuno di voi ha visto dalla sezione Hardware vorrei costruire un termostato collegato via WiFi per poter essere pilotato dal mio smartphone ovunque io sia.

Sono quindi in possesso di un Arduino Uno r3 (eventualmente anche un Arduino Due, ma credo non serva), un WiFi Shield, DHT22 ecc ecc

Sono ad un buon punto di sviluppo, la parte HW lavora egregiamente e posso gestire l’aumento della temperatura sia via Hardware che via Browser ma volendo creare un’interfaccia grafica più accurata sto avendo dei problemi.

Per realizzare l’interfaccia grafica uso jQuery Mobile e vi riporto una porzione di codice presente nel void lopp:

 if (client) {                             // if you get a client,
    Serial.println("new client");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {  
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:    
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            //client.print("<!DOCTYPE html>");
            client.print("<html> \n");
            client.print("<head> \n");
            client.print("<meta charset=\"utf-8\" /> \n");
            client.print("<title>Over Thermostat</title> \n");
            client.print("<link rel=\"stylesheet\" href=\"https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css\" /> \n");
            client.print("<script src=\"https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js\"></script> \n");
            client.print("<script src=\"https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js\"></script> \n");
            client.print("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"> \n");
            client.print("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"> \n");
            client.print("</head> \n");
            client.print("<body> \n");
            //client.print("<!-- Home -->");
            client.print("<div data-role=\"page\" id=\"home\" class=\"homepage-body\" > \n");
            client.print("<div data-role=\"header\" class=\"homepage-header\"  > \n");
            client.print("Welcome! \n");
            client.print("</div> \n");
            client.print("<div data-role=\"content\"> \n");
            client.print("Content \n");
            client.print("</div> \n");
            client.print("<div data-theme=\"a\" data-role=\"footer\" data-position=\"fixed\"> \n");
            client.print("Footer \n");
            client.print("</div> \n");
            client.print("</div> \n");
            client.print("</body> \n");
            client.print("</html> \n");
                      
           
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;         
          } 
          else {      // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        }     
        else if (c != '\r') {    // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          Temp_Set = Temp_Set + 1;               // GET /H 
        }
        if (currentLine.endsWith("GET /L")) {
          Temp_Set = Temp_Set - 1;              // GET /L 
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

Come notate per creare la grafica necessito di due JS e un CSS in particolare:

            client.print("<link rel=\"stylesheet\" href=\"https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css\" /> \n");
            client.print("<script src=\"https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js\"></script> \n");
            client.print("<script src=\"https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js\"></script> \n");

Ma purtroppo l’arduino mi interpreta esclusivamente la seconda riga, infatti la pagina HTML che vado a leggere tramite Firefox contiene il seguente codice:

<html> 
<head> 
<meta charset="utf-8" /> 
<title>Over Thermostat</title> 
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
</head> 
<body> 
<div data-role="page" id="home" class="homepage-body" > 
<div data-role="header" class="homepage-header"  > 
Welcome! 
</div> 
<div data-role="content"> 
Content 
</div> 
<div data-theme="a" data-role="footer" data-position="fixed"> 
Footer 
</div> 
</div> 
</body> 
</html>

Non capisco perché non viene interpretato e quindi inviato al browser lo stylesheet e l’ultimo Javascript!

Non mi pare vi siano errori di codice…voi che ne dite?

Grazie

voi che ne dite?

Che se volessimo provarlo e caricarlo per verificare eventuali errori non possiamo farlo essendo lo sketch imcompleto, purtroppo un occhiata al testo non sempre evidenzia errori che tra l'altro non sembrerebbe essercene.

ciao