Bonjour @Salvialf
Le voici:
<div onClick="#lien#;" style="width:90px;min-height:65px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget FD#id# temp" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du : #valueDate#<br/>Collectée le : #collectDate#">
<center style="padding-top:10px;">
<!--<span class='cmdName' style="font-weight: bold;font-size : 14px;#hideCmdName#">#name_display#</span>-->
<div class='displayDF#id#'></div>
<div class='boxFD#id#'>
<div class="ValueFD#id# #Ombre#">
<span class="intFD#id#" id="intFDValue#id#"></span>
<span class="decFD#id#" id="decFDValue#id#"></span>
</div>
<div class='UniteFD#id#'>#unite#</div>
</div>
<!--<div style="#displayHistory# font-size: 14px;" class="col-xs-16 center-block">
<span title='Min' class='tooltips'>#minHistoryValue# </span> | <span title='Max' class='tooltips'> #maxHistoryValue#</span> <i class="#tendance#"></i>
<span class="timeCmd#uid#" style="padding : 3px;border-radius: 4px;"></span>
</div>-->
</center>
<style>
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local('Audiowide Regular'), local('Audiowide-Regular'), url(/data/customTemplates/dashboard/cmd.info.numeric.tile_ombre/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2)) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local('Audiowide Regular'), local('Audiowide-Regular'), url(/data/customTemplates/dashboard/cmd.info.numeric.tile_ombre//l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
div.displayFD#id# {
position: relative;
}
.boxFD#id# {
height: 60px;
width: 80px;
border-radius : 10px;
//top: 5px;
//left: 5px;
//position: absolute;
text-align: center;
}
.ValueFD#id# {
padding-top: 8px;
position: relative;
text-align: center;
top: 5px;
z-index:1;
border-radius : 10px;
display: block;
overflow: hidden;
width: 80px;
height : 55px;
border-radius : 10px;
}
.intFD#id# {
font-family: "Audiowide", helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
font-size: 24px;
}
.decFD#id# {
font-family: "Audiowide", helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
font-size: 18px;
}
.UniteFD#id# {
padding-top: 8px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
height: 30px;
width: 80px;
font-size: 15px;
top: -25px;
text-align: center;
display: block;
overflow: hidden;
position:relative;
z-index:2;
border-radius : 10px;
}
</style>
<script>
jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
jeedom.cmd.addUpdateFunction('#id#',function(_options){
// Récupération des valeurs des paramètres
var chxcolor = ('#color#' !='#'+'color#') ? "#color#":"0099ff";
var chxbord = ('#bord#' !='#'+'bord#') ? "#bord#":"oui";
var chxombre = ('#ombre#' !='#'+'ombre#') ? "#ombre#":"oui";
var valeur = "#state#";
var intNum = parseInt(valeur);
var decNum = Math.abs(Math.round((valeur - intNum) * 10));
$('#intFDValue#id#').text(intNum);
if (decNum != 0) {
$('#decFDValue#id#').text('.'+decNum);
}
$('.boxFD#id#').css('background-color', '#'+chxcolor);
var LightenColor = function(color, percent) {
var num = parseInt(color,16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
B = (num >> 8 & 0x00FF) + amt,
G = (num & 0x0000FF) + amt;
return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
};
couleur = LightenColor(chxcolor, -30);
boxColor = LightenColor(chxcolor, -60);
valeur = '';
for (var iter = 1; iter < 99; iter++) {
couleur = LightenColor(couleur, 0.5);
valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
}
valeur = valeur + '#' + couleur +' 100px 100px';
if (chxbord != "non") {
$('.boxFD#id#').css('box-shadow', '#' +boxColor+' 4px 4px');
}
if (chxombre != "non") {
$('.ValueFD#id#').css('text-shadow', valeur);
$('.UniteFD#id#').css('text-shadow', valeur);
}
})
jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
</script>
</div>