Bonjour,
voici un widget HTML développé pour mon futur capteur de niveau 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> <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.
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.
).
