Widget Batterie pour votre design Jeedom

22 avril 2020 florian Commentaires 16 commentaires

Aujourd’hui nous sortons des boutons toggle pour voir un widget batterie pour votre design Jeedom v4 100% html / css, totalement animé et personnalisable.

L’idée de ce widget est qu’en fonction du niveau de votre batterie, la jauge se remplit proportionnellement avec un code couleur associé :

Entre 0 et 20%, clignote rouge
Entre 21% et 59%, s’affiche en orange
Entre 60% et 100%, s’affiche en vert.

Vous pouvez voir la démonstration ci-dessous avec un slide pour jouer sur le % de batterie restant.

Voici les sources de ce widget :

<!--
  Widget name : battery_status_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-batterie-pour-votre-design-jeedom/
  Inspiration : https://codepen.io/dropside/pen/qjDmb
  Last Update : 20200414 - creation
 -->

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div class="widget-container">
    <div class="battery">
         <div class="juice"></div>
    </div>
  </div>
</div>

<style>
  body {
	background-color:black;
  }

  :root {
      --juice_alert_color: red;
      --juice_inter_color: orange;
      --juice_ok_color:green;
      --battery_color:grey;
      --widget_width:60px;
	    --widget_height:30px;
  }

  .widget-container{
  	width: calc(var(--widget_width) + 20px);
    display:block;
    padding:0px;
    position:relative;
  }

  .battery{
    width: var(--widget_width);
    height: var(--widget_height);
    border: 2px solid var(--battery_color);
    border-radius: 5px;
    padding: 4px;
    box-sizing: border-box;
  }
  .battery:after{
    content: ' ';
    background: var(--battery_color);
    width: 5px;
    height: calc(var(--widget_height) /2);
    position: absolute;
    right: 5px;
    border-radius: 0px 2px 2px 0px;
    top: 24%;
  }
  .juice{
    height:100%;
    float: left;
  }

  .juice-alert {
    background:var(--juice_alert_color);
    animation: blinky 1s ease-in-out infinite;
    animation-delay: 2s;
  }

  .juice-inter {
    background:var(--juice_inter_color);
  }

  .juice-ok {
    background:var(--juice_ok_color);
  }

  @keyframes blinky {
    0% {background:transparent;}
    49% {background:transparent;}
    50% {background:var(--juice_alert_color);}
  }
</style>
<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var percentage_value = _options.display_value;

    cmd.find('.juice').attr('style', 'width:' + (percentage_value == 0 ? '5' : percentage_value) + '%;');

    if (percentage_value >=0 && percentage_value<=20){
    	cmd.find('.juice').removeClass('juice-ok juice-inter');
      	cmd.find('.juice').addClass('juice-alert');
    } else if (percentage_value >=21 && percentage_value<=59){
      	cmd.find('.juice').removeClass('juice-ok juice-alert');
      	cmd.find('.juice').addClass('juice-inter');
    } else {
    	cmd.find('.juice').removeClass('juice-inter juice-alert');
      	cmd.find('.juice').addClass('juice-ok');
    }
  }

  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

A noter :

Ce widget s’applique au commande unique,.
J’utilise toujours la police Montserrat pour mon design, si vous souhaitez utiliser la police Arial ou une quelconque autre, il vous faudra supprimer ou changer la ligne 1 et ‘Montserrat’ ligne 41.
Vous pourrez changer la couleur du bouton, du texte, et sa taille en jouant avec les paramètres en haut des sources.

    :root {
  		--color_btn_hex: #5a99d4;
      	--color_btn_rgb: 35,60,83;
  		--color_text: white;
    	--size_btn:100px;
  	}

Alternative avec affichage du pourcentage

Et voici les sources de cette alternative :

<!--
  Widget name : battery_status_percentage_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-batterie-pour-votre-design-jeedom/
  Inspiration : https://codepen.io/dropside/pen/qjDmb
  Last Update : 20200414 - creation
 -->

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div class="widget-container">
    <div class="battery">
         <div class="juice"></div>
    </div>
    <div class="battery-level">100%</div>
  </div>
</div>

<style>
  :root {
      --juice_alert_color: red;
      --juice_inter_color: orange;
      --juice_ok_color:green;
      --battery_color:grey;
      --battery_level_color:grey;
      --widget_width:60px;
	  --widget_height:30px;
      --font-size:12px;
    }

  .widget-container{
  	width: calc(var(--widget_width) + 20px);
    display:block;
    padding:0px;
    position:relative;
  }
    
  .battery{
    width: var(--widget_width);
    height: var(--widget_height);
    border: 2px solid var(--battery_color);
    border-radius: 5px;
    padding: 4px;
    box-sizing: border-box;
  }
  .battery:after{
    content: ' ';
    background: var(--battery_color);
    width: 5px;
    height: calc(var(--widget_height) /2);
    position: absolute;
    right: 5px;
    border-radius: 0px 2px 2px 0px;
    top: 24%;
  }
  .battery-level{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: var(--font-size);
    height: 100%;
    vertical-align: middle;
    line-height: var(--widget_height);
    text-align: center;
    color: var(--battery_color);
  }
  .juice{
    height:100%;
    float: left;
  }

  .juice-alert {
    background:var(--juice_alert_color);
    animation: blinky 1s ease-in-out infinite;
    animation-delay: 2s;
  }

  .juice-inter {
    background:var(--juice_inter_color);
  }

  .juice-ok {
    background:var(--juice_ok_color);
  }

  @keyframes blinky {
    0% {background:transparent;}
    49% {background:transparent;}
    50% {background:var(--juice_alert_color);}
  }
</style>
<script>
  
  
  function getOpositeColor(rgb,darkcolor,lightcolor) { // Like this : rgb(0, 0, 0);
    while (rgb.indexOf(' ') != -1) rgb = rgb.replace(' ', '');
    //Check if is formatted as RGB
    if ((x = /([0-9]{0,3}),([0-9]{0,3}),([0-9]{0,3})/.exec(rgb))) {
        //Extract colors
        color = {
            'r': parseInt(x[1]),
            'g': parseInt(x[2]),
            'b': parseInt(x[3])
        };
        //If is this operation be <= 128 return white, others else return black
        OpositeColor = ((0.3 * (color['r'])) + (0.59 * (color['g'])) + (0.11 * (color['b'])) <= 128) ? lightcolor : darkcolor;
        return OpositeColor;
    }
    return -1;
 }
  
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var percentage_value = _options.display_value;
    
    cmd.find('.juice').attr('style', 'width:' + (percentage_value == 0 ? '5' : percentage_value) + '%;');
    cmd.find('.battery-level').html(percentage_value+"%");
    if (percentage_value >=0 && percentage_value<=20){
    	cmd.find('.juice').removeClass('juice-ok juice-inter');
      	cmd.find('.juice').addClass('juice-alert');
        cmd.find('.battery-level').css('color',cmd.find('.battery').css("border-color"));
    } else if (percentage_value >=21 && percentage_value<=59){
      	cmd.find('.juice').removeClass('juice-ok juice-alert');
      	cmd.find('.juice').addClass('juice-inter');
        cmd.find('.battery-level').css('color',getOpositeColor(cmd.find('.juice').css("background-color"),cmd.find('.battery').css("border-color"),"#FFF"));
    } else {
    	cmd.find('.juice').removeClass('juice-inter juice-alert');
      	cmd.find('.juice').addClass('juice-ok');
        cmd.find('.battery-level').css('color',getOpositeColor(cmd.find('.juice').css("background-color"),cmd.find('.battery').css("border-color"),"#FFF"));
    }
    
    
    
  }
  
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

Comment « installer » ce widget ?

En version V4, les widgets sont maintenant dans le core Jeedom. Il vous permet la création facile de widget en utilisant les templates mis à disposition. Pour ce widget, ca se passe directement par du code à déposer dans votre Jeedom.

