Salut
Voici mes 3 améliorations, il y a peut être encore qq erreurs mais à tester
merci de vos retours
Pour le widget
Dashboard "Thermometre"
Code : Tout sélectionner
<div style="width:120px;height:120px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<div class="row">
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<div class='col-xs-3 iconCmd#id#' style="padding:0px;height:90px;">
<div class="row">
<div class='col-xs-offset-1 col-xs-3' style="font-size: 0.6em;">
<strong style="position: relative;top: 4px;">#maxValue#</strong>
<strong style="position: relative;top: 46px;">#minValue#</strong>
</div>
<div class='col-xs-8' id="thermo#id#" style="padding:0;margin:0;width:22px;height:90px;background:url('plugins/widget/core/template/dashboard/cmd.info.numeric.Thermometre/thermo-2-0.png') no-repeat;background-size: 22px 90px;">
<div style="position: absolute;width: 3px;height: 61px;border: none;border-radius: 3px;background-color: white;left: 10px;top: 10px;">
<div class="height#id#" style="position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-offset-1 col-xs-8" id="stat#id#" style="padding-top:5px;line-height:18px;">
<span class="thermometre_state" style="font-size: 1.5em;font-weight: bold"></span>
</div>
<div>
<span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
<span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
<span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
<span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
</span>
</div>
</div>
</div>
<script>
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#] .thermometre_state').empty().append(_options.display_value+'#unite#');
height = Math.round( (_options.display_value - ('#minValue#')) * (68/('#maxValue#' - ('#minValue#'))) ) + 6;
$('.height#id#').css('height',height+'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
Pour le widget
mobile "ThermometreMini"
Code : Tout sélectionner
<div style="width:117px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div style="font-size: 0.6em;font-weight: bold;color: black;position:relative;width:15px;height:80px;float: left;">
<span style="text-align: right;position: relative;width:15px;float: right;top: 2px;">#maxValue#</span>
<span style="text-align: right;position: relative;width:15px;float: right;top: 38px;">#minValue#</span>
</div>
<div id="thermo#id#" style="position:relative;width:22px;height:80px;float: left;background:url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/thermo-2-0-80.png') no-repeat;">
<div style="position: absolute;display:block;width: 3px;float:left;height: 61px;border: none;border-radius: 3px;background-color: white;left: 9px;top: 3px;">
<div class="height" style="display:block;position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
</div>
</div>
<div id="thermoMarker#id#" style="top: 0px; font-weight: bold; color: black;float: left;position: relative; width: 80px; height: 44px;background: url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini//Marker-Board-Azure-80.png') no-repeat;">
<center style="padding: 7px 6px 1px 26px;line-height: 16px;">
<span class="thermometre_state" style="font-size: 1.2em;"></span><br/>
</center>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var range = parseInt(_options.display_value);
var rangeMin = Math.round(0.3*parseInt('#maxValue#'));
var rangeMax = Math.round(0.7*parseInt('#maxValue#'));
if( range <= rangeMin ) {
$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Azure-80.png")');
} else if( range > rangeMin && range <= rangeMax ) {
$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Green-80.png")');
} else {
$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Pink-80.png")');
}
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value+'#unite#');
height = Math.round( (_options.display_value - ('#minValue#')) * (49/('#maxValue#' - ('#minValue#'))) ) + 6;
topMarker = 49 - height;
$('.cmd[data-cmd_id=#id#] .height').css('height',height+'px');
$('thermoMarker#id#').css('top',topMarker+'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Pour le widget
mobile "Humidite"
Code : Tout sélectionner
<div style="margin-left: 5px;width:110px;min-height:75px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div class='cmdName' style="font-weight: bold;font-size : 0.8em;left: 32px;width: 100px;height: 17px;overflow: hidden;" title="#name#">#name#</div>
<div style="position:relative;width:21px;height:60px;float: left;">
<div style="position:absolute;width:21px;height:60px;">
<div class="height" style="border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; width: 12px; height: 75px;top: 21px; left: 5px; background: url(plugins/widget/core/template/mobile/cmd.info.numeric.humidite/eau.png) no-repeat;position: absolute;">
<div class="eprouvette" style="position: absolute;width: 21px;float:left; left: -5px;height: 60px;background:url('plugins/widget/core/template/mobile/cmd.info.numeric.humidite/eprouvette.png') no-repeat;background-size: 21px 60px;"></div>
</div>
</div>
</div>
<div id="couleur#id#" style="font-weight: bold; color: black;float: left;position: relative;top :6px; width: 80px; height: 44px;background: url('plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Azure-80.png') no-repeat;">
<center style="padding: 7px 6px 1px 26px;line-height: 16px;">
<span class="humidite_state" style="font-size: 1.2em;"></span>
</center>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
if( '#eprouvette#' == 'Black' ) {
$('#eprouvette#id#').css('background-image','url("plugins/widget/core/template/dashboard/cmd.info.numeric.humidite/eprouvette-noir.png")');
}
if( '#couleur#' == 'Pink' ) {
$('#couleur#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Green-80.png")');
} else if( '#couleur#' == 'Green' ) {
$('#couleur#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Pink-80.png")');
} else {
$('#couleur#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Azure-80.png")');
}
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .humidite_state').empty().append(_options.display_value+'#unite#');
height = parseInt( (_options.display_value * 60)/#maxValue# );
topPosition = 60 - height;
$('.cmd[data-cmd_id=#id#] .height').css('top',topPosition+'px');
$('.cmd[data-cmd_id=#id#] .height').css('height',height+'px');
$('.cmd[data-cmd_id=#id#] .eprouvette').css('top','-'+topPosition+'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>