Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Sky-progressBar

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Sky-progressBar

Message par Sshafi » 23 nov. 2016, 12:26

Infos technique :
  • Widget de type : info.numeric
  • Existe en version : mobile (non), dashboard (oui)
  • Personnalisation couleur : oui
  • Personnalisation couleur texte : oui
  • Changement couleur en fonction valeur : oui
  • Changement couleur texte en fonction valeur : oui
  • Orientation: verticale ou horizontale
  • Positionnement Barre : oui
  • Orientation Texte : oui
  • Positionnement texte : oui
  • Dimension Barre : oui
  • Possibilité d'appliquer une config différente sur chaque Module : oui
Lien forum : https://forum.jeedom.fr/viewtopic.php?f=29&t=1578

Exemple d'utilisation

- Indicateur de niveau de batterie
- Niveau de cuve/réservoir
- Consommation de forfait/budget (exemple : eau, gaz)
....
Ci-Dessous un exemple d'utilisation pour une utilisation type batterie, un vert foncé est appliqué entre 80 et 100%, un vert plus clair entre 20 et 80%, et si plus petit que 20% en rouge.
[img]ProgressBar-battrie.png[/img]
[img]ProgressBar-battrie2.png[/img]
[img]ProgressBar-battrie3.png[/img]

Ci-Dessous un exemple d'utilisation pour une cuve de réserve d'eau, un rouge si moins de 200L, un bleu clair si entre 200 et 750L et en rouge si plus de 750L
[img]ProgressBar-cuve.png[/img]
[img]ProgressBar-cuve2.png[/img]
[img]ProgressBar-cuve3.png[/img]

Personnalisation

Le widget Sky-progressBar comporte plusieurs options de personnalisation très flexibles.
On peut par exemple simplement modifier les couleurs en fonction de la valeur et même en ajouter autant que nécessaire.
On peut appliquer des paramètres différents pour chaque module.

Création/gestion des paramètres Optionnel

Afin de personnaliser l'affichage du widget pour chaque module/commande, il faut créer pour chacun d'entre eux la liste des paramètres optionnel.
Pour plus d'infos a se sujet rendez-vous -> Options de personnalisation
Lien outil couleur lien1, lien2, lien3

Listes des paramètres

Personnalisation des couleurs de la progressBare (Option **1**)
  • Explication : Cette option permet de changer la couleur de la progressBar avec une couleur unie peu importe la valeur (3 premières images), ou une couleur qui varie en fonction de la valeur (image 4).
    [img]Sky-barr003.png[/img]
    [img]Sky-barr004.png[/img]
    [img]Sky-barr005.png[/img]
    [img]Sky-barr006.png[/img]
  • Nom du paramètre : couleurProgressBar
    Couleur sans variation : la valeur peut être un code couleur HTML, un code couleur RGB ou un nom de couleur.
    Exemple de syntaxe :
    • HTML #3C7136
      RGB rgb(49,140,231)
      Nom red
  • Couleur avec variation : Pour des couleurs en fonction de la valeur, il suffit de remplacer le code couleur précédent par un ensemble de clé/couleur, Attention à la syntaxe. La clé correspond à la valeur à partir de laquelle on souhaite appliquer la couleur, il faut donc au minimum un clé "0" ce qui revient au même que de mettre une couleur sans variation si on ne met pas de deuxième clé. - Syntaxe, mettre la clé (valeur numérique) suivie d'un double point ":", puis la couleur avec la syntaxe identique aux couleurs sans variation, puis entre chaque ensemble clé/couleur on met un signe "&" pour les séparer.
    • Exemple 2 couleurs : 0:red&25:#ADFF2F
      On aura donc du rouge de 0 à 24 et un vert à partir de 25
    • Exemple 3 couleurs : 0:red&136:rgb(17,86,206)&817:#CE1111
      Dans cette exemple on aura du rouge de 0 à 135 puis un bleu de 136 à 816 puis un rouge à partir de 817
Comme on peut le voir dans les exemples ci dessus, on peut mélanger le type de code couleur, on peut ajouter autant de clés/couleurs que souhaité avec la valeur numérique que l'on souhaite pour la clé.

Lien outil couleur lien1, lien2, lien3

