Jauges analogiques - Historique des versions

Fgtoul : /* Dashboard réalisé par @Daniel83190 */

2024-12-26T11:23:57Z

Dashboard réalisé par @Daniel83190

← Version précédente		Version du 26 décembre 2024 à 11:23
Ligne 395 :		Ligne 395 :
	== Les contributions de la communauté ==		== Les contributions de la communauté ==

	===Dashboard réalisé par @Daniel83190===		===Dashboard réalisé par @Daniel83190 sur ipx800 V4===

	[[file:CanvasDaniel83190.png\|center\|800px]]		[[file:CanvasDaniel83190.png\|center\|800px]]

Fgtoul : /* Présentation */

2024-12-26T11:21:47Z

Présentation

← Version précédente		Version du 26 décembre 2024 à 11:21
Ligne 32 :		Ligne 32 :
	[http://wiki.gce-electronics.com/images/0/0f/Canvas-jauges.gif Jauges animées]		[http://wiki.gce-electronics.com/images/0/0f/Canvas-jauges.gif Jauges animées]

			==Etape 1 : Dessin de la jauge sur Dashboard==

	~~'''A la fin de cet article, vous trouverez le script spécifique à l'ipx800 V5.'''~~

	==Etape 1 : Dessin de la jauge==

	Sur IPX800 V4 comme sur IPX800 V5, il suffit d'ajouter un widget type HTML sur le dashboard, ainsi que la référence à la librairie Canvas-Gauges pour que le dessin d'une jauge apparaisse.		Sur IPX800 V4 comme sur IPX800 V5, il suffit d'ajouter un widget type HTML sur le dashboard, ainsi que la référence à la librairie Canvas-Gauges pour que le dessin d'une jauge apparaisse.

Fgtoul : /* Mise en œuvre sur IPX800 V5 */

2024-12-26T11:20:57Z

Mise en œuvre sur IPX800 V5

← Version précédente		Version du 26 décembre 2024 à 11:20
Ligne 345 :		Ligne 345 :

	== Mise en œuvre sur IPX800 V5 ==		== Mise en œuvre sur IPX800 V5 ==
	:~~Le fonctionnement des widgets Canvas~~ est ~~identique sur V4 et~~ V5. Vous devez donc de la même manière créer un widget HTML qui contiendra ~~le code XML de la jauge, un widget HTML contenant~~ le script Javascript ~~chargé~~ des jauges, sans oublier la référence à la librairie canvas-gauge.		:La récupération de la valeur analogique de chaque jauge est effectuée grâce à l'API Widget HTML spécifique à l'ipx800 V5. Vous devez donc de la même manière créer un widget HTML qui contiendra le script Javascript qui effectuera la mise à jour des jauges, sans oublier la référence à la librairie canvas-gauge.
	:		:
	:Voici un exemple de code spécifique à l'ipx800 V5. Le script récupère les valeurs analogiques grâce à l'API Widget HTML et applique la mise à jour aux 2 jauges correspondantes.		:Voici un exemple de code spécifique à l'ipx800 V5. Le script récupère les valeurs analogiques grâce à l'API Widget HTML et applique la mise à jour aux 2 jauges correspondantes.

Fgtoul le 26 décembre 2024 à 11:17

2024-12-26T11:17:49Z

← Version précédente		Version du 26 décembre 2024 à 11:17
Ligne 36 :		Ligne 36 :
	'''A la fin de cet article, vous trouverez le script spécifique à l'ipx800 V5.'''		'''A la fin de cet article, vous trouverez le script spécifique à l'ipx800 V5.'''

	==Etape 1 : la jauge==		==Etape 1 : Dessin de la jauge==

	Ajoutez un widget de type HTML (Hauteur=3 blocs) et collez le code suivant		Sur IPX800 V4 comme sur IPX800 V5, il suffit d'ajouter un widget type HTML sur le dashboard, ainsi que la référence à la librairie Canvas-Gauges pour que le dessin d'une jauge apparaisse.



			Ajoutez un widget de type HTML (Hauteur=3 blocs) et collez le code minimaliste suivant

	<source>		<source>
Ligne 49 :		Ligne 53 :
	[[Fichier:minimal-gauge.png\|center]]		[[Fichier:minimal-gauge.png\|center]]

	~~==Etape 2 : la valeur analogique==~~
	~~Pour valoriser la jauge, créez une source de données sur le dashboard.~~

	~~La valeur de l'entrée analogique sera récupérée dans le fichier status.xml.~~

	~~Via le menu Administrateur, cliquez sur "AJOUTER SOURCE DE DONNEES" et paramétrez la source comme suit.~~

	~~[[Fichier:status_datasource.png\|700px\|center]]~~

	~~Pour mon exemple, la datasource sera nommée STATUS. Ce nom sera repris dans les scripts plus bas.~~

	~~Il ne reste plus qu'à écrire un mini script qui injectera la valeur analogique dans le widget Canvas-Gauge.~~

	~~Créez un widget de type HTML de Hauteur=1 block et y coller le javascript fourni ci-dessous.~~

	~~Dans l'exemple ci-dessous, la jauge est liée à l'entrée analogique n°1 (analog0) par la source de données "STATUS".~~		=== Quelques jauges présentes sur mon Dashboard ===

	~~Il convient d'adapter la formule en fonction du type de capteur utilisé.~~		====exemple 1====

	~~<source>~~
	a=~~(((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);~~
	~~var gauge1~~ = ~~document.gauges.get('fgtoul1');~~
	~~gauge1.value~~=~~Math.floor(a);~~
	~~return `~~
	~~<div>Javascript pour mise à jour des jauges</div>~~
	`;
	~~</source>~~

	Si vous avez plusieurs jauges de type Canvas-gauges sur le même Dashboard, vous pourrez mettre à jour toutes les jauges avec le même script. Chaque Jauge est reconnue grâce à son ID fourni dans la balise <Canvas>. Ci-dessus, il s’agit de l’ID fgtoul1 .

	~~Par~~ exemple~~, voici un script que j'ai utilisé pour la démo. Celui-ci se charge de mettre 2 jauges à jour.~~

	~~<source>~~
	~~a=(((datasources["STATUS"]["response"]["analog0"] * 0.00323)-~~ 1~~.63) / 0.0326).toFixed(2);~~
	b=~~(((datasources["STATUS"]["response"]["analog1"] * 0.00323)- 1.63) / 0.0326).toFixed(2);~~

	~~var gauge1 = document.gauges.get('fgtoul1');~~
	~~var gauge2 = document.gauges.get('fgtoul2');~~
	~~gauge1.value=Math.floor(a);~~
	~~gauge2.value=Math.floor(b);~~
	~~</source>~~

	~~==Pour aller plus loin==~~
	~~Voici le code de quelques jauges présentes sur mon Dashboard~~

	~~===exemple 1~~===
	[[Fichier:fgtoul1-canvas.PNG\|thumb\|right]]		[[Fichier:fgtoul1-canvas.PNG\|thumb\|right]]

Ligne 139 :		Ligne 101 :
	</source>		</source>

	===Exemple 2===		====Exemple 2====
	une jauge PH que j’ai paramétrée pour les piscines		une jauge PH que j’ai paramétrée pour les piscines

Ligne 169 :		Ligne 131 :
	</source>		</source>

	===Exemple 3===		====Exemple 3====
	[[Fichier:fgtoul8-canvas.PNG\|thumb\|right]]		[[Fichier:fgtoul8-canvas.PNG\|thumb\|right]]
	<source>		<source>
Ligne 199 :		Ligne 161 :
	</source>		</source>

	===Exemple 4===		====Exemple 4====
	[[Fichier:fgtoul4-canvas.PNG\|thumb\|right]]		[[Fichier:fgtoul4-canvas.PNG\|thumb\|right]]

Ligne 254 :		Ligne 216 :
	</source>		</source>

	===Exemple 5===		====Exemple 5====
	[[Fichier:fgtoul5-canvas.PNG\|thumb\|right]]		[[Fichier:fgtoul5-canvas.PNG\|thumb\|right]]

Ligne 305 :		Ligne 267 :
	</source>		</source>

	===Un script pour toutes les jauges===		==Mise en oeuvre sur IPX800 V4==

			==== Récupération de la valeur analogique ====
			Pour valoriser la jauge, créez une source de données sur le dashboard.

			La valeur de l'entrée analogique sera récupérée dans le fichier status.xml.

			Via le menu Administrateur, cliquez sur "AJOUTER SOURCE DE DONNEES" et paramétrez la source comme suit.

			[[Fichier:status_datasource.png\|700px\|center]]

			Pour mon exemple, la datasource sera nommée STATUS. Ce nom sera repris dans les scripts plus bas.

			Il ne reste plus qu'à écrire un mini script qui injectera la valeur analogique dans le widget Canvas-Gauge.

			Créez un widget de type HTML de Hauteur=1 block et y coller le javascript fourni ci-dessous.

			Dans l'exemple ci-dessous, la jauge est liée à l'entrée analogique n°1 (analog0) par la source de données "STATUS".

			Il convient d'adapter la formule en fonction du type de capteur utilisé.

			<source>
			a=(((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);
			var gauge1 = document.gauges.get('fgtoul1');
			gauge1.value=Math.floor(a);
			return `
			<div>Javascript pour mise à jour des jauges</div>
			`;
			</source>

			Si vous avez plusieurs jauges de type Canvas-gauges sur le même Dashboard, vous pourrez mettre à jour toutes les jauges avec le même script. Chaque Jauge est reconnue grâce à son ID fourni dans la balise <Canvas>. Ci-dessus, il s’agit de l’ID fgtoul1 .

			Par exemple, voici un script que j'ai utilisé pour la démo. Celui-ci se charge de mettre 2 jauges à jour.

			<source>
			a=(((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);
			b=(((datasources["STATUS"]["response"]["analog1"] * 0.00323)- 1.63) / 0.0326).toFixed(2);

			var gauge1 = document.gauges.get('fgtoul1');
			var gauge2 = document.gauges.get('fgtoul2');
			gauge1.value=Math.floor(a);
			gauge2.value=Math.floor(b);
			</source>

			====Un script pour toutes les jauges====
	Voici le code javascript qui a servi pour la démo. A la place des valeurs analogiques, j'utilise des valeurs aléatoires.		Voici le code javascript qui a servi pour la démo. A la place des valeurs analogiques, j'utilise des valeurs aléatoires.
	La présence d’un appel à la datasource oblige l’IPX800 à exécuter le script à chaque mise à jour de STATUS.		La présence d’un appel à la datasource oblige l’IPX800 à exécuter le script à chaque mise à jour de STATUS.

Fgtoul : /* Dashboard réalisé par @Daniel83190 */

2024-12-26T11:09:21Z

Dashboard réalisé par @Daniel83190

← Version précédente		Version du 26 décembre 2024 à 11:09
Ligne 390 :		Ligne 390 :
	::::[[Fichier:Canvas-gauge sur v5.gif\|sans_cadre\|642x642px]]		::::[[Fichier:Canvas-gauge sur v5.gif\|sans_cadre\|642x642px]]
	::::		::::
	Les contributions de la communauté
			== Les contributions de la communauté ==

	===Dashboard réalisé par @Daniel83190===		===Dashboard réalisé par @Daniel83190===

Fgtoul le 26 décembre 2024 à 11:08

2024-12-26T11:08:35Z

← Version précédente		Version du 26 décembre 2024 à 11:08
Ligne 337 :		Ligne 337 :
	Vous trouverez plus d’informations sur le site https://canvas-gauges.com/		Vous trouverez plus d’informations sur le site https://canvas-gauges.com/
	les sources sont sur GitHub : https://github.com/Mikhus/canvas-gauges		les sources sont sur GitHub : https://github.com/Mikhus/canvas-gauges

	~~<!--~~
	~~--><div class="mw-collapsible mw-collapsed" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}" style="width:730px;">~~
	~~<div class="mw-collapsible-content">~~

	~~:::::~~

	== Mise en œuvre sur IPX800 V5 ==		== Mise en œuvre sur IPX800 V5 ==
Ligne 467 :		Ligne 461 :
	></canvas>		></canvas>
	</source>		</source>
	~~</div></div></div></div>~~

Fgtoul : /* Les contributions de la communauté */

2024-12-26T11:06:34Z

Les contributions de la communauté

← Version précédente		Version du 26 décembre 2024 à 11:06
Ligne 339 :		Ligne 339 :

	<!--		<!--
	-->		--><div class="mw-collapsible mw-collapsed" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}" style="width:730px;">
	==Les contributions de la communauté==		<div class="mw-collapsible-content">

			:::::

			== Mise en œuvre sur IPX800 V5 ==
			:Le fonctionnement des widgets Canvas est identique sur V4 et V5. Vous devez donc de la même manière créer un widget HTML qui contiendra le code XML de la jauge, un widget HTML contenant le script Javascript chargé des jauges, sans oublier la référence à la librairie canvas-gauge.
			:
			:Voici un exemple de code spécifique à l'ipx800 V5. Le script récupère les valeurs analogiques grâce à l'API Widget HTML et applique la mise à jour aux 2 jauges correspondantes.
			:<syntaxhighlight lang="html">
			<script>
			var analogId1=262222;
			var gaugeId1="gauge1";
			var analogId2=262223;
			var gaugeId2="gauge2";




			window.GCE_Refresh.push(function(data) { //IMPORTANT: biding refresh function to the WebSocket
			// received all IO and ANA that change in the V5 as an object
			// ex for IO: { _id: 65536, on: true }
			// ex for ANA: { _id: 196608, value: 1 }
			switch (data['_id'])
			{
			case analogId1:
			updateGauge(gaugeId1,data.value);
			break;

			case analogId2:
			updateGauge(gaugeId2,data.value);
			break;
			}
			})

			function init() {
			GCE_API.getANA(analogId1).then((ret) => { // ask for the actual value
			updateGauge(gaugeId1,ret.value) ;
			})
			GCE_API.getANA(analogId2).then((ret) => { // ask for the actual value
			updateGauge(gaugeId2,ret.value) ;
			})
			}

			function updateGauge(id,d){
			document.gauges.get(id).value=d
			document.gauges.get(id).update({ value: d });
			}


			init();
			</script>
			</syntaxhighlight>
			::Vous pourrez utiliser un seul script pour mettre toutes les jauges à jour sur le dashboard en cours d’utilisation. Le code ci-dessus est un exemple avec 2 jauges. Au début du script, créez les variables gaugeIdx et analogIdx pour chaque jauge. gaugeId : Renseignez la valeur de l’id du Canevas correspondant. analogId : renseignez l’id de l’analogique rattachée Dans la fonction Init(), ajoutez le code de chaque jauge. Dans la fonction liée websocket, ajoutez le code correspondant à chaque valeur analogique.
			::::
			::::[[Fichier:Canvas-gauge sur v5.gif\|sans_cadre\|642x642px]]
			::::
			Les contributions de la communauté

	===Dashboard réalisé par @Daniel83190===		===Dashboard réalisé par @Daniel83190===

Ligne 410 :		Ligne 467 :
	></canvas>		></canvas>
	</source>		</source>
			</div></div></div></div>
	~~== Mise en œuvre sur IPX800 V5 ==~~
	:Le fonctionnement des widgets Canvas est identique sur V4 et V5. Vous devez donc de la même manière créer un widget HTML qui contiendra le code XML de la jauge, un widget HTML contenant le script Javascript chargé des jauges, sans oublier la référence à la librairie canvas-gauge.
	:
	~~:Voici un exemple de code spécifique à l'ipx800 V5. Le script récupère les valeurs analogiques grâce à l'API Widget HTML et applique la mise à jour aux 2 jauges correspondantes.~~
	~~:<syntaxhighlight lang="html">~~
	~~<script>~~
	~~var analogId1=262222;~~
	~~var gaugeId1="gauge1";~~
	~~var analogId2=262223;~~
	~~var gaugeId2="gauge2";~~




	~~window.GCE_Refresh.push(function(data) { //IMPORTANT: biding refresh function to the WebSocket~~
	~~// received all IO and ANA that change in the V5 as an object~~
	~~// ex for IO: { _id: 65536, on: true }~~
	~~// ex for ANA: { _id: 196608, value: 1 }~~
	~~switch (data['_id'])~~
	{
	~~case analogId1:~~
	~~updateGauge(gaugeId1,data.value);~~
	~~break;~~

	~~case analogId2:~~
	~~updateGauge(gaugeId2,data.value);~~
	~~break;~~
	}
	})

	~~function init() {~~
	~~GCE_API.getANA(analogId1).then((ret) => { // ask for the actual value~~
	~~updateGauge(gaugeId1,ret.value) ;~~
	})
	~~GCE_API.getANA(analogId2).then((ret) => { // ask for the actual value~~
	~~updateGauge(gaugeId2,ret.value) ;~~
	})
	}

	~~function updateGauge(id,d){~~
	~~document.gauges.get(id).value=d~~
	~~document.gauges.get(id).update({ value: d });~~
	}


	~~init();~~
	</~~script~~>
	</~~syntaxhighlight~~>
	::Vous pourrez utiliser un seul script pour mettre toutes les jauges à jour sur le dashboard en cours d’utilisation. Le code ci-dessus est un exemple avec 2 jauges. Au début du script, créez les variables gaugeIdx et analogIdx pour chaque jauge. gaugeId : Renseignez la valeur de l’id du Canevas correspondant. analogId : renseignez l’id de l’analogique rattachée Dans la fonction Init(), ajoutez le code de chaque jauge. Dans la fonction liée websocket, ajoutez le code correspondant à chaque valeur analogique.
	~~::::~~
	~~::::[[Fichier:Canvas-gauge sur v5.gif\|sans_cadre\|642x642px]]~~
	~~::::~~
	</div></div>

Fgtoul le 26 décembre 2024 à 11:01

2024-12-26T11:01:21Z

← Version précédente		Version du 26 décembre 2024 à 11:01
Ligne 30 :		Ligne 30 :
	[[Fichier:Canvas-gauges.PNG\|center\|500px]]		[[Fichier:Canvas-gauges.PNG\|center\|500px]]
	Cliquez sur ce lien pour visualiser les jauges animées en taille rélle :		Cliquez sur ce lien pour visualiser les jauges animées en taille rélle :
	[http://gce.~~ovh/wiki~~/images/0/0f/Canvas-jauges.gif Jauges animées]		[http://wiki.gce-electronics.com/images/0/0f/Canvas-jauges.gif Jauges animées]

Fgtoul : /* Présentation */

2024-12-26T10:59:53Z

Présentation

← Version précédente		Version du 26 décembre 2024 à 10:59
Ligne 31 :		Ligne 31 :
	Cliquez sur ce lien pour visualiser les jauges animées en taille rélle :		Cliquez sur ce lien pour visualiser les jauges animées en taille rélle :
	[http://gce.ovh/wiki/images/0/0f/Canvas-jauges.gif Jauges animées]		[http://gce.ovh/wiki/images/0/0f/Canvas-jauges.gif Jauges animées]


			'''A la fin de cet article, vous trouverez le script spécifique à l'ipx800 V5.'''

	==Etape 1 : la jauge==		==Etape 1 : la jauge==

Fgtoul le 26 décembre 2024 à 10:52

2024-12-26T10:52:41Z

← Version précédente		Version du 26 décembre 2024 à 10:52
Ligne 406 :		Ligne 406 :
	></canvas>		></canvas>
	</source>		</source>

			== Mise en œuvre sur IPX800 V5 ==
			:Le fonctionnement des widgets Canvas est identique sur V4 et V5. Vous devez donc de la même manière créer un widget HTML qui contiendra le code XML de la jauge, un widget HTML contenant le script Javascript chargé des jauges, sans oublier la référence à la librairie canvas-gauge.
			:
			:Voici un exemple de code spécifique à l'ipx800 V5. Le script récupère les valeurs analogiques grâce à l'API Widget HTML et applique la mise à jour aux 2 jauges correspondantes.
			:<syntaxhighlight lang="html">
			<script>
			var analogId1=262222;
			var gaugeId1="gauge1";
			var analogId2=262223;
			var gaugeId2="gauge2";




			window.GCE_Refresh.push(function(data) { //IMPORTANT: biding refresh function to the WebSocket
			// received all IO and ANA that change in the V5 as an object
			// ex for IO: { _id: 65536, on: true }
			// ex for ANA: { _id: 196608, value: 1 }
			switch (data['_id'])
			{
			case analogId1:
			updateGauge(gaugeId1,data.value);
			break;

			case analogId2:
			updateGauge(gaugeId2,data.value);
			break;
			}
			})

			function init() {
			GCE_API.getANA(analogId1).then((ret) => { // ask for the actual value
			updateGauge(gaugeId1,ret.value) ;
			})
			GCE_API.getANA(analogId2).then((ret) => { // ask for the actual value
			updateGauge(gaugeId2,ret.value) ;
			})
			}

			function updateGauge(id,d){
			document.gauges.get(id).value=d
			document.gauges.get(id).update({ value: d });
			}


			init();
			</script>
			</syntaxhighlight>
			::Vous pourrez utiliser un seul script pour mettre toutes les jauges à jour sur le dashboard en cours d’utilisation. Le code ci-dessus est un exemple avec 2 jauges. Au début du script, créez les variables gaugeIdx et analogIdx pour chaque jauge. gaugeId : Renseignez la valeur de l’id du Canevas correspondant. analogId : renseignez l’id de l’analogique rattachée Dans la fonction Init(), ajoutez le code de chaque jauge. Dans la fonction liée websocket, ajoutez le code correspondant à chaque valeur analogique.
			::::
			::::[[Fichier:Canvas-gauge sur v5.gif\|sans_cadre\|642x642px]]
			::::
	</div></div>		</div></div>
	~~-->~~