Prob. ESP32 en webserver (affichage page HTML+ config vers l'ESP32)

International Français
21

Merci pour toute ces infos... :+1: :+1:

En fait je pense que j'ai plus compliqué les choses qu'il ne fallait car si je comprend bien ce que tu m'as envoyé ça à l'air assez simple (enfin je me comprend...).

Du coup je vais reprendre tout ça et j'espère que ce sera bon cette fois-ci.
J'avais créé :

String templateProcessor(const String& var)
{
Bla-Bla-Bla j'ai effacé l'intérieur... :wink:
}
return String();
}

Et pour le handler j'avais créé ça:

server.on("/index.html.png", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/index.html", "text/html", false, templateProcessor);

});

C'est surtout pour le "handler" que je voudrai savoir si le format est bon?... Pour le "String templateProcessor" je vais voir par rapport à ce que tu m'a envoyé...

22

Bjr "hbachetti",

Suis vraiment pas doué car après avoir fait plusieurs essais en fonction de ce que tu m'as donné comme infos (et encore merci de le faire), rien ne fonctionne.

Du coup, voilà ce que j'ai fait et sans doute que tu vas dire que c'est vrai que je suis nul...

Pour la partie "processor":
dans l'index

            <div class="w3-center ">
                <p class=
                "w3-xlarge w3-text-win8-emerald">Temps avant Départ = <span id="template" %VALEUR_DEPART%></span>
                </p>
            </div>

            <div class="w3-center w3-card w3-padding-16 ">
                <h3 class="w3-xlarge w3-whitePearl">Décompte</h3>
                <h3 class="w3-xlarge"><span id="template"%VALEUR_DECOMPTE%></span> Sec. avant Départ </h3>
            </div>

            <div class="w3-center w3-card w3-padding-24">
                <h3 class="w3-xxlarge">Vitesse = <span id="template" %VALEUR_VITESSE%></span> Km/h </h3>
            </div>

Pour le code C:

String processor(const String& var){
Serial.println(var); // permet de voir passer le placeholder
if(var == "VALEUR_DEPART"){
String depart = String(n); // J'ai ajouté ça car j'avais un message d'erreur de conversion en mettant que n, m ou v3
return depart;
}
if(var == "VALEUR_DECOMPTE"){
String decompte = String(m);
return decompte;
}
if(var == "VALEUR_VITESSE"){
String vitesse = String(v3);
return vitesse;
}
return String();
}

server.on("/template", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/index.html", String(), false, processor);

});

Ça c'est une chose et maintenant le 2ème problème:

Pour l'index

<div class="w3-center w3-card w3-padding-24">

   

    <button onclick="openFonction(event, 'departCourse')" class="j'ai effacé la class pour simplifier la ligne" style="width:100;">Course</button>
    <button onclick="openFonction(event, 'controleVitesse')" class="idem pour ce bouton" style="width:100;">Vitesse</button>
           
</div>

Pour le script

function openFonction(evt, choixUtilisation) {
var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}

tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
}

document.getElementById(choixUtilisation).style.display = "block";
evt.currentTarget.className += " active";

 /* En dessous, partie que j'ai rajoutée suivant tes indications, mais peut-être mal compris ce que tu as écrit */
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/url?Utilisation="+choixUtilisation, true);
xmlhttp.send();

}

Et pour le code C

server.on("/Utilisation",HTTP_GET, [](AsyncWebServerRequest *request)
{
if (String valDecompteVitesse = "departCourse" )
{
selectDecompteVitesse = LOW;
digitalWrite(d_hexa_B, LOW);
digitalWrite(d_hexa_C, LOW);
}
else if (String valDecompteVitesse = "controleVitesse" )
{
selectDecompteVitesse = HIGH;
digitalWrite(d_hexa_B, HIGH);
digitalWrite(d_hexa_C, HIGH);
}
request->send(200);
});

Bon je crois que j'ai fait le tour de ce que j'ai bidouillé. Maintenant si ça te pose trop de problème de t'en occupé, j’essaierai de trouvé des solutions adaptées à mon niveau bien bas.

Encore merci par avance pour ta réponse.
Amitiés,
Didier

23

Je suppose que ces deux lignes sont bien dans la fonction Setup() ?

24

Oui elles sont bien dans le Setup avec tout ce qui correspondant aux html, css, javascrit etc... comme :

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(SPIFFS, "/index.html", "text/html");
});

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

});

server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(SPIFFS, "/w3.css", "text/css");
});

server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request)
{
request->send(SPIFFS, "/script.js", "text/javascript");
});

server.on("/appuieGO", HTTP_GET, [](AsyncWebServerRequest *request)

{
request->send(200);
valeurGO = HIGH;
delay (500);
valeurGO =LOW;

});

25

Une comparaison se fait avec == , et que vient faire le mot String ?
A ce stade, il faudrait le code complet.

