[Résolut]Demande aide ESP8266 envoyer variables INT vers HTML SPIFFS

Marsh Posté le 22-12-2017 à 07:26:04

Bonjour a tous,

J'utilise une ESP8266 Nodemcu, mon code avec l'arduino ide 1.8.5
Je connais quelques code C qui m'a bien aidé pour l'arduino, comme je ne suis pas programmeur j'ai des difficulté de comprendre certaine explication.
Après plusieurs jours de recherche sur le Net et d'avoir essayé plusieurs codes que j'ai trouvé en ligne cela ne marche pas, ,c'est pour ça que je viens a votre aide [:madix]

je cherche a comprendre comment faire et bien sur d'arriver a le faire

Mes fichiers HTML, CSS sont stocké sur le SPIFFS, (après plusieurs jours de recherche j'ai réussi [:alienmaster02] ), j'arrive bien a afficher ma page web en accédant a l'ip du ESP reçu par mon routeur.

J'utilise la librairie ESP8266WebServer.h.
Je cherche a envoyer 4 données de type INT vers ma page WEB.
J'ai regarder plusieurs exemple ils n'utilisent pas le même libraire que moi, d’après ce que j'ai compris il faut utiliser du XML coté ESP8266 et du cote HTML envoyer un HTTP vers l'esp pour qu'il envoie les données, ça c'est la théorie, en pratique alors comment faire :??:

mon code est le suivant

Code :

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <FS.h>
const char *host = "serverweb1";
const char* ssid = "Mon SSID";
const char* password = "MON PASS";
const String DISPLAY_DATA_HTML = "/html/display_data.html";
const char *configUsername = "admin";
const char *configPwd = "admin";
ESP8266WebServer server(80);
int data1;
String XML; // pour envoyer le code XML a ma page web
void handleRoot() {
server.send(200, "text/plain", "Welcome to my Irrigation System!" );
}
void DisplayData()
{
String form = "";
File f = SPIFFS.open(DISPLAY_DATA_HTML, "r" );
if (!f)
{Serial.println("Can't open update html file" );
server.send(404, "text/html", "File not found" );
}
else
{char buf[1024];
int siz = f.size();
while(siz > 0)
{size_t len = std::min((int)(sizeof(buf) - 1), siz);
f.read((uint8_t *)buf, len);
buf[len] = 0;
form += buf;
siz -= sizeof(buf) - 1;
}
f.close();
server.send(200, "text/html", form);
}
}
// code XML que j'essaye, je ne sais pas si c'est correct
void handleXML()
{XML="<?xml version='1.0'?>";
XML+="<response>";
XML+="data1";
XML+="</response>";
server.send(200,"text/xml",XML);
}
void setup(void)
{Serial.begin(115200);
Serial.println("..." );
Serial.println("Mounting FS..." );
if (!SPIFFS.begin())
{Serial.println("Failed to mount file system" );
return;
}
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("/display_data", [&](){
if(!server.authenticate(configUsername, configPwd))
{return server.requestAuthentication();
}else
{DisplayData(); // display the page
}
});
server.on("/reqEtatVariables",handleXML);
server.serveStatic("/css", SPIFFS, "/html/css" );
server.serveStatic("/display_data.html", SPIFFS, "/html/display_data.html" );
server.begin();
Serial.println("HTTP server started" );
if (!MDNS.begin(host))
{Serial.println("Error setting up MDNS responder!" );
while(1)
{delay(1000);
}
}
Serial.println("mDNS responder started" );
// Add service to MDNS-SD
MDNS.addService("http", "tcp", 80);
}
void loop(void)
{server.handleClient();
data1 = variable INT qui change;
}

mon code HTML

Code :

<html lang="en">
<head>
<meta charset="utf-8" />
<script>
function obtenirVariables()
{
var uniqueURL = "reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
var request = new XMLHttpRequest(); // http://www.toutjavascript.com/refe [...] equest.php
// la fonction à appeler lors d'un changement d'avancement de la requête AJAX
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
// Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles
if (request.status == 200)
{
// Code retour du serveur après l'appel AJAX == 200 => OK, tout s'est bien passé
xmlResponse=request.responseXML;
xmldoc = xmlResponse.getElementsByTagName('response');
message = xmldoc[0].firstChild.nodeValue;
document.getElementById('runtime').innerHTML=message;
}
}
}
request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
request.send(null);
setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s
}
</script>
<link href="css/style.css" rel="stylesheet">
</head>
<body onload="obtenirVariables()">
<div id="header">
<div id="header-top">
<h2>Recuperation du Data depuis le ESP</h2>
</div>
<div id="header-bottom">
<nav id="menu">
CODE DE MON MENU
</nav>
</div>
</div>
</header>
<p id="runtime"></p> cela devrais afficher le data dans ma page, ça le fais pas
</body>
</html>

Dans mes codes il y a un envoie d'une variable INT, si ça marchera avec une, ça marchera aussi avec 4

Merci pour tous ceux qui m'aide, me guide, m'explique, bien sur je cherche a comprendre comment faire et bien sur d'arriver a le faire

Message édité par noam76 le 23-12-2017 à 20:19:57

Reply

Marsh Posté le 22-12-2017 à 07:26:04

Reply

Marsh Posté le 22-12-2017 à 08:25:03

Qu'est-ce qui ne marche pas ? Tu as un retour d'erreur quelque part ?

Vu que c'est ta page web qui envoie les variables vers le serveur, tu peux déjà regarder avec un inspecteur web (Ctrl + Maj + J) et regarder dans l'onglet "Réseau" que l'appel XHR se fasse bien, et vérifier ce que tu obtiens en retour (un code 200 si tout est bon).

Essaie pour commencer de rajouter un "/" devant "reqEtatVariables" (ligne 7 de ton HTML) vu que le service que tu appelles est à la racine de ton serveur.

Et fais gaffe à l'indentation

Message cité 1 fois

Reply

Marsh Posté le 22-12-2017 à 15:02:19

MossieurPropre a écrit :

Qu'est-ce qui ne marche pas ? Tu as un retour d'erreur quelque part ?
Vu que c'est ta page web qui envoie les variables vers le serveur, tu peux déjà regarder avec un inspecteur web (Ctrl + Maj + J) et regarder dans l'onglet "Réseau" que l'appel XHR se fasse bien, et vérifier ce que tu obtiens en retour (un code 200 si tout est bon).

Je connaissais pas l'inspecteur web, J'ai remonter mon code HTML su le spiffs après changement.
Selon l'inspecteur WEB : error 404

MossieurPropre a écrit :

Essaie pour commencer de rajouter un "/" devant "reqEtatVariables" (ligne 7 de ton HTML) vu que le service que tu appelles est à la racine de ton serveur.

J'ai rajouter un "/" devant "reqEtatVariables".

MossieurPropre a écrit :

Et fais gaffe à l'indentation

Désolé j'ai essayé de réorganiser, j’espère que c'est plus lisible.

J'ai fais une recherche pour voir si j'ai bien configurer le code XML du coté ESP
Apres plusieurs essaie j'ai réussi

du coté esp j'ai changé le code suivant

Code :

void handleXML()
{XML="<?xml version='1.0'?>";
XML+="<response>";
XML+="data1";
XML+="</response>";
server.send(200,"text/xml",XML);
}

Par

Code :

void handleXML()
{XML="<?xml version='1.0'?>";
XML+="<xml>";
XML+="<response>";
XML+= Web_Soil_Sensor1;
XML+="</response>";
XML+="</xml>";
server.send(200,"text/xml",XML);
}

Sur ma page web j'ai mis ce code

Code :

<script>
function obtenirVariables()
{var uniqueURL = "/reqEtatVariables";
//var uniqueURL = "/reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
var request = new XMLHttpRequest(); // http://www.toutjavascript.com/refe [...] equest.php
// la fonction à appeler lors d'un changement d'avancement de la requête AJAX
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
// Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles
if (request.status == 200)
{
document.getElementById("runtime" ).innerHTML = this.responseXML.getElementsByTagName('response')[0].childNodes[0].nodeValue;
}
}
}
request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
request.send(null);
setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s
}
</script>

:bounce: ça marche

Message cité 1 fois

Reply

Marsh Posté le 23-12-2017 à 08:13:50

noam76 a écrit :

Je connaissais pas l'inspecteur web, J'ai remonter mon code HTML su le spiffs après changement.
Selon l'inspecteur WEB : error 404

noam76 a écrit :

Désolé j'ai essayé de réorganiser, j’espère que c'est plus lisible.

J'ai fais une recherche pour voir si j'ai bien configurer le code XML du coté ESP
Apres plusieurs essaie j'ai réussi

[...]

Sur ma page web j'ai mis ce code

Code :

<script>
function obtenirVariables()
{var uniqueURL = "/reqEtatVariables";
//var uniqueURL = "/reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
var request = new XMLHttpRequest(); // http://www.toutjavascript.com/refe [...] equest.php
// la fonction à appeler lors d'un changement d'avancement de la requête AJAX
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
// Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles
if (request.status == 200)
{
document.getElementById("runtime" ).innerHTML = this.responseXML.getElementsByTagName('response')[0].childNodes[0].nodeValue;
}
}
}
request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
request.send(null);
setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s
}
</script>

:bounce: ça marche

Top !

J'ai trouvé ton erreur initiale qui te donne une 404 :

Code :

var uniqueURL = "/reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);

Une query doit commencer par "?" et non "&" qui sert à chainer les multiples paramètres.

Code :

var uniqueURL = "/reqEtatVariables" + "?aleatoire=" + Math.trunc(Math.random() * 1000000);

doit marcher :jap:

Le changement de code côté ESP ne change rien, vu qu'il n'était de toutes façons pas appelé

Message édité par MossieurPropre le 23-12-2017 à 08:14:58

Reply

Marsh Posté le 23-12-2017 à 20:19:01

Merci, j'ai fais le changement cela marche de façon impeccable.

J'ai donnés un chiffre de façon aléatoire a ma variable sur le esp avec

Citation :

Web_Soil_Sensor1 = random(300);

sur ma page web cela affiche bien en ligne le numéro généré.

Merci pour l'aide :pt1cable:

Reply

[Résolut]Demande aide ESP8266 envoyer variables INT vers HTML SPIFFS

Sujets relatifs:

Leave a Replay