Go Down

Topic: ESP32 problème de WebServer. (Read 466 times) previous topic - next topic

simonlere

Bonjour,
Après de nombreux ratée, ma partie programme est terminé.
J'ai donc commencé à faire une page Web avec WebServer.h
Le seul truc qui me manque c'est quand les fins de course sont activés.
Je veut que sur ma page internet on voie que la porte est soit fermer soit ouverte.
Merci d'avance pour votre aide

J-M-L

Faites en sorte que la page web appelle de temps en temps (automatiquement) votre arduino pour mettre à jour l'information
Hello - Please do not PM me for help,  others will benefit as well if you post your question publicly on the forums.
Bonjour Pas de messages privés SVP, postez dans le forum directement pour que ça profite à tous

simonlere

C'est pas vraiment le résultat que je cherche.
Je cherche à ce que dans mes fonctions fin de course, il y est une fonction qui change l'url de mon WebServer

J-M-L

#3
Oct 04, 2020, 12:10 pm Last Edit: Oct 04, 2020, 12:12 pm by J-M-L
il y ait une fonction qui change l'url de mon WebServer
ça veut dire quoi concrètement ?
vous dites précédemment
Quote
Je veux que sur ma page internet on voit que la porte est soit fermée soit ouverte
Donc si vous voulez que la page se mette à jour, il faut que le navigateur web fasse une demande. Le Web est en mode "déconnecté" , votre Arduino n'a aucun moyen de parler à la page web. C'est au navigateur de prendre l'initiative de demander au serveur s'il y a un truc à changer
Hello - Please do not PM me for help,  others will benefit as well if you post your question publicly on the forums.
Bonjour Pas de messages privés SVP, postez dans le forum directement pour que ça profite à tous

simonlere

Si je comprend bien il faudrait que sur partie HTML, il y est une fonction qui aille chercher si les fins de courses sont activés?

Pour préciser ce que je recherche, je veut que quand mes fins de course sont activées, ma mage se mette à jour avec de nouvelle information.

(par exemple on appuie le bouton OUVERTURE, il deviens alors rouge (l'url devient IP/motor?ouverture=on), lorsque mon fins de course ouverture soit activé, je veut que la page retourne à son état initial, dans ce cas là /motor?ouverture=off)

J-M-L

Oui il faut que la page rappelle le serveur web pour lui demander si quelque chose a changé
Hello - Please do not PM me for help,  others will benefit as well if you post your question publicly on the forums.
Bonjour Pas de messages privés SVP, postez dans le forum directement pour que ça profite à tous

menguy

Bonjour,

Effectivement c'est le fonctionnement normale de la plus par des applications client/serveur.
Je ne connait pas votre application mais pour info, le rafraichissement automatique d'une pages est possible coté navigateur, si le code de la page comporte la bonne information.

Code: [Select]
<meta http-equiv="refresh" content="30;url=index.html">

Lorsque le serveur envoie la page initial, le navigateur interprète cette ligne et demandera au serveur la page contenue dans le paramètre "url", cet url peut être la même que celle affiché initialement ou une autre.

Bonne journée.

simonlere

Code: [Select]
<meta http-equiv="refresh" content="30;url=index.html">
Je suis sur Visual Studio code, cette ligne n'est pas reconnu, pourtant je l'insère au début de mon String HTML.

Y'aurais t'il une autre manière?

J-M-L

Montrez nous comment en terme de code... (il faut que ce soit envoyé à votre navigateur. Donc ça doit juste faire partie du HTML, on le met souvent dans le header )
Hello - Please do not PM me for help,  others will benefit as well if you post your question publicly on the forums.
Bonjour Pas de messages privés SVP, postez dans le forum directement pour que ça profite à tous

simonlere

Voici le code qui définie le HTML
Code: [Select]

void handleRoot() {
   //Robojax.com ESP32 Relay Motor Control
  String HTML ="<!DOCTYPE html>";
  HTML += "<html>\n<head>\t\n<title>Porte Poulailler</title>\t\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\t<style>\nhtml,body{\t\nwidth:100%;`\nheight:100%;\nmargin:0}\n*{box-sizing:border-box}\n.colorAll{\n\tbackground-color:#90ee90}\n.colorBtn{\n\tbackground-color:#add8e6}\n.angleButtdon,a{\n\tfont-size:30px;\nborder:1px solid #ccc;\ndisplay:table-caption;\npadding:7px 10px;\ntext-decoration:none;\ncursor:pointer;\npadding:5px 6px 7px 10px}a{\n\tdisplay:block}\n.btn{\n\tmargin:5px;\nborder:none;\ndisplay:inline-block;\nvertical-align:middle;\ntext-align:center;\nwhite-space:nowrap}\n";

  HTML +="</style>\n\n</head>\n\n<body>\n<h1>Porte Poulailler </h1>\n";

   if(dirStatus ==2){
    HTML +="\n\t<h2><span style=\"background-color: #FFFF00\">Porte en fermeture...</span></h2>\n";   
   }else if(dirStatus ==1){
    HTML +="\n<h2><span style=\"background-color: #FFFF00\">Porte en ouverture...</span></h2>\n";     
   }else{
    HTML +="\n<h2><span style=\"background-color: #FFFF00\">Moteur eteint</span></h2>\n";   
   }
   if(statusPorte ==1){
     HTML +="\n\t<h2><span style=\"background-color: #FFFF00\">";
     HTML += argId2[1];
     HTML += "</span></h2>\n";
   } else if(statusPorte ==2) {
     HTML +="\n\t<h2><span style=\"background-color: #FFFF00\">";
     HTML += argId2[0];
     HTML += "</span></h2>\n";
   }
   
      if(dirStatus ==1){
        HTML += "<div class=\"btn\">\n\t\t<a class=\"angleButton\" style=\"background-color:#f56464\"  href=\"/motor?";
        HTML += argId[0];
        HTML += "=off\">";
        HTML +=buttonTitle1[0]; //motor ON title
      }else{
        HTML += "<div class=\"btn\">\n\t\t<a class=\"angleButton \" style=\"background-color:#90ee90\"  href=\"/motor?"; 
        HTML += argId[0];
        HTML += "=on\">";       
        HTML +=buttonTitle2[0];//motor OFF title   
      }   
        HTML +="</a>\n</div>\n\n"; 
           
      if(dirStatus ==2){
        HTML +="  <div class=\"btn\">\n<a class=\"angleButton\" style=\"background-color:#f56464\"  href=\"/motor?";
        HTML += argId[1];
        HTML += "=off\">";
        HTML +=buttonTitle1[1]; //motor ON title
      }else{
        HTML +="  <div class=\"btn\">\n<a class=\"angleButton \" style=\"background-color:#90ee90\"  href=\"/motor?"; 
        HTML += argId[1];
        HTML += "=on\">";       
        HTML +=buttonTitle2[1];//motor OFF title   
      }
 
     HTML +="</a>\n</div>\n";

     HTML +="\n</body>\n</html>\n";
     server.send(200, "text/html", HTML); 
}//handleRoot()

void handleNotFound() {

  String message = "File Not Found";
  message += "URI: ";
  message += server.uri();
  message += "\n Method: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\n Arguments: ";
  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 Arret(){
     digitalWrite(Pin1, LOW); 
     digitalWrite(Pin2, LOW);
     digitalWrite(Pin3, LOW);
     digitalWrite(Pin4, LOW);
}

void etatCourseFermer(){
  fDCFermer = digitalRead(finDeCourseFermer);
  if (fDCFermer == HIGH) // Changement d'état du fin de course haut (front montant ou descendant)
  {
    Serial.println("Porte fermée !"); // Affichage sur le moniteur série du texte
    statusPorte = 1;
    pinMode(Pin1, INPUT);//define pin for ULN2003 in1
    pinMode(Pin2, INPUT);//define pin for ULN2003 in2   
    pinMode(Pin3, INPUT);//define pin for ULN2003 in3   
    pinMode(Pin4, INPUT);//define pin for ULN2003 in4 
    Arret();
  } else {
    pinMode(Pin1, OUTPUT);//define pin for ULN2003 in1
    pinMode(Pin2, OUTPUT);//define pin for ULN2003 in2   
    pinMode(Pin3, OUTPUT);//define pin for ULN2003 in3   
    pinMode(Pin4, OUTPUT);//define pin for ULN2003 in4 
  }
}

void etatCourseOuverte(){
  fDCOuvert = digitalRead(finDeCourseOuverte);
  if (fDCOuvert == HIGH){
    Serial.println("Porte ouverte !");
    statusPorte = 2;
    pinMode(Pin1, INPUT);//define pin for ULN2003 in1
    pinMode(Pin2, INPUT);//define pin for ULN2003 in2   
    pinMode(Pin3, INPUT);//define pin for ULN2003 in3   
    pinMode(Pin4, INPUT);//define pin for ULN2003 in4
    Arret();
  } else {
    pinMode(Pin1, OUTPUT);//define pin for ULN2003 in1
    pinMode(Pin2, OUTPUT);//define pin for ULN2003 in2   
    pinMode(Pin3, OUTPUT);//define pin for ULN2003 in3   
    pinMode(Pin4, OUTPUT);//define pin for ULN2003 in4
  }
}

void motorControl() {


    if(server.arg(argId[0]) == "on")
    {
      pinMode(Pin1, OUTPUT);//define pin for ULN2003 in1
      pinMode(Pin2, OUTPUT);//define pin for ULN2003 in2   
      pinMode(Pin3, OUTPUT);//define pin for ULN2003 in3   
      pinMode(Pin4, OUTPUT);//define pin for ULN2003 in4 
      dirStatus = 1;// CCW

               
    }else if(server.arg(argId[0]) == "off"){
     
      dirStatus = 3;  // motor OFF
     
         
    }else if(server.arg(argId[1]) == "on"){
      pinMode(Pin1, OUTPUT);//define pin for ULN2003 in1
      pinMode(Pin2, OUTPUT);//define pin for ULN2003 in2   
      pinMode(Pin3, OUTPUT);//define pin for ULN2003 in3   
      pinMode(Pin4, OUTPUT);//define pin for ULN2003 in4 
      dirStatus = 2;  // CW 
     
         
    }else if(server.arg(argId[1]) == "off"){
     
     
      dirStatus = 3;  // motor OFF
             
    } 

  handleRoot();
}//motorControl end

void driveStepper(int c)
{
     digitalWrite(Pin1, pole1[c]); 
     digitalWrite(Pin2, pole2[c]);
     digitalWrite(Pin3, pole3[c]);
     digitalWrite(Pin4, pole4[c]);
}//driveStepper end here

menguy

Pour moi cette ligne doit se trouvé entre les balise  <head> et </head> ce sont des paramètres de de la balise <meta>
A votre place, je découperais justement ces 2 lignes qui ne sont pas très lisible et bien séparé les différentes commande HTML.
Le compilateur ne vérifiera pas la syntaxe du HTML pour lui ce n'est que du string et  il est facile d'y laisser une erreur.


Code: [Select]
 HTML += "<html>\n<head>\t\n<title>Porte Poulailler</title>\t\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\t<style>\nhtml,body{\t\nwidth:100%;`\nheight:100%;\nmargin:0}\n*{box-sizing:border-box}\n.colorAll{\n\tbackground-color:#90ee90}\n.colorBtn{\n\tbackground-color:#add8e6}\n.angleButtdon,a{\n\tfont-size:30px;\nborder:1px solid #ccc;\ndisplay:table-caption;\npadding:7px 10px;\ntext-decoration:none;\ncursor:pointer;\npadding:5px 6px 7px 10px}a{\n\tdisplay:block}\n.btn{\n\tmargin:5px;\nborder:none;\ndisplay:inline-block;\nvertical-align:middle;\ntext-align:center;\nwhite-space:nowrap}\n";

  HTML +="</style>\n\n</head>\n\n<body>\n<h1>Porte Poulailler </h1>\n";

simonlere

#11
Oct 09, 2020, 03:06 pm Last Edit: Oct 09, 2020, 03:08 pm by simonlere
J'ai essayer de l'inclure ici
  HTML += "<html>\n<head>\t\n<title>Porte Poulailler</title>\t\n";
  HTML += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\t<style>\nhtml,body{\t\nwidth:100%;`\nheight:100%;\nmargin:0}\n*{box-sizing:border-box}\n.colorAll{\n\tbackground-color:#90ee90}\n.colorBtn{\n\tbackground-color:#add8e6}\n.angleButtdon,a{\n\tfont-size:30px;\nborder:1px solid #ccc;\ndisplay:table-caption;\npadding:7px 10px;\ntext-decoration:none;\ncursor:pointer;\npadding:5px 6px 7px 10px}a{\n\tdisplay:block}\n.btn{\n\tmargin:5px;\nborder:none;\ndisplay:inline-block;\nvertical-align:middle;\ntext-align:center;\nwhite-space:nowrap}\n";

  HTML += "<meta http-equiv="refresh" content="30;url=index.html">";
  HTML +="</style>\n\n</head>\n\n<body>\n<h1>Porte Poulailler </h1>\n";

lesept

Les " doivent être précédés de \ :

Code: [Select]
  HTML += "<meta http-equiv=\"refresh\" content=\"30;url=index.html\">";

 
A force d'essayer on finit par réussir... Donc, plus ça rate, plus on a de chances que ça marche (proverbe Sharduinok).

menguy

Salut,
Il y a un problème avec les balises .
Une balise META ne peu pas être incluse dans une balise STYLE.
Lorsque je vous proposais de clarifier votre code, je parlais de ceci  :

Code: [Select]
HTML += "<html>\n";

HTML += "<head>\n";

HTML += "<title>Porte Poulailler</title>\n";

HTML += "<meta http-equiv=\"refresh\" content=\"30;url=index.html\">\n";
HTML += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";

HTML += "<style>"
HTML += "html,body{\t\nwidth:100%;`\nheight:100%;\nmargin:0}\n*{box-sizing:border-box}\n.colorAll{\n\tbackground-color:#90ee90}\n.colorBtn{\n\tbackground-color:#add8e6}\n.angleButtdon,a{\n\tfont-size:30px;\nborder:1px solid #ccc;\ndisplay:table-caption;\npadding:7px 10px;\ntext-decoration:none;\ncursor:pointer;\npadding:5px 6px 7px 10px}a{\n\tdisplay:block}\n.btn{\n\tmargin:5px;\nborder:none;\ndisplay:inline-block;\nvertical-align:middle;\ntext-align:center;\nwhite-space:nowrap}";
HTML += "</style>\n";

HTML += "</head>\n";

HTML +="<body>\n";
HTML +="<h1>Porte Poulailler </h1>\n";
HTML +="</body>\n";


De cette façon vous visualisé correctement les balises, c'est une reprise vite fait de la mise en forme de cotre code, je ne garanti pas que cela fonctionne.
Second point :  A vérifier mais je suis pratiquement certain que les retours a la ligne ( \n ) ne sont pas utiles, précisément a cause  de  la présence des balises.
Je vous recommande également la lecture de ce topo dont je me sert de temps en temps  : Balises HTML




simonlere

Re-bonjour, merci pour toutes vos réponses, j'ai tout installer, cependant pendant la phase de test j'ai remarquer que mon moteur avait du mal à faire bouger la porte, j'ai donc remplacer l'alimentation 5V part du 12V cela à marcher pour l'ouverture de la porte mais pas pour la fermeture.
Je ne vois pas dans le code ce qui pourrait faire ralentir le moteur.
Voici donc le code à nouveau

Go Up