Problème de compréhension avec Ajax

Bonjour à tous,

J'essais de comprendre le fonctionnement d'Ajax dans un petit exemple que j"ai un peu transformé. Je développe sur un ESP8266 en Webserver synchrone.
Il s"agit d'automatiser la rétractation d'un store en fonction de la vitesse du vent.
Mon problème est, en cas de coupure secteur, de restaurer l'état de l'autorisation de rétractation du store (variable "valRT") et donc de modifier coté client web l'état ON ou OFF affiché.
Comment faire, avec Ajax ?

Merci de vos retours éclairés.

Le html dans index.h

Blockquote

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<style type="text/css">
.button {
  background-color: red; /* red */
  border: solid;
  color: white;
  padding: 10px 15px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  charset="UTF-8";
}
.button1 {
  background-color: green; /* vert */
  border: solid;
  color: white;
  padding: 10px 15px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  charset="UTF-8";
}
.A {
 background-color: green; /* vert */
  border: solid;
  color: white;
  padding: 10px 15px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  charset="UTF-8";
} 
.B {
 background-color: yellow; /* jaune */
  border: none;
  color: black;
  padding: 10px 15px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  charset="UTF-8";
} 
</style>
<body>
<div>
//<div id="demo">
<h1>Automate STORE</h1>
  <h2>Vitesse du vent : <span id="VALvent">0</span> km/h<br>
  Retractation : 
	<button class="button"  onclick="sendData(1)">ON</button>
	<button class="button1"  onclick="sendData(0)">OFF</button>	
  <span class="B" id="RLState" >NA</span><br>  
  </h2>   
</div>
<script>
// fonction AUTORISATION RETRACTATION 
function sendData(fretrac) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() 
  {
    if (this.readyState == 4 && this.status == 200) 
    {
      document.getElementById("RLState").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "setret?retstate="+fretrac, true);
  xhttp.send();
}
// fonction AFFICHAGE DU VENT EN COURS tt les sec
setInterval(function() 
{
  getData();
}, 1000);
function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) 
    {
      document.getElementById("VALvent").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "readVENT", true);
  xhttp.send();
}
</script>
</body>
</html>
)=====";

Blockquote
Le fichier .ino

Blockquote

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <EEPROM.h>   // pour sauvegarde en cas de redémarrage
#include "index.h"    //HTML et js
#define RLY D2        //autorisation relais de retractation

long randNumber;      //pour test vitesse du vent
int valRT;            //variable pour sauvegarde etat retractation 1/0
bool flstart = true;  //flag restauration const. si redémarrage 
String retState;      //etat auto relais de retractation

const char* ssid = "samb_LT";
const char* password = "05131325";

ESP8266WebServer server(80);  //Serveur port 80

void handleRoot() 
{
  server.send(200, "text/html",MAIN_page);  //Envoi page principale
}
//affichage valeur du vent
void handleVENT() 
{    
  int a = randNumber;  //pour test
  String valeurVent = String(a);
  server.send(200, "text/plain", valeurVent);  //envoi valeur du vent
}

void handleRET() 
{
  String t_state = server.arg("retstate");
  if (t_state == "1") 
  {
    digitalWrite(RLY, HIGH);  //auto relais ON
    retState = "ON";
    valRT = 1;                //sauvegarde pour restauration démarrage
  } else {
    digitalWrite(RLY, LOW);   //auto relais OFF
    retState = "OFF";
    valRT = 0;                //sauvegarde pour restauration démarrage
  }
  EEPROM.write(0, valRT);     //sauvegarde etat auto relais retractation
  delay(100);
  endwrite();                 // verif écriture
  server.send(200, "text/plain", retState);  //Envoi etat autorisation relais retractation 
}

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

  //Autorisation relais retractation
  pinMode(RLY, OUTPUT);
  // 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());      //IP address assigned to your ESP

  server.on("/", handleRoot);          //Which routine to handle at root location. This is display page
  server.on("/setret", handleRET);     //Traitement autorisation retractation
  server.on("/readVENT", handleVENT);  //Traitement affichage du vent actuel
  server.begin();  //Start server
  Serial.println("HTTP server started");
}
//restauration des cst en eepro
void initvar() 
{
  valRT = EEPROM.read(0);  //1 octet
}
//Verification d'écriture EEPROM
void endwrite() 
{
  if (EEPROM.commit()) 
  {
    Serial.println("EEPROM successfully committed");
  } 
  else 
  {
    Serial.println("ERROR! EEPROM commit failed");
  }
}

void loop(void) 
{
  server.handleClient();     //Handle client requests
  randNumber = random(100);  //pour test valeur vent
                             //Restauration à la coupure secteur
  if (flstart == true) 
  {
    flstart = false;
    initvar();               //Restauration des conditions précédentes au démarrage à froid
  }
}

Blockquote

Exactement de la même façon que pour récupérer la vitesse du vent.
Tu interroge régulièrement(polling) ton serveur HTTP et en fonction de la valeur renvoyer, tu met à jour ton élément HTML(RLState)

C'est SUPER, merci Terwal, je commence seulement à comprendre !!!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.