Arduino webserseur calls a javascript function from the state of the OSC message

Projects Programming
1

Hello, in the following code I have the changeBackgroundColor() function

 function changeBackgroundColor() {
        document.body.style.backgroundColor = "#04B431"; 
    }

which works 'manually' but I would like to call it when I enter the OSC function

void avionGo(OSCMessage &msg, int addrOffset) {
  Serial.println("Go...");
  start = true;
  matrix.loadFrame(go);
}

I've tried quite a few things but to no avail...
Thanks in advance for your help



/////////////////////////////////////////////////////////////////
//                        WEB PAGE                                
/////////////////////////////////////////////////////////////////
void HTML_webpage()
{
  //HTTP response header
  webPage = "HTTP/1.1 200 OK\n";
  webPage += "http-equiv: Content-Type\n";
  webPage += "Content-Type: text/html\n";
  webPage += "charset: utf8\n";
  webPage += "Access-Control-Allow-Origin: *\n"; // Autoriser l'accès depuis n'importe quelle origine.
  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;
    }

    p {
      font-size: 16px; /* taille de police pour le corps du texte */
    }
      
      .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="btnRed" onclick="razEncoder()">RAZ Encodeur</a> <hr />
         <a href="#" class="btnGreen" onmousedown="MotorAvanceON()" onmouseup="MotorSTOP()">Avancer ++</a>
         <a href="#" class="btnGreen" onmousedown="MotorReculeON()" onmouseup="MotorSTOP()">Reculer --</a> <hr />
         <a href="#" class="btn" onclick="MemEncIN()">Starting position</a>
         <a href="#" class="btnRed" onclick="MemEncOUT()">End position</a> <hr />
         <a href="#" class="btn" onclick="Calculate()">Calculs</a>
      </h2>   
         <span id="MemEncINvalue">  </span> <br />
         <span id="MemEncOUTvalue"> </span>
         <span id="MemEncValue">    </span> <br />
         <span id="DnValue">        </span> <br />
         <span id="Pwm0Value">      </span>

         

  <!-------------------------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", "ajaxgetval", true);
      countRequest.send();
    }
   
      
    
    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 MemEncIN() {
      var memInRequest = new XMLHttpRequest();
      memInRequest.onreadystatechange = function() {
        if (memInRequest.readyState == 4 && memInRequest.status == 200) {
          // Mettre à jour la page si nécessaire
          document.getElementById("MemEncINvalue").innerText = "Valeur depart : " + memInRequest.responseText;
        }
      };
      memInRequest.open("GET", "/MemEncIN", true);
      memInRequest.send();
    }

    function MemEncOUT() {
      var memOutRequest = new XMLHttpRequest();
      memOutRequest.onreadystatechange = function() {
        if (memOutRequest.readyState == 4 && memOutRequest.status == 200) {
          // Mettre à jour la page si nécessaire
          document.getElementById("MemEncOUTvalue").innerText = "Valeur arrivee : " + memOutRequest.responseText;
        }
      };
      memOutRequest.open("GET", "/MemEncOUT", true);
      memOutRequest.send();
    }

    function MotorAvanceON() {
      console.log("Avance Start");
      var MotorAvanceRequest = new XMLHttpRequest();
        MotorAvanceRequest.onreadystatechange = function() {
          if (MotorAvanceRequest.readyState == 4 && MotorAvanceRequest.status == 200) {
            // Mettre à jour la page si nécessaire
          }
       };
    MotorAvanceRequest.open("GET", "/MotorAvanceON", true);
    MotorAvanceRequest.send();
    }

    function MotorReculeON() {
      console.log("Recule Start");
      var MotorReculeRequest = new XMLHttpRequest();
        MotorReculeRequest.onreadystatechange = function() {
          if (MotorReculeRequest.readyState == 4 && MotorReculeRequest.status == 200) {
            // Mettre à jour la page si nécessaire
          }
       };
    MotorReculeRequest.open("GET", "/MotorReculeON", true);
    MotorReculeRequest.send();
    }


    function MotorSTOP() {
      console.log("Avance Stop");
      var MotorStopRequest = new XMLHttpRequest();
        MotorStopRequest.onreadystatechange = function() {
          if (MotorStopRequest.readyState == 4 && MotorStopRequest.status == 200) {
            // Mettre à jour la page si nécessaire
          }
       };
    MotorStopRequest.open("GET", "/MotorSTOP", true);
    MotorStopRequest.send();
    }


    function Calculate() {
      var CalculsRequest = new XMLHttpRequest();
        CalculsRequest.onreadystatechange = function() {
          if (CalculsRequest.readyState == 4 && CalculsRequest.status == 200) {
             document.getElementById("MemEncValue").innerText = "" + CalculsRequest.responseText;
            // Mettre à jour la page si nécessaire
          }
       };
    CalculsRequest.open("GET", "/Calculate", true);
    CalculsRequest.send();
     console.log("Fonction Calculate() appelee.");
    }

     function changeBackgroundColor() {
        document.body.style.backgroundColor = "#04B431"; 
    }

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



