Bonjour
Je teste actuellement la mise à jour en v4.4.5, et je remets en ordre mon design. J’ai réussi à résoudre presque tous mes problèmes, mais je bute sur un widget code.
Sur la V4.3.21, le widget ressemble à ceci:
Et sur la 4.4.5, à ceci:
Le code est le suivant:
<div style="min-width:100px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<!-- <center><span class="cmdName" style="font-weight: bold;font-size : 0.8em;width: 65px;height: 17px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span></center>
-->
<!-- WIDGET tiré de ThermomètreIMG (qui n'existe plus) -->
<!-- Images 2020 de: https://github.com/Heliospeed/jeedom_widget_v4/ -->
<div style="text-align:center;">
<div id="thermometreDivIMG#id#" class="thermometre_div_img">
<span class="thermometre_img" id="thermometreIMG#id#"></span>
</div>
<div>
<span class="thermometre_state" id="thermometreState#id#">#state#</span>
<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
<!-- A activer si vous voulez avoir les statistiques
<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>
<span class="cmdName" style="font-weight: bold;color: #FFFFFF;font-size : 0.6em;width: 65px;height: 10px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span>
</div>
<!-- A activer pour voir derniere maj -->
<!-- <span class='tooltips pull-right'>#collectDate#</span> -->
<!-- -->
</div>
</div>
<script>
/* Attributs list :
- position : position of the icon you want : left or right, by default : left
- heightImage : height in pixel of image to show default is 90
- widthImage : width in pixel of image to show default is 90
- fontsizeState : state font size in px or em, default : 2em
- fontsizeUnite : unite font size in px or em, default : 1em
- displayState : display type allow to hide the state with none by example, by default : block
- oneLine : display State and Unite on the same line
*/
var imgHeight;
var imgWidth;
if (!isNaN(parseFloat("#heightImage#"))) {
imgHeight = "#heightImage#";
} else {
imgHeight = "40";
}
if (!isNaN(parseFloat("#widthImage#"))) {
imgWidth = "#widthImage#";
} else {
imgWidth = "12";
}
if ("#state#" <= 0) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer00.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 0 && "#state#" <= 5) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer01.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 5 && "#state#" <= 10) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer02.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 10 && "#state#" <= 13) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer03.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 13 && "#state#" <= 16) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer04.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 16 && "#state#" <= 18) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer05.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 18 && "#state#" <= 20) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer06.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 20 && "#state#" <= 22) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer07.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 22 && "#state#" <= 24) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer08.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 24 && "#state#" <= 26) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer09.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 26 && "#state#" <= 28) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer10.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 28 && "#state#" <= 34) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer11.png' class='thermometre_img' id='thermometre#id#'/>");
}
else {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer12.png' class='thermometre_img' id='thermometre#id#'/>");
}
if ("#position#" == "right") {
$("#thermometreDivIMG#id#.thermometre_div_img").css("float","right");
$("#thermometreIMG#id#.thermometre_img").css("margin-right","15px");
} else {
$("#thermometreDivIMG#id#.thermometre_div_img").css("float","left");
$("#thermometreIMG#id#.thermometre_img").css("margin-left","15px");
}
if (typeof "#fontsizeState#" != "undefined" && "#fontsizeState#" != "2em") {
$("#thermometreState#id#.thermometre_state").css("height","#fontsizeState#");
}
if (typeof "#fontsizeUnite#" != "undefined" && "#fontsizeUnite#" != "1em") {
$("thermometreUnite#id#.thermometre_unite").css("height","#fontsizeUnite#");
}
if (typeof "#displayState#" != "undefined" && "#displayState#" != "block") {
$("#thermometreState#id#.thermometre_state").css("display","#displayState#");
}
if (typeof "#oneLine#" != "undefined" && "#oneLine#" == "on") {
if ("#position#" == "right") {
//$("#thermometreState#id#.thermometre_state").css("margin-left","20px");
$("#thermometreUnite#id#.thermometre_unite").css("display","block");
$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
$("#thermometreUnite#id#.thermometre_unite").css("margin-right","85px");
} else {
$("#thermometreState#id#.thermometre_state").css("margin-right","20px");
$("#thermometreUnite#id#.thermometre_unite").css("display","block");
$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
$("#thermometreUnite#id#.thermometre_unite").css("margin-left","85px");
}
}
</script>
</div>
<style>
span.thermometre_img {
height: 80px;
}
span.thermometre_div_img {
margin-left: 3px;
position:relative;
height: 64px;
width: 62px;
float:left;
}
span.thermometre_state {
font-weight: bold;
font-size: 1,5em;
margin-top: 1px;
display: block;
color: #FFFFFF;
}
span.thermometre_unite {
font-size: 0.8em;
font-weight: bold;
margin-top: 5px;
top: 22px;
color: #FFFFFF;
}
</style>
Malgré tous mes efforts, je ne parviens pas à remettre le widget comme il était. J’ai vu qu’il y avait une nouvelle version de ce widget, qui donne ceci:
Avec ce code:
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#"
data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Name: cmd.info.numeric.thermometer.html
Jeedom Compatibility: v4.4.5
Version 2.0.2 - 2024-05-15
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content">
<div class="left"></div>
<div class="right">
<div class="valDetail">
<span class="value state"></span> <span class="unit"></span>
</div>
<div class="cmdStats #hide_history#">
<span title="{{Minimum}}" class="tooltips">Min : #minHistoryValue#</span>
<span title="{{Moyenne}}" class="tooltips">Moy : #averageHistoryValue#</span>
<span title="{{Maximum}}" class="tooltips">Max : #maxHistoryValue#</span>
<span class="tendance" title="{{Tendance}}" class="tooltips">Tendance : <i class="#tendance#"></i></span>
</div>
</div>
</div>
<div class="timeCmd label label-default #history#" data-type="info"></div>
<template>
<div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
</template>
<style>
div.cmd.cmd-widget[data-cmd_id="#id#"][data-type="info"][data-subtype="numeric"][data-template="tile"] .state {
font-size: 1.2em !important;
}
[data-cmd_id="#id#"] .cmd-widget {
width: 120px;
display: block !important;
}
[data-cmd_id="#id#"] .content {
display: block !important;
padding: 10px;
width: 120px;
height: 105px;
}
[data-cmd_id="#id#"] .left {
float: left;
}
[data-cmd_id="#id#"] .right {
text-align: left;
padding-left: 35px;
}
[data-cmd_id="#id#"] .valDetail {
padding-bottom: 2px;
}
[data-cmd_id="#id#"] .valDetail span.value {
font-size: 15px !important;
}
[data-cmd_id="#id#"] .cmdStats span {
display: block;
}
[data-cmd_id="#id#"] .tendance {
padding-top: 5px;
}
</style>
<script>
jeedom.cmd.addUpdateFunction('#id#', function (_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
cmd.querySelector('.content').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
if ('#time#' == 'duration' || '#time#' == 'date') {
jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
}
if (is_numeric(_options.value)) {
cmd.querySelector('.value').innerHTML = _options.display_value
cmd.querySelector('.unit').innerHTML = _options.unit
} else {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
}
if (_options.alertLevel == 'warning') {
cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
} else if (_options.alertLevel == 'danger') {
cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
}
let valeur = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
if (valeur <= 0) {
imgNumber = '00';
} else if (valeur > 0 && valeur <= 5) {
imgNumber = '01';
} else if (valeur > 5 && valeur <= 10) {
imgNumber = '02';
} else if (valeur > 10 && valeur <= 13) {
imgNumber = '03';
} else if (valeur > 13 && valeur <= 16) {
imgNumber = '04';
} else if (valeur > 16 && valeur <= 18) {
imgNumber = '05';
} else if (valeur > 18 && valeur <= 20) {
imgNumber = '06';
} else if (valeur > 20 && valeur <= 22) {
imgNumber = '07';
} else if (valeur > 22 && valeur <= 24) {
imgNumber = '08';
} else if (valeur > 24 && valeur <= 26) {
imgNumber = '09';
} else if (valeur > 26 && valeur <= 28) {
imgNumber = '10';
} else if (valeur > 28 && valeur <= 34) {
imgNumber = '11';
} else {
imgNumber = '12';
}
cmd.querySelector('.left').innerHTML = '<img src="data/img/thermometer' + imgNumber + '.png"></img>';
}
})
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>
</div>
Idem, je ne vois pas comment revenir à l’affichage que j’avais.
Si vous pouviez me donner un coup de main là dessus, ça serait super 
Merci d’avance.
INFOS:
Jeedom V4.4.5
VM Proxmox (pour tests)
