Code : Tout sélectionner
<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<div class="centered">
<div class="tg-thermometer small" style="height: 120px;">
<div class="draw-a"></div>
<div class="draw-b"></div>
<div class="meter">
<div class="statistics">
<div class="percent percent-a"></div>
<div class="percent percent-c"></div>
<div class="percent percent-e"></div>
</div>
<div class="mercury">
<div class="percent-current"></div>
<div class="mask">
<div class="bg-color"></div>
</div>
</div>
</div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = (maxValue-minValue)/2;
var corrNegative = 0;
if(minValue < 0){
var corrNegative = minValue*-1;
var moyValue = Math.floor((minValue+maxValue)/2);
}
var maxvaleur = maxValue + corrNegative;
var valeurState = value + corrNegative;
var jauge = (valeurState*100/maxvaleur);
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
$('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
$('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');
$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
/* commentaire [data-cmd_id="#id#"]> */
[data-cmd_id="#id#"] .tg-thermometer {
width: 100px;
position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
height: calc(120px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
width: 32px;
height: 32px;
left: -6px;
bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
width: 14px;
height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
text-align: right;
position: absolute;
width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
width: 10px;
margin: auto;
left: 0;
right: 0;
height: calc(100% - 50px);
top: 12px;
position: absolute;
background-color: #d6d6d6;
border-radius: 10px 10px 0 0;
z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #F44336;
border-radius: 10px 10px 0 0;
background: linear-gradient(0deg, #f44336, #3f51b5);
transition: all .5s ease-in-out;
height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
position: absolute;
bottom: 0;
overflow: hidden;
width: 10px;
height: 100%;
border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
position: absolute;
width: 10px;
height: calc(200px - 57px);
background: linear-gradient(#F44336, #8BC34A, #2196F3);
// background: linear-gradient(#2196F3, #8BC34A, #F44336);
bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
position: absolute;
left: 0;
top: 4px;
transform: translateX(calc(-100% - 10px)) translateY(-60%);
background-color: #fff;
padding: 5px 10px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
border-radius: 2px;
font-weight: 500;
font-size: 1.5em;
color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
border-left: 8px solid white;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: "";
position: absolute;
right: 0;
transform: translateX(calc(100% - 2px));
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
border-left: 7px solid rgba(0, 0, 0, 0.2);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: "";
position: absolute;
right: 0;
transform: translateX(calc(100% - 0px));
top: 0;
bottom: 0;
margin: auto;
width: 0;
height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
background-color: #fff;
height: calc(100% - 20px);
width: 30px;
margin: auto;
position: relative;
border-radius: 20px 20px 0 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
width: 100%;
bottom: 0px;
left: 0;
position: absolute;
height: 50px;
background-color: #fff;
content: "";
z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
background-color: #fff;
left: -10px;
bottom: -20px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
position: absolute;
width: 50px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 50px;
z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 24px;
height: 24px;
background-color: #2196F3;
content: "";
border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
position: absolute;
left: 0;
right: 0;
width: 10px;
top: 0;
margin: auto;
height: 20px;
background-color: #2196F3;
content: "";
border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/** position: absolute !important; **/
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
//* width: 300px;
// height: 300px; **/
width: 100%; height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
position: absolute;
left: 0;
z-index: 1;
font-size: 1em;
top: 0;
height: 100%;
font-style: italic;
font-weight: 500;
// text-shadow: 1px 1px #fff;
}
</style>
</div>
https://codepen.io/interaminense/pen/RoKPOb