Bonjour,
j’utilise un Widget Cuve eau dont j’ai recopié le code dans la version V4 à partir du widget que j’utilisais dans la version V3.
Ce widget affiche sur l’image un niveau d’eau dimensionné proportionnellement à la capacité de la cuve.
Si ce widget fonctionnait bien sur la V3, l’affichage du niveau n’est pas correct sur la V4.
Je n’y connais rien en codage widget, mais en parcourant le contenu de ce code j’en ai déduit qu’il calculait le % de la variable niveau par rapport à la valeur max de la variable niveau et qu’il appliquait ce % à la hauteur de l’image, pour afficher le niveau sur l’image, ce qui parait correct, mais ce n’est pas ce qui s’affiche sur le widget.
Par exemple si j’ai une valeur niveau de 1000 litres pour une valeur max de niveau de 3000 L, sur l’image ,le niveau s’affiche à15% de la hauteur et non à 30%.(33% pour les puristes)
Voici le code au cas ou quelqu’un saurait le déchiffrer et trouver la logique
Ce n’est pas un problème critique, mais je serais curieux de comprendre.
merci
<div class="title #hide_name#" style="width:100%">
<div class="cmdName" style="font-weight: bold;font-size : 10px; #hideCmdName#;">#name_display# </div>
</div>
<div style="text-align: center;position:relative;width:45%;height:96px;float: left;">
<div style="width: 60px;height: 50px; position: absolute; margin-top: 45px; margin-left: 20px; z-index: 1; background: url('data/img/fondnoir.png') no-repeat;background-size:60px 50px;" ></div>
<div style="width: 60px;height: 54px; position: absolute; margin-top: 45px; margin-left: 20px; z-index: 2; background: url('data/img/eau.png') no-repeat;background-size:60px 54px;" id="recipient#id#"></div>
<div style="width: 128px;height: 128px; position: absolute; z-index: 3; background: url('data/img/cuve.png') no-repeat;background-size:128px 128px;" id="recipientmask#id#"></div>
</div>
<div style="display:inline-block;width:55%">
<div class="value">
<h2 style=" position: absolute; z-index: 4; margin-top: 50px;margin-left: 15px;"><span style="font-size: 0.6em;font-weight: bold;" class="value#id# timeCmd "></h3>
<!-- Historique -->
<div class="cmdStats #hide_history# Stats_hist#id#" style="#displayHistory# text-align: left;">
<span title="Min" style="float:left;">Min : #minHistoryValue# #unite#</span><br/>
<span title="Moy" style="float:left;">Moy : #averageHistoryValue# #unite#</span><br/>
<span title="Max" style="float:left;">Max : #maxHistoryValue# #unite#</span><br/>
<i class="#tendance#"></i>
</div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// Variable Taille Texte et marge
var srcFontSize = ('#font_size#'!='#'+'font_size#') ? "#font_size#": "11px";
var srcMargSize = '#marge_size#';
var srcFontSizeStat = ('#font_size_hist#'!='#'+'font_size_hist#') ? "#font_size_hist#": "10px";
// Variable Taille Texte
var State = parseFloat(_options.display_value);
var Statemax = '#maxValue#';
var height = parseInt( 80*(State/Statemax) );
//Update
if( height > 80) { height = 80; }
topPosition = 71 - height;
$('#recipient#id#').css({'height':height+'px','top':topPosition+'px','background-position':'0 -'+topPosition+'px'});
$('.cmd[data-cmd_id=#id#] .value#id#').empty().append(_options.display_value+' '+'#unite#');
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
//Taille Texte et marge pour la valeur
$('.cmd[data-cmd_id=#id#] .Stats#id#').css('font-size',srcFontSize);
$('.cmd[data-cmd_id=#id#] .Stats#id#').css('line-height',srcMargSize);
//Taille Texte pour l'historique
$('.cmd[data-cmd_id=#id#] .Stats_hist#id#').css('font-size',srcFontSizeStat);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
saisir ou coller le code ici
