Graphique temps réel

SmoothieCharts
Nom			SmoothieCharts
Famille			IPX800 V4
Wiki créé le			12/11/2019
Wiki mis à jour le			12/11/2019
Auteur			fgtoul

Présentation

L'IPX800 V4 propose par défaut des widgets de type Graphe, qui présentent des mesures de capteurs analogiques sur 24 heures glissantes et mettent en évidence les valeurs minimales et maxi. Dans cet article, nous apprendrons à mettre un oeuvre un autre type de graphique, avec des données en live stream afin de d'observer des phénomènes analogiques changeant rapidement.

Pour installer ce type de graphique, nous utiliserons Smoothie.js une librairie javascript facile à utiliser.

l'image en haut à droite est une capture faite sur le site de smoothie.org.

Etape 1 : La source de données

Sur le dashboard, il convient de créer une source de données pointant vers la valeur analogique souhaitée. Dans notre exemple, nous lierons cette source au fichier STATUS.XML de l'Ipx800 V4 et nous lui attribuerons un taux de rafraichissement assez rapide (0.5 à 1 seconde)

Etape 2 : le widget HTML

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 : le script d'initialisation

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 : stream de données

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