Affichage variables booléennes en html sous forme de voyant

[rv_37]

Bonjour,
Avec mon ESP32-s3 je génère des variables tout ou rien que je désire visualiser sur une page html sous forme de voyant .
J'arrive a afficher mes variables sous forme de texte sur ma page mais je n'ai pas les connaissances et je n'ai rien trouvé sur le web pour afficher l'état de mes variables sous forme graphique .

Sous arduino ide:

bool Mode_manu ;
 server.on("/lireModeManu", HTTP_GET, [](AsyncWebServerRequest *request) { request->send(200, "text/plain", String(Mode_manu));  }) ;

dans mon fichier java:

setInterval(function getData()						// ------- 
    {
    var xhttp = new XMLHttpRequest();					
    xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) { document.getElementById("ValeurModeManu").innerHTML = this.responseText;}};xhttp.open("GET", "lireModeManu", true);
    xhttp.send();
    }, 2000);

et dans mon fichier html :
<td>Mode manuel :<span id="ValeurModeManu">0</span> </td>

[zaydm689]

Tu peux afficher l'état de ta variable Mode_manu sous forme de voyant en utilisant du CSS et du JavaScript. Voici comment faire :

1. Ajout d'un voyant dans le HTML

Modifie ton HTML pour inclure un cercle représentant l'état :

html

CopyEdit

<td>Mode manuel :
    <span id="ValeurModeManu">0</span>
    <div id="voyant" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: red; margin-left: 10px;"></div>
</td>

2. Modification de ton script JavaScript

Adapte ton JavaScript pour changer la couleur du voyant en fonction de l'état de Mode_manu :

javascript

CopyEdit

setInterval(function getData() {
    var xhttp = new XMLHttpRequest();					
    xhttp.onreadystatechange = function() { 
        if(this.readyState == 4 && this.status == 200) { 
            var valeur = this.responseText.trim(); // Supprime les espaces au cas où
            document.getElementById("ValeurModeManu").innerHTML = valeur;
            
            // Changer la couleur du voyant
            var voyant = document.getElementById("voyant");
            if (valeur === "1") {
                voyant.style.backgroundColor = "green"; // Allumé
            } else {
                voyant.style.backgroundColor = "red"; // Éteint
            }
        }
    };
    xhttp.open("GET", "lireModeManu", true);
    xhttp.send();
}, 2000);

Explication :

• Un cercle est ajouté en HTML (div avec border-radius: 50%).
• Le script JavaScript récupère la valeur de Mode_manu et met à jour la couleur du voyant :
  • Vert si Mode_manu == 1
  • Rouge sinon

[J-M-L]

@zaydm689

Si vous recrachez un texte obtenu directement depuis chatGPT et similaire, vous n'apportez rien au forum....

essayez de mettre un peu de valeur ajoutée en proposant par exemple un sketch complet qui met cela en oeuvre. Au moins ce sera utile.

[zaydm689]

pardon tu ma eu

[J-M-L]

Votre punition sera de fournir un code complet et testé pour ESP32 démontrant ce principe.

PS: Dans l'avenir, merci d'apporter de la valeur ajoutée. Tout le monde a accès à chatGPT, donc copier la question là bas et poster la réponse n'apporte absolument rien, surtout que parfois elle est complètement fausse...

[rv_37]

Je vous remercie, ça fonctionne .
Le code arduino :

/************************************************/
/* ESP32 S3                                     */
/* test voyants                                 */
/************************************************/

#include <Arduino.h>
#include <WiFi.h>           // Librairie Wifi.h
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>

     // pour la gestion de l'OTA
#include <ElegantOTA.h>     // pour la gestion de l'OTA

#include <LittleFS.h>       // gestion de la mémoire spiffs

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

//WebServer server(80);
AsyncWebServer server(80);

bool Var1 = false;
bool Var2 = true ;
bool Var3 = true;
int i ;

void setup() 
  {
  Serial.begin(115200);
  
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
    }
  Serial.println(WiFi.localIP());

  if (!LittleFS.begin(true)) 
    {
    Serial.println("An error has occurred while mounting LittleFS");
    }
  Serial.println("LittleFS mounted successfully");

   /***********************/ 
