Salut,
Voici déjà le code V4 pour le widget ConsoEau Veolia (le 2ème widget sera pour demain):
<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" 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= "conso_position#id#">
<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoEau/Meter2.png" class="IMGmeter#id#" alt="Meter" >
<span class="stateint1_conso#id#" id="intNum1Conso#id#"></span>
<span class="stateint2_conso#id#" id="intNum2Conso#id#"></span>
<span class="stateint3_conso#id#" id="intNum3Conso#id#"></span>
<span class="stateint4_conso#id#" id="intNum4Conso#id#"></span>
<span class="statedec1_conso#id#" id="decNum1Conso#id#"></span>
<span class="statedec2_conso#id#" id="decNum2Conso#id#"></span>
<span class="statedec3_conso#id#" id="decNum3Conso#id#"></span>
<span class="unite_conso#id#" id="unite#id#">#unite#</span>
</div>
<div id="gauge#id#" class=" indicator"></div>
<style>
@font-face {
font-family: "Digital-7";
src: url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoEau/font/digital-7.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
span.stateint1_conso#id# {
font-family: "Digital-7";
font-size:30px;
letter-spacing: 2px;
color: Black;
position: absolute;
top: 55px;
right: 90px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.stateint2_conso#id# {
font-family: "Digital-7";
font-size:30px;
letter-spacing: 2px;
color: Black;
position: absolute;
top: 55px;
right: 79px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.stateint3_conso#id# {
font-family: "Digital-7";
font-size:30px;
letter-spacing: 2px;
color: Black;
position: absolute;
top: 55px;
right: 68px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.stateint4_conso#id# {
font-family: "Digital-7";
font-size:30px;
letter-spacing: 2px;
color: Black;
position: absolute;
top: 55px;
right: 57px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.statedec1_conso#id# {
font-family: "Digital-7";
font-size:30px;
color: crimson;
position: absolute;
top: 55px;
right: 40px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.statedec2_conso#id# {
font-family: "Digital-7";
font-size:30px;
color: crimson;
position: absolute;
top: 55px;
right: 28px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.statedec3_conso#id# {
font-family: "Digital-7";
font-size:30px;
color: crimson;
position: absolute;
top: 55px;
right: 16px;
transform : scale(0.7,1);
-webkit-transform:scale(0.7,1); /* Safari and Chrome */
-moz-transform:scale(0.7,1); /* Firefox */
-ms-transform:scale(0.7,1); /* IE 9+ */
-o-transform:scale(0.7,1); /* Opera */
}
span.unite_conso#id# {
font-size:12px;
font-weight: bold;
color: #000;
position: absolute;
top: 84px;
right: 50px;
}
img.IMGmeter#id# {
width: 120px;
height: 120px;
}
div.conso#id# {
width:140px;
min-height : 140px;
}
div.conso_position#id# {
float: center;
position: absolute;
left: 10px;
top: 20px;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var valeur= (_options.display_value);
var stri = "0000" + Math.floor(valeur/1000)
var xi = stri.length;
var intNum1 = stri.charAt(xi-4);
var intNum2 = stri.charAt(xi-3);
var intNum3 = stri.charAt(xi-2);
var intNum4 = stri.charAt(xi-1);
var strd = "00" + Math.floor(Math.round((valeur/1000 - stri) * 100000)/100);
var xd = strd.length;
var decNum1 = strd.charAt(xd-3);
var decNum2 = strd.charAt(xd-2);
var decNum3 = strd.charAt(xd-1);
$('#intNum1Conso#id#').text(intNum1);
$('#intNum2Conso#id#').text(intNum2);
$('#intNum3Conso#id#').text(intNum3);
$('#intNum4Conso#id#').text(intNum4);
$('#decNum1Conso#id#').text(decNum1);
$('#decNum2Conso#id#').text(decNum2);
$('#decNum3Conso#id#').text(decNum3);
if ('#petit#' == 1) {
$('div.conso#id#').css('width','90px');
$('div.conso#id#').css('min-height','80px');
$('div.conso_position#id#').css('left','5px');
$('span.statedec1_conso#id#').css('font-size','20px');
$('span.statedec2_conso#id#').css('font-size','20px');
$('span.statedec3_conso#id#').css('font-size','20px');
$('span.statedec1_conso#id#').css('top','36px');
$('span.statedec2_conso#id#').css('top','36px');
$('span.statedec3_conso#id#').css('top','36px');
$('span.statedec1_conso#id#').css('right','26px');
$('span.statedec2_conso#id#').css('right','18px');
$('span.statedec3_conso#id#').css('right','10px');
$('span.stateint1_conso#id#').css('font-size','20px');
$('span.stateint2_conso#id#').css('font-size','20px');
$('span.stateint3_conso#id#').css('font-size','20px');
$('span.stateint4_conso#id#').css('font-size','20px');
$('span.stateint1_conso#id#').css('top','36px');
$('span.stateint2_conso#id#').css('top','36px');
$('span.stateint3_conso#id#').css('top','36px');
$('span.stateint4_conso#id#').css('top','36px');
$('span.stateint1_conso#id#').css('right','59px');
$('span.stateint2_conso#id#').css('right','52px');
$('span.stateint3_conso#id#').css('right','45px');
$('span.stateint4_conso#id#').css('right','38px');
$('span.unite_conso#id#').css('font-size','8px');
$('span.unite_conso#id#').css('top','55px');
$('span.unite_conso#id#').css('right','32px');
$('img.IMGmeter#id#').css('width','80px');
$('img.IMGmeter#id#').css('height','80px');
}
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Ça va aller pour remplacer le code où tu as besoin de conseils ? Il faut utiliser le plugin Jeexplorer et se rendre ici: plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoEau/ puis remplacer le contenu du fichier cmd.info.numeric.ConsoEau.html par le code ci-dessus.
PS: Tu as la possibilité de paramétrer le taille du widget via un paramètre optionnel ayant pour nom « petit » et pour valeur « 1 ».