Bonjour, j'avais posté il y a quelque temps sur ce sujet ... non résolu. J'ai repris le sketch en question (niveau d'eau cuve en mode AP (access point) et branché un capteur à ultrasons étanche de type AJ-SR04M alimenté en 3,3V.
J'ai bien les mesures espérées dans le moniteur série (%, litres et distance) mais l'affichage sur le smartphone est sur une seule ligne avec uniquement le pourcentage de remplissage.
En regardant la partie "HTML" du sketch les balises
me semblent bien placées et en recopiant cette partie dans un browser l'affichage est correct.
Je suis donc dans le brouillard !
Une idée ? (le site original est dans l'entête du sketch)
// version AP mode NodeMCU et AJ-SR04M
// site origine : https://blog.etechpath.com/water-tank-level-automation-using-esp8266-and-hc-sr04-ultrasonic-sensor/
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <HCSR04.h>
const char* ssid = "WaterLevel"; //Access point ssid
const char* password = "12341234"; //Access point password
float lit = 0.0; // litres
float pourcent = 0.0; // pourcentage
float distcm = 0; // distance
// Rectangular Tank dimentions in cm
float longueurcm = 200; // longueur
float largeurcm = 200; // largeur
float hauteurcm = 130; // Hauteur, du capteur au fond de citerne
/*
HCSR04(trigger, echo, temperature, distance)
trigger - trigger pin*
echo - echo pin*
temperature - ambient temperature, in C
distance - maximun measuring distance, in cm
*most boards has 10-12kOhm pullup-up resistor on GPIO2/D4 & GPIO0/D3
ESP8266 fails to BOOT/FLASH if D3 or D4 is LOW, use with with caution!
*/
HCSR04 ultrasonicSensor(D6, D5, 20, 300);
AsyncWebServer server(80);
unsigned long previousMillis = 0;
const long interval = 1000; // intervalle de mesure
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; Color:DodgerBlue; }
h3 { font-size: 1.5rem; Color:Tomato; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.temp-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h2>Niveau citerne</h2>
<p>
<span id="permap">%PERMAP%</span>
<sup class="units">%</sup>
</p>
<p>
<span id="litre">%LITRE%</span>
<sup class="units">Litre</sup>
</p>
<p>
<span id="distance">%DISTANCE%</span>
<sup class="units">Cm</sup>
</p>
</body>
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("permap").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/permap", true);
xhttp.send();
}, 1000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("litre").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/litre", true);
xhttp.send();
}, 1000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("distance").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/distance", true);
xhttp.send();
}, 1000 ) ;
</script>
</html>)rawliteral";
// Replaces placeholders with sensor values
String processor(const String& var){
if(var == "DISTANCE"){
return String(distcm);
}
else if(var == "LITRE"){
return String(lit);
}
else if(var == "PERMAP"){
return String(pourcent);
}
return String();
}
void setup(){
Serial.begin(115200);
ultrasonicSensor.begin(); //set trigger as output & echo pin as input
Serial.print("Setting AP (Access Point)…");
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
Serial.println(WiFi.localIP());
// Route for root
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
server.on("/permap", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(pourcent).c_str());
});
server.on("/litre", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(lit).c_str());
});
server.on("/distance", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(distcm).c_str());
});
server.begin();
}
void loop()
{
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval)
{
previousMillis = currentMillis;
float newdistance = ultrasonicSensor.getMedianFilterDistance(); //pass 3 measurements through median filter, better result on moving obstacles
if (newdistance != HCSR04_OUT_OF_RANGE)
{
Serial.print("sensor raw value:");
Serial.println(newdistance);
distcm = hauteurcm - newdistance;
float v = distcm * longueurcm * largeurcm ; // volume
lit = v / 1000;
pourcent = map(distcm, 0, hauteurcm, 0, 100);
Serial.println(pourcent);
Serial.println(lit);
Serial.println(distcm);
}
else
{
Serial.println(F("out of range"));
}
}
}
(3 lignes différentes, reflet du moniteur série).
).