Centralisation de mes petits widget

Bonjour tout le monde,

Ayant fait quelques widget pour la V4 et sur le conseil judicieux de @Salvialf je les centralises dans un post. Mon principe pour les widget ne jamais utiliser d’images mais passer par du css uniquement couplé quand il le faut avec du javascript. Et bien sur essayer d’avoir une harmonie visuel par exemple au niveau des couleurs et du style. N’étant pas graphiste j’espère que vous serez quelques peut indulgent ;), Cependant je suis aidé par @Domotech quand je fais des choses moche :stuck_out_tongue:

Les widgets sont dispos sur mon repo github
J’ai mis en place un petit wiki pour la partie installation des différents widgets

Voici donc la liste des widget

  • Température : Je me suis basé sur le widget de @Almy pour la température celui ci change de couleur en fonction de la température remontée par un équipement
  • Battery : Affiche une pile qui se vide progressivement et change de couleur en fonction de seuil que vous pouvez modifier, le seuil de Alert, le rouge, permet d’avoir l’affichage d’un petit éclair qui clignote,
  • Présence : Juste l’affichage d’un petit bonhomme en css toujours, passant du rouge au vert en fonction de l’a présence ou non de la personne,
  • Led : Led est un bien grand mot c’est juste un petit cercle qui permet deux état rouge ou vers, c’est binaire mais ça m’était utile pour la surveillance de certaine chose, la version rouge clignote, (Merci @Domotech pour son aide sur le CSS sur le décalage des puces)
  • Barre de progression et barre de progression inversées : deux versions différentes , une allant de rouge a vert et l’inverse de vert à rouge
  • Barre de progression multiple, permet l’affichage de barre horizontal, vertical ou en cercle, il permet l’utilisation de valeur en % mais également des valeurs numérique attention toute fois pour ses dernière à ce que le minimum et le maximum soit bien renseigné sinon par defaut la valeur mini sera 0 et maxi 100

Visuel

  • Température
    temp_02

  • Battery
    battery_08 battery_07 battery_06 battery_04 battery_03 battery_02 battery_01

  • Présence
    presence_dark_present presence_dark_absent

  • Led
    2020-03-03_17h21_42

  • Barre de progression
    Version normal
    progress_bar_01
    progress_bar_02
    progress_bar_03
    progress_bar_04
    progress_bar_05
    Version inversée
    progress_bar_01_invert
    progress_bar_02_invert
    progress_bar_03_invert
    progress_bar_04_invert
    progress_bar_05_invert
    Version vertical (Je n’ai pas pris le temps de montrer l’évolution des niveaux, mais rassurez vous il change)
    progress_bar_vertical_invert_05 progress_bar_vertical_invert_04 progress_bar_vertical_invert_03 progress_bar_vertical_invert_02 progress_bar_vertical_invert_01

Attention si sur certaine capture d’écran si vous voyez une incohérence entre la valeur affichée et le graphisme c’est normal j’oublie parfois de mettre en concordance la valeur et le graphisme, mais en production tout est bon :wink:

Futur évolution :

  • Regroupé toutes les barres de progression en un seul widget parce-que la ça dévient vite le bordelique
17 J'aimes

Petite mise a jour du widget d’état de batterie, vous n’avez plus a modifier le code pour choisir les différents plafond de warning et d’alert. Je récupère maintenant les niveaux directement dans jeedom.

Vous pouvez du coup vous même paramétrer les niveaux ici :

config_jeedom_battery

2 J'aimes

Super :+1: :+1: :+1:

et bonne chose d’avoir tout regroupé

Merci de ce partage

1 J'aime

De rien c’est bien normal, je vais continuer à alimenter progressivement en fonction de mes envies et de mon inspiration

Pour la dernière pour l’inspiration il ne manque que les bulles de champagne dans le liquide coloré :wink:

Oui en effet, je virerais peut être les bandes histoires d’être raccord avec les précédentes :stuck_out_tongue:

Tu t’es mis à boostrap je vois :wink: :smile:

J’en suis revenu rapidement aussi des bandes colorés sur la progressbar :sweat_smile:

Oui pour certaine chose ça va faciliter l’affichage au final

Ce que je vois peut être comme améliorations, c’est afficher le nom de l’équipement au lieu batterie dans le widget batterie.

C’est peut-être mieux pour pas devoir l afficher autre part

Oui tout à fait pour le moment je mettais je le nom de la commande car je n’ai pas utilisé mes widget sur des virtuels qui regrouperais potentiellement plusieurs même commande.

Je vais regarder ça

1 J'aime

Et je dirai peut être diminuer le border-radius du widget progress vertical.

Sinon je trouve le boulot excellent!

signet pour suivre, beau travail

2 J'aimes

Voila c’est fait j’ai passé le border-radius de 10px et 6px :+1: c’est en effet plus agréable à l’oeil

1 J'aime

Je vais rougir :wink:

Super, merci pour le partage

1 J'aime

image

c’est bien celle dosé a 65.61% pour le corona virus ?

3 J'aimes

Tout a fait, la couleur c’est juste pour que ça s’avale mieux :stuck_out_tongue:

Petite mise a jour du widget LED un bug c’était glisser, en effet lors du changement d’état rouge -> vert le point vert continuais a clignoté alors qu’il ne devait pas. Maintenant c’est réglé, merci @Domotech pour le retour de bug !!

1 J'aime

Merci pour le partage, je vais en utiliser certains dans mon design :+1:

1 J'aime

Merci à toi de les utiliser, et surtout en cas de bug n’hésite pas à me le signaler que je corrige cela