# 🌡 Collection de Widgets analogiques (CANVAS-GAUGES)

**URL:** <https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333>\
**Category:** Tutoriels\
**Tags:** ipx800-v5, ipx800-v4\
**Created:** [Juin 1, 2019, 1:37 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333 "2019-06-01T13:37:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Juin 1, 2019, 1:37 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/1 "2019-06-01T13:37:11Z")

</div>

Bonjour,

Après de longues heures de recherche pour mettre des jauges personnalisables en place sur le Dashboard de l’[IPX800 V4](https://gce-electronics.com/1483-.html), je vous présente le résultat.  
 ![Canvas-jauges](https://forum.gce-electronics.com/uploads/default/original/2X/1/1caceafc3325c45c9be0fda3751a966fc6e7ba42.gif)

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

```html
<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 :

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

```html
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 .

```html
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**
>
> ```html
> <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**
>
> ```html
> <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**
>
> ```html
> <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

```html
    // 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/](https://canvas-gauges.com/)  
les sources sont sur GitHub : [GitHub - Mikhus/canvas-gauges: HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base. · GitHub](https://github.com/Mikhus/canvas-gauges)

J’espère avoir aiguisé votre curiosité 🙂  
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** 🙂

**EDIT 2:** pour la mise en place de ces jauges sur [IPX800 V5](https://gce-electronics.com/1799-.html), vous trouverez un exemple de script utilisant l’API HTML dans ce post:  
[🧭 V5 : Affichage de la direction des vents - Cartes Ethernet IPX800 / Tutoriels - GCE Electronics - Forum domotique - IPX800 - EcoDevices etc…](https://forum.gce-electronics.com/t/v5-affichage-de-la-direction-des-vents/15517)

---

<div class="post-metadata">

**Author:** ![grocrabe](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/grocrabe/32/6197_2.png) [@grocrabe](https://forum.gce-electronics.com/u/grocrabe)\
**Post date:** [Juin 1, 2019, 2:28 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/2 "2019-06-01T14:28:52Z")

</div>

Bonjour fgtoul,

> [@fgtoul](#):
>
> J’espère avoir aiguisé votre curiosité

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

Bonne journée

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Juin 1, 2019, 2:46 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/3 "2019-06-01T14:46:16Z")

</div>

> [@grocrabe](#):
>
> J’avais besoin d’une rose des vents

alors voici le code pour les indicateurs de direction :

plateau animé (fgtoul5)

```html
<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)

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

```

---

<div class="post-metadata">

**Author:** ![seraphinou](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/seraphinou/32/6569_2.png) [@seraphinou](https://forum.gce-electronics.com/u/seraphinou)\
**Post date:** [Juin 1, 2019, 3:29 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/4 "2019-06-01T15:29:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![merokaly](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/merokaly/32/8_2.png) [@merokaly](https://forum.gce-electronics.com/u/merokaly)\
**Post date:** [Juin 2, 2019, 8:33 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/5 "2019-06-02T08:33:45Z")

</div>

Bonjour @fgtoul,

Quel beau travail …Encore une fois et toujours plus HAUT…👏👏

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

---

<div class="post-metadata">

**Author:** ![bendaftpunk](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/b/b9bd4f/32.png) [@bendaftpunk](https://forum.gce-electronics.com/u/bendaftpunk)\
**Post date:** [Juin 3, 2019, 3:59 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/6 "2019-06-03T15:59:29Z")

</div>

BRAVO!!! 👏👏👏 encore du haut niveau

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Novembre 13, 2019, 8:02 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/9 "2019-11-13T20:02:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Avril 25, 2020, 5:06 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/10 "2020-04-25T17:06:17Z")

</div>

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

 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/0/0d9cb05c876699675f288c39889375de9b3c6b30.png)

```html
<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](https://forum.gce-electronics.com/uploads/default/original/2X/2/21097c5676f47be7268b0983339aa3d3ca3a21ab.png)

```html
<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](https://forum.gce-electronics.com/uploads/default/original/2X/5/527ecea6db5ca8d8c2065c10eda190c4822086aa.png)

```html
<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](https://forum.gce-electronics.com/uploads/default/original/2X/9/98cab70463af625f894fcd08078f34989c84e53e.png)

```hmtl

<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](https://forum.gce-electronics.com/uploads/default/original/2X/9/9dee2eb98482ff643cdb5e6fe956a833ea0a08a0.png)

```html
<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.

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Avril 26, 2020, 9:37 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/11 "2020-04-26T09:37:15Z")

</div>

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

 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/7/7755a4466bd440cce189e6a4a81b9ed3ae5deb0a.png)

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

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

