🌡 Collection de Widgets analogiques (CANVAS-GAUGES)

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

EDIT : Pour créer ces jauges sur votre Dashboard, je vous invite à lire l’article sur le wiki, plus complet que ce post.
Si après avoir lu le wiki il vous reste quelques questions, je serai heureux d’y répondre ici
:slight_smile:

22 J'aimes

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 J'aimes

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 J'aimes

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 J'aimes

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 J'aimes

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

1 J'aime

Bonjour,
j’ai créé un wiki sur la base de ce tutoriel
http://gce.ovh/wiki/index.php?title=Jauges_analogiques
cdt

4 J'aimes

Voici d’autres widgets, entièrement personnalisables, formatés pour les piscines
image

<center>
    <canvas id=tempEau style="margin-top:15px;" data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="°C"
        data-title="EAU"
        data-min-value="0"
        data-max-value="40"
        data-major-ticks="[0,10,20,30,40]"
        data-minor-ticks="2"
        data-stroke-ticks="true"
        data-highlights='[
                    {"from": 0, "to": 12, "color": "#5DADE2"},
                    {"from": 12, "to": 22, "color": "green"},
                    {"from": 22, "to": 28, "color": "#F4D03F"},
                    {"from": 28, "to": 40, "color": "#EC7063"}
                ]'
        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"
        data-animate-on-init="true"
        data-animated-value="true"
></canvas>
        </center>

image

<center>
    <canvas id=tempAir style="margin-top:15px;" data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="°C"
        data-title="AIR"
        data-min-value="-20"
        data-max-value="50"
        data-major-ticks="[-20,-10,0,10,20,30,40,50]"
        data-minor-ticks="2"
        data-stroke-ticks="true"
        data-highlights='[
                    {"from": 3, "to": 18, "color": "#5DADE2"},
                    {"from": 18, "to": 50, "color": "green"},
                    {"from": -20, "to": 3, "color": "#EC7063"}
                ]'
        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"
        data-animate-on-init="true"
        data-animated-value="true"
></canvas>
        </center>

image

<canvas style="margin-top:15px;" id=ORP data-type="linear-gauge"
        data-width="290"
        data-height="100"
        data-min-value="680"
        data-max-value="840"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title="ORP (mV)"
        data-units=""
        data-tick-side="left"
        data-bar-stroke-width="5"
        data-highlights='[{"from": 740, "to": 760, "color": "green"}]'
        data-major-ticks="680,720,760,800,840"
        data-minor-ticks="10"
        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="right"
                data-animate-on-init="true"
        data-animated-value="true"
></canvas>

image


<canvas style="margin-top:15px;" id=Eau data-type="linear-gauge"
        data-width="290"
        data-height="100"
        data-min-value="0"
        data-max-value="40"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title="Eau (°C)"
        data-units=""
        data-bar-stroke-width="5"
        data-highlights='[{"from": 0, "to": 12, "color": "#5DADE2"},{"from": 12, "to": 22, "color": "green"},{"from": 22, "to": 28, "color": "#F4D03F"},{"from": 28, "to": 40, "color": "#EC7063"}]'
        data-major-ticks="0,10,20,30,40"
        data-minor-ticks="2"
        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="right"
                data-animate-on-init="true"
        data-animated-value="true"
        data-tick-side="left"
></canvas>

Et pour finir, une jauge linéaire qui ne prend qu’un bloc
image

<canvas style="margin-top:1px;" id=fgtoul7 data-type="linear-gauge"
        data-width="290"
        data-height="90"
        data-min-value="4"
        data-max-value="9"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title=""
        data-units=""
        data-bar-stroke="false"
        data-bar-width="7"
        data-tick-side="left"
        data-highlights='[{"from": 7.2, "to": 7.8, "color": "green"}]'
        data-major-ticks="4,5,6,7,8,9"
        data-minor-ticks="0.5"
        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"
        data-animate-on-init="true"
        data-animated-value="true"
></canvas>

Il faudra bien sûr adapter le javascript pour les initialiser comme les autres ci-dessus ou dans le wiki.

6 J'aimes

et j’ajoute mon dernier développement un peu spécial.
image

Cette jauge, représentant une horloge sur 24h, permet de visualiser les périodes de filtration en fonction de la température de l’eau. Dans l’exemple ci-dessus, la filtration fonctionnera aujourd’hui de 9:00 à 15:00, il est quasiment 12:00. Si la température varie tout au long de la journée, les plages horaires se mettent à jour.

Pour la faire fonctionner, créez le widget HTML

<canvas style="margin-top:1px;" id=fgtoulHorloge data-type="linear-gauge"
        data-width="290"
        data-height="90"
        data-min-value="0"
        data-max-value="24"
        data-border-radius="0"
        data-borders="0"
        data-bar-begin-circle="false"
        data-title=""
        data-units=""
        data-bar-stroke="false"
        data-bar-width="7"
        data-highlights : '[]'
        data-tick-side="left"
        data-major-ticks="0,,2,,4,,6,,8,,10,,12,,14,,16,,18,,20,,22,,24"
        data-minor-ticks="0.5"
        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="right"
        data-animate-on-init="false"
        data-animated-value="true"
        data-value="0"
></canvas>
  <script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js""/>

Voici le script nécessaire

tempEauN=(((datasources["STATUS"]["response"]["analog0"] * 0.00323)- 1.63) / 0.0326).toFixed(2);
var gauge7 = document.gauges.get('fgtoulHorloge');

