Go Down

Topic: problema caricamento pagina html da Arduino Ethernet (Read 423 times) previous topic - next topic

antonyflour

Salve a tutti,
sto sviluppando un programma per monitorare ingressi e uscite dell'Arduino Ethernet in modo da poter visualizzare lo stato anche da remoto. Ho creato pertanto una pagina html che risiede nella flash di Arduino e che al collegamento di un host visualizza lo stato dei pin, tuttavia quando mi collego tramite dispositivo mobile non sempre la pagina viene caricata nel modo corretto, nella maggior parte dei casi spariscono alcune scritte presenti nella tabella che ho creato in html (allego una foto per farvi capire).
A cosa può essere dovuto?

Testato

Non credo sia possibile rispondere senza che tu posti il codice.
- [Guida] IDE - http://goo.gl/ln6glr
- [Lib] ST7032i LCD I2C - http://goo.gl/GNojT6
- [Lib] PCF8574+HD44780 LCD I2C - http://goo.gl/r7CstH

antonyflour

vi invio solo parte di tutto il codice perchè non mi consente di allegarlo tutto:

Code: [Select]
void loop(){
  EthernetClient client = server.available();
  if(client){
    Serial.println("Nella prima if");
    while(client.connected()){
      Serial.println("Nel while");
      if(client.available()){
        char c=client.read();
        stringa.concat(c);
        if(c=='\n'){
          Serial.println(stringa);
          delay(100);
         
          /* CLICK BOTTONE SETUP */
          if(stringa.indexOf("SETUP")>0)
            visualizzaPaginaSetup(client);
          else
            visualizzaPaginaStato(client);
         
         
          /* MODIFICA STATO PIN USCITA */
          if(stringa.indexOf("PIN2")>0)
            modificaStatoPin(client,pin2,stringa);
          if(stringa.indexOf("PIN3")>0)
            modificaStatoPin(client,pin3,stringa);
          if(stringa.indexOf("PIN4")>0)
            modificaStatoPin(client,pin4,stringa);
          if(stringa.indexOf("PIN5")>0)
            modificaStatoPin(client,pin5,stringa);
          if(stringa.indexOf("PIN6")>0)
            modificaStatoPin(client,pin6,stringa);
          if(stringa.indexOf("PIN7")>0)
            modificaStatoPin(client,pin7,stringa);
          if(stringa.indexOf("PIN8")>0)
            modificaStatoPin(client,pin8,stringa);
          if(stringa.indexOf("PIN9")>0)
            modificaStatoPin(client,pin9,stringa);
          if(stringa.indexOf("modUscite")>0){
            modificaNomePinUscita(stringa);
            client.println(F("<meta http-equiv=refresh content=0;url=http://192.168.1.20>"));
          }
          if(stringa.indexOf("modIngressi")>0){
            modificaNomeTipoPinIngresso(stringa);
            client.println(F("<meta http-equiv=refresh content=0;url=http://192.168.1.20>"));
          }
           
          stringa="";
          delay(200);
          client.flush();
          client.stop();     
        }
      }
    }
  }
}

