Come creare e posizionare testo in una pagina html

International Italiano Software
1

Vorrei scrivere dei testi su pagina html impostando le varie caratteristiche (posizione , colore ,backgroud ..ecc ) come per i pulsanti "apri" ,"chiudi" nello sketch sottostane ma non riesco a farlo.Qualcuno mi può aiutare , grazie.

#include <String.h>
#include <SPI.h>
#include <Ethernet.h>


byte mac[] = { 0x00, 0x16, 0x00, 0x00, 0x00, 0x00 };
byte ip[] = {169,254,147,165};
EthernetServer server(80);

String readString;

byte out_1 = 13;



void setup()
{ 

  Ethernet.begin(mac, ip);
 pinMode(out_1, OUTPUT);

 Serial.begin(9600);
// Serial.begin(9600);           
}

void loop(){

EthernetClient  client = server.available();

 if (client) {
   boolean currentLineIsBlank = true;
  
   while (client.connected()) {
     if (client.available()) { 
       char c = client.read();
       readString.concat(c);   
       if (c == '\n' && currentLineIsBlank) {
         //Serial.print(readString);
        

       if(readString.indexOf("apri") > 0) digitalWrite(out_1, HIGH);        
       if(readString.indexOf("chiudi") > 0) digitalWrite(out_1, LOW);          


  
        
       //  PAGINA HTML      
       client.println("HTTP/1.1 200 OK");
       client.println("Content-Type: text/html");
       client.println("Connection: close");
       client.println();
       client.print("<!DOCTYPE html>");
       client.print("<html>");
       client.print("<head>");
       client.print("<title> PROVA COLLEGAMENTO </title>");
       client.print("</head>");
       client.print("<body bgcolor=\"#ADD8E6\">");
       client.print("<form method=\"get\">");
       
      
     
       if (digitalRead(out_1)== true){
       client.println("APERTO");}

       if (digitalRead(out_1)== false){
       client.println("CHIUSO");}
    
       
       client.print("<input type=\"button\" style=\"width:100px; height:100px;background-color:darkgrey;color:red;position:absolute;top:40px;left:20px;\" value=\"APRI\" onclick =\" location.href='/?apri'\">");
       client.print("<input type=\"button\" style=\"width:100px; height:100px;background-color:darkgrey;color:blue;position:absolute;top:170px;left:20px;\" value=\"CHIUDI\" onclick =\" location.href='/?chiudi'\">");

             
       client.println("</body></html>"); 
       readString="";
       
       delay(5);
       client.flush();
       client.stop(); 
       }
     }
   }
 }
}
2

premesso che non conosco la libreria ethernet...

il codice che hai postato ti funziona?
così a occhio ci sono alcune cose strane...

  • la variabile currentLineIsBlank non serve a niente
  • manca il tag di chiusura della form

poi in linea di massima il principio è corretto. con print / println inserisci del testo dentro la pagina html.

3

Neanche io la conosco, sto provando ad usarla guardando altri codici, il codice funziona, sono due pulsanti che accendono e spengono out 13 e fanno variare la scritta aperto chiuso , io vorrei però come per i pulsanti riuscire a posizionare il testo dove voglio e impostarlo con colore e varie caratteristiche.

4

Non so se ho capito bene l'esigenza, ma credo che tu possa semplicemente studiare la struttura della pagina come style (conosci HTML e CSS?), con gli appositi tag e attributi (es. un DIV che contiene il pulsante) puoi mettere il pulsante dove vuoi.

5

... difatti, onestamnete, mi sembra più una domanda da forum dedicato all'**HTML/CSS **che di Arduino ::slight_smile:

Guglielmo

6

Ma i codici sono simili...non proprio uguali come scrittura, comunque grazie

7

Tra l'altro, se posso dire, io preferirei mettere una interfaccia HTML su qualcosa di più potente e centralizzato, un PC "controllore" (anche un Netbook Windows, o almeno un Raspberry PI), e lasciare fare ad Arduino solo "il lavoro sporco" di attuatore/sensore... :wink: Tanto più se poi si parla di più Arduino distribuiti. Mettere un web server su Arduino per me è una forzatura, a meno che non si facciano cose moolto semplici (ma in questo caso a che serve l'HTML?).

Se posso consigliarti, ti direi di provare anche soluzioni tipo QUESTA o QUESTA e fare del tuo telefonino il controllore con interfaccia... Fidati, è più divertente così e meno frustrante :wink:

8

Ho guardato le opzioni di interfaccia che mi hai consigliato,Cayenne sembra molto interessante ,ma qualcuno ha provato ad usarlo?