Récupérer zone texte page HTML dans PGM arduino

Bonjour,

J'ai un PGM arduino sur carte Wemos avec memoire SPIFFS dans laquelle j'ai une page HTML et un fichier .txt.

Ce que je voudrai faire , c'est pouvoir récupérer une zone texte saisie dans ma page html dans mon PGM arduino pour pouvoir ensuite copier cette zone texte dans mon fichier txt pour la sauvegarder.

Je ne trouve pas d'info sur le sujet...

Merci

SPIFFS est un système de fichier, donc il suffit d'ouvrir le fichier (HTML) en question avec les commandes habituelles de gestion de fichier, mais au lieu de parler à une carte SD vous allez parler au SPIFFS

#include <FS.h>   // inclure la bibliothèque SPIFFS - FS veut dire "File System"

void setup()
{
  ...
  SPIFFS.begin();                           // démarre SPIFFS (dans le setup)
}

... // plus loin dans le code

  if (SPIFFS.exists("toto.htm")) {. // si le fichier existe
    File fichier = SPIFFS.open("toto.htm", "r");  // ouvre toto.htm en lecture
    ... ; // vous faites des read etc, tout ce que l'on peut faire sur un objet de type File
    close(fichier); // puis on ferme le fichier
  }

...

nanard_baudon_arduino:
Ce que je voudrai faire , c'est pouvoir récupérer une zone texte saisie dans ma page html dans mon PGM arduino pour pouvoir ensuite copier cette zone texte dans mon fichier txt pour la sauvegarder.

Tu veux dire que ta page HTML contient des champs texte que tu veux récupérer?
Comment se présente cette page?
Comment retournes-tu le contenu des champs?

J-M-L:

Oui je sais faire cela.
Mon problème c'est que que n'arrive pas à savoir comment faire pour récupérer une zone texte saisie dans ma page html dans mon PGM arduino.

fdufnews
======:
oui c'est exactement cela:
J'ai une page web toute simple dans le rep Data (SPIFFS) appelé par mon PGM et dans laquelle j'ai un champ de saisie Input que je valide avec un bouton:

et je voudrai récupérer la chaîne saisie dans Input dans mon PGM Arduino.

merci

ah donc vous ne voulez pas lire le fichier HTML. vous voulez lire la réponse de l'utilisateur en HTTP quand il soumet le formulaire ?

si vous ne voulez pas coder à la main le serveur web, regardez du côté de ESPAsyncWebServer

ça va gérer pour vous tout ce qui est compliqué. vous n'aurez plus qu'à parcourir la réponse web lors d'une requête pour voir le contenu des champs. cf la partie sur les paramètres et variables (le paragraphe "GET, POST and FILE parameters") et pour bâtir une réponse celle sur les réponses dans la doc.

Merci pour la réponse.

et pour lire la page Web c'est possible et comment?

On ne lit pas la page WEB, on reçoit des arguments.
Tout dépend de la librairie que tu utilises.

Avec WebServer.h:

WebServer server(80);

void handleForm() {
String val = server.arg("input")
// ...

Avec ESPAsyncWebServer :

void handleForm(AsyncWebServerRequest *request)
{
String val = request->arg("input")
// ...

On ne sait même pas s'il s'agit d'un ESP8266 ou ESP32 ...

Bonjour,

J'ai réussi a créer une zone de saisie avec retour au Client!
Merci de m'avoir mis sur la piste...

Maintenant j'essai de piloter une led avec : server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request), mais ca ne fonctionne pas.

J'ai une page web en PROGMEM dans mon PGM dans laquelle j'ai 2 fonctions appelées par un bouton qui
font appel a la commande dans le Setup:

server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request)
{
digitalWrite(led_rouge, HIGH);
request->send(200);
});

Ca ne fonctionne pas. J'ai contrôlé la led qui est bien en D2 et fonctionne avec d'autre PGM...
Est-ce que j'ai mal utilisé AsyncWebServerRequest *request?

MERCI a ceux qui pourront m'aider

Voici mon code:

#include <Arduino.h>
#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <SPIFFS.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <Hash.h>
  #include <FS.h>
#endif
#include <ESPAsyncWebServer.h>

AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char *ssid = "mon SSID";
const char *password = "MdP";


const char* PARAM_STRING = "inputString";

