Jauge avec plusieurs zones/couleurs

Bonjour à tous,

Tout d’abord merci pour le travail. C’est vraiment excellent. On peut tout faire mais du coup, je m’y perds un peu.

Le soleil arrive, et j’aimerais inclure les datas de ma piscine. J’aimerais des jauges comme cel :

J’ai un peu tout essayé composant, widget, numérique mais je n’arrive pas à avoir le même rendu, notamment les couleurs en fonction de la bonne valeur (j’y arrive presque en circle mais ce n’est pas ce que je veux …)

je vous assure que j’ai cherché un peu partout sans trouver de réponses …

Merci d’avance pour votre aide

1 « J'aime »
Jeedom Core : 4.4.0
Version JC : 1.7.5 beta
DNS Jeedom : oui
Statut Démon : Stoppé - (NA)

Equipements :
  MonPC : v1.7.3 (1410) beta sur android [os : 33] - PA
  myphone : sur android - PA
  Pixel 6 : v1.7.5 (1439) beta sur android [os : 33] (polling) - PA
  Tablette : sur android - PA

Désolé, je pensais que ce n’était pas nécessaire

Etant donné que tu t es engagé a le donner systematiquement … autant le mettre d office a chaque post, puisque je le reclamerai a chaque fois sans meme avoir lu le sujet !
Donc ca fera gagner du temps a tout le monde :slight_smile:


A part sur une jauge circulaire où tu dois pouvoir reussir a faire qlq chose de similaire, je ne vois pas d autre option.

@ngrataloup, expert en jauge, une idee ?

Edit :
ah si une autre proposition pour garder l option horizontale :
Mettre une image avec le degradé de couleur désiré a la bonne echelle, et superposer une jauge ‹ transparente › dessus


Sinon pk vouloir une jauge et pas simplement un indicateur avec la bonne couleur ?

1 « J'aime »

Quelque chose comme ça ?

Widget avec jauge intégrées en mode carte
Paramètres de jauge :
Couleur avant curseur : couleur libre, transparence à 0%
Arrière plan :
Mettre x couleurs en fonction de ce que l’on souhaite et des niveaux souhaités.

Valeur : toujours afficher la valeur

Seul inconvénient, c’est un dégradé, pas de possibilité d’avoir des séparations de couleurs plus nettes.

Norbert

4 « J'aime »

Ahhh c est sur l arriere plan que tu joues !
Je me demandais comment ty arrivais …

Du coup mon idee d img n est peut etre pas si mal pr avoir des coupures « franches »

1 « J'aime »

Ou proposer à @jared-94 de rajouter une option de largeur de fusion des couleurs ?
Je trouve l’idée plutôt intéressante

Norbert

Je n ai pas dit le contraire :slight_smile:

J essaie de trouver une solution/workaround dispo de suite

Merci beaucoup, j’ai réussi avec les conseils de ngrataloup.

Un peu difficile de mettre les couleurs quand le vert doit être au milieu, mais ca le fait.

[ngrataloup] : comment tu fais pour avoir la date de dernier changement ?

Encore Merci.

PS : tomitomas j’ai bien compris pour les infos

Sous titre perso avec le choix (via le +) de temps écoulé !?

En fait l’option existe, mais n’est pas prise en compte dans le rendu du slider, je corrige.
(pour ne pas faire apparaitre de gradient dans le changement de 2 couleurs, il suffit d’en mettre une troisième et de jouer avec le paramètres de position)

1 « J'aime »

Tu pourras nous mettre un screenshot du résultat ? :wink:
Norbert

1 « J'aime »

Voila :wink:


rouge, blanc, bleu, bleu → rend en visuel rouge, bleu, vert
:thinking:

Oui c’est pour éviter le gradient avec la couleur suivante :wink:

Pourquoi le.blanc affiche de 21 à 100%?

Parce que c’est la position du rouge

On commence par le rouge (0%) jusqu’à 21%
Une autre couleur (peu importe elle ne sera pas visible) commence à 21%
Puis le bleu enchaîne en reprenant de 0% de la couleur précédente (qui la rend donc invisible)
Un autre bleu (le même) va jusqu’à 60% selon un gradient (mais comme c’est la même couleur on ne le voit pas, ça apparait comme une couleur unique)
Et on enchaîne ainsi de suite :

ca serait pas plus simple de mettre une option : gradient → oui/non !?
:slight_smile:

Si sûrement :rofl:

1 « J'aime »

Pourquoi ? moi, je trouve ca très intuitif de mettre une couleur intermédiaire non visible entre chaque couleur visible pour supprimer un gradient :sweat_smile: