ESP8266 HTML interfaccia

ciao ragazzi Sto scelrando trai vari post e libri ma non capisco bene una cosa.
Devo costruire con esp8266 una semplice tabella HTML , leggere dei valori e poterli modificare.
Il problema è che nell'esempio che posto , non riesco a memorizzare il valore che mi arriva dal web.

Sto lavorando nella sezione cmd1 le altre non guardatele.
Vorrei provare a scrivere un numero o nome ( dove trovate mikey) e memorizzarlo nella mia variabile

#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <ESP8266WebServer.h>

/* Set these to your desired credentials. */
const char *ssid = "DCmoteAP2";
const char *password = "12345";

ESP8266WebServer server(80);

const String HTTP_HEAD           = "<!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/><title>{v}</title>";
const String HTTP_STYLE  = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;}  input{width:90%;}  body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.6rem;background-color:#1fb3ec;color:#fdd;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .button2 {background-color: #008CBA;} .button3 {background-color: #f44336;} .button4 {background-color: #e7e7e7; color: black;} .button5 {background-color: #555555;} .button6 {background-color: #4CAF50;} </style>";
const String HTTP_SCRIPT        = "<script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script>";
const String HTTP_HEAD_END      = "</head><body><div style='text-align:left;display:inline-block;min-width:260px;'>";
const String HTTP_LEGGI =  "<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h2>Bordered Table</h2> <p>Use the CSS border property to add a border to the table.</p> <table style=\"width:100%\"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>";


const String HOMEPAGE = "<form action=\"/cmd1\" method=\"get\"><button class=\"button3\">Red</button></form>
<form action=\"/cmd2\" method=\"get\"><button class=\"button6\">Green</button></form>
 <form action=\"/cmd3\" method=\"get\"><button class=\"button2\">Blue</button></form>
<form action=\"/cmd4\" method=\"get\"><button class=\"button4\">Off</button></form>
    ";

char buf[200] = "HOME";
int numero ;




/* Just a little test message.  Go to http://192.168.4.1 in a web browser
 * connected to this access point to see it.
 */
void handleRoot() {
 String s =HTTP_HEAD;
       s += HTTP_STYLE;
      s += HTTP_SCRIPT;  
      s += HTTP_HEAD_END;
      s += "<H3>www.dcmote.duino.lk</H3>";
      s+=HOMEPAGE;
  server.send(200, "text/html", s);
 
}

void cmd1() {
 String s =HTTP_HEAD;
       s += HTTP_STYLE;
      s += HTTP_SCRIPT;  
      s += HTTP_HEAD_END;
        s += HTTP_LEGGI;
      s += "<H3>Qui metto wirllo che voglio </H3>";
      s+=HOMEPAGE;
//  server.send(200, "text/html", s);
   //Formulario para cartel

 s += "<FORM action=\"/\" method=\"post\">";
 s += "Introduzca texto a mostrar:
";
 s += "<input type=\"text\" name=\"texto\" id=\"texto\" value=\"Mickey\">";
  s+= "
";
  s += "<input type=\"submit\" value=\"Enviar\">";
 s += "</form>";
  s += "
";
  s += "
";
 s += "
";
   server.send(200, "text/html", s);
   
   digitalWrite(D0,HIGH);
   Serial.println (numero);
   
   Serial.println (" andrea 1 ");
}
void cmd2() {
 String s =HTTP_HEAD;
       s += HTTP_STYLE;
      s += HTTP_SCRIPT;  
      s += HTTP_HEAD_END;
      s += "<H3>www.dcmote.duino.lk</H3>";
      s+=HOMEPAGE;
  server.send(200, "text/html", s);
    digitalWrite(D1,HIGH);
}
void cmd3() {
 String s =HTTP_HEAD;
       s += HTTP_STYLE;
      s += HTTP_SCRIPT;  
      s += HTTP_HEAD_END;
      s += "<H3>www.dcmote.duino.lk</H3>";
      s+=HOMEPAGE;
  server.send(200, "text/html", s);
   digitalWrite(D2,HIGH);
}
void cmd4() {
 String s =HTTP_HEAD;
       s += HTTP_STYLE;
      s += HTTP_SCRIPT;  
      s += HTTP_HEAD_END;
      s += "<H3>www.dcmote.duino.lk</H3>";
      s+=HOMEPAGE;
  server.send(200, "text/html", s);
    digitalWrite(D0,LOW);
     digitalWrite(D1,LOW);
      digitalWrite(D2,LOW);
     
}

