Bonjour Ă tous,
il y a dĂ©jĂ quelques mois, jâavais eu le plaisir de vous proposer des widgets pour vos capteurs analogiques
Aujourdâhui, je vous propose dâajouter un graphe dynamique sur votre tableau de bord.
Ce type de graphe est trĂšs utile pour des valeurs analogiques qui changent trĂšs rapidement comme le niveau sonore dâune piĂšce, mesurĂ© par exemple par un capteur de bruit tel que le SEN12642 de Sparkfun
ou encore le Capteur de Niveau Sonore Analogique Gravity par DFRobot.
.
Ces capteurs peuvent ĂȘtre connectĂ©s Ă une entrĂ©e analogique de lâIPX800 et Ă©mettre un signal analogique proportionnel au niveau sonore relevĂ© dans une piĂšce. Ce type de capteur est souvent utilisĂ© pour la fabrication dâun systĂšme dâalarme par exemple.
Vous ne pourrez bien sĂ»r pas entendre ce qui se passe dans la piĂšce, mais vous pourrez visualiser le niveau sonore, ce qui peut ĂȘtre trĂšs utile pour une levĂ©e de doute.
Le but de ce tuto est de vous montrer comment visualiser des Ă©chantillonnages rapides.
Pour réaliser cela, nous utiliserons la Librairie smoothie.js disponible ici: http://smoothiecharts.org/
Etape 1
Sur le dashboard, crĂ©ez une source de donnĂ©es Ă taux de rafraĂźchissement Ă©levĂ© (0.5 seconde par exemple). Dans mon exemple, elle sâappellera STATUS et pointera sur le fichier Status.xml de lâIPX800 V4.
Etape 2
Ajoutez un widget de type HTML (hauteur 1 bloc) et collez ce code
return `
<div style="margin-top:15px;margin-left:15px;">
<span>Valeur analogique : </span>
<span id="valGraph1">0</span></div>
<script src='http://smoothiecharts.org/smoothie.js'>
`;
Ce code permet de charger la library. Pour ĂȘtre indĂ©pendant du web, vous pouvez tĂ©lĂ©charger le fichier javascript et lâhĂ©berger sur votre rĂ©seau local si vous avez un NAS par exemple. Il faudra adapter lâURL du script. Dans mon cas, lâayant placĂ©e sur mon syno, ça devient
<script src='http://192.168.0.9/gce/smoothie.js'>
Etape 3
Créez un deuxiÚme widget HTML (hauteur 3 blocs) et insérez ce code :
var mini=0;
var maxi=100;
var speed=15; //to 100
return `
<center>
<button id=bgraph onclick="createTimeline();">GRAPHIQUE</button>
<canvas id="chart" width="280" height="150"></canvas>
</center>
<style>
div.smoothie-chart-tooltip {
background: #444;
padding: 1em;
margin-top: 20px;
font-family: consolas;
color: white;
font-size: 10px;
pointer-events: none;
}
</style>
<script type="text/javascript">
function createTimeline() {
var random = new TimeSeries();
setInterval(function() {
random.append(Date.now(), parseFloat(document.getElementById("valGraph1").innerText));
}, 500);
var chart = new SmoothieChart({millisPerPixel:${speed},grid:{verticalSections:0},tooltip:true,maxValue:${maxi},minValue:${mini},horizontalLines:[{color:'#ffffff',lineWidth:1,value:0}]});
chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 500);
document.getElementById("bgraph").style.visibility = 'hidden';
}
</script>
`;
Dans ce code, renseignez les valeurs Mini, Maxi et speed en fonction de vos besoins. Speed correspond à la vitesse de défilement du graphe, sa valeur va de 0 à 100
AprÚs création du widget, vous pouvez voir le bouton GRAPHIQUE qui servira à initialiser le graphique.
Etape 4
Créez un troisiÚme widget de type HTML (hauteur 1 bloc) et collez ce code :
s= (((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);
document.getElementById("valGraph1").innerText=s; //(Math.random() * 100 ).toFixed(2);
Ce widget sert uniquement à ajouter une valeur au graphique à chaque fois que la source de données se met à jour. Nous envoyons la valeur analogique dans un élément Html, qui sera alors lu par le graphe.
Vous devrez adapter la formule selon le type de capteur utilisé.
Etape 5
Vous avez terminĂ©, sauvegardez lâIHM puis cliquez sur le bouton GRAPHIQUE du deuxiĂšme widget 
Bon graph.
permet de réinitialiser les stats (ambiance moyenne, bruit max et ambiance)
permet de stopper et redémarrer les mesures
permet dâexporter la liste des mesures effectuĂ©es. Il suffit de copier les valeurs puis de les coller dans un fichier (possibilitĂ© de faire des graphiques sous Excel. Il faudra peut-ĂȘtre ajuster le sĂ©parateur dĂ©cimal en fonction de vos paramĂštres rĂ©gionaux)
