Bonjour, je partage un Widget de type jauge qui est paramétrable suivant des dégradés de couleurs complexes (11 positions possibles) et différents niveaux de transparence. Je tiens à préciser que même si l’informatique est mon métier, je ne suis pas développeur pour autant, donc le code pourrait probablement être amélioré (n’hésitez pas à me faire part de vos remarques).
Principes :
La valeur est affichée dans le rond noir au centre. La progression de la jauge dans le compteur correspond au ratio de la valeur par rapport aux valeurs Min et Max de la commande ou aux paramètres [valmin] et [valmax] positionnés dans l’affichage de la commande. Par défaut, le minimum est positionné à 0 et le maximum à 100 (sauf si la valeur déborde, dans ce cas, min et max sont positionnés automatiquement au double de la valeur). La couleur de la jauge est soit monochrome, soit multichrome. Dans le cas d’une couleur monochrome (paramètre multichrome à 0 ou absent), la couleur est prise dans un dégradé construit à partir des paramètres [coul0], [coul1], [coul2]…[coul10]. Quand le paramètre [multichrome] est à 1, la jauge prend toutes les couleurs du dégradé.
Le dégradé est paramétrable suivant 11 couleurs possibles (0 à 10). Chaque paramètre [coulx] (avec x allant de 0 à 10) est associé à la couleur qui sera en position x. Les paramètres [coulx] peuvent prendre des valeurs de couleur standard (green, grey, red, etc.) ou des valeurs en mode RGB. Ex : rgb(0,128,255) ou #0080FF. Par défaut, [coul0] vaut rgb(220,220,220) et [coul10] est égal à [coul0] (donc pas de dégradé). Pour créer un dégradé « classique » à deux couleurs, il faut paramétrer [coul0] et [coul10]. Pour un dégradé qui va du blanc (valeur Min) au noir (valeur Max), il faut mettre white pour [coul0] et black pour [coul10]. Pour un dégradé progressif de type Vert-Jaune-Rouge, il faut mettre par exemple rgb(0,220,0) pour [coul0], yellow pour [coul5] et red pour [coul10]. Par defaut, le widget fait 100x100 pixels, mais cette taille est modifiable via le paramètre [size]. Les bornes Min et Max peuvent être affichées via le paramètre [displaylimit] (mettre 0 ou 1, et vaut 0 par défaut). La couleur de la jauge peut être plus ou moins transparente grâce au paramètre [opacity] (valeur comprise entre 0 et 1). Il est également possible de faire varier le dégré de transparence sous forme d’un dégradé. Il faut alors mettre le paramètre [opacity0]. Le niveau d’opacité varira de [opacity0] à [opacity] (ou 1 si ce dernier n’est pas présent).
Le theme de couleurs du widget global est positionné via le paramètre [theme] qui peut prendre les valeurs dark ou light (dark par défaut). Enfin, l’unité renseignée dans la commande apparait en dessous de la valeur. Les couleurs de la partie fixe du compteur varient en fonction du thème.
Bonsoir, merci pour le partage.
Beau widget
tu as oublié dans ton exemple les paramètres : minValue et maxValue
Tu peut aussi, depuis la v4.2 afficher directement dans la config du widget, les paramètre optionnels :
Merci pour tes remarques. A noter que les paramètres MinValue et MaxValue ne sont pas nécessaires car il s’agit des valeurs Min et Max qui sont codées dans la commande sur laquelle on applique le Widget :
Questions, comment fais tu pour afficher les cases en gris plutôt qu’en noir ?
(comme sur la deuxième capture)
J’ai bien vu une histoire de Theme C1/C2 dans le code mais je n’ai pas réussi…
Également comment affiches tu l’unité de mesure (W,L,%, etc) ?
Merci beaucoup.
Salut, désolé pour mon retour tardif. La couleur varie en fonction du thème du dashboard qui est paramétré dans Réglage-Configuration-Interface → Thème Desktop Principal / Thème Desktop Alternatif.
Mais ce thème peut être forcé grâce au nouveau paramètre theme que je viens d’ajouter et qui peut prendre la valeur dark ou light.
Et pour l’unité, il suffit de la coder dans le champs « Unité » de ta commande (après les champs min et max) :
Bonjour, j’avoue ne pas avoir essayé, je n’utilise pas la partie mobile. Je regarde ce que ça donne.
EDIT : Après tests, ça fonctionne bien en dashboard mobile (j’ai testé sur iOS avec safari). Peut-être différent en fonction des navigateurs…
Bonjour,
Excellent widget, merci beaucoup @zos93 pour le partage
Tu devrais juste ajouter le support des valeurs qui sont entre 0 (min) et 1 (max) car actuellement ça rend un peu bizarre
Exemple avec 0 et 0.8 :
Bonsoir,
C’est nettement mieux, effectivement. Merci pour la modif
Si je peux me permettre une petite suggestion (déjà évoquée par Phpvarious) : implémenter les min et max dans le code. En effet, tout le monde ne veut pas forcément les mettre dans l’équipement car ça peut tronquer les valeurs d’historique si jamais les valeurs sortent des bornes. Alors que dans le widget, ça reste de l’affichage.
exemple =>
<template>
<div>[min] : valeur de départ de la jauge</div>
<div>[max] : valeur de fin de la jauge</div>
</template>
// const ValMin = ('#minValue#' !='#'+'minValue#') ? parseFloat('#minValue#') : 0;
const ValMin = (is_numeric('#min#')) ? parseFloat('#min#') : 0;
// const ValMax = ('#maxValue#' !='#'+'maxValue#') ? parseFloat('#maxValue#') : 100;
const ValMax = (is_numeric('#max#')) ? parseFloat('#max#') : 100;
ou mieux : prendre les valeurs des paramètres, si absent celles de l’équipement, si absentes également prendre 0 et 100.
Idée intéressante…
Mais si, par exemple on a un =20
Si aucun min max nulle part, cela ferait un min max 0 100.
Mais quelle valeur afficher 0 ou -20 ?
Autre remarque, sauf si j’ai loupé qqchose, via ce widget, on ne peut accéder à l’historique.
Je trouve que c’est un réel manque.
Possible d’ajouter cette possibilité?
Bonjour, voici les adaptations effectuées :
1 - prise en compte de nouveaux paramètres [valmin] et [valmax]
2 - adaptation automatique des valeurs min et max en fonction de la valeur de la commande si celle-ci dépasse les bornes paramétrées
3 - possibilité d’aller sur la page d’historique en cliquant sur la valeur
4 - affichage des informations [Date de valeur] et [Date de collecte] quand on passe la souris sur la valeur de la commande
N’hésitez pas à me signaler tout dysfonctionnement ou toute suggestion d’amélioration
Bonjour, nouvelle version du widget disponible dans le premier message, avec deux ajouts principaux : dégradé total des couleurs visible et dégradé de transparence