void setup() {
  delay(1000);
  pinMode(D0,OUTPUT);
  pinMode(D1,OUTPUT);
  pinMode(D2,OUTPUT);
 
    digitalWrite(D0,LOW);
    
  Serial.begin(115200);
  Serial.println();
  Serial.print("Configuring access point...");
  /* You can remove the password parameter if you want the AP to be open. */
  WiFi.softAP(ssid, password);

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.on("/cmd1", cmd1);
  server.on("/cmd2", cmd2);
   server.on("/cmd3", cmd3);
  server.on("/cmd4", cmd4);
  
  server.begin();
  Serial.println("HTTP server started");
}




void loop() {
  server.handleClient();
  
}
}

Allora, prima cosa ti conviene indentare per bene il codice per evitare "mal di testa" tuoi e di chi cerca di leggere il tuo codice. Apri l'IDE, e premi Ctrl-T e te lo indenta lui.

Ma non mi è ben chiaro tu dove stai cercando di leggere il valore di quel campo "texto", nel codice non si vede nulla, quindi immagino che tu stia chiedendo come fare.
Se capisci un poco di html puoi vedere che hai fatto una form che action ha "/" e come metodo "post", quindi quando premi il pulsante "Enviar" richiamerai "/" con metodo POST, il che significa, stando al tuo codice, che partirà la "handleRoot()". Qui però devi distinguere se la root è stata chiamata con GET (normale chiamata) o POST (risultato della form). Nel secondo caso devi leggere i parametri passati dalla POST, cercare "texto" e quindi estrarre il valore e farci quello che ti serve (per test ti direi mostralo in seriale per conferma, poi se funziona vai avanti).

Però dato che la form è gestita su cmd1(), per maggiore linearità ti direi di cambiare l'attributo action della form, e puntare a cmd1 ("action="/cmd1") e mettere qui la if() che discrimina il metodo usato per invocare la pagina.

Se vuoi semplificarti la vita: https://forum.arduino.cc/index.php?topic=433776.0.

docdoc:
Allora, prima cosa ti conviene indentare per bene il codice per evitare "mal di testa" tuoi e di chi cerca di leggere il tuo codice. Apri l'IDE, e premi Ctrl-T e te lo indenta lui.
.
.

A. C. Clarke (che di tecnologia se ne intendeva, avendo fatto parte della squadra che ha sviluppato il radar) diceva che una tecnologia sufficientemente avanzata è indistinguibile dalla magia
Ecco, ci sono arrivato
Vado a comperare un gallo da sacrificare.....

ciao SUKKOPERA avevo gia' visto i tuoi lavori . Hai un esempio da poterci lavorare in cui leggi i parametri dal web e li scrivi?
grazie

DOCDOC mi puoi esprimere in codice quanto hai detto che mi sembra che hai capito di quanto ho bisogno
grazie mille

Bettybetty:
ciao SUKKOPERA avevo gia' visto i tuoi lavori . Hai un esempio da poterci lavorare in cui leggi i parametri dal web e li scrivi?
grazie

Più o meno... L'esempio LedControl è implementato con un form. Non ci sono textarea ma il principio è lo stesso. Riga 89 e altre attorno.

Bettybetty:
DOCDOC mi puoi esprimere in codice quanto hai detto che mi sembra che hai capito di quanto ho bisogno

Ehm, non voglio essere drastico, ma lo scopo del forum è chiedere aiuto per far funzionare qualcosa che non si riesce, non tanto quello di scrivere codice "conto terzi".. :wink:
Quindi generalmente prima si scrive un codice e poi si chiede come mai non funziona, e questo non per "cattiveria" ma perché così si impara qualcosa di nuovo invece di "copiaincollare" codice fatto da altri che non si comprende.

Nel tuo caso, ho l'impressione che tu non abbia molta dimestichezza né con l'HTML né (quantomeno) con la programmazione di Arduino, ma un suggerimento te l'ho dato, provo a dirti più in dettaglio:

  1. dentro alla "cmd1()" dove mandi la form devi cambiare l'attributo "target" da "/" a "/cmd1", questo perché così gestirai sempre lì dentro il valore ricevuto dalla sua form
  2. sempre nella "cmd1()" devi distinguere se il client ti ha chiamato con una GET o una POST, nel primo caso devi eseguire il codice attuale, nel secondo devi invece visualizzare (per ora) il falore ricevuto, per comprendere se il tutto funziona come ti aspetti.

In alternativa puoi definire una funzione apposita per gestire il risultato del post:

  1. target="cmd1post"
  2. non modifichi la cmd1 ma crei una "cmd1post" che gestirà quindi la richiesta.

