MOdificare pagina web arduino

Salve a tutti apro un nuovo topic per porvi una domanda...
come faccio a inserire un immagine di sfondo hostata su un sito altervista come sfondo sulla pagina web di arduino? (pagine nel suo webserver)
MI avete capito :astonished:

Dicono di usare CSS ma non avete qualche esempio?

io ho questo sketch

   client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();
        client.print("<html><head><title>ARDUINO Controllo via WEB</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' ></head><body>");
        
        //PORTONE CASA
        client.println("<hr />");
        client.println("<h1>Portone Casa</h1>");
        client.println("
");
        //STAMPA STATO OPERAZIONE
        client.print("<span>ESEGUITO: </span>");
 
          if (PORTONE) {
              client.println("<span style='color:green'>SI</span>");
            }
            else
            {
              client.println("<span style='color:grey'>NO</span>");
          }
        client.print("<h2><a href='/?L=1'>APRI</a>");
        
        client.println("<hr />");
        
        //Secondo led
        client.println("<h1>LED2</h1>");
        client.println("
");
        //printing LED status
        client.print("<span>STATO LED: </span>");
 
          if (LED2ON) {
              client.println("<span style='color:green'>ON</span>");
            }
            else
            {
              client.println("<span style='color:grey'>OFF</span>");
          }
        client.print("<h2><a href='/?L=2'>ON</a> | <a href='/?L=02'>OFF</a></h2>");
        client.println("<hr />");
        
        //terzo led
         client.println("<h1>LED3</h1>");
        client.println("
");
        //printing LED status
        client.print("<span>STATO LED: </span>");
 
          if (LED3ON) {
              client.println("<span style='color:green'>ON</span>");
            }
            else
            {
              client.println("<span style='color:grey'>OFF</span>");
          }
        client.print("<h2><a href='/?L=3'>ON</a> | <a href='/?L=03'>OFF</a></h2>");
 
        client.println("</body></html>");
 
        //clearing string for next read
        readString="";
        //stopping client
        client.stop();

più che colorare il testo non posso fare...
mi fareste qualche esempio con le immagini di sfondo e il testo colorato?
Grazie

non serve il CSS, basta usare il tag

leggiti una guida sull'HTML

Ok quindi solo HTML? oltre lo sfondo, per fare la tabella e mettere tipo:


| PORTONE | LUCI CASA |


|
| APRI | ACCENDI |

__QUI_BOTTONE | stato: luci accese|

Un po deformata ma vabè...
tipo questa: http://www.brunolagana.com/imgforum/img1.jpg
Potresti farmi qualche esempio già sullo sketch precedente? Grazie

sistema pero' il tuo web server, quando lo refreshi ti da centinaia di pagine

Portone Casa

ESEGUITO: SI
APRI
LED2

STATO LED: OFF
ON | OFF
LED3

STATO LED: OFF
ON | OFF
dStatus, 400, btn, url); // }, // error: function(s, xhr, status, e) { //console.log("GettinHTTP/1.1 200 OK Content-Type: text/html
Portone Casa

ESEGUITO: SI
APRI
LED2

STATO LED: OFF
ON | OFF
LED3

pan>ESEGUITO: SI
APRI
LED2

STATO LED: OFF
ON | OFF
LED3

STATO LED: OFF
ON | OFF
Portone Casa

ESEGUITO: SI
APRI
LED2

STATO LED: OFF
ON | OFF
LED3

STATO LED: OFF
ON | OFF
dStatus, 400, btn, url); // }, // error: function(s, xhr, status, e) { //console.log("GettinHTTP/1.1 200 OK Content-Type: text/html
Portone Casa
...............
............

parti da qui :wink:

non serve il CSS, basta usare il tag

No, il tag img serve per mettere una immagine e basta, per mettere un'immagine di sfondo alla pagina ci vuole il css:

<body style="background: url(http://link-alla-tua-immagine)">
        ...
        </body>

Qui le specifiche.
CIao

Ok ma come lo implemento nello sketch?

con le

client.println("
");

stampi l'html della pagina, oltre che gli header, ovvero la parte con

 client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();

la cosa ideale è creare un file di testo col blocco note, scrivere l'thml della pagina, lavarlo come "file.HTML" e aprirlo con il browser. Quando la pagina sarà corretta, allor puoi mettrela sulla SD oppure metterla nelle clint.print(), anche se l'ultima soluzione a lungo andare è più sbatti.

ps. per il background

è HTML non CSS, e per le tabelle (sempre HTML) è
, ma queste te le devi studiare che non ricordo bene come fari righe e colonne.

Esistono anche dei programmi che semplificano la cosa, ma non mi è mai piaciuta lo stile di scrittura del codice che utilizzano

Grazie mille :smiley: ora provo... Mi sa che dovrò fare tutto a codice! E poi non ho la SD quindi tutto nello sketch

ps. per il background

è HTML non CSS

Certo è HTML, ma quello che è scritto nell'attributo style è CSS, inline CSS per la precisione.
Solo HTML sarebbe così:

<body background="url-dello-sfondo">

ma non si può più fare perché è deprecatissimo dalle direttive W3.

Per implementarlo... beh

client.print("<html><head><title>ARDUINO Controllo via WEB</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' ></head><body style='background: url(http://link-alla-tua-immagine)'>");

Ora che lo vedo, usa i doppi apici per gli attributi dei tag e come codifica sarebbe meglio usare UTF-8.

Le tabelle HTML non sono un concetto immediato, bisogna smanettarci un po' per capirle, comunque di base:

  • apri il tag e poi ,per ogni riga apri un ;
  • per ogni colonna devi aprire un
  • dentro a ogni riga;
    quindi per fare una tabella 2 righe e 2 colonne:
    <table>
    	<tbody>
    		<tr><td>riga1 colonna1</td><td>riga1 colonna2</td></tr>
    		<tr><td>riga2 colonna1</td><td>riga2 colonna2</td></tr>
    		</tbody>
    	</table>
    

    Ciao