🏊🏻‍♀️ Piscine, X-Pool et IPX800 V5

Cartes Ethernet IPX800
,
61

Bonjour,
voici un widget HTML développé pour mon futur capteur de niveau VL6180X.
vl6180x

<style>
.box2{
    position:absolute;
    padding:5px;
    height: 110px;
    width: 40px;
     top: 5px;
    left: 15px;
    background: #E0E9ED;
    border-radius:2%;
    overflow: hidden;
}

.led{
    width: 40px;
    height: 9px;
    margin-top:2px;

}
</style>

<script>
//définition bargraph
var couleursOFF=['85C1E9','85C1E9','85C1E9','5DADE2','5DADE2','3498DB','3498DB','3498DB','2E86C1','2874A6'];
var couleursON=['f00','AFC0C7','AFC0C7','AFC0C7','AFC0C7','AFC0C7','AFC0C7','AFC0C7','AFC0C7','AFC0C7'];
//Positionnement capteur VL6180X
var Delta=40; //distance en mm entre niveau mini et niveau maxi
var offset=30; //hauteur du capteur en mm au dessus du niveau maxi
//autres variables publiques
var Superficie=26; //superficie du bassin en m²
var Hauteur; //distance lue entre le capteur et le niveau d'eau
var idAna=262334; // id de l'entrée analogique (ou variable) liée au capteur

window.GCE_Refresh.push(function(data) {
switch (data['_id'])
{
case idAna: // analogique 1 =) 262144. 327691=débitmètre
    Hauteur=data.value;
    drawBargraph(Hauteur);
    break;
}
})


function init() {
GCE_API.getANA(idAna)
.then((ret) => {
console.log("OK ", ret)
Hauteur=ret.value;
drawBargraph(Hauteur);
}).catch((err) => {
console.error("KO ", err)
});
}

function drawBargraph(value) {
//Hauteur=34; //pour test seulement
let rang=((Hauteur-offset)/(Delta/10)).toFixed(2);
console.log("rang:",rang);
console.log("hauteur:",Hauteur);

//rang=3;
document.getElementById("l1").style.backgroundColor = "#" + ( rang >= 10 ? couleursON[0] : couleursOFF[0]);
document.getElementById("l2").style.backgroundColor = "#" + ( rang >= 9 ? couleursON[1] : couleursOFF[1]);
document.getElementById("l3").style.backgroundColor = "#" + ( rang >= 8 ? couleursON[2] : couleursOFF[2]);
document.getElementById("l4").style.backgroundColor = "#" + ( rang >= 7 ? couleursON[3] : couleursOFF[3]);
document.getElementById("l5").style.backgroundColor = "#" + ( rang >= 6 ? couleursON[4] : couleursOFF[4]);
document.getElementById("l6").style.backgroundColor = "#" + ( rang >= 5 ? couleursON[5] : couleursOFF[5]);
document.getElementById("l7").style.backgroundColor = "#" + ( rang >= 4 ? couleursON[6] : couleursOFF[6]);
document.getElementById("l8").style.backgroundColor = "#" + ( rang >= 3 ? couleursON[7] : couleursOFF[7]);
document.getElementById("l9").style.backgroundColor = "#" + ( rang >= 2 ? couleursON[8] : couleursOFF[8]);
document.getElementById("l10").style.backgroundColor = "#" + ( rang >=1 ? couleursON[9] : couleursOFF[9]);
document.getElementById("manque1").innerHTML=Hauteur-offset;
document.getElementById("manque2").innerHTML=(Hauteur-offset)*Superficie;
document.getElementById("sensor").innerHTML = ( Hauteur >= offset  ? 'OK' : 'KO');
document.getElementById("sensor").style.color = ( Hauteur >= offset  ? '#117A65' : '#f00');
}
init()
</script>

<div class="box2">
<div id="l10" class="led" style="top:205px;"></div>
<div id="l9" class="led" style="top:167px;"></div>
<div id="l8" class="led" style="top:149px;"></div>
<div id="l7" class="led" style="top:131px;"></div>
<div id="l6" class="led" style="top:95px;"></div>
<div id="l5" class="led" style="top:77px;"></div>
<div id="l4" class="led" style="top:59px;"></div>
<div id="l3" class="led" style="top:41px;"></div>
<div id="l2" class="led" style="top:23px;"></div>
<div id="l1" class="led" style="top:0px;"></div>
</div>

<div style="position:absolute;top:20px;margin-left:20px;font-size:12px;">
	<u><p style="font-size:14px;font-weight:bold;">NIVEAU D'EAU SKIMMER</p></u>
	<br>
<!--	<span >Level : </span><span id="manque0"></span>&nbsp;<br> -->
<span >Manque mm: </span><span id="manque1"></span><br>
<span >Manque litres : </span><span id="manque2"></span><br>
<span >capteur : </span><span id="sensor">...</span><br>
</div>

Le capteur de télémétrie à laser (Time Of Flight) choisi est un modèle VL6180x TOF050C avec une zone aveugle (blind zone) de 30 mm pour une plage de mesure 30mm à 500 mm qui communique sur le bus I2C.
La longueur d’onde du laser est de 850 nm (infrarouge). Il est de classe 1, donc sans danger si les conditions de mise en œuvre sont respectées.
image

J’ai prévu de l’installer dans le skimmer (avec boitier étanche), 30 mm au dessus du trop-plein du bassin. L’utilisation du bus I2C sur une dizaine de mètres demande des précautions.
Pour le moment il n’est pas installé et je ne peux pas encore faire de retour d’expérience, je vous tiendrai au courant au printemps et vous ferai part du montage adopté (esp32, DAC, …)

Fonctionnement prévu:
Une baisse de niveau supérieure à 40 mm démarrera le remplissage automatique.
Une lecture inférieure à 30 mm (et donc un niveau qui serait au dessus du trop-plein) notifiera une anomalie.
Pour le moment l’animation du widget est obtenue grâce à un objet Fader lié à la variable analogique. Plus tard, l’entrée analogique 1 (id 262144) liée au capteur sera mise en place dans le code.

2 « J'aime »