Personnalisation des couleurs de la valeur (Option **2**)
  • Explication : Cette option permet de changer la couleur de la Valeur affichée dans la progressBar avec une couleur qui ne varie pas en fonction de la valeur (image 1) ou de la faire varier en fonction de la valeur (image 2)
    [img]Sky-barr007.png[/img]
    [img]Sky-barr008.png[/img]
  • Nom du paramètre : couleurText
  • Couleur : la valeur peut être un code couleur HTML, un code couleur RGB ou un nom de couleur.
    Exemple de syntaxe :
    • HTML #3C7136
      RGB rgb(49,140,231)
      Nom red
  • Couleur avec variation : Pour des couleurs en fonction de la valeur, il suffit de remplacer le code couleur précédent par un ensemble de clé/couleur, Attention à la syntaxe. La clé correspond à la valeur à partir de laquelle on souhaite appliquer la couleur, il faut donc au minimum une clé "0" ce qui revient au même que de mettre une couleur sans variation si on ne met pas de deuxième clé. - Syntaxe, mettre la clé (valeur numérique) suivie d'un double point ":", puis la couleur avec la syntaxe identique aux couleurs sans variation, puis entre chaque ensemble clé/couleur on met un signe "&" pour les séparer.
    • Exemple 2 couleurs : 0:red&25:#ADFF2F
      On aura donc du rouge de 0 à 24 et un vert à partir de 25
    • Exemple 3 couleurs : 0:red&136:rgb(17,86,206)&817:#CE1111
      Dans cette exemple on aura du rouge de 0 à 135 puis un bleu de 136 à 816 puis un rouge à partir de 817
Comme on peux le voir dans les exemples si dessus, on peut mélanger le type de code couleur, on peut ajouter autant de clé/couleurs que souhaitée avec la valeur numérique que l'on souhaite pour la clé.

Lien outil couleur lien1, lien2, lien3

ProgressBar Vertical/Horizontal (Option **3**)
  • Explication : Cette option permet de changer l'orientation de la progressBar, soit horizontal(defaut), soit vertical.
    [img]Sky-barr009.png[/img]
    [img]Sky-barr010.png[/img]
  • Nom du paramètre : progressBarVertical
  • Pour avoir une progressbar Horizontale mettre la valeur à false (défaut)
  • Pour avoir une progressbar Verticale mettre la valeur à true
Positionnement ProgressBar (Option **4**)
  • Explication : Cette option permet de changer la position de la progressBar par rapport à sa position par défaut, on peut la déplacer verticalement ou/et horizontalement
    [img]Sky-barr011.png[/img]
    [img]Sky-barr012.png[/img]
  • Nom du paramètre : PositionBar
  • Pour modifier la position de la barre par rapport à sa position par défaut, la première valeur représente la correction verticale, la 2ème la correction horizontale, les 2 valeurs séparées par "&".
    Exemple pour décaler la Barre il faudra mettre les valeurs suivantes :
    • 0&-20 Décale sur la gauche de 20 pixels
      0&20 Décale sur la droite de 20 pixels
    Fonctionnement identique pour la correction verticale, valeur négative pour remonter la barre et positive pour la descendre, exemple : 20&0.
Positionnement Texte (Option **5**)
  • Explication : Cette option permet de changer la position du texte par rapport à sa position par défaut, on peut le placer sur 5 positions pré-configurées et corriger ces dernières. La première image montre les position pré-configurées, la deuxième les mêmes positions avec des corrections
    [img]Sky-barr013.png[/img]
    [img]Sky-barr014.png[/img]
  • Nom du paramètre : PositionText
  • Pour modifier la position du texte par rapport à la position de la barre avec une position pré-configurée, mettre en première valeur l'une de ces valeurs :
    • - "gauche"
      - "dessus"
      - "dessous"
      - "droite"
      - "centrer" (defaut)
    Puis suivi de "&0&0&0". Le premier 0 permet d'appliquer une rotation (valeur admise de -359 à 359), le deuxième 0 applique une correction verticale, et le dernier 0 la correction horizontale.
    Exemple pour placer le texte comme sur l'image 2 widget démo 4 :
    • gauche&-45&-15&15
    Explication : Gauche (position pré-configurée) puis -45 degré de correction rotation, suivie de -15 pixel de correction verticale ce qui fait monter le texte et pour finir 15 pixels pour déplacer vers la droite
Dimension Barre (Option **6**)
  • Explication : Cette option permet de changer la Dimension de la barre
    [img]Sky-barr015.png[/img]
  • Nom du paramètre : DimensionBar
  • Pour modifier la dimension de la barre, il suffit d'entrer 2 valeurs "0&0", la première permet de modifier la hauteur de la barre comme sur l'image "démo 1", la deuxième permet de modifier la longueur comme sur l'image "Démo 3" On peut aussi mettre des valeurs négatives pour réduire la grandeur de la barre.
    • Exemple reproduire "Démo 1" : 30&0
      Exemple reproduire "Démo 3" : 0&50
Couleur de fond de la Barre (Option **7**)
  • Explication : Cette option permet de changer la couleur sous la barre progress (en blanc par défaut).
    [img]Sky-barr016.png[/img]
  • Nom du paramètre : CouleurFondBar
  • Pour modifier la couleur de fonte de la barre, il suffi d'entrer 2 valeurs "#40A497&0", la première permet de modifier la couleur, on peut y mettre une valeur HTML, RGB, nom de couleur. La deuxième valeur indique le % d’effet de transparence dégradé vers l’intérieur que l'on souhaite, par défaut elle vaut 0.
    • Exemple reproduire "Démo 1" : red&10
      Exemple reproduire "Démo 2" : red&50
      Exemple reproduire "Démo 3" : red&85
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Verrouillé

Revenir vers « Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités