Message
par leon-99 » 04 avr. 2019, 09:06
Bonjour a tous
J'utilise beaucoup un widget "Conso IMG" représentant l'affichage d'une info consommation avec le sigle EDF .
Je n'ai vu personne en parler sur le forum, (ou j'ai mal cherché !!) .
C'est un widget Dashboard de type info ,sous type numerique dont voici le code,
Si un expert programmation pouvez jeter un œil, !!!
<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#" title="#collectDate#">
<span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span>
<div class= "conso_position#id#">
<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter" >
<span class="stateint_conso#id#" id="intNumConso#id#"></span>
<span class="statedec_conso#id#" id="decNumConso#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.ConsoIMG/font/digital-7.eot?") format("eot"),
url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.woff") format("woff"),
url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype"),
url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.svg#Digital-7") format("svg");
font-weight:normal;
font-style:normal;
}
span.stateint_conso#id# {
font-family: "Digital-7";
font-size:30px;
letter-spacing: 6px;
color: WhiteSmoke;
position: absolute;
top: 42px;
right: 29px;
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.statedec_conso#id# {
font-family: "Digital-7";
font-size:30px;
color: LawnGreen;
position: absolute;
top: 42px;
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>
var valeur=#state#;
var intNum = Math.floor(valeur);
var decNum = Math.round((valeur - intNum) * 10);
$('#intNumConso#id#').text(intNum);
$('#decNumConso#id#').text(decNum);
if ('#petit#' == 1) {
$('div.conso#id#').css('width','90px');
$('div.conso#id#').css('min-height','80px');
$('div.conso_position#id#').css('left','5px');
$('span.statedec_conso#id#').css('font-size','20px');
$('span.statedec_conso#id#').css('top','28px');
$('span.statedec_conso#id#').css('right','10px');
$('span.stateint_conso#id#').css('font-size','20px');
$('span.stateint_conso#id#').css('top','28px');
$('span.stateint_conso#id#').css('right','17px');
$('span.unite_conso#id#').css('font-size','8px');
$('span.unite_conso#id#').css('top','57px');
$('span.unite_conso#id#').css('right','30px');
$('img.IMGmeter#id#').css('width','80px');
$('img.IMGmeter#id#').css('height','80px');
}
</script>
</div>