🌡 Collection de Widgets analogiques (CANVAS-GAUGE)

ipx800-v4
#1

Bonjour,

Après de longues heures de recherche pour mettre des jauges personnalisables en place sur le Dashboard de l’IPX800 V4, je vous présente le résultat.

L’adaptation pour les dashboards de l’IPX800 se fait en 2 étapes :

  • Etape 1 :
    Ajouter un widget de type HTML de Hauteur=3 blocks et coller le code
<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>

Remarque : il faudra ajouter la référence à la Library à la fin du code HTML de la première jauge :

<script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js""/>
  • Etape 2:
    Créer une datasource sur le Dashboard afin de lire les données du status.xml de votre IPX800. Ma datasource est nommée STATUS.

Créer un widget de type HTML de Hauteur=1 block et y coller le javascript

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

Si vous avez plusieurs jauges de type Canvas-gauge 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 fgtoul4 .

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

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

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

Code
<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"/>

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

Code
<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>

Jauge 8 :

Code
<center>
    <canvas id=fgtoul8 style="margin-top:15px;" data-type="linear-gauge"
        data-width="280"
        data-height="150"
        data-min-value="0"
        data-min-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>

Voici le code javascript qui a servi pour la démo.
La présence d’une 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

J’espère avoir aiguisé votre curiosité :slight_smile:
bonne journée

21 Likes
Changement des couleurs widget Jauge analogique
Problème retour d’état PWM
#2

Bonjour fgtoul,

et déclenché notre admiration… une fois de plus tu as fait un boulot remarquable, merci…

J’avais besoin d’une rose des vents, même pas besoin de demander :laughing: :clap::clap::clap:

Bonne journée

3 Likes
#3

alors voici le code pour les indicateurs de direction :

plateau animé (fgtoul5)

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

Plateau fixe (fgtoul3)

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

Bonjour @fgtoul
Quel travail, tu vas donner envie Ă  tout le monde
Je vais essayer de regarder ça de plus prêt car ça m intéresse
Très beau travail, on a de la chance de t avoir parmi nous
Cordialement

3 Likes
#5

Bonjour @fgtoul,

Quel beau travail …Encore une fois et toujours plus HAUT…:clap::clap:

Je m’amuse avec mes petits codes depuis ce matin 3h et je suis content de moi…Mais là !!!

c’est la " Troisième dimension "

Merci beaucoup pour ton implication sur le forum.

Cdt
JF

2 Likes
#6

BRAVO!!! :clap::clap::clap: encore du haut niveau

1 Like