void visualizzaPaginaStato(EthernetClient client){
  /* PAGINA HTML */
  client.println(F("HTTP/1.1 200 OK"));
  client.println(F("Content-Type: text/html"));
  client.println(F("Refresh: 10"));
  client.println();
  client.print(F("<html><head><title> Controller remoto </title><head>"));
  client.print(F("<body><p align=center><font size=7 face=verdana> CONTROLLER REMOTO </font><br><br><br>"));
  client.print(F("<p align=center><font size=5 face=verdana> Stato Uscite </font><br><br>"));
  client.print(F("<p align=center><table width=400 height=200 border=1>"));
 
  /* INTESTAZIONE TABELLA USCITE*/
  client.print(F("<tr><td><p align=center><font size=5 face=verdana> Pin </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana> Nome </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana> Stato </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana> Azione </font>"));
 
  visualizzaRigaTabellaPinUscita(client,pin2,nomePin2);
  visualizzaRigaTabellaPinUscita(client,pin3,nomePin3);
  visualizzaRigaTabellaPinUscita(client,pin4,nomePin4);
  visualizzaRigaTabellaPinUscita(client,pin5,nomePin5);
  visualizzaRigaTabellaPinUscita(client,pin6,nomePin6);
  visualizzaRigaTabellaPinUscita(client,pin7,nomePin7);
  visualizzaRigaTabellaPinUscita(client,pin8,nomePin8);
  visualizzaRigaTabellaPinUscita(client,pin9,nomePin9);
  client.print(F("</table><br><br><br>"));
 
  /* INTESTAZIONE TABELLA INGRESSI */
  client.print(F("<p align=center><font size=5 face=verdana> Stato Ingressi </font><br><br>"));
  client.print(F("<p align=center><table width=500 height=200 border=1>")); 
  client.print(F("<tr><td><p align=center><font size=5 face=verdana> Pin </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana> Tipo </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana> Nome </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana> Stato </font>"));
 
  visualizzaRigaTabellaPinIngressi(client, pinA0, tipoPinA0, nomePinA0);
  visualizzaRigaTabellaPinIngressi(client, pinA1, tipoPinA1, nomePinA1);
  visualizzaRigaTabellaPinIngressi(client, pinA2, tipoPinA2, nomePinA2);
  visualizzaRigaTabellaPinIngressi(client, pinA3, tipoPinA3, nomePinA3);
  visualizzaRigaTabellaPinIngressi(client, pinA4, tipoPinA4, nomePinA4);
  visualizzaRigaTabellaPinIngressi(client, pinA5, tipoPinA5, nomePinA5);
  client.print(F("</table><br><br><br>"));

  /* BOTTONE SETUP */
  client.print(F("<p align=right><table><td><form method=get name=pin4 action=SETUP><input type=submit style='background-color:blue;height:70;width:100;font-weight:bold;color:white' value=Setup></form></table>"));
         
  client.print(F("</body></html>"));

}

/* Crea la riga della tabella di un pin in uscita */
void visualizzaRigaTabellaPinUscita(EthernetClient client, int pin, String nomePin){
 
  client.print(F("<tr><td><p align=center><font size=5 face=verdana>"));
  String nomePred = "PIN" + String(pin);  // il nome predefinito è del tipo PIN# es(PIN2,PIN3...) Utilizziamo il nome predefinito per il comando di accensione e spegnimento
  client.print(nomePred);
  client.print(F("</font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana>"));
  client.print(nomePin);  //usiamo il nome personale del pin solo per un miglior utilizzo
  client.print(F("</font>"));
    if(digitalRead(pin)==true){
    client.print(F("<td><p align=center><font size=5 color=green face=verdana> ON </font>"));
    client.print(F("<td><p align=center><font size=5 color=red face=verdana><a href="));
    client.print(nomePred);
    client.print(F("OFF> Spegni </a></font>"));
    }
    else{
      client.print(F("<td><p align=center><font size=5 color=red face=verdana> OFF </font>"));
      client.print(F("<td><p align=center><font size=5 color=green face=verdana><a href="));
      client.print(nomePred);
      client.print(F("ON> Accendi </a></font>"));
    }
    delay(10);
}

/* Modifica lo stato di un pin dato a partire dalla stringa inviata al server ("ON" accensione, "OFF" spegnimento) */
void modificaStatoPin(EthernetClient client, int pin, String stringaHost){
  if(stringaHost.indexOf("ON")>0){
    digitalWrite(pin,HIGH);
    delay(10);   
    client.println(F("<meta http-equiv=refresh content=0;url=http://192.168.1.20>"));
    }
    if(stringaHost.indexOf("OFF")>0){
      digitalWrite(pin,LOW);
      delay(10);
      client.println(F("<meta http-equiv=refresh content=0;url=http://192.168.1.20>"));
    }
}

/* Crea la Riga della tabella di un pin di ingresso */
void visualizzaRigaTabellaPinIngressi(EthernetClient client, int pin, int tipoPin, String nomePin){
  String nomePred= "PINA" + String((pin-14));  // il nome predefinito è del tipo PINA# es(PINA0,PINA1...)
  client.print(F("<tr><td><p align=center><font size=5 face=verdana>"));
  client.print(nomePred);
  client.print(F("</font>"));
  if(tipoPin)
    client.print(F("<td><p align=center><font size=5 face=verdana> N.C. </font>"));
  else
    client.print(F("<td><p align=center><font size=5 face=verdana> N.O. </font>"));
  client.print(F("<td><p align=center><font size=5 face=verdana>"));
  client.print(nomePin);
  client.print(F("</font>"));
    if(digitalRead(pin)==true){
      if(tipoPin)
        client.print(F("<td><p align=center><font size=5 color=green face=verdana> CHIUSO </font>"));
      else
        client.print(F("<td><p align=center><font size=5 color=red face=verdana> CHIUSO </font>"));
    }
    else{
      if(tipoPin)
        client.print(F("<td><p align=center><font size=5 color=red face=verdana> APERTO </font>"));
      else
        client.print(F("<td><p align=center><font size=5 color=green face=verdana> APERTO </font>"));
    }
  delay(10);
}

