Jauges analogiques

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

Introduction

L'ipx800 propose par défaut un widget de type Jauge permettant de visualiser graphiquement une valeur analogique.

Dans cet article, vous apprendrez à utiliser des jauges entièrement personnalisables.

Présentation

Canvas Gauge est une collection de jauges linéaires et radiales, dont l'aspect et le comportement sont entièrement paramétrables. Le composant peut être utilisé sous forme de plugin HTML ou être entièrement initialisé par script.

Nous utiliserons la première méthode avec l'IPX800, ce qui permettra d'avoir des scripts plus légers. Nous pourrons alors dessiner nos jauges grâce à la balise <canvas>paramètres</canvas> et éventuellement quelques paramètres.

Il suffira alors d'ajouter une référence à la librairie canvas-gauges pour que la magie opère.

Voici quelques widgets mis en place sur le dashboard de l'IPX800 V4

Cliquez sur ce lien pour visualiser les jauges animées en taille rélle : Jauges animées

Etape 1 : la jauge

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

<canvas data-type="radial-gauge" id=fgtoul1></canvas>
<script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js""/>

Remarque : Dans le code ci-dessus, la référence à la Librairie a été ajoutée à la fin du code HTML.

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.

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é.

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

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.

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

Pour aller plus loin

Voici le code de quelques jauges présentes sur mon Dashboard

exemple 1

Vous y remarquerez la référence au plugin tiers.