```html
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](https://forum.gce-electronics.com/uploads/default/original/2X/0/0ef6424c0545667d45a67293079aadb6003cbc8f.gif)

bon dimanche

---

<div class="post-metadata">

**Author:** ![merokaly](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/merokaly/32/8_2.png) [@merokaly](https://forum.gce-electronics.com/u/merokaly)\
**Post date:** [Avril 28, 2020, 5:11 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/12 "2020-04-28T05:11:56Z")

</div>

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 😉  
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. 💪

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

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

Cdt  
JF

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Avril 28, 2020, 8:59 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/13 "2020-04-28T08:59:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![merokaly](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/merokaly/32/8_2.png) [@merokaly](https://forum.gce-electronics.com/u/merokaly)\
**Post date:** [Avril 28, 2020, 11:09 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/14 "2020-04-28T11:09:11Z")

</div>

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

Merci  
Bonne journée.

---

<div class="post-metadata">

**Author:** ![Douc](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/d/b19c9b/32.png) [@Douc](https://forum.gce-electronics.com/u/Douc)\
**Post date:** [Mai 27, 2020, 2:57 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/15 "2020-05-27T14:57:50Z")

</div>

Bonjour, je suis nouveau sur la discussion j’ai un [ipx 800V4](https://gce-electronics.com/1483-.html) 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 «&nbsp;Température&nbsp;» j’ai créer un widget HTML de hauteur 3 blocks, j’ai collé le code et la référence library.

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

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

---

<div class="post-metadata">

**Author:** ![pat49700](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/pat49700/32/18913_2.png) [@pat49700](https://forum.gce-electronics.com/u/pat49700)\
**Post date:** [Mai 27, 2020, 4:03 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/16 "2020-05-27T16:03:47Z")

</div>

Bonjour,  
Avez vous créé une source de données nommée «&nbsp;STATUS&nbsp;» ?

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Mai 27, 2020, 4:27 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/17 "2020-05-27T16:27:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Douc](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/d/b19c9b/32.png) [@Douc](https://forum.gce-electronics.com/u/Douc)\
**Post date:** [Mai 27, 2020, 4:44 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/18 "2020-05-27T16:44:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Douc](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/d/b19c9b/32.png) [@Douc](https://forum.gce-electronics.com/u/Douc)\
**Post date:** [Mai 27, 2020, 5:18 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/19 "2020-05-27T17:18:38Z")

</div>

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

je pensais que c’etait:

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

```

---

<div class="post-metadata">

**Author:** ![Douc](https://forum.gce-electronics.com/letter_avatar_proxy/v4/letter/d/b19c9b/32.png) [@Douc](https://forum.gce-electronics.com/u/Douc)\
**Post date:** [Mai 27, 2020, 6:01 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/20 "2020-05-27T18:01:12Z")

</div>

C’est bon ca marche, merci encore  
cordialement

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Mai 27, 2020, 6:01 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/21 "2020-05-27T18:01:23Z")

</div>

en mode administrateur, menu en haut à gauche de la page 😉

---

<div class="post-metadata">

**Author:** ![fgtoul](https://forum.gce-electronics.com/user_avatar/forum.gce-electronics.com/fgtoul/32/28801_2.png) [@fgtoul](https://forum.gce-electronics.com/u/fgtoul)\
**Post date:** [Mai 28, 2020, 6:36 UTC](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333/22 "2020-05-28T06:36:10Z")

</div>

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

[Page suivante](https://forum.gce-electronics.com/t/collection-de-widgets-analogiques-canvas-gauges/9333.md?page=2)