nid69ita

Allegalo come file, usa Additional Options, quella scritta in arancione, sotto a dove scrivi il testo.
my name is IGOR, not AIGOR


pablos

#5
Jul 19, 2014, 01:26 am Last Edit: Jul 19, 2014, 01:28 am by pablos Reason: 1
Quote
tuttavia quando mi collego tramite dispositivo mobile non sempre la pagina viene caricata nel modo corretto

non tutti gli smartphone usano lo stesso sistema op, non tutti usano lo stesso browser.
Tu vedi delle caselle bianche, altri potrebbero non vedere le righe di suddivisione della tabella, altri ancora allineamenti diversi.
Bisognerebbe usare delle librerie apposite per smartphone o creare un app per esso.

-Quella che hai fatto è una pagina web che fa dei salti di qua e di la a seconda di quello che si clicca sullo schermo, va verificato se poi il tutto è ben formattato in html con le giuste chiusure dei tag.

-hai uno spreco di ram con tutti quegli Int pinx, puoi usare Byte pinx

-il   return NULL; è ambiguo

-non hai impostato il pin cs della ethernet alcuni aggiornamenti manuali della pagina ne provocano il blocco totale  

- #include <EthernetClient.h> non è necessario

- <meta http-equiv=refresh content=0;url=http://192.168.1.20> questo indirizzo IP è sparso ovunque nello sketch se cambi IP sei obbligato a cambiare molte linee di codice.

- il sistema di visualizzazione è molto costoso per uno smartphone se si trova fuori dalla rete domestica (3G), succhia circa 25-30Kb ogni refresh/5s.

per il resto se è tuo, hai fatto un buon lavoro :)
ciao
no comment

antonyflour

Ti ringrazio  ;)

Comunque il codice è ben formattato in html con le giuste chiusure dei tag (mancano solo nei casi in cui l'html permette); per quanto riguarda l'ip e il sistema di visualizzazione costoso non è un problema per come deve essere utilizzato l'Arduino.
Non ho capito però perchè il NULL è ambiguo? e come devo impostare il pin cs?

PaoloP


-il   return NULL; è ambiguo


Anche lo stesso inventore ha chiesto scusa per aver creato il riferimento NULL.
--> http://everythingsysadmin.com/2009/01/tony-hoare-apologizes-for-inve.html

antonyflour

ahahah non lo sapevo!
Comunque puoi spiegarmi come devo impostare il pin cs??

pablos

se fai degli aggiornamenti a mano sul browser, si inchioda, questo ti evita il problema
Code: [Select]
pinMode(10, OUTPUT);
  digitalWrite(10, 1);
no comment

antonyflour


pablos

#11
Jul 19, 2014, 11:41 am Last Edit: Jul 19, 2014, 11:43 am by pablos Reason: 1
nel setup() insieme agli altri pin, praticamente lo inizializzi in high allo start

il NULL è ambiguo perchè lo dice il compilatore ahahahahahhaha, poi che lo avesse detto anche l'inventore non lo sapevo nemmeno io
no comment

antonyflour

va benissimo, ti ringrazio!
E comunque per il fatto che spariscono le scritte dalla pagina web, non credo di poter fare molto, perchè come hai detto anche tu dovrebbe dipendere dal browser che visualizza, ad esempio sul PC con qualsiasi browser funziona alla grande, su dispositivi mobile invece dà problemi con internet explorer per windows phone; su ios con Safari non mi visualizza proprio la pagina di Setup, probabilmente ci sarà qualche incompatibilità con il tag <fieldset>, boh

pablos

L'ho caricato per provarlo giusto per vedere quello che dicevi, io non ho caselle vuote, ma in compenso le ultime 4 righe della tabella non hanno la griglia (test su android)
no comment

pablos

#14
Jul 19, 2014, 11:51 am Last Edit: Jul 19, 2014, 11:53 am by pablos Reason: 1
se hai voglia e tempo, ti fai un webserver su SD, una paginetta html, un po' di js caricato con il jQuery Mobile, se cerchi qualche progetto lo trovi
https://www.google.it/#q=arduino+jQuery+Mobile

ciao
no comment

Go Up