# 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:** 20\
**Page:** 1

<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:** [Mai 26, 2019, 6:40 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/1 "2019-05-26T18:40:17Z")

</div>

Bonsoir  
Peut on changer les couleurs d un widget d un [xthl](https://gce-electronics.com/1266-.html) ?  
Merci à vous  
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, 2019, 10:48 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/2 "2019-05-27T10:48:11Z")

</div>

bonjour,  
comme pour tous les autres widgets, la personnalisation passe par l’écriture d’un widget HTML.  
cdt

---

<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:** [Mai 27, 2019, 4:17 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/3 "2019-05-27T16:17:40Z")

</div>

Merci @fgtoul  
Mais qd on sait pas le faire , on fait une demande?  
Moi j aimerais avoir juste la même chose et pouvoir changer les couleurs  
Alors si un spécialiste passe par là ça serais bien  
Merci à tous  
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:** [Mai 27, 2019, 4:33 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/4 "2019-05-27T16:33:59Z")

</div>

Si c’est une demande, alors il faudra faire un effort pour nous dire ce que tu attends.

> [@seraphinou](#):
>
> Mais qd on sait pas le faire , on fait une demande?

ou alors on se contente des couleurs par défaut 😉  
Car comme déjà dit plusieurs fois, le code css / javascript alourdit l’IPX800, alors perso, je préfère ajouter du code pour des fonctions qui n’existent pas, plutôt que pour de l’esthétique.

---

<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:** [Mai 27, 2019, 4:47 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/5 "2019-05-27T16:47:14Z")

</div>

meme widjet que le [xthl](https://gce-electronics.com/1266-.html) mais juste pouvoir changer les couleurs c’est tout  
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:** [Mai 28, 2019, 5:30 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/6 "2019-05-28T17:30:02Z")

</div>

bonsoir,  
les widgets [X-THL](https://gce-electronics.com/1266-.html) n’existent pas, je ne vois toujours pas comment nous pourrions t’aider.

---

<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:** [Mai 28, 2019, 6:53 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/7 "2019-05-28T18:53:44Z")

</div>

bonsoir  
ah on a pas les codes de c’est widjets  
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:** [Mai 28, 2019, 8:09 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/8 "2019-05-28T20:09:26Z")

</div>

Encore une fois, les widgets [Xthl](https://gce-electronics.com/1266-.html) n’existent pas, nous ne savons pas ce que tu appelles ainsi : c’est une jauge? Un graph ? C’est quoi ?  
Tu as une capture écran ?

---

<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:** [Mai 29, 2019, 4:12 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/9 "2019-05-29T04:12:37Z")

</div>

bonjour @fgtoul  
 ![57](https://forum.gce-electronics.com/uploads/default/original/2X/4/4746d304fca49a30fc87dbeacbec6e34afdba45c.png)

c’est celui la que je voudrait changer d ecouleur  
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:** [Mai 29, 2019, 5:00 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/10 "2019-05-29T05:00:07Z")

</div>

Bonjour  
Donc cest un widget «&nbsp;entrée analogique&nbsp;»  
Il y a déjà des exemples sur le forum avec des jauges droites appelées _Meters_.  
Cdt

---

<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:** [Mai 29, 2019, 4:41 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/11 "2019-05-29T16:41:30Z")

</div>

merci @fgtoul  
mais je prefere nettement les autres si possible  
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:** [Mai 30, 2019, 12:53 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/12 "2019-05-30T12:53:38Z")

</div>

bonjour,

je change le titre du sujet qui en définitive n’a rien à voir avec le [X-THL](https://gce-electronics.com/1266-.html)

à toute fin utile, voici un widget pour ta jauge de cuve :  
rouge à 0, puis vert puis bleu à 100%  
les couleurs sont modifiables dans le code

```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
var vt=3000; //volume total cuve

//calcul volume Eau
var ve=0;
ve=hauteurEau*largeurCuve*longueurCuve;
ve=(ve/1000).toFixed(0);

return `
<script>
    var gg1 = new JustGage({
      id: "gg1",
      value : ${ve},
      min: 0,
      max: ${vt},
      decimals: 2,
      gaugeWidthScale: 1,
      title: "titre",
      label: "litres",
     valueFontColor:"#ffffff",
        levelColors: [
          "#ff0000",
          "#00ff00",
          "#0000ff"
        ],
      counter: true,
    });
</script>
<div id="gg1"></div>
`;

```

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:** [Mai 30, 2019, 3:30 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/13 "2019-05-30T15:30:28Z")

</div>

merci @fgtoul  
tu vois bien que tu savais ce que je voulais lol  
est ce que je peut juste changer la couleur du litrage (2776 )car la c 'ets noir et ca ne ressort pas  
et est ce que c’est normal que la jauge bouge en permanence ? je pense que oui mais bon peut etre une astuce pour rafraichir moins souvent  
merci a toi

---

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

</div>

> [@seraphinou](#):
>
> tu vois bien que tu savais ce que je voulais lol

Non je ne savais pas ce que tu voulais. C’est ta capture qui m’a mis sur la piste.  
Lorsque tu poses une question sur le forum, essaie d’être plus précis dans ton énoncé, cela évitera le temps perdu.

> [@seraphinou](#):
>
> est ce que c’est normal que la jauge bouge en permanence ?

j’avais supprimé ma réponse car la jauge se réinitialise au rythme de la datasource. Je n’ai pas trouvé comment provoquer seulement un refresh à intervalle régulier, je cherche encore 😅

Je rétablis ma réponse au dessus pour les curieux.  
Je passe le texte en blanc.

---

<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:** [Mai 30, 2019, 4:13 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/15 "2019-05-30T16:13:28Z")

</div>

tu vas trouver pour la reinitialisation de la jauge je suis confiant

---

<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 30, 2019, 5:34 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/16 "2019-05-30T17:34:49Z")

</div>

voici une solution plus gracieuse, bien que non parfaite

- **créer un widget type HTML , régler la hauteur à 0.1 block**  
 ![image](https://forum.gce-electronics.com/uploads/default/original/2X/e/e7e0e2ca1328a3f99355fcf3d21b6d09bdc68a86.png)

puis coller ce code

```html
var a=(datasources["STATUS"]["response"]["analog1"] - 13107) * 0.00009536888 *100 ;
gg1.refresh(a.toFixed(0));
return `
<div style="color:green">..</div>
`;

```

- **Ajouter un autre widget HTML de hauteur 3 blocks**  
coller ce code :

```html
<div id=gg1></div>
<script>
    var gg1 = new JustGage({
      id: "gg1",
      value : 0,
      min: 0,
      max: 3900,
      decimals: 2,
      gaugeWidthScale: 0.9,
        valueFontColor: "#ffffff",
      levelColors: [
          "#ff0000",
          "#00ff00",
          "#0000ff"
        ],
      counter: true,
        label:"litres"
    });
</script>

```

Tous les paramètres (min, max, gaugeWidthScale, …) et les couleurs sont modifiables  
ici des dégradés automatiques Rouge \> vert \> bleu

Le tout donne ceci :

![image](https://forum.gce-electronics.com/uploads/default/original/2X/2/2fc035efe9ac5579820c58a420e505f19abe8493.png) ![image](https://forum.gce-electronics.com/uploads/default/original/2X/3/367f5a122c9ece6871d9d7d04a73aeac51717a11.png) ![image](https://forum.gce-electronics.com/uploads/default/original/2X/e/ef0c1fdffecf5a94d326e254c30ca3798a576593.png) ![image](https://forum.gce-electronics.com/uploads/default/original/2X/9/9ded1237e0d340f1386191dc265723227d02f831.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:** [Mai 30, 2019, 6:36 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/17 "2019-05-30T18:36:28Z")

</div>

Je met ça en œuvre dans la soirée  
Je te tiens au courant

---

<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:** [Mai 30, 2019, 7:53 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/18 "2019-05-30T19:53:43Z")

</div>

bonsoir @fgtoul  
je viens de mettre en place et ca m’affiche 87 litres au lieu de 2700  
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:** [Mai 30, 2019, 9:00 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/19 "2019-05-30T21:00:36Z")

</div>

je pense que tu pourrais faire un effort !

le widget est un exemple. C’est à toi d’adapter les formules en fonction de ton capteur et de ce que tu souhaites, d’autant plus que tu les as juste au dessus.

revoici le code du premier widget.

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

gg1.refresh(ve);
return `
<div style="color:green">..</div>
`;

```

---

<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:** [Mai 31, 2019, 3:57 UTC](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313/20 "2019-05-31T03:57:59Z")

</div>

salut @fgtoul  
j’ai pas fait attention j’ai recopier le code sans le lire trop presse certainement  
merci a toi la ca marche bien  
bon travail @fgtoul

[Page suivante](https://forum.gce-electronics.com/t/changement-des-couleurs-widget-jauge-analogique/9313.md?page=2)