Envoie d'une donnée d'un ESP32 vers page web

Bonjour actuellement en Bts, une partie de mon projet consiste à visualiser sur une page Web la quantité en litre de produit restant, mais je n'arrive pas à envoyer la valeur de mon capteur à ultrason vers ma page Web. J'ai déjà essayé plusieurs chose mais rien de concluant.

Si vous auriez une base pour que je puisse me débloquer, merci.

J'utilise le logiciel Visual Studio Code

Programme principal:

Les différent fichiers de la page web (html,js et css) sont stocké dans la mémoire de l'ESP

#include <Arduino.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <WiFi.h>

const char* ssid = "Relai";           
const char* password = "12345678"; 


#define ECHOPIN 18// Pin pour echo pulse
#define TRIGPIN 5// Pin pour trigger pulse


AsyncWebServer server(80);

void setup()
{
 
  pinMode(ECHOPIN, INPUT);
  pinMode(TRIGPIN, OUTPUT);
  digitalWrite(ECHOPIN, HIGH);
  


  Serial.begin(115200);
  while (!Serial){}
  Serial.println("\n");

if (!SPIFFS.begin())
{
  Serial.println("erreur SPIFFS...");
  return;
}

File root = SPIFFS.open("/");
File file = root.openNextFile();

while (file)
{
  Serial.print("file");
  Serial.println(file.name());
  file.close();
  file = root.openNextFile();
}

//WiFi..................................................


  WiFi.begin(ssid, password);

  Serial.print("Connexion");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("connecté au réseau, adresse ip: ");
  Serial.println(WiFi.localIP());

//Serveur..............................................

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


server.begin();
Serial.println("serveur actif");

}

void loop() {

  digitalWrite(TRIGPIN, LOW); 
  delayMicroseconds(2);
  digitalWrite(TRIGPIN, HIGH); 
  delayMicroseconds(10);
  digitalWrite(TRIGPIN, LOW); 
  int distance = pulseIn(ECHOPIN, HIGH,26000); 
  distance= distance/58;
  Serial.print(distance);
  Serial.println("   cm");
  delay(1000);
}

ensuite les fichiers pour la page web

html:

<!DOCTYPE html>
<html>

<head>
    <title>ProjetRGM</title>
    <meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>

<body>


    <header>
        <h2>Sélectionner le type de cuve <span id="R"></span></h2>
        <ul>
            <li><input class="button" type="button" value="PARAMETRE DE CUVE1" onclick="ChangeValue1()"></li>    
            <li><input class="button" type="button" value="PARAMETRE DE CUVE2" onclick="ChangeValue2()"></li>
            <li><input class="button" type="button" value="PARAMETRE DE CUVE3" onclick="ChangeValue3()"></li>
        </ul>
    </header>

    <h1>Relevé des informations de la cuve n°<span id="NumeroCuve"></span></h1>


    <section>
        <ul>
            <li>Température Exterieur: <span id="Rext"></span> °C</li>
            <br>
            <li>Température Intérieur:<span id=""></span> °C</li>
            <br>
            <li>Niveau de Produit dans la cuve:<span id=""></span> </li>
        </ul>
    </section>

    

    


    <form name="capteur">
        temp ext <input type="text" name="ext">
        temp int <input type="text" name="int">
        <input type="button" value="calcul" onclick="test()">
    </form>


    <footer>

    </footer>

</body>


</html>

Diadox84

29 mars 2021 à 16:11:43