<center>
    <canvas id=fgtoul1 style="margin-top:15px;"  data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="Km/h"
        data-title="false"
        data-value="33.77"
        data-animate-on-init="true"
        data-animated-value="true"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
            { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
            { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
            { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
        data-color-plate="#222"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-font-numbers="Led"
></canvas>
</center>
<script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"/>

Exemple 2

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

<canvas style="margin-top:15px;" id=fgtoul7 data-type="linear-gauge"
        data-width="290"
        data-height="100"
        data-min-value="0"
        data-max-value="14"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title="PH"
        data-units=""
        data-value="7.2"
        data-bar-stroke-width="5"
        data-highlights='[{"from": 7.2, "to": 7.8, "color": "green"}]'
        data-major-ticks="0,1,2,3,4,5,6,7,8,9,10,11,12,13,14"
        data-minor-ticks="1"
        data-color-plate="transparent"
        data-color-numbers="#ccc"
        data-color-major-ticks="#ccc"
        data-color-bar-stroke="#444"
        data-number-side="left"
        data-needle-side="left"
></canvas>

Exemple 3

<center>
    <canvas id=fgtoul8 style="margin-top:15px;" data-type="linear-gauge"
        data-width="280"
        data-height="150"
        data-min-value="0"
        data-max-value="100"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="10"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-color-numbers="red,red,green,green,blue,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
        data-color-major-ticks="red,green,blue,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent"
        data-color-bar-stroke="#444"
        data-value="22.3"
        data-units="°C"
        data-color-value-box-shadow="false"
        data-tick-side="left"
        data-number-side="left"
        data-needle-side="left"
        data-color-plate="transparent"
        data-font-value-size="45"
        data-highlights='false'
></canvas>
</center>

Exemple 4

<center>
    <canvas id=fgtoul4 style="margin-top:15px;" data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="°C"
        data-title="Temperature"
        data-min-value="-50"
        data-max-value="50"
        data-major-ticks="[-50,-40,-30,-20,-10,0,10,20,30,40,50]"
        data-minor-ticks="2"
        data-stroke-ticks="true"
        data-highlights='[
                    {"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
                    {"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"}
                ]'
        data-ticks-angle="225"
        data-start-angle="67.5"
        data-color-major-ticks="#ddd"
        data-color-minor-ticks="#ddd"
        data-color-title="#eee"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-plate="#222"
        data-border-shadow-width="0"
        data-borders="true"
        data-needle-type="arrow"
        data-needle-width="2"
        data-needle-circle-size="7"
        data-needle-circle-outer="true"
        data-needle-circle-inner="false"
        data-animation-duration="1500"
        data-animation-rule="linear"
        data-color-border-outer="#333"
        data-color-border-outer-end="#111"
        data-color-border-middle="#222"
        data-color-border-middle-end="#111"
        data-color-border-inner="#111"
        data-color-border-inner-end="#333"
        data-color-needle-shadow-down="#333"
        data-color-needle-circle-outer="#333"
        data-color-needle-circle-outer-end="#111"
        data-color-needle-circle-inner="#111"
        data-color-needle-circle-inner-end="#222"
        data-value-box-border-radius="0"
        data-color-value-box-rect="#222"
        data-color-value-box-rect-end="#333"
        data-font-value="Led"
></canvas>
        </center>

Exemple 5

<center>
    <canvas id=fgtoul5 style="margin-top:15px;" data-border-shadow-width="0"
    data-width : "200"
    data-height : "200"
    data-color-numbers="#ccc"
    data-color-major-ticks="#f5f5f5"
    data-animation-duration="1500"
    data-animation-rule="linear"
    data-highlights="false"
    data-units="ᵍ"
    data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
    data-max-value="360"
    data-min-value="0"
    data-minor-ticks="22"
    data-borders="true"
    data-type="radial-gauge"
    data-title="DIRECTION"
    data-stroke-ticks="false"
    data-color-needle-shadow-down="#222"
    data-color-border-outer-end="#ccc"
    data-color-border-outer="#ccc"
    data-border-outer-width="10"
    data-border-middle-width="0"
    data-border-inner-width="0"
    data-needle-width="3"
    data-needle-end="99"
    data-needle-start="75"
    data-needle-type="line"
    data-needle-circle-outer="false"
    data-needle-circle-size="15"
    data-color-needle-circle-outer="#ccc"
    data-color-circle-inner="#fff"
    data-value-text-shadow="false"
    data-value-box="false"
    data-color-needle-end="rgba(255, 160, 122, .9)"
    data-color-needle="rgba(240, 128, 128, 1)"
    data-color-minor-ticks="#ddd"
    data-color-plate="#33a"
    data-start-angle="180"
    data-ticks-angle="360"
    data-animation-target="plate"
    data-color-title="#f5f5f5"
    data-font-title-size="19"
></canvas>
    </center>

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. La présence d’un appel à la datasource oblige l’IPX800 à exécuter le script à chaque mise à jour de STATUS.

// Exemple: Affichage d'une valeur pour une sonde TC5050 arrondi à 2 decimale.
a=(((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);
var gauge1 = document.gauges.get('fgtoul1');
var gauge2 = document.gauges.get('fgtoul2');
var gauge3 = document.gauges.get('fgtoul3');
var gauge4 = document.gauges.get('fgtoul4');
var gauge5 = document.gauges.get('fgtoul5');
var gauge6 = document.gauges.get('fgtoul6');
var gauge7 = document.gauges.get('fgtoul7');
var gauge8 = document.gauges.get('fgtoul8');

gauge1.value=Math.random()*220;
gauge2.value=Math.random()*210;
gauge3.value=Math.random()*360;
gauge4.value=Math.random()*50;
gauge5.value=Math.random()*360;
gauge6.value=Math.random()*220;
gauge7.value=Math.random()*14;
gauge8.value=Math.random()*100;
return `
<div>Script = mise à jour des jauges</div>
`;

Vous trouverez plus d’informations sur le site https://canvas-gauges.com/ les sources sont sur GitHub : https://github.com/Mikhus/canvas-gauges

Les contributions de la communauté

Dashboard réalisé par @Daniel83190

✏️ Voir le code pour une jauge linéaire 

<canvas style="margin-top:15px;" id=daniel12 data-type="linear-gauge"
        data-width="290"
        data-height="100"
        data-min-value="0"
        data-max-value="15"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title="Intensité PH 3"
        data-units="Amperes"
        data-tick-side="left"
        data-bar-stroke-width="3"
        data-color-bar-stroke="transparent"
        data-highlights='[
          { "from": 0, "to": 5, "color": "green" },
          { "from":5, "to": 10, "color": "rgba(255,255,0,1)" },
          { "from": 10, "to": 15, "color": "rgba(255,30,0,1)" }
                            
        ]'
       
    
        data-major-ticks="0,5,10,15"
        data-color-minor-ticks="blue"
        data-minor-ticks="5"
        data-color-plate="transparent"
        data-color-numbers="#ccc"
        data-color-major-ticks="green"
        data-color-bar-stroke="#444"
        data-number-side="left"
        data-needle-side="right"
        data-animate-on-init=""
        data-animated-value="true"
   
        data-stroke-ticks="true"
        data-color-title="#fff"
        data-color-units="#fff"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end=""
        data-value-box="true"
       data-color-value-text="#fff"
       data-color-value-box-background="red"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-font-numbers-size="40"
        data-font-title-size="40"
        data-font-units-size="80"
        data-font-numbers="Led"
        data-font-units="mistral"
       
        data-color-bar-progress = "rgba(245,125,125,1)" //bar de progression debut
      
        data-color-needle="yellow" //aiguille 
    // data-color-bar-end="transparent"
      data-color-bar-progress-end="red"     //bar de progression  fin 
      data-bar-progress="true"
        
></canvas>

-->