Widget pour batterie de maison

[fredlamour]

Bonjour à tous,
Je cherche à faire un widget pour ma batterie Marstek, quelque chose de visuel sans action.
Je veux juste une batterie dont le remplissage est proportionnel à la valeur. A l’intérieur, on affiche le niveau en pourcentage et dessous une indication selon charge / decharge / standby.
Voici mon virtuel et le widget serait appliqué sur Batterie :

Ne maîtrisant pas le code, j’ai joué avec les IA qui m’ont sorti ce code :

<!-- Remplissage vert -->
<div style="
  position:absolute;
  bottom:0;
  width:100%;
  height:[[value]]%;
  background:#4caf50;
"></div>

<!-- Texte centré -->
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:bold; font-size:14px; color:#fff;">
  #value#%
</div>

#if# #cmd(88055)# == "charge" #then# ▲ #endif# #if# #cmd(88055)# == "decharge" #then# ▼ #endif# #if# #cmd(88055)# == "standby" #then# = #endif#

Le résultat est en erreur. On retrouve la forme, la valeur de batterie mais après cela part dans tous les sens quand il s’agit de regarder une autre valeur …

Des idées pour obtenir quelque chose d’acceptable ?
Merci d’avance pour votre aide.

[Franck_jeedom]

La batterie est widget avec affichage proportionnel si ça t’intéresse.

[OlivierHa]

Bonsoir,
@fredlamour Je pense que j’ai exactement ce qu’il te faut.
J’ai fait un widget pour la batterie Marstek:

cmd.info.numeric.Jauge_marstek.html.txt (4,8 Ko)

[DanielJ]

Bonjour,

Autre exemple, j’ai un code HTML qui me donne la charge d’une batterie comme ceci :

Avec :

• Affichage numérique du pourcentage restant (0 à 100%)
• Affichage d’une barre de progression en fonction de la capacité restante :
  • de couleur rouge clignotante en dessous de 20%
  • de couleur jaune fixe entre 21% et 59%,
  • de couleur verte fixe à partir de 60%.

Tout est personnalisable directement dans le code.

Le code HTML est le suivant :

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

Ce fichier est à enregistrer sous la forme cmd.info.numeric.Batterie.html dans le répertoire html/data/customTemplates/dashboard/.

Ensuite il suffit juste de l’associer avec le virtuel qui contient l’information du pourcentage restant de la batterie (Widget Customtemp/Batterie).

[fredlamour]

Merci il est top ! @DanielJ

Je n’arrive plus à mettre la main dessus mais j’avais découvert un widget qui combinait plusieurs commandes/infos à la main. Il fallait les ajouter les ID des autres commandes dans les paramètres additionnels de l’affichage de la commande principale.
L’idée serait d’ajouter une information charge/décharge/standby dans le même widget que l’affichage de niveau.

[DanielJ]

Bonjour,

De rien…
Ce widget reste relativement basique, mais sa simplicité d’adaptation fait qu’on peut l’utiliser pour beaucoup d’autres usages, comme par exemple :

[seb28]

Un petit merci également, je viens d’installer bien sympa.