Widget Batterie

Utilisation du core de Jeedom Widgets
1

Bonjour à vous,

j’ai trouvé un bout de code pour un widget batterie plaisant il fonctionne bien sur le dashboard mais dès que je veux l’insérer dans mon design j’ai un gros « Undefined » à la place si vous avez des idées… Voici le bout de code :

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

Merci pour votre aide

2

Salut,

Il faudrait déplacer ou supprimer le commentaire au tout début du code. Le fait que le code commence par du commentaire génère le undefined.

Sinon quand je te parlais widget batterie avec l’outil du core je pensais à quelque chose dans cette idée :

3

Merci @Salvialf j’ai bien le widget qui s’affiche lorsque j’ajoute un équipement mais dès que j’ajoute une commande seule j’ai seulement le titre et le pourcentage mais pas le widget (dessin).

4

Salut, Comme indiqué par Salvialf, supprime ou déplace le commentaire du début, ensuite il faut que la totalité du code soit a l’intérieur du 1er Div.

Résultat :

<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#">
<!--
  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="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>

<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>
</div>

Attention aucun des Styles et classes n’on d’identifiant unique, il ce peut qu’il n’y est pas le résultat souhaité, si le widget est utilisé plusieurs fois dans la même page.

Edit : au passage je te le pique ;-), c’et vrai qu’il est pas mal.

5

Merci tout fonctionne à présent et c’est le résultat souhaité. Avec plaisir si tu l’as trouvé pas mal sur le site où je l’ai trouvé il y a des vidéos du fonctionnement et c’est vraiment pas mal. Si ça peut servir à d’autres personnes tant mieux.

Merci encore

6

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.