Tout d’abord, rendez-vous dans les widgets de Jeedom V4 pour ajouter notre code html :

0 - outils widget — 1 – Menu outils puis widgets

Il vous faudra ajouter ensuite les paramètre de création de ce nouveau widget :

Version : Dashboard (PC) ou mobile
Type : Info ou Action
Sous-type : plusieurs options en fonction de votre cas d’usage
Nom

Création widget batterie — 4 – Paramètrage

Il vous faudra ensuite copier / coller le code html puis sauvegarder votre nouveau widget. Il sera maintenant possible de le sélectionner pour les info numérique type batterie.

Pour l’exemple, j’ai créé un virtuel avec une info numérique Batterie et une commande slider pour me permettre de faire varier la valeur du champs batterie.

Attention à votre virtuel, et les valeurs … c’est souvent la cause des difficultés d’intégration des widgets.

Paramètrage virtuel batterie - settings — 1 – Sur l’écran commande, clic sur le bouton des paramètres de la commande unique

2 - Clic sur affichage — 1 – Sur l’écran commande, clic sur le bouton des paramètres de la commande unique

Et avec cette configuration, vous devriez avoir le rendu attendu.

Astuce si après personnalisation, rien ne se passe

Vous essayer peut-être de faire des personnalisations, mais une fois réalisées, rien ne se passe, aucun changement. Pas de panique, je vous conseille d’appliquer un autre widget à votre info, puis remettre celui où vous avez fait vos modifications. Et maintenant Jeedom affichera les nouveautés!

Conclusion

J’espère que ce widget batterie pour votre design Jeedom vous sera utile. Il est totalement configurable et pourra s’adapter à vos thèmes qu’ils soient clairs, sombres ou colorés. A vous de jouer.

N’hésitez pas à faire vos feedbacks ici ou sur ma page facebook.

A bientôt

16 réflexions sur « Widget Batterie pour votre design Jeedom »

ROMAIN B. dit :

23 avril 2020 à 10 h 37 min

Bonjour, merci pour le partage de ton widget, très sympa, ne connaissant pas le code CSS serait-il possible d’ajouter la valeur de la batterie en % dans l’icône de celle-ci ou en dessous?
Merci d’avance pour ton retour.
bonne journée

Répondre
1. florian dit :
  
  23 avril 2020 à 12 h 22 min
  
  Bonjour Romain,
  oui on peut, je vais regarder et ajouter cette information.
  Merci pour le feedback. 🙂
  
  Répondre
Florent dit :

23 avril 2020 à 22 h 27 min

Hello,

Merci pour tous tes articles et éléments de design.

J’ai un souci avec celui-ci. Sur le dashboard il est correctement affiché en revanche sur mon design le « bout » de la pile ainsi que le texte sont décalés vers la droite. Aurais-tu une idée d’où cela peut-il venir ?
(Je suis en Jeedom V3)

Merci !

Répondre
1. florian dit :
  
  23 avril 2020 à 22 h 46 min
  
  Salut Florent,
  Es-tu en affichage tableau sur ton design ?
  
  Répondre
  1. Florent dit :
    
    23 avril 2020 à 22 h 54 min
    
    Affichage tableau ? Ce n’est pas quelque chose qui s’applique uniquement à un widget ? Sinon je ne vois pas comment cette option de design s’activerait.
    
    Du coup j’ai essayé un truc, j’ai ajouté tout le widget de mon détecteur et là la batterie s’affiche correctement.
    
    En revanche lorsque j’importe uniquement la commande, ça ne s’affiche pas correctement.
    
    Répondre
ROMAIN Baptiste dit :

23 avril 2020 à 23 h 22 min

Franchement chapeau, merci encore pour la modif nickel 😉.
J’ai juste un petit soucis, le nom de la commande info ne s’affiche pas au dessus de la batterie même en ayant cocher la case « afficher le nom » dans le paramètrage de la commande.
Si tu as une petite idée, ça fonctionnait bien avec le widget core batterie.

