Uno R4 web server avec du javascript

robindesbois31 · May 6, 2024, 7:14pm

bonsoir,
je rencontre un souci d'affichage sur la page web.
en fait la valeur présente dans la partie html
Valeur de depart : N/A
n'est pas affiché... alors que la fonction est bien appelée.

<span id="memValue">Valeur de depart : N/A</span>

voici la fonction javascript :

function MemEncoder() {
      var memRequest = new XMLHttpRequest();
      memRequest.onreadystatechange = function() {
        if (memRequest.readyState == 4 && memRequest.status == 200) {
          // Mettre à jour la page si nécessaire
          document.getElementById("memValue").innerText = "Valeur de depart 2 : " + memRequest.responseText;
        }
      };
      memRequest.open("GET", "/memEncoder", true);
      memRequest.send();
    }

avez vous une idée ?
j'avoue que je butte.

PS : j'ai enlevé les parties non intéressante..
Merci d'avance.

void setup() {
  Serial.begin(19200);
  server.begin();
}

void loop() {
  webServer();
}


/* -------------------------------------------------------------------------
----------------------------------------------------------------------------                            
                                FONCTIONS
----------------------------------------------------------------------------
----------------------------------------------------------------------------*/
void webServer() {
  WiFiClient client = server.available();

  if(client)
  {
    boolean currentLineIsBlank = true;
    while (client.connected())
    {
      if(client.available())
      { 
        char c = client.read();
        HTTP_req += c;
        if(c == '\n' && currentLineIsBlank)
        {
          if (HTTP_req.indexOf("razcount") > -1) // Route pour réinitialiser la valeur de 'counter'
          {
           razcount(HTTP_req, client);
          }
          else if(HTTP_req.indexOf("memEncoder") > -1) // Route pour mettre en mémoire la position de départ
          {
            memEncoder(client);
          }
          else if(HTTP_req.indexOf("count") > -1) //Requête AJAX pour les valeurs de 'count'
          {
            AJAX_request(client);
          }
          else if(HTTP_req.indexOf("updateCount") > -1) // Route pour mettre à jour la valeur de 'count'
          {
            updateCount(HTTP_req, client);
          }
          //--------------------------------------------------------------------
          else
          {
            HTML_webpage();
            client.println(webPage);
          }
          //--------------------------------------------------------------------
          //Serial.print(HTTP_req);       // affiche les réponses du client (page web)
          HTTP_req = "";                  //reset HTTP request string
          break;
        }
        //----------------------------------------------------------------------
        if(c == '\n') currentLineIsBlank = true;
        else if(c != '\r') currentLineIsBlank = false;
      }
    }
    delay(10);
    client.stop(); //sever client connection with server
  }
}

void printWifiStatus() {
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);

  long rssi = WiFi.RSSI();
  Serial.print("puissance du signal (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");

  Serial.print("Ouvrez maintenant cette URL dans votre navigateur --> http://");
  Serial.println(ip);
}




void AJAX_request(WiFiClient client)
{
  client.println("Compteur: ");
  client.println(counter);
}



void updateCount(String request, WiFiClient client) {
  int pos = request.indexOf("value=");
  if (pos != -1) {
    String valueStr = request.substring(pos + 6);
    newValue = valueStr.toInt();
    counter = newValue;
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("Access-Control-Allow-Origin: *"); // Autoriser l'accès depuis n'importe quelle origine, pour l'exemple. Vous pouvez restreindre selon vos besoins.
    client.println();
    client.println("Count updated successfully");
  } else {
    client.println("HTTP/1.1 400 Bad Request");
    client.println("Content-Type: text/html");
    client.println();
    client.println("Invalid request");
  }
}



void razcount(String request, WiFiClient client) {
    counter = 0;
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("Access-Control-Allow-Origin: *"); // Autoriser l'accès depuis n'importe quelle origine, pour l'exemple. Vous pouvez restreindre selon vos besoins.
    client.println();
    client.println("Counter reset successfully");
}



void memEncoder(WiFiClient client) {
  counter_depart = counter;
  Serial.print("Compteur départ value: "); Serial.println(counter_depart);
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Access-Control-Allow-Origin: *"); // Autoriser l'accès depuis n'importe quelle origine, pour l'exemple. Vous pouvez restreindre selon vos besoins.
  //client.println();
  //client.println("<script>document.getElementById('counterDepart').innerHTML = 'Valeur de depart 3 : " + String(counter_depart) + "';</script>");
  //client.println( String(counter_depart) );
}



