Ethernet + css

Ciao,

Volevo formattare una pagina con del CSS che si trova nella sc card chiamata da:

File leggiSd (){

myFile = SD.open(“stile.css”);

if (myFile) {

return myFile;

myFile.close();

}

}


nel loop()


client.print("");
client.print("");

ttt=leggiSd();
while (ttt.available()) {
client.write(ttt.read());
}

Bene viene eseguita solo la prima volta l 'impaginazione è corretta ma una volta ricaricata la pagina mi perde i css

nel secondo refresh vedo la pagina ma non con i colori caratteri ecc, dati dal CSS.

Grazie

Luca

Ho fatto la stessa prova prima però...
ad arduino faccio leggere il solo index.htm, è lui poi a prendere i css da un foglio di stile a parte...

Che velocità

ma index.htm per ora la escluderei perchè essendo alle prime armi non ho ancora capito alcune cose ..

cioe come passere variabili GET o POST tra l' index su SDcard e Arduino

grazie

llluca:
Che velocità

ma index.htm per ora la escluderei perchè essendo alle prime armi non ho ancora capito alcune cose ..

cioe come passere variabili GET o POST tra l' index su SDcard e Arduino

grazie

A cosa ti servono le variabili GET o POST ?
io francamente non le ho mai usate con i css...
per di più non capisco dove sta il problema :slight_smile: hai mai caricato su un server un sito web ? lo metti nella SD e lo fai aprire ad arduino e sei on the road :slight_smile:

Mio fratello minore è Speedy Gonzales :slight_smile:

llluca metti tutto il codice, e mettilo tra i tag [ code] e [ /code], se no è illeggibile.