/////////////////////////////////////////////////////////////////
//                        WEB SERVER                                
/////////////////////////////////////////////////////////////////
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 'Ecount'
          {
           razcount(HTTP_req, client);
          }
          else if(HTTP_req.indexOf("MemEncIN") > -1) // Route pour mettre en mémoire la position de départ
          {
            MemEncIN(client);
          }
          else if(HTTP_req.indexOf("MemEncOUT") > -1) // Route pour mettre en mémoire la position de départ
          {
            MemEncOUT(client);
          }
          else if(HTTP_req.indexOf("MotorAvanceON") > -1) // Route pour mettre en mémoire la position de départ
          {
            MotorAvanceON(client);
          }
           else if(HTTP_req.indexOf("MotorReculeON") > -1) // Route pour mettre en mémoire la position de départ
          {
            MotorReculeON(client);
          }
          else if(HTTP_req.indexOf("MotorSTOP") > -1) // Route pour mettre en mémoire la position de départ
          {
            MotorSTOP(client);
          }
          else if(HTTP_req.indexOf("Calculate") > -1) // Route pour mettre en mémoire la position de départ
          {
            Calculate(client);
          }
          else if(HTTP_req.indexOf("ajaxgetval") > -1) //Requête AJAX pour les valeurs de 'count'
          {
            AJAX_request(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
  }
}






/////////////////////////////////////////////////////////////////
//                     APPEL FONCTION WEB                           
/////////////////////////////////////////////////////////////////
void AJAX_request(WiFiClient client)
{
  client.println("heures: " + String(RTCcurrentTime));
  client.println(" Compteur: ");
  client.println(Ecount);
  
}



void razcount(String request, WiFiClient client) {
    Ecount = 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("Ecount reset successfully");
    Serial.println("WebServer... 'razcount'");
}



void MemEncIN(WiFiClient client) {
   Ein = Ecount;
  //Serial.print("Compteur départ value: "); Serial.println(Ein);
  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. 
  client.println();
  client.print("" + String(Ein));
}
void MemEncOUT(WiFiClient client) {
   Eout = Ecount;
  //Serial.print("Compteur départ value: "); Serial.println(Ein);
  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. 
  client.println();
  client.println("" + String(Eout));
}



void MotorAvanceON(WiFiClient client) {
  Serial.println("Moteur avance ON");
  digitalWrite(dirPin, LOW);     // A verifier
   analogWrite(pwmPin, 40);
  
  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. 
  client.println();
}

void MotorReculeON(WiFiClient client) {
  Serial.println("Moteur recule ON");
  digitalWrite(dirPin, HIGH);  // A verifier
  analogWrite(pwmPin, 40);     

  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. 
  client.println();
}

void MotorSTOP(WiFiClient client) {
  Serial.println("Moteur STOP");
  analogWrite(pwmPin, 0);      // on arrete le moteur
 
  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. 
  client.println();
}



void Calculate(WiFiClient client) {
  Serial.println("Calculs");
    Ef     = Ein - Eout;                              // Encodeur valeur à faire
    Df     = (Ef / cpr) * RoueCirc;                   // distance à faire
    ////////////////////////////////////////
    //          CALCUL du pwm0
    //////////////////////////////////////// 
    Dm_min  = ((Ef/cpr)*RoueCirc/1000)*(60000/tf) ;   // distance parcourue sur 1 minute
    Rrpm    = Dm_min/(RoueCirc/1000);                 // Rpm de la roue sur 1 minute
    pente   = (90-5)/(rpmMax-rpmMin);                 // calcul de la pente du driver 
    duty    = pente*(Rrpm-rpmMin)+5 ;                 // calcul du duty du driver
    pwm0    = 255*duty/100;                           // calcul du pwm0
    constB  = Df / (tf * pwm0);                  

  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. 
  client.println();
  client.println("Valeur total encodeur : " + String(Ef));
  client.println("------------");
  client.println("Distance a faire en mm : " + String(Df));
  client.println("Valeur du pwm0 :         " + String(pwm0));


    Serial.println("-----------------------------------");
    Serial.println("=>   Pré calculs temps/distances");
    Serial.print("Enc in                                                    "); Serial.println(Ein) ; 
    Serial.print("Enc out                                                   "); Serial.println(Eout) ;
    Serial.print("Enc à faire        =Ein - Eout                            "); Serial.println(Ef) ;
    Serial.print("temps excution     durée en ms ex 10000                   "); Serial.println(tf) ;
    Serial.print("Distance a faire   =(Ef / cpr) * RoueCirc                 "); Serial.println(Df) ;
    Serial.println("=>   Prée calculs Ppwm0");
    Serial.print("roue diam          RoueDiam mm                            "); Serial.println(RoueCirc) ; 
    Serial.print("Dm_min             ((Ef/cpr)*RoueCirc/1000)*(60000/tf)    "); Serial.println(Dm_min) ; 
    Serial.print("Rrpm               Dm_min/(RoueCirc/1000)                 "); Serial.println(Rrpm) ;
    Serial.print("pente              (90-5)/(rpmMax-rpmMin)                 "); Serial.println(pente, 4) ;
    Serial.print("duty               pente*(Rrpm-rpmMin)+5                  "); Serial.println(duty, 4) ;
    Serial.print("B                  Df / (tf * pwm0)                       "); Serial.println(constB, 7) ;
    Serial.print("pwm0               255*duty/100                           "); Serial.println(pwm0, 4) ;  
    Serial.println("-----------------------------------");

}








/////////////////////////////////////////////////////////////////
//                      MESSAGE OSC                                
/////////////////////////////////////////////////////////////////
void avionGo(OSCMessage &msg, int addrOffset) {
  Serial.println("Go...");
  start = true;
  matrix.loadFrame(go);
}


void avionStop(OSCMessage &msg, int addrOffset) {
  start = false;
  Serial.println("stop...");
  matrix.loadFrame(stop);  
}

PS : Uno R4 Wifi card

2

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