Fgtoul le 14 novembre 2019 à 18:01

2019-11-14T18:01:25Z

← Version précédente		Version du 14 novembre 2019 à 18:01
Ligne 7 :		Ligne 7 :
	{{Infobox IPX800		{{Infobox IPX800
	\| titre = SmoothieCharts		\| titre = SmoothieCharts
	\| image = ~~canvas~~-~~gauge~~.png		\| image = smoothie-pres.png
	\| famille = IPX800 V4		\| famille = IPX800 V4
	\| date-create = 12/11/2019		\| date-create = 12/11/2019
Ligne 19 :		Ligne 19 :

	Pour installer ce type de graphique, nous utiliserons [http://smoothiecharts.org Smoothie.js] une librairie javascript facile à utiliser.		Pour installer ce type de graphique, nous utiliserons [http://smoothiecharts.org Smoothie.js] une librairie javascript facile à utiliser.

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

	[[fichier:GrapheDyn.gif\|center]]		[[fichier:GrapheDyn.gif\|center]]


	==Etape 1 : LA source de données==		==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)		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)

Fgtoul le 14 novembre 2019 à 17:54

2019-11-14T17:54:55Z

← Version précédente		Version du 14 novembre 2019 à 17:54
Ligne 2 :		Ligne 2 :
	smoothie.js		smoothie.js
	-->		-->
			{{sommaire\|niveau=3\|flottant=left}}


			{{Infobox IPX800
			\| titre = SmoothieCharts
			\| image = canvas-gauge.png
			\| famille = IPX800 V4
			\| date-create = 12/11/2019
			\| date-update = 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 [http://smoothiecharts.org Smoothie.js] une librairie javascript facile à utiliser.

			[[fichier:GrapheDyn.gif\|center]]


			==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)

			[[fichier:smoothie-DS.png\|center]]

			==Etape 2 : le widget HTML==

			Ajoutez un widget de type HTML (hauteur 1 bloc) et collez ce code

			<source>
			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'>
			`;
			</source>

			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

			<nowiki><script src='http://192.168.0.9/gce/smoothie.js'></nowiki>

			==Etape 3 : le script d'initialisation==

			Créez un deuxième widget HTML (hauteur 3 blocs) et insérez ce code :

			<source>
			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>
			`;
			</source>

			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 :

			<source>
			s= (((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);
			document.getElementById("valGraph1").innerText=s; //(Math.random() * 100 ).toFixed(2);
			</source>


			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

Fgtoul : Page créée avec « »

2019-11-12T19:09:23Z

Page créée avec «  »

Nouvelle page

Graphique temps réel - Historique des versions

Fgtoul le 14 novembre 2019 à 18:01

Fgtoul le 14 novembre 2019 à 17:54

Fgtoul : Page créée avec « »