Répondre
1. florian dit :
  
  3 mai 2020 à 14 h 13 min
  
  Ca a normalement été corrigé maintenant dans les 2 widgets de cet article. Merci pour le feedback. 🙂
  
  Répondre
Maflo dit :

2 mai 2020 à 22 h 36 min

pour la batterie avec le % il manque la rubrique suivante qui permet d’afficher le nom au dessus de la batterie.
il faut l’intercaler avant le début de la balise

voici le bout de code à insérer (récupéré du 1er bloc code)

#name_display#

PS: je découvre ce blog et tout ce travail très soigné ! Merci ! au top!

Répondre
1. florian dit :
  
  3 mai 2020 à 14 h 14 min
  
  Merci pour le feedback 🙂
  J’ai corrigé en effet le name_display n’était pas sur les 2 widgets de cet article. C’est maintenant le cas 🙂
  
  Répondre
Julien dit :

11 juin 2020 à 9 h 15 min

Bonjour,

Merci pour la clarté de tes articles et le contenu de ton site, je viens de le découvrir et tous tes articles sont pertinents ! Bravo !

J’ai tenté d’implémenter ton widget batterie. Il s’affiche sans problème sur le dashboard, mais sur mon design, cela ne fonctionne pas, il affiche « undefined ».

Aurais-tu une idée ?

merci

Répondre
1. Brice dit :
  
  27 août 2020 à 11 h 01 min
  
  Hello,
  J’ai le même problème. Sur le dashboard le widget marche très bien mais lorsque j’importe uniquement une commande sur design (si importation de l’équipement le problème apparait pas) j’ai juste ecrit undefined.
  Brice
  
  Répondre
2. gregory loncq dit :
  
  30 avril 2021 à 16 h 03 min
  
  Bonjour,
  
  Il faut de nouveau importer l’équipement et supprimer les commandes inutiles.
  
  Bien cordialement.
  
  Répondre
fidoboulettes dit :

27 août 2020 à 12 h 41 min

top classe ce widget… et top aussi ton site…
me le suis mis dans mes flux Rss…
Bravo

Répondre
Jérôme dit :

8 février 2021 à 17 h 57 min

Bonjour

Je trouve ce widget super sobre et sans chichi BRAVO.

Par contre je ne trouve pas comment faire pour modifier la couleur du % dans le second code pour adapter à la couleur ligth et dark du dashboard par exemple.
D’ailleurs à ce propos est il possible d’inclure un changement automatique de la config en fonction du thème justement en plus ?

Répondre
Jsprod dit :

11 juillet 2021 à 21 h 36 min

Pour ceux qui rencontre le problème sur le design il faut supprimer le commentaire ou mettre la première avant et il manque une
tout à la fin. Tout fonctionne correctement après ça. Merci

Répondre
Phpvarious dit :

11 juillet 2021 à 23 h 18 min

Bonjour, et merci pour ce super Widget.
Je me permet de commenter ton widget.
Pour le rendre compatible lorsque l’on importe seulement la commande dans un design (V4) :
1) Ne pas commencer le code par un commentaire (déplacer celui-ci après la 1ere balise « div ».
2) Intégrer la totalité du code dans le 1er « div ».

Voila, bonne continuation.

Répondre

Ma-maison-intelligente

Widget Batterie pour votre design Jeedom

22 avril 2020 florian Commentaires 16 commentaires

Alternative avec affichage du pourcentage

Comment « installer » ce widget ?

Astuce si après personnalisation, rien ne se passe

Conclusion

16 réflexions sur « Widget Batterie pour votre design Jeedom »

Laisser un commentaire Annuler la réponse

Alternative avec affichage du pourcentage

Comment « installer » ce widget ?

Astuce si après personnalisation, rien ne se passe

Conclusion

Partager :

16 réflexions sur « Widget Batterie pour votre design Jeedom »

Laisser un commentaire Annuler la réponse