Ma il problema principale è che dovresti prima CAPIRE come funziona la libreria ESP8266WebServer (io non l'ho mai usata, e non credo di avere tempo per studiarla per te...), studiandoti bene gli esempi e cercando magari esempi che usano proprio la lettura dei campi di una form inviata col metodo POST (e quindi ovviamente devi capire meglio come funziona l'html e l'http).

Ad esempio, per leggere i parametri di una POST credo che tu debba usare questo:

server.on("/cmd1", HTTP_POST, cmd1post);

dove ovviamente "cmd1post" è una funzione che legge i parametri (se non usi il secondo parametro, lui richiama quella funzione sia con GET sia con POST)
Nel tuo caso "texto" ad esempio:

void cmd1post() {
  if( ! server.hasArg("texto") ) 
  {
    server.send(400, "text/plain", "400: Invalid Request"); 
    return;
  }
  Serial.print("Valore=[");
  Serial.print(server.arg("texto"));
  Serial.println("]");
}

Qui ti riporta semplicemente su seriale il valore ricevuto, lo userai per controllare che tutto funzioni correttamente come atteso (nel caso, devi studiare la libreria e cercare esempi simili...).

Credo anche che per leggere i parametri del POST tu debba indicare come content-type "application/x-www-form-urlencoded".

Insomma, come vedi ci sono vari aspetti che ti conviene iniziare ad investigare facendo prove (ed in caso di problemi, posta qui il codice delle tue prove e l'esito, e vedremo di aiutarti!)

docdoc:
Ehm, non voglio essere drastico, ma lo scopo del forum è chiedere aiuto per far funzionare qualcosa che non si riesce, non tanto quello di scrivere codice "conto terzi".. :wink:

... ed è anche ben spiegato nel REGOLAMENTO, punto 16.1 e 16.13 ::slight_smile:

Guglielmo

>Bettybetty: Dai retta, studiati bene gli esempi della libreria di SukkoPera, con qualche piccola modifica li adatti a fare quello che serve a te senza stare ad impazzire con il "parsing" di ciò che ricevi e con tutto il resto ::slight_smile:

Guglielmo

Volevo provare l'esempio di SukkoPera ma mi da

C:\sketchbook\libraries\Webbino-master\src/WebbinoCore/WebServer.h:29:21: fatal error: PString.h: No such file or directory

 #include <PString.h>

Dependencies
Apart from the various networking libraries mentioned above, Webbino requires the PString library to be installed.

Purtroppo non riesco a collegarmi:

Failed to get configuration from DHCP

mentre i due PC, la esp32 e lo Smartphone sono collegati, sempre in DHCP.

Ho provato su ESP32 ma mi da questo errore:

Arduino:1.8.5 (Windows 7), Scheda:"ESP32 Dev Module, Disabled, Default, QIO, 80MHz, 4MB (32Mb), 921600, None"

Opzioni di compilazione cambiate, ricompilo tutto
In file included from C:\Users\Stefano\AppData\Local\Temp\arduino_modified_sketch_991472\LedControl.ino:31:0:

C:\sketchbook\libraries\Webbino-master\src/WebbinoInterfaces/WIZ5x00.h:58:17: error: cannot declare field 'NetworkInterfaceWIZ5x00::server' to be of abstract type 'EthernetServer'

  EthernetServer server;

                 ^

In file included from C:\Program Files\arduino-1.8.5\libraries\Ethernet\src/Ethernet.h:8:0,

                 from C:\sketchbook\libraries\Webbino-master\src/WebbinoInterfaces/WIZ5x00.h:28,

                 from C:\Users\Stefano\AppData\Local\Temp\arduino_modified_sketch_991472\LedControl.ino:31:

C:\Program Files\arduino-1.8.5\libraries\Ethernet\src/EthernetServer.h:8:7: note:   because the following virtual functions are pure within 'EthernetServer':

 class EthernetServer : 

       ^

In file included from C:\Users\Stefano\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.0\cores\esp32/Arduino.h:156:0,

                 from sketch\LedControl.ino.cpp:1:

C:\Users\Stefano\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.0\cores\esp32/Server.h:28:18: note: 	virtual void Server::begin(uint16_t)

     virtual void begin(uint16_t port=0) =0;

steve-cr:
Purtroppo non riesco a collegarmi ...

... hai modificato il file di configurazione (webbino_config.h) per selezionare la giusta scheda e le giuste opzioni ?

Guglielmo

Hai ragione: me lo imparo bene poi ci riprovo.