int interrupteur;                        // inter
int led_rouge;                           // led rouge
int fourche_IR;

int val       = 0;                       // variable pour memoriser comptage
int lumiere   = 0;                       // eclairage pluviometre

int buttonPushCounter = 0;               // variable pour le comptage du nombre d'appuis sur le bouton poussoir
int buttonState       = 1;               // Variable pour l'état actuel du bouton poussoir
int lastButtonState   = 1;               // Variable pour l'état précédent du bouton poussoir

//=========== HTML web page to handle 1 input fields (inputString) ========================

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<body>
<title>pluviometre</title>

<!-- saisie de la date avec retour/visu -->
 <form action="/get" target="hidden-form">
   Date en cours: %inputString% 
   

   Nouvelle date? <input type="text" name="inputString">
   <input type="submit" value="Submit" onclick="submitMessage()">
 </form>
<iframe style="display:none" name="hidden-form"></iframe>

<!--  message validation pour test... -->
<script type="text/javascript">

    function submitMessage() {
      alert("Saved value to ESP SPIFFS");
      setTimeout(function(){ document.location.reload(false); }, 500);
    }
    
<!--  XMLHttpRequest() dans Setup() pgm  --> 
    function onButton() {                                  /* Fonction pour le bouton ON */
      alert("onButton!");
      XMLHttpRequest().open("GET", "on", true);
      xhttp.send();
      Serial.println("onButton!");

}
function offButton() {                                /* Fonction pour le bouton OFF */
    alert("offButton!");
    XMLHttpRequest().open("GET", "off", true);
    xhttp.send();
    Serial.println("offButton!");    
}
</script>

<center>
<style type="text/css">  body { color: #212121; background-color: #CCCC33 } </style>
<h1 style="font-size:150%"><font face="Comic Sans MS" color=#339900>Pluviom&egrave;tre chez Nanard</font>



<img src="pluvio">



<!-- Les boutons ON / OFF -- j appelle les fonctions onButton() et offButton() de cette page -->    
Allumer/eteindre


<button onclick="onButton()" >ON</button>  <button onclick="offButton()">OFF</button>  

</body>)rawliteral";

//=============================================================================================
void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

//=============================================================================================
String readFile(fs::FS &fs, const char * path){
  Serial.printf("Reading file: %s\r\n", path);
  File file = fs.open(path, "r");
  if(!file || file.isDirectory()){
    Serial.println("- empty file or failed to open file");
    return String();
  }
  Serial.println("- read from file:");
  String fileContent;
  while(file.available()){
    fileContent+=String((char)file.read());
  }
  Serial.println(fileContent);
  return fileContent;
}

//=============================================================================================
void writeFile(fs::FS &fs, const char * path, const char * message){
  Serial.printf("Writing file: %s\r\n", path);
  File file = fs.open(path, "w");
  if(!file){
    Serial.println("- failed to open file for writing");
    return;
  }
  if(file.print(message)){
    Serial.println("- file written");
  } else {
    Serial.println("- write failed");
  }
}

// Replaces placeholder with stored values
String processor(const String& var){
  //Serial.println(var);
  var == "inputString";
  return readFile(SPIFFS, "/inputString.txt");

  return String();
}

//=============================================================================================
void setup() {
  Serial.begin(9600);
  // Initialize SPIFFS
  #ifdef ESP32
    if(!SPIFFS.begin(true)){
      Serial.println("An Error has occurred while mounting SPIFFS");
      return;
    }
  #else
    if(!SPIFFS.begin()){
      Serial.println("An Error has occurred while mounting SPIFFS");
      return;
    }
  #endif

  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Assign output variables to GPIO pins
  ////interrupteur= 1;                   // inter sur GPIO3
  led_rouge  = 2;                        // led rouge sur GPIO2
  fourche_IR = 0;                        // led verte sur GPIO0
  
//pinMode(interrupteur, INPUT);
  pinMode(led_rouge, OUTPUT);
  pinMode(fourche_IR, INPUT);

  // Set outputs to LOW
  digitalWrite(led_rouge, LOW);
  digitalWrite(fourche_IR, HIGH);


  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
  });

  server.on("/pluvio", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/pluvio.png", "image/png");
  });

// Send a GET request to <ESP_IP>/get?inputString=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;

/* Lorsque l'on clique sur ON, on allume la led */ 
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    digitalWrite(led_rouge, HIGH);
    request->send(200);
  });

/* Lorsque l'on clique sur OFF, on éteint la led */ 
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    digitalWrite(led_rouge, LOW);
    request->send(200);
  });
    
// GET inputString value on <ESP_IP>/get?inputString=<inputMessage>
    if (request->hasParam(PARAM_STRING)) {
      inputMessage = request->getParam(PARAM_STRING)->value();
      writeFile(SPIFFS, "/inputString.txt", inputMessage.c_str());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/text", inputMessage);
  });
  server.onNotFound(notFound);
  server.begin();
}

//=============================================================================================
void loop() {
//  // To access your stored values on inputString, inputInt, inputFloat
//  String yourInputString = readFile(SPIFFS, "/inputString.txt");
//  Serial.print("*** Your inputString: ");
//  Serial.println(yourInputString);

//  delay(5000);
}

Il y a plus simple :

<button onclick="window.location.href='/on'">ON</button>
<button onclick="window.location.href='/off'">OFF</button>

Le handler

Ensuite je ne pense pas qu'écrire Serial.println("onButton!"); dans une routine javascript soit très heureux.
javascript est exécuté dans le navigateur !

C’est pas votre mot de passe ça hein ?

 //const char *ssid = "Livebox-XXXXXXX4GHZ";
//const char *password = "75FXXXXXX090057804CCXXXXXX";

J'ai essayé mais ça marche pas.

Il m'affiche une nouvelle page:
http://192.168.1.27/on avec Not found

Merci

Vous avez essayé avec “/on/“ (avec un slash à la fin)

Pareil....meme résultat >:(

  1. les handlers /on et /off sont imbriqués dans le handler /get
    Le code du handler /get se situe après le handler de /off.
    si le code était correctement indenté (CTRL-T), cela se verrait mieux.

  2. en JAVASCRIPT c'est comme en C. Une variable se déclare :

    function onButton() {                                  /* Fonction pour le bouton ON */
      alert("onButton!");
      XMLHttpRequest().open("GET", "on", true);
      xhttp.send();
      Serial.println("onButton!");                 // du code ARDUINO dans du JAVASCRIPT ? ? ?
    }

// xhttp doit être déclaré.
    function onButton() {                                  /* Fonction pour le bouton ON */
      var xhttp = new XMLHttpRequest();
      xhttp.open("GET", "on", true);
      xhttp.send();
    }

L'utilisation de XMLHttpRequest à la place de "window.location.href='/on'" n'oblige pas à recharger la page.
Je suppose que c'est ce qui est recherché.

Un conseil: quand on développe en JAVASCRIPT la moindre des choses est d'ouvrir la console WEB (Firefox) ou la console JavaScript (Chrome) afin de vérifier s'il y a des erreurs.
Cela évite d'avancer à l'aveuglette.

Serial.begin(9600); // sur un ESP8266 ? ? ?

115200 au minimum.

ca fonctionne!!! :slight_smile:

J'ai déplacé le code suivant aprés server.begin et la c'est OK:

/* Lorsque l'on clique sur ON, on allume la led */ 
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    Serial.println("ON led!");
    digitalWrite(led_rouge, HIGH);
    request->send(200);
  });

/* Lorsque l'on clique sur OFF, on éteint la led */ 
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    Serial.println("OFF led!");    
    digitalWrite(led_rouge, LOW);
    request->send(200);
  });

Pour Serial.begin(9600); c'est la vitesses de com PGM et autre périphérique et/ou le moniteur série.
Le 115200 c'est la vitesse pour flasher le PGM dans l'ESP (outils/upload speed)

Merci pour votre aide

Pour Serial.begin(9600); c'est la vitesses de com PGM et autre périphérique et/ou le moniteur série.
Le 115200 c'est la vitesse pour flasher le PGM dans l'ESP (outils/upload speed)

Changez la... 115200 c’est un minimum pour l’affichage dans la console série

Pour flasher vous pouvez aller bcp plus vite, généralement ça se passe bien (proche de 1Mbauds)

encore une question...

Comment je fais pour mettre à jour une variable numérique dans la page HTML?
toujours avec AsyncWebServerRequest *request?