Widget Batterie pour votre design Jeedom

Widget Batterie pour votre design Jeedom

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 :

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.

Paramètrage du virtuel

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

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

12 thoughts on “Widget Batterie pour votre design Jeedom

  1. 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

  2. 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 !

      1. 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.

  3. 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.

  4. 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!

  5. 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

    1. 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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *