Je vous propose un nouveau widget pour afficher vos différents indicateurs avec des rendus facilement personnalisables.
Voilà quelques exemples de paramétrages :
Les paramètres sont les suivants (style peut être le seul à retenir et utiliser pour aller au plus simple avec des rendus prédéfinis) :
style : choix parmi une liste de paramétrages prédéfinis des champs ci-dessous (valeur de 1 à 13) useStyle : choix d’utilisation des styles prédéfinis (par défaut 'only_style', valeurs possible : no_style,only_style,style_with_options)
min : valeur minimum autorisée (0 par défaut) max : valeur maximum autorisée (100 par défaut) angleDebut : Angle de début d’affichage (0 par défaut) ordreInverse : 0=non, 1=oui (0 par défaut) taille : hauteur et largeur (250px par défaut) couleurFond : couleur de fond du widget (transparent par défaut) uniteChamp : unité à afficher avec la valeur dans le cercle si précisé (ex ° pour afficher ‹ 22° ›) format : format prédéfini d’affichage (valeurs possibles : horizontal, vertical, percent, value, valueOnCircle, none) dureeAnimation : durée de l’animation de remplissage de la valeur dans le cercle au chargement
largeurValeur : largeur de la partie du cercle représentant la valeur couleurValeur : couleur de la partie du cercle représentant la valeur ecartValeur : permet de mettre des pointillés (taille point et espace, ex : ‹ 4 1 ›) pour la partie du cercle représentant la valeur offsetValeur : décalage de la partie du cercle représentant la valeur arrondiValeur : de la partie du cercle représentant la valeur largeurCercle : largeur du cercle de fond complet couleurCercle : couleur du tour du cercle complet couleurFondCercle : couleur de remplissage de fond du cercle ecartCercle : permet de mettre des pointillés (taille point et espace, ex : ‹ 4 1 ›) pour le cercle complet offsetCercle : décalage du cercle de fond complet nomFonteTexte : nom de la fonte du texte renduFonteTexte : type de fonte du texte tailleFonteTexte : taille du texte couleurTexte : couleur du texte
=> 3 possiblités pour paramétrer le rendu du widget :
ajouter seulement le paramètre style avec une valeur de 1 à 13 : prédéfinit les autres paramètres. Ce sont les 13 premières animations avec leur numéro correspondant)
ajouter les paramètres de son choix pour créer son propre affichage de widget
ajouter le paramètre style et modifier l’apparence en ajoutant quelques paramètres pour modifier le rendu final du style ajouté (Ce sont les 3 dernières animations qui sont des adaptations des styles 2, 11 et 12)
Le code et les explications d’installation sont accessibles ici :
Peu de recul encore et en cours d’améliorations et évolutions, mais les remarques sont bonnes à prendre
Toujours le dilemme du nom des paramètres😬
Je suis pas contre mettre en anglais pour ma part, ça serait même plus simple au niveau du code
Mais tout est en français sous Jeedom et s’adresse plutôt à des francophones donc je fais « l’effort ».
J’avoue que je me pose la question à chaque fois…
Quand tu te pose la question c’est international donc anglais. Mes jeedoms sont en anglais comme la plupart des softs que j’utilise. Faut arrêter le chauvinisme.
bonjour @noodom
quand j’essaye d’importer le fichier « circle-progress.js » avec Pimp My Jeedom comme indiqué sous ta doc,j’ai ce message
Méthode non autorisé en GET : uploadImageIcon
Je pense avoir inclus le widget correctement mais en l’appliquant à une info numerique, il n’apparait pas et j’ai des erreurs
Fichier Ligne Message
http://192.168.1.102/index.php?v=d&m=pimpJeedom&p=pimpJeedom&logicalid=dashboard_info_numeric_circleProgress 7 Uncaught SyntaxError: Unexpected token '<'
http://192.168.1.102/index.php?v=d&m=pimpJeedom&p=pimpJeedom&logicalid=dashboard_info_numeric_circleProgress 133 Uncaught ReferenceError: CircleProgress is not defined
J’ai verifié que les fichiers sont les bons au bon endroit.
Tu as l’erreur au moment de l’enregistrement de la commande sélectionnée depuis la popup « Appliquer sur » du plugin Pimp ?
Tu peux faire une capture dans JeeExplorer de ton arborescence ? (HTML du widget et répertoire /nom du js inclus)
Tu as bien ce path pour le js (avec le respect des minuscules/majuscules) ?
data/customTemplates/dashboard/cmd.info.numeric.circleProgress/circle-progress.js
Salut et merci pour ton travail, c’est juste énorme tout ce que tu partages !
Concernant ce widget je vois qu’il peut changer de couleur en fonctions de valeurs, c’est fait à partir des paramètres du widget ou tu as fait un mix avec ton tuto pour modifier dynamiquement les paramètres ?
Je cherchais justement à faire ça…
Mon idée est de faire un cercle de couleur uni qui change en fonction de la température.
Pour le changement de couleur, c’est un calcul par défaut en fonction de la valeur lorsque la couleur n’est pas précisée dans les paramètres.
Une évolution pourra être à terme de choisir ses plages horaires pour le choix des couleurs.
Sinon, en effet, il doit y avoir moyen d’utiliser mon scénario permettant de modifier dynamiquement les paramètres optionnels. A tester et valider
Ho put1 !!! Encore de l’excellent travail noodom !
Vraiment merci pour tous tes widgets
Penses tu qu’il est possible d’avoir un résultat qui ressemblerait a ceci ?
Déjà encore merci à toi pour ton travail et le reste.
Je me suis autoriser a changer quelques valeurs de tes préconisations pour atteindre le résultat que je souhaitais.
Ci joint une copie de mes paramètres optionnels.
?