//mise Ă  l'heure de la jauge
var temps = new Date();
var heures = temps.getHours();
var minutes = temps.getMinutes();
gauge7.value=heures + (minutes/60);

//coloration des plages horaires
if (tempEauN<10){
    gauge7.update({
        highlights : [{ from: 07, to: 09, color: 'yellow' }]
    });
};
if (tempEauN>=10 && tempEauN<12){
    gauge7.update({
        highlights : [{ from: 07, to: 10, color: 'yellow' }]
    });
};
if (tempEauN>=12 && tempEauN<14){
    gauge7.update({
        highlights : [{ from: 09, to: 13, color: 'yellow' }]
    });
};
if (tempEauN>=14 && tempEauN<16){
    gauge7.update({
        highlights : [{ from: 09, to: 14, color: 'yellow' }]
    });
};
if (tempEauN>=16 && tempEauN<20){
    gauge7.update({
        highlights : [{ from: 09, to: 15, color: 'yellow' }]
    });
};
if (tempEauN>=20 && tempEauN<24){
    gauge7.update({
        highlights : [{ from: 09, to: 17, color: 'yellow' }]
    });
};
if (tempEauN>=24 && tempEauN<27){
    gauge7.update({
        highlights : [{ from: 08, to: 18, color: 'yellow' }]
    });
};
if (tempEauN>=27 && tempEauN<28){
    gauge7.update({
        highlights : [{ from: 08, to: 21, color: 'yellow' }]
    });
};
if (tempEauN>=28 && tempEauN<29){
    gauge7.update({
        highlights : [{ from: 06, to: 07, color: 'yellow' },{ from: 08, to: 23, color: 'yellow' }]
    });
};
if (tempEauN>=29 && tempEauN<30){
    gauge7.update({
        highlights : [{ from: 04, to: 23, color: 'yellow' }]
    });
};
if (tempEauN>=30){
    gauge7.update({
        highlights : [{ from: 03, to: 23, color: 'yellow' }]
    });
};

return `
<div>Script = mise Ă  jour des jauges</div>
`;

pour la température comprise entre 28 et 29, j’ai volontairement décomposé en 2 plages horaires pour l’exemple.

Dans ce script, il faut retranscrire les plages horaires définies sur votre IPX800, ainsi que les consignes de températures qui conditionnent le temps de filtration. Pensez à adapter la source de données.

voici ce que ça peut donner avec une jauge de température (vidéo accélérée avec des valeurs aléatoires)
horloge24

bon dimanche

5 J'aimes

Bonjour a tous,

Tout d’abord j’espère que vous vous portez tous bien dans cette période compliquée…

Apres avoir fini de monter ma piscine, et avoir imprimé une bonde de fond dessine par mes soins :wink:
posé le skimmer et la sonde de température, pompe et filtre a sable…

Je voulais gérer la pompe suivant la température …Mon rêve fut exhausser ENCORS grâce a @fgtoul.

Merci pour se travail François, vraiment TOP. :muscle:

(Piscine hors sol sans pretention…je suit dans la sarthe… :grinning: :grinning: :grinning:)

Bonne journée a vous tous et encore Bravo @fgtoul

Cdt
JF

4 J'aimes

Bonjour @merokaly et merci.
Attention, ce widget n’est qu’un affichage et ne pilote pas la filtration.
Il faut pour cela créer des plages horaires et des scènes où la température sera gérée par des seuils comme d’habitude.
Bonne journée.

Bonjour @fgtoul,
Oui je cherchais ce matin comment commander, je vais me pencher sur la mise en œuvre pour voir…

Merci
Bonne journée.

Bonjour, je suis nouveau sur la discussion j’ai un ipx 800V4 et je ne suis pas très bon en programmation
j’aime beaucoup vos jauges mais je n’arrive pas à les faire fonctionner, j’ai due passer à coté de quelque chose.
j’ai pris le 1er exemple « TempĂ©rature Â» j’ai crĂ©er un widget HTML de hauteur 3 blocks, j’ai collĂ© le code et la rĂ©fĂ©rence library.

<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="-10"
        data-max-value="50"
        data-major-ticks="[-10,0,10,20,30,40,50]"
        data-minor-ticks="5"
        data-stroke-ticks="true"
        data-highlights='[
                    {"from": -10, "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="4"
        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>
        <script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js""/>

Le compteur s’affiche.

J’ai créer un 2ème widget HTML à part du premier d’une hauteur de 1 j’ai collé 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>
`;

j’ai connecté une sonde TC 4012 sensor sur la 1er entrée analogique de l’ipx donc analog0
Rien ne fonctionne le compteur reste à zéro
Pourriez-vous m’aiguiller ça fait 3 jours que je galère.
Par avance merci
Cordialement
Jean-Claude

Bonjour,
Avez vous crĂ©Ă© une source de donnĂ©es nommĂ©e « STATUS Â» ?

2 J'aimes

bonjour @Douc et bienvenue sur le forum,
je pense effectivement que vous avez omis de créer la source de données nommée STATUS.
Pour plus d’information, je vous invite à suivre le lien vers le wiki, déjà fourni plus haut.
cdt

1 J'aime

Bonjour , oui ça doit être le probleme
Merci je vais regarder

Désolé mais je ne comprends pas comment créer la source de donnés status

je pensais que c’etait:

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

C’est bon ca marche, merci encore
cordialement

1 J'aime

en mode administrateur, menu en haut Ă  gauche de la page :wink:

Pour enlever toute ambiguïté sur la création de la datasource, j’ai apporté quelques précisions dans le wiki.

2 J'aimes