A cosa ti servono le variabili GET o POST ?
Dovrebbero servire a comunicare tra arduino e l'index ma essendo alle prime armi e forse non devo ragionare tipo php
per questo
frammento il codice tra client.print("...
e qualche altra cosa statica su sd card
probabilemnte visto i risultati pratici non sono sulla strada giusta.

luca

Il PHP lo conosco appena ma credo ti convenga cominciare ad usare del semplice HTML e con i form comandi arduino...

ad esempio per ora utilizzo questo sitema:

client.print("<form> <input type='range' name='rr' min='0' max='255' step='1'  value='");
      client.print(r);
      client.print("'  onchange='this.form.submit()'/>");
      client.print(r);
      client.print("
 <input type=hidden name='rosso' value=rosso ></form>

");

me se volessi mettere su sd card come faccio ad intercettare il valore di r legato ad rosso

grazie

Luca

se è una get otterrai un richesta stile

GET /index.html?rosso=r,var=val HTTP/1.1

e un pò diu boiate...

devi estrapolare dalla stringa i valori che ti interessano (var=val è un esempio quando usi più input)

lesto:
GET /index.html?rosso=r,var=val HTTP/1.1

questo volore come faccio ad intercettrlo da arduino?
sempre se posso trasmettere delle variabili get o post e intercettarle…

Ti mando l’ intero Sketch!
ma come dividerlo in index htm su sd card e Sketch su arduino che intercetta i dati attualmente non saprei???

#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>
#include <WString.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte ip[] = { 192,168,0, 200 };
Server server(80);
File myFile;
String query;

File  ttt;
   int r;
int v;
int b;
boolean test;
void setup()
{

 query = String("");

 Ethernet.begin(mac, ip);
 server.begin();
 if (!SD.begin(4)) { return; }
 pinMode(9,OUTPUT);
 pinMode(6,OUTPUT);
 pinMode(5,OUTPUT);
 test= false;

}

void loop()
{
  

 Client 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.0 200 OK");
         client.println("Content-Type: text/html");
         client.println();
         
          client.print("<html>"); 
          client.print("<HEAD>");
   

         ttt=leggiSd();
         while (ttt.available())  {
    	client.write(ttt.read());
       }       

 
         
           client.print("<TITLE />Slider + on change1</title>");


          client.print("</head>");
           client.print("<body>");
         client.print(" <h1>Modifica i colori dei led  </h1>

<hr/>");       
            
               
             if (query.indexOf("rosso") > 0){
          String parzialer =  query.substring(9,12);

 
char thisChar[query.length() +1];
parzialer.toCharArray(thisChar, parzialer.length()+1) ;
 r = atoi(thisChar);         
                 
                  analogWrite(9, r);

                      
                   delay(1);
               }      
                         
           if (query.indexOf("blu") > 0){
          String parzialeb =  query.substring(9,12);

 
char thisChar[query.length() +1];
parzialeb.toCharArray(thisChar, parzialeb.length()+1) ;
b = atoi(thisChar);         
                 
                  analogWrite(6, b);

                       
                       
                   delay(1);
               }  
         
         
          if (query.indexOf("verde") > 0){
          String parziale =  query.substring(9,12);

 
char thisChar[query.length() +1];
parziale.toCharArray(thisChar, parziale.length()+1) ;
 v = atoi(thisChar);         
                 
                  analogWrite(5, v);

                       
                   delay(1);
               }  

             client.print("<form> <input type='range' name='rr' min='0' max='255' step='1'  value='");
      client.print(r);
    client.print("'  onchange='this.form.submit()'/>");
    client.print(r);
     client.print("
 <input type=hidden name='rosso' value=rosso ></form>

");
           
       
        client.print("<form> <input type='range' name='bb' min='0' max='255' step='1'  value='");
      client.print(b);
    client.print("' onchange='this.form.submit()'  />");
    client.print(b);
     client.print("
 <input type=hidden name='blu' value=blu ></form>

");

         

     client.print("<form> <input type='range' name='aa' min='0' max='255' step='1'  value='");
      client.print(v);
    client.print("' onchange='this.form.submit()' />");
    client.print(v);
     client.print("
 <input type=hidden name='verde' value=verde   ></form>

");

   
  

         client.print("<pre>");
         client.print("</pre>");  

client.print("</body>");
         client.print("</html>");         
         break;
       }
     }
   }
   delay(1);
   client.stop();
   query = String("");
   
 }
} 
File leggiSd  (){

            myFile = SD.open("stile.htm");
          
  if (myFile) {
   
    return  myFile;

    myFile.close();
    
  }}

Grazie

Luca

Non si può fare anche così ?

        //verifica se sulla richiesta è presente l'attivazione del LED

  if(readString.startsWith("L=LED_ON", 6))
           {
             //led acceso
             digitalWrite(ledPin, HIGH);    // set the LED on
             LEDON = true;
           }else{
             //led spento
             digitalWrite(ledPin, LOW);    // set the LED OFF
             LEDON = false;             
           }

poi al posto di led metti ciò che vuoi…

come immaginavo...

il controllo che fai è giusto, perchè la richesta che ti dicevo è contenuta in query....

peccatto che ci son 2 errori gravi:

  1. i controlli li fai fuori dell'if (c == '\n') {, quindi prima che la stringa si stata ricevuta completamente (prova a stamparla via seriale dopo l'if e vedrai bene la richesta, tra cui cose sfizise come il tuo tipo di browser, i cockie e qualche altra menata).

  2. la query non finisce con un solo '\n', ma deve essere doppio... quindi l'if in realtà è
    if ( query.endsWith("\n\n") ){} o forse era if ( query.endsWith("\r\n\r\n") ){}

se osservavi l'html della pagina di risposta dall'arduino, ti saresti dovuto accorgere di questo big casino

lesto:
(prova a stamparla via seriale dopo l'if e vedrai bene la richesta, tra cui cose sfizise come il tuo tipo di browser, i cockie e qualche altra menata).

Mi confermi dopo l'if???

questo è il risultato PRIMA dell' if

GGEGETGET GET /GET / GET / HGET / HTGET / HTTGET / HTTPGET / HTTP/GET / HTTP/1GET / HTTP/1.GET / HTTP/1.1GET / HTTP/1.1
GET / HTTP/1.1
GGEGETGET GET /GET /fGET /faGET /favGET /faviGET /favicGET /favicoGET /faviconGET /favicon.GET /favicon.iGET /favicon.icGET /favicon.icoGET /favicon.ico GET /favicon.ico HGET /favicon.ico HTGET /favicon.ico HTTGET /favicon.ico HTTPGET /favicon.ico HTTP/GET /favicon.ico HTTP/1GET /favicon.ico HTTP/1.GET /favicon.ico HTTP/1.1GET /favicon.ico HTTP/1.1
GET /favicon.ico HTTP/1.1

ecc. ecc.
questo ivece è dopo :
if ( query.endsWith("\n") ){
Serial.print(query);

GET /favicon.ico HTTP/1.1
GET /?rr=236&rosso=rosso HTTP/1.1

Grazie per la pazienza

Luca

come puoi vedere DOPO l'if hai la richiesta completa, anzi 2:
una richiede un'immagine (quella che copare affianco al titolo della pagina, in questo forum c'è il simbolo arduino per esempio

l'altra invece è la richiesta del file.

se i tuoi controlli li fai fuori dall'if, ogni carateere letto fai il controllo e gli scrivi l'html...

Grazie
Lo Sketch funziona perchè modifica i colori del led ma
non ho capito questo comportamento,
alla prima visualizzazione ho:

appena muovo gli slide vedo:

mi perde i css :~

a2.jpg

a3.jpg

osserva l'html della pagina per trovare eventiali erroi, quello non credo di penda da arduino

Quello che non capisco è questo comportamento

se io richiamo un file che si trova in sdCard nel void loop()
ogni volta lo dovrebbe caricare?

void loop()
{
  

 Client 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.0 200 OK");
         client.println("Content-Type: text/html");
         client.println();
         
          client.print("<html>"); 
          client.print("<HEAD>");
   

       ttt=leggiSd();   //  <=================
         while (ttt.available())  {
    	client.write(ttt.read());
       }       

 
         
           client.print("<TITLE />Slider + on change1</title>");
.....

Ti ringrazio tantissimo per la pzienza

Luca