[TUTO noodom] Nouveau widget nooCircleProgress

[noodom]

Bonsoir,

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 :

jeedom_widgets/nooCircleProgress at master · noodom/jeedom_widgets

Peu de recul encore et en cours d’améliorations et évolutions, mais les remarques sont bonnes à prendre

[kiboost]

Sympa ça !! Par contre il est gros, peu être un param scale ? Ou le réduire un peu ?

ÉDIT: ok y’a taille !

Alors les paramètres en anglais ce serait quand même mieux …

[noodom]

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…

[kiboost]

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.

[domoggvad]

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

[Salvialf]

Salut,

C’est normalement corrigé en beta du plugin pimp… il me semblait avoir passé la correction en stable mais à priori ce n’est pas le cas.

Je regarde dès que possible

[domoggvad]

Bonjour
oui sur ma seconde box ça fonctionne avec la beta

[domoggvad]

merci @noodom pour ce super partage

[noodom]

Mise à jour corrective : correction de l’affichage avec un minimum différent de 0, un minimum négatif.

3 exemples :

• de 0 à 100,
• de -100 à 100,
• de 50 à 100.

Attention au cache du navigateur et du cache widgets pour la prise en compte de la modification.

[patrice_payen]

Bonjour,

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.

Merci
Patrice

[noodom]

Salut,

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

[olive]

Salut @noodom je fait le tour de tes produits …

voila un effet de bord inattendu

JEEDOM BETA 4.1.9

lorsque je place le glowing buton au dessus du cercle tout va bien

Si je le place en dessous un appuie sur celui-ci m’ouvre la fenêtre d’historique

J’avais mis la casquette Bêta-Testeur

Je te prépare un ?

[Mika59]

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.

[noodom]

Salut et Merci

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

[noodom]

@noodom

useStyle : choix d’utilisation des styles prédéfinis (par défaut 'only_style', valeurs possibles : no_style,only_style,style_with_options)

useStyle : choix d’utilisation des styles prédéfinis (par défaut 'only_style' , valeurs possible : no_style ,only_style ,style_with_options )

Ajout du paramètre use_style :

• no_style : le paramètre style est ignoré (même si renseigné) , seuls les autres paramètres seront pris en compte
• only_style : seuls le paramètre style est pris en compte, les autres paramètres (même si renseignés) seront ignorés
• style_with_options : le style renseigné par le paramètre style sera pris en compte mais pourra être modifié par les autres paramètres renseignés

[Thony]

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 ?

[noodom]

Ho put1 merci !!!

Pour ton exemple, tu peux essayer avec ces paramètres

Ce qui donne ça :

[Thony]

bonjour noodom

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.

et sur 2 exemples ca me donne

Il y a des décalages.

[noodom]

Salut,

Voilà pour une correction de ton paramétrage :

[Thony]

Ben que dire…
T’es trop fort !
C’est top !!!