26

Je suis vraiment nul, en plus j'ai déjà fait l'erreur sur d'autres projets, mais ça n'a pas du me suffire de mélanger "égalité =" et "comparaison ==".
Du coup maintenant en ayant mis == j'ai un message d'erreur au niveau du String, pensant faire bien comme la suite est une chaine de caractères (enfin je pense).

src/main.cpp:348:18: error: expected primary-expression before 'valDecompteVitesse'
if (String valDecompteVitesse == "departCourse" )
^~~~~~~~~~~~~~~~~~
src/main.cpp:348:17: error: expected ')' before 'valDecompteVitesse'
if (String valDecompteVitesse == "departCourse" )
~ ^~~~~~~~~~~~~~~~~~~

Si ça ne te dérange pas , comme tu voudrais voir le code complet, voici un lien où tu devrais pouvoir récupérer tout le projet.
Je ne sais plus si je l'avais indiqué et si ça peut avoir une importance pour toi, mais je le fait en utilisant Visual Studio Code et platformio.:

projet esp32

Cordialement

27 
function openFonction(evt, choixUtilisation) {
    ...
    xmlhttp.open("GET", "/url?Utilisation="+choixUtilisation, true);

Je ne pense pas que l'url "/Utilisation" puisse être appelée en envoyant un GET de l'url "/url".
Il faudrait remplacer.
D'autre part si le but est de récupérer la valeur de l'argument "Utilisation", il faut faire comme ceci :

  server.on("/Utilisation",HTTP_GET, [](AsyncWebServerRequest *request)
  {
      if (request->hasParam("Utilisation")) {
        String valeur = request->arg("Utilisation");
        if (valeur == "departCourse" ) {
          // faire ceci
        }
        else if (valeur == "controleVitesse") {
          // faire cela
        }
      }
28

Effectivement le but est bien de récupérer cette valeur de "utilisation" pour changer l'état d'une variable et se mettre dans la partie décompte ou affichage de vitesse.

Je vais essayer de mettre ça en place mais pas de suite car je suis sur des travaux à la maison et je préfère m'y mettre sans autre chose en tête et prendre mon temps pour essayer de comprendre ce que je fais.

Toujours merci pour ton aide

@+
Didier

29

Bonjour,

Bon j'ai suivi tes indications pour:

server.on("/Utilisation",HTTP_GET, [](AsyncWebServerRequest *request)
{
if (request->hasParam("Utilisation")) {
String valeur = request->arg("Utilisation");
if (valeur == "departCourse" ) {
// faire ceci
}
else if (valeur == "controleVitesse") {
// faire cela
}
}

Et là je n'ai plus de message d'erreur.
Mais effectivement cette ligne:

xmlhttp.open("GET", "/url?Utilisation="+choixUtilisation, true);

ne fonctionne pas car rien ne se passe au niveau de l'ESP.
Pour voir , j'ai juste mis l'allumage et l'extinction d'une led dans faire ceci et cela.

J'ai essayé d'envoyer d'autre chose, mais j'avoue que ça me dépasse et je ne vois pas par quoi le remplacer.
Du coup si c'est trop compliquer à mettre en œuvre, je vais voir pour faire différemment. Je ne sais pas trop encore comment.

Cordialement

30

L'URL "/url" n'est pas traitée par ton logiciel.
Pour qu'elle soit traitée il faudrait un handler :

server.on("/url",HTTP_GET, [](AsyncWebServerRequest *request)

Si le handler est le suivant :

server.on("/Utilisation",HTTP_GET, [](AsyncWebServerRequest *request)

Dans ton code javascript, cette URL doit être la même :

xmlhttp.open("GET", "/Utilisation?Utilisation="+choixUtilisation, true);

Comme déjà expliqué en #27.

31

Désolé mais j'avais pas compris ça quand tu parlais de changement.

J'ai vraiment des lacunes au niveau informatique. Tout d'abord ça n'a pas été mon métier mais plus parce que ça m'intéresse et je m'aperçois que plus je veux avancer dans mes projets et plus je me complique l'existence. Et d'autre part je ne sais pas si à mon age je pourrai assimiler toutes ces connaissances que vous avez. Heureusement qu'il y a des personnes comme toi pour m'aider.

Bon je vais essayer ça et je reviendrai vers toi j'espère avec de bonnes nouvelles.

@+

32

Bonjour,

Bon enfin une bonne nouvelle:
Les commandes de "depart de course" et "controle vitesse" fonctionnent. En fonction des boutons je commande bien la procédure de départ avec le décompte ou l'affichage de la vitesse que je simule par 2 boutons poussoirs.

Encore merci pour ton aide.

Me reste à me pencher maintenant sur le problème des templates. Je vais reprendre ce que tu m'as expliqué en essayant de faire un truc à part plus simple pour bien comprendre le fonctionnement.

@+
Didier