/* -------------------------------------------------------------------------
----------------------------------------------------------------------------                            
                                 WEB PAGE
----------------------------------------------------------------------------
----------------------------------------------------------------------------*/
void HTML_webpage()
{
  //HTTP response header
  webPage = "HTTP/1.1 200 OK\n";
  webPage += "Content-Type: text/html\n";
  webPage += "Access-Control-Allow-Origin: *\n"; // Autoriser l'accès depuis n'importe quelle origine, pour l'exemple. Vous pouvez restreindre selon vos besoins.
  webPage += "\n"; // Fin des en-têtes, début du contenu HTML

  //-------------------------------------------------------------
  //page web - HTML + JavaScript avec appels AJAX
  webPage += R"***(
  <!DOCTYPE html>
  <head>
    <title> The FLOYD - Pilotage Avion Stuka ! </title>
  </head>
  <html>
  <!----------------------------CSS-------------------------------->
  <style>
    body
      {
        font-family: monaco, Consolas;
        background-color:rgba(160, 153, 157, 0.8);
        h1   {color: whitesmoke; text-align:center; font-size: 50px;}
        h2   {color:#991f00; text-align:left; font-size:30px;}
      }
      
      .btn {
          background-color: #008CBA; /* Blue */
          border: none;
          border-radius: 10px;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
      }
      .btnRed {
          background-color: #f44336; /* Red */
          border: none;
          border-radius: 10px;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
      }
      .btnGreen {
          background-color: #04AA6D; /* Green */
          border: none;
          border-radius: 10px;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
      }
  </style>
  <!----------------------------HTML------------------------------->
  <body>
      <h1>The FLOYD - Pilotage Avion Stuka !</h1>
      <h2>
         <span style="color:rgb(196, 3, 3)" id="countVals">N/A</span> <hr />
         <a href="#" class="btn" onclick="updateCount()">New value Encoder</a>
         <a href="#" class="btnRed" onclick="razEncoder()">RAZ Encodeur</a> <br>
         <a href="#" class="btnGreen" onclick="MemEncoder()">Mise en mémoire de la position de départ</a>
         <span id="memValue">Valeur de depart : N/A</span>  
      </h2>
  <!-------------------------JavaScript---------------------------->
  <script>
    setInterval(function()
    {
      getcountVals();
    }, 1000);
    
        <!---------------  Lire la variable count ----------------->
    function getcountVals()
    {
      var countRequest = new XMLHttpRequest();
      countRequest.onreadystatechange = function()
      {
        if(this.readyState == 4 && this.status == 200)
        {
          document.getElementById("countVals").innerHTML = this.responseText;
        }
      };
      countRequest.open("GET", "count", true);
      countRequest.send();
    }
   
        <!---------   Modification de la variables count ------------------->
    function updateCount() {
       let d = prompt('Encodeur\nentrez la nouvelle valeur: ');
        /*console.log("Fonction updateCount() appelee."); */
        /*console.log(d); */

      var countRequest = new XMLHttpRequest();
      countRequest.onreadystatechange = function() {
        if (countRequest.readyState === 4 && countRequest.status === 200) {
          // Rien à faire ici, la mise à jour est gérée par le setInterval(getCount, 1000);
        }
      };
      countRequest.open("GET", "/updateCount?value=" + d, true); // Appel de la route de mise à jour
      countRequest.send();
      /* console.log("Fonction updateCount() appelee."); */

    }
    
    function razEncoder() {
      var razRequest = new XMLHttpRequest();
        razRequest.onreadystatechange = function() {
          if (razRequest.readyState == 4 && razRequest.status == 200) {
            // Mettre à jour la page si nécessaire
          }
       };
    razRequest.open("GET", "/razcount?value=0", true);
    razRequest.send();
     /*console.log("Fonction razEncoder() appelee.");*/
    }


    function MemEncoder() {
      var memRequest = new XMLHttpRequest();
      memRequest.onreadystatechange = function() {
        if (memRequest.readyState == 4 && memRequest.status == 200) {
          // Mettre à jour la page si nécessaire
          document.getElementById("memValue").innerText = "Valeur de depart 2 : " + memRequest.responseText;
        }
      };
      memRequest.open("GET", "/memEncoder", true);
      memRequest.send();
    }

 

  </script>
  </body>
  </html>
  )***";
}

robindesbois31 · May 6, 2024, 7:51pm

Je répond à moi même
j'ai trouvé une solution (je ne sais pas si c'est la plus propre...)
dans la partie :

void memEncoder(WiFiClient client) {
  counter_depart = counter;
  Serial.print("Compteur départ value: "); Serial.println(counter_depart);
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Access-Control-Allow-Origin: *"); // Autoriser l'accès depuis n'importe quelle origine, pour l'exemple. Vous pouvez restreindre selon vos besoins.
  //client.println();
  //client.println("<script>document.getElementById('counterDepart').innerHTML = 'Valeur de depart 3 : " + String(counter_depart) + "';</script>");
  //client.println( String(counter_depart) );
  client.println();
  client.println("" + String(counter_depart));

}

j'ai ajouté :
client.println("" + String(counter_depart));

terwal · May 6, 2024, 8:22pm

Je suis désolé, ce n'est pas très claire.
tu ne vois pas affiché "Valeur de depart : N/A" lorsque tu charge la page HTML ?
Si la fonction est appelé, comment "Valeur de depart : N/A" peut rester affiché ?

robindesbois31 · May 6, 2024, 8:35pm

tu ne vois pas affiché "Valeur de depart : N/A" lorsque tu charge la page HTML ?
oui c'est affiché.
Si la fonction est appelé, comment "Valeur de depart : N/A" peut rester affiché ?
N/A est remplacé par "" (rien)
avec la modif que j'ai faite çà fonctionne...

terwal · May 6, 2024, 9:00pm

c'est étonnant qie tu es rien puisque tu remplaces la chaine "Valeur de depart : N/A" systématiquement par "Valeur de depart 2 : "

Par contre effectivement avant ta modification tu ne renvoyais rien dans ta requête AJAX.
Donc tu n'a rien à concaténé avec "Valeur de depart 2 : "

system · November 2, 2024, 9:00pm

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

Topic		Replies	Views
Questions sur le html Français	114	41446	May 6, 2021
Arduino eth Français	12	3760	May 6, 2021
Afficher une variable Arduino en HTML Français	8	3627	May 6, 2021
Probleme webserver Français	8	1157	May 6, 2021
html / string trop grand ... autre solution ? Français	43	3790	May 6, 2021

Uno R4 web server avec du javascript

Related topics