Récupérer une variable arduino dans un web serveur sur l'arduino

Bonjour à tous,

J’essaie désespérément de récupérer une variable issue d’un pin de l’arduino pour l’inclure dans le webserver hébergé par ce même arduino.
Ce qui me paraissait très simple est en fait beaucoup plus compliqué que prévu. Je réussi à afficher une page mais celle-ci ne se rafraichit pas quand les valeurs transmises par mon capteur changent.

Le but du script étant : Mesure de la hauteur d’eau → Affichage de la valeur sur une page web → et on recommence :-*

Je ne doute pas que certains d’entre vous on déjà résolu ce problème!

Je laisse mon code ici :

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

const char* ssid = "SSID";
const char* password = "PASSWORD";

#define VITESSE 340 //vitesse du son 340 m/s

const int USTrig = 16; // Déclencheur sur la broche 4
const int USEcho = 13; // Réception sur la broche 7
float H_eau; // Déclaration variable Hauteur d'eau

ESP8266WebServer server(80);
// Initialize the client library
WiFiClient client;


void handleRoot() {
  
  server.send(200, "text/plain", "hello from esp8266!");
  
}

void handleNotFound(){
  
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  
}

void setup(){
  
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);

  server.on("/inline", [](){
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");

  pinMode(USTrig, OUTPUT);
  digitalWrite(USTrig, LOW);
  pinMode(USEcho, INPUT);
}

void loop(void){
  
  server.handleClient();
   // 1. Un état haut de 10 microsecondes est mis sur la broche "Trig"
   digitalWrite(USTrig, HIGH);
   delayMicroseconds(10); //on attend 10 µs
   // 2. On remet à l’état bas la broche Trig
   digitalWrite(USTrig, LOW);

   // 3. On lit la durée d’état haut sur la broche "Echo"
   unsigned long duree = pulseIn(USEcho, HIGH);

   if(duree > 30000)
   {
      // si la durée est supérieure à 30ms, l'onde est perdue
      Serial.println("Onde perdue, mesure échouée !");
   }
   else
   {
      // 4. On divise cette durée par deux pour n'avoir qu'un trajet
      duree = duree/2;

      // 5. On calcule la distance avec la formule d=v*t
      float temps = duree/1000000.0; //on met en secondes
      float distance = temps*VITESSE; //on multiplie par la vitesse, d=t*v

      // 6. On affiche la distance
      Serial.print("Distance x = ");
      Serial.println(distance); //affiche la distance mesurée (en mètres)
      
      // 7. On calcule et on affiche la hauteur d'eau
      float H_eau = 2.2-distance;
      Serial.print ("Hauteur de l'eau : ");
      Serial.println(H_eau);

      // 8. On vérifie que la hauteur ne dépasse pas la cote d'alerte
      if (H_eau > 1.7)
      {
        Serial.println ("Cote d'alerte atteinte");
        server.on("/alerte", [](){
          server.send(200, "text/html", "
    client.println("<html>");
     client.println("<head>"); //entête
     client.println("<title>Hauteur d'eau dans le puits</title>"); //titre de la fenêtre
     client.println("</head>");//fin d'entête
     client.println("<body>"); //corps
     client.println("<h1>Cote d'alerte atteinte</h1>"); //titre en grosse lettres
     client.println("<hr>"); //ligne horizontale
     client.print("
"); //saut de ligne
     client.println("</body>"); //fin du corps
      client.println("</html>"); " //fin du code html
    }); 
       }
       else
       {
        Serial.println ("Niveau conforme");
        server.on("/alerte", [](){
          server.send(200, "text/html", "
     client.println("<html>");
     client.println("<head>"); //entête
     client.println("<title>Hauteur d'eau dans le puits</title>"); //titre de la fenêtre
     client.println("</head>");//fin d'entête
     client.println("<body>"); //corps
     client.println("<h1>Niveau conforme</h1>"); //titre en grosse lettres
     client.println("<hr>"); //ligne horizontale
     client.print("
"); //saut de ligne
     client.println("</body>"); //fin du corps
      client.println("</html>"); " //fin du code html
    // server.send(200, "text/plain", "Niveau conforme");
    });
       }
   }       
       // petite pause
   delay(5000);

}

Bonsoir,

Au niveau du principe, c’est complètement normal car c’est le client qui doit demander le rafraîchissement de la page. Il faut donc que le client demande automatiquement ce rafraîchissement.
Comme d’habitude, il y a plusieurs solutions :

  • le javascript, voyez pour cela le tutorial de J-M-L sur les “techniques avancées”,
  • plus rustiquement, vous pouvez aussi rajouter une ligne “meta” dans l’entête (head) de votre page html
nn est le temps de répétition de la requête en secondes. C'est une méthode simple, mais rustique, car elle fait recharger toute la page, ce qui n'est pas optimum si votre page est longue.

Bonne bidouille

MicroQuettas