/* Gestion des fichier  */  
/************************/
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {                 // ouverture du fichier index depuis la memoire spiffs
  request->send(LittleFS, "/index.html", "text/html");
  });
  
  server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest *request)
  {
  request->send(LittleFS, "/w3.css", "text/css");
  });
 
  server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(LittleFS, "/script.js", "text/javascript");
  });
  

  // variables page html
  server.on("/lireVar1", HTTP_GET, [](AsyncWebServerRequest *request) { request->send(200, "text/plain", String(Var1));  });
  server.on("/lireVar2", HTTP_GET, [](AsyncWebServerRequest *request) { request->send(200, "text/plain", String(Var2));  });
  server.on("/lireVar3", HTTP_GET, [](AsyncWebServerRequest *request) { request->send(200, "text/plain", String(Var3));  });

  
  ElegantOTA.begin(&server);    // Start ElegantOTA
  server.begin();
  }

void loop()   
  {
  ElegantOTA.loop();          // Serveur OTA
  Serial.print( "variable 1 =");
  Serial.println(Var1);
  Serial.print( "variable 2 =");
  Serial.println(Var2);
  Serial.print( "variable 3 =");
  Serial.println(Var3);

  i=i+1;
    Serial.println(i);
  if (i<20)
    {
    Var1 = false;
    Var2 = true ;
    Var3 = true;
    }
  if (i>20)
    {
    Var1 = true;
    Var2 = false ;
    Var3 = false;
    }

    if (i>50)
    {
    i=0;
    }

delay(1000);
 }

Le fichier index.html

<!DOCTYPE html>
<html lang="fr">
 
<head>
    <title> Test animation voyant</title>
    <meta name="viewport" content="width-device-width" ,initial-scale="1" charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="w3.css">

    <!-- insere un fichier externe scrip.js dans lequel sont placées les instrtuction javascript-->
    <script type="text/javascript" src="script.js" > </script>
</head>

<body class="w3-animate-opacity">
  	 <div class="w3-margin w3-center w3-card w3-padding-24">
        	<h1>test animation voyants    </h1>
    	</div>


	<table class="w3-card w3-blue w3-padding-small" style="width:100% " > 	

		<tr>
			<td>Variable1 : <span id="valeurVar1">0</span> 
			<div id="voyant1" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: blue; margin-left: 10px;"></div>
			</td> 

			<td>Variable2 : <span id="valeurVar2">0</span> 
			<div id="voyant2" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: blue; margin-left: 10px;"></div>
			 </td> 

			<td>Variable3 : <span id="valeurVar3">0</span> 
			<div id="voyant3" style="display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: blue; margin-left: 10px;"></div>
			</td> 
		</tr>

	</table>
</body>
</html>

Le fichier script.js

//******************************************************  Varaiables TOR  *************************************

setInterval(function getData()						// ------- Var1
    {
    var xhttp = new XMLHttpRequest();					
    xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) {
	 var valeur = this.responseText.trim(); // Supprime les espaces au cas où
	 document.getElementById("valeurVar1").innerHTML = valeur;

     	// Changer la couleur du voyant
   	 var voyant1 = document.getElementById("voyant1");
         if (valeur == "1") {
                voyant1.style.backgroundColor = "green"; // Allumé
         } else {
                voyant1.style.backgroundColor = "black"; // Éteint
         }

	}};
    xhttp.open("GET", "lireVar1", true);
    xhttp.send();
    }, 2000);


setInterval(function getData()						// ------- Var2
    {
    var xhttp = new XMLHttpRequest();					
    xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) {
	 var valeur = this.responseText.trim(); // Supprime les espaces au cas où
	 document.getElementById("valeurVar2").innerHTML = valeur;

     	// Changer la couleur du voyant
   	 var voyant2 = document.getElementById("voyant2");
         if (valeur == "1") {
                voyant2.style.backgroundColor = "green"; // Allumé
         } else {
                voyant2.style.backgroundColor = "black"; // Éteint
         }

	}};
    xhttp.open("GET", "lireVar2", true);
    xhttp.send();
    }, 2000);

setInterval(function getData()						// ------- Var3
    {
    var xhttp = new XMLHttpRequest();					
    xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) {
	 var valeur = this.responseText.trim(); // Supprime les espaces au cas où
	 document.getElementById("valeurVar3").innerHTML = valeur;

     	// Changer la couleur du voyant
   	 var voyant3 = document.getElementById("voyant3");
         if (valeur == "1") {
                voyant3.style.backgroundColor = "green"; // Allumé
         } else {
                voyant3.style.backgroundColor = "black"; // Éteint
         }

	}};
    xhttp.open("GET", "lireVar3", true);
    xhttp.send();
    }, 2000);

[zaydm689]

je ne le merite pas j'ais juste demader a une ia