Cela fait un moment que je voulais faire ce genre de widget mais pas très doué en graphics et pas beaucoup de temps....
J'ai donc fait quelques modification pour facilité "l'équation" de l'info du virtuel et faire un affichage plus dynamique du volet comme suggéré dans les commentaire du blog par @cyrilphoenix. (on peu faire plus propre en renommant les images et optimiser le code, c'est plus un proof of concept)
il faut donc remplacer le code par :
Code : Tout sélectionner
<div style="width:98px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<center>
<span style="font-size: 3.5em;position:relative" id="iconCmd#id#"></span>
</center>
<script>
var $wrp = $('#iconCmd#id#');
var infos = "#state#".split(";");
var fenetre="9";
var volet=null;
if("#state#" == "" || (infos.length < 2) || isNaN(infos[0]) || isNaN(infos[1])){
fenetre ="9";
} else {
fenetre = infos[0]==0?'2':'1';
volet = 100-infos[1];
}
$wrp.empty();
$wrp.append('<img style="position:relative;width:85px;height:85px;" src="plugins/widget/core/template/dashboard/cmd.info.string.Store_and_Window/StoreWindow-'+fenetre+'99.png"/>');
if(volet)
$wrp.append('<span style="position:absolute;width:85px;height:'+Math.round(85*volet/100)+'px;background-size:cover;top:-4px;left:0;background-image:url(plugins/widget/core/template/dashboard/cmd.info.string.Store_and_Window/StoreWindow-'+fenetre+'00.png)"></span>');
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>