# Changement des couleurs widget Jauge analogique

**URL:** <https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313>\
**Category:** Cartes Ethernet IPX800\
**Created:** [Mai 26, 2019, 6:40 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313 "2019-05-26T18:40:17Z")\
**Posts on this page:** 5\
**Page:** 2

<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, 3:49 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/21 "2019-06-01T15:49:50Z")

</div>

bonjour @seraphinou,  
en lien avec le tuto ci-dessous, voici pout ta cuve à eau 😉

> [@thermometer Collection de Widgets analogiques (CANVAS-GAUGES)](https://forum.gce-electronics.com/t/widgets-analogiques-en-html5/9333):
>
> 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] 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-tit…

**widget HTML pour la jauge( hauteur 4 blocks )**

```html
<center>
    <canvas id=fgtoul1 style="margin-top:15px;" data-type="radial-gauge"
        data-value="20"
        data-width="200"
        data-height="200"
        data-bar-width="10"
        data-bar-shadow="5"
        data-color-bar-progress="rgba(50,200,50,.75)"
        data-max-value="3000"
        data-min-value="0"
        data-major-ticks="0,500,1000,1500,2000,2500,3000"
        data-minor-ticks="100"
></canvas>
<script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"/>

```

**widget pour script de mise à jour :**

```html
var hauteurEau=(datasources["STATUS_IPX"]["response"]["analog1"] - 13107) * 0.00009536888 *100 ;
var largeurCuve=118; //largeur cuve en cm
var longueurCuve=270; //longueur cuve en cm
//calcul volume Eau
var ve=0;
ve=hauteurEau*largeurCuve*longueurCuve;
ve=(ve/1000).toFixed(0);
var gauge1 = document.gauges.get('fgtoul1');
gauge1.value=ve;
return `
<div>Script de mise à jour des jauges</div>
`;

```

Pour ta jauge, j’ai choisi un modèle qui n’était pas dans le tuto, afin d’offir un exemple supplémentaire aux lecteurs.

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

bonne journée

---

<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, 4:02 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/22 "2019-06-01T16:02:25Z")

</div>

J essai de mettre ça en place  
Merci @fgtoul

---

<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, 7:09 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/23 "2019-06-01T19:09:48Z")

</div>

j’ai fait la mise en place Super Francois ca marche  
je suis trop content  
est ce que l’on peut indique que c’est des litres

---

<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, 7:46 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/32 "2019-06-01T19:46:05Z")

</div>

il faut ajouter cette ligne dans le widget jauge :  
**data-units=«&nbsp;litres&nbsp;»**  
 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/5/506365b7e90bbe4daefa1b0fd2534846b8d7193e.png)

---

<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, 7:47 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/33 "2019-06-01T19:47:56Z")

</div>

super  
c’est bon grand merci  
Je te laisse tranquille faut pas abusé qd même  
bonne soiree a toi

[Page précédente](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313.md?page=1)