Merci pour ton aide j’ai finalement réglé mon pb … les images étaient des liens html 
Je cherche maintenant les paramètres à passer pour gérer la taille et la position du widget et d’autres éléments si possible.
La doc du widget donne une erreur 404
Merci de ton aide
Bonjour a tous, suite a la mise a jour jeedom je n’arrive pas a régler l’affichage du thermometre
Pourriez vous m’aider ?
Bonjour Christophe78,
Peux-tu nous dire quelle est la version du thermomètre que tu utilises ?
Pour moi la version du 06/01/2023 fonctionne correctement en version 4.4.
Oui j’utilise cette version.
La prévisualisation est correct :
mais dans le design ca coince, j’ai l’impression que c’est lié a la largeur par le nombre de digit
Je n’avais jamais testé dans un design.
Peux-tu essayer cette version (je dois m’absenté, j’ai bidouiller qqch)
<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#">
<!--
Jeedom Compatibility: v4.4.3
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.thermometer.html
Comment: A thermometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2024-04-19
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : https://github.com/ajja17/thermometreIMG/tree/master/cmd.info.numeric.thermometreIMG2
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left img">
<span id="thermo#id#"></span>
</div>
<div class="pull-right val">
<div>
<span class="float-end state currentValue"></span>
<span class="float-end unitValue">#unite#</span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
function getJeedomVersion(){
return $('#bt_jeedomAbout').text().split(' ')[2];
}
function isEarlierVersion(compareVersion){
var jeedomVesion = getJeedomVersion();
if (jeedomVesion === compareVersion) {
return true;
}
var tabJeedomVesion = jeedomVesion.split(".");
var tabCompareVersion = compareVersion.split(".");
var minLen = Math.min(tabJeedomVesion.length, tabCompareVersion.length);
for (var i = 0; i < minLen; i++) {
if (parseInt(tabJeedomVesion[i]) > parseInt(tabCompareVersion[i])) {
return true;
}
if (parseInt(tabJeedomVesion[i]) < parseInt(tabCompareVersion[i])) {
return false;
}
}
return true;
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var temperature = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 80 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (temperature <=0){
imgNumber = '00';
}else if (temperature > 0 && temperature <= 5) {
imgNumber = '01';
}else if (temperature > 5 && temperature <= 10) {
imgNumber = '02';
}else if (temperature > 10 && temperature <= 13) {
imgNumber = '03';
}else if (temperature > 13 && temperature <= 16) {
imgNumber = '04';
}else if (temperature > 16 && temperature <= 18) {
imgNumber = '05';
}else if (temperature > 18 && temperature <= 20) {
imgNumber = '06';
}else if (temperature > 20 && temperature <= 22) {
imgNumber = '07';
}else if (temperature > 22 && temperature <= 24) {
imgNumber = '08';
}else if (temperature > 24 && temperature <= 26) {
imgNumber = '09';
}else if (temperature > 26 && temperature <= 28) {
imgNumber = '10';
}else if (temperature > 28 && temperature <= 34) {
imgNumber = '11';
}else{
imgNumber = '12';
}
cmd.find('#thermo#id#').empty().append('<img class="thermoImg" src="data/img/thermometer' + imgNumber + '.png"></img>');
cmd.find('.thermoImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;display: table-cell !important')
if (hauteurPx>imgMinHeight){
pos = (hauteurPx - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(temperature);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
var cssCurrentValueUnit = 'position: relative !important;top: ' + (positionTop) + 'px !important;';
var widthValue = 58;
if ('#version#' === 'dashboard') {
if (!isEarlierVersion('4.4.0')){
var cssCurrentValueUnit = cssCurrentValue;
var widthValue = 59;
}
}
cmd.find('.unitValue').css('cssText', cssCurrentValueUnit );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'word-break:normal;font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', widthValue + 'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Si ça fonctionne je le pousserai dans GitHub
Merci
Genial, ca fonctionne, merci beaucoup.
Merci pour ton retour.
Bonjour à tous,
Tout d’abord merci beaucoup pour la màj du script du thermomètre.
Est-il possible d’avoir la même chose pour l’hygrométrie svp ?
PS: Y’a tout de même un problème d’affichage si largeurDashboardPx est différent de 20px, mais j’utilise la taille du widget (zoom) dans le design en attendant 
en restant à 20px.
Bonjour,
Il me semblait qu’il n’y avait pas le problème avec l’hygrométrie lorsque j’ai testé (c’est pour cela que je n’ai pas fait d’actualisation).
Peux-tu me faire une capture du problème. C’est sur la version Dashboard et Design ?
Merci
Chez moi avec la version du 2023-01-06 avec le Core v4.4.3
Dashboard :
Design :
Dashboard :
Même symptôme que le thermomètre avant que t’ai corrigé.
Design :
Idem
Merci pour ton retour,
Je n’arrive pas a reproduire ton cas, j’ai donc fais la même modification que l’autre widget.
Je viens de publié la même modification. Dis moi si c’est bon
Pour info, je regarde pour faire une nouvelle version des 2 widgets thermomètre et hygromètre plus simple uniquement compatible avec la dernière version du Core Jeedom 4.4.x.
<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#">
<!--
Jeedom Compatibility: v4.4.3
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.hygrometer.html
Comment: An hygrometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2024-04-25
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left img">
<span id="hygro#id#"></span>
</div>
<div class="pull-right val">
<div>
<span class="float-end state currentValue"></span>
<span class="float-end unitValue">#unite#</span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
function getJeedomVersion(){
return $('#bt_jeedomAbout').text().split(' ')[2];
}
function isEarlierVersion(compareVersion){
var jeedomVesion = getJeedomVersion();
if (jeedomVesion === compareVersion) {
return true;
}
var tabJeedomVesion = jeedomVesion.split(".");
var tabCompareVersion = compareVersion.split(".");
var minLen = Math.min(tabJeedomVesion.length, tabCompareVersion.length);
for (var i = 0; i < minLen; i++) {
if (parseInt(tabJeedomVesion[i]) > parseInt(tabCompareVersion[i])) {
return true;
}
if (parseInt(tabJeedomVesion[i]) < parseInt(tabCompareVersion[i])) {
return false;
}
}
return true;
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 80 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 10){
imgNumber = '00';
}else if (taux >= 10 && taux < 20) {
imgNumber = '01';
}else if (taux >= 20 && taux < 30) {
imgNumber = '02';
}else if (taux >= 30 && taux < 40) {
imgNumber = '03';
}else if (taux >= 40 && taux < 50) {
imgNumber = '04';
}else if (taux >= 50 && taux < 60) {
imgNumber = '05';
}else if (taux >= 60 && taux < 70) {
imgNumber = '06';
}else if (taux >= 70 && taux < 80) {
imgNumber = '07';
}else if (taux >= 80 && taux < 90) {
imgNumber = '08';
}else if (taux >= 90 && taux < 100) {
imgNumber = '09';
}else{
imgNumber = '10';
}
cmd.find('#hygro#id#').empty().append('<img class="hygroImg" src="data/img/hygrometer' + imgNumber + '.png"></img>');
cmd.find('.hygroImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;display: table-cell !important')
if (hauteurPx>imgMinHeight){
pos = (hauteurPx - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(taux);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
var cssCurrentValueUnit = 'position: relative !important;top: ' + (positionTop) + 'px !important;';
var widthValue = 58;
if ('#version#' === 'dashboard') {
if (!isEarlierVersion('4.4.0')){
var cssCurrentValueUnit = cssCurrentValue;
var widthValue = 59;
}
}
cmd.find('.unitValue').css('cssText', cssCurrentValueUnit );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'word-break:normal;font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', widthValue + 'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Bonjour Heliospeed,
C’est tout bon, merci beaucoup !!!
Je te souhaite une bonne journée et bonne continuation.
Et merci pour le travail que vous faîtes et de votre rapidité de réponse.
Novice que je suis, je prends des heures et des heures à reprendre mes design depuis la màj en 4.4, et j’abandonnerai presque car cela dépasse mes compétences, et quand je vois certaines réponses déroutantes, parce que nous sommes encore un certain nombre de novices qui ose demander de l’aide, malgré nos recherches antérieures.
Donc merci pour ton professionnalisme et humanisme.
Bonsoir,
Je viens de refaire 2 nouvelles versions sans ajouter de paramètres optionnels. Du coup pour le moment par défaut on est sur la taille des images (29px) de large.
Pouvez-vous me donner vos avis avant que je ne remplace la version ? Je suis reparti d’un widget core v4.4 pour m’assurer que ça sera pérenne dans le temps. J’ai essayé de rajouter le moins de chose possible pour ne pas alourdir l’interface.
Je suis pas un expert js ou ces, je pense avoir trouvé une combinaison qui fonctionne aussi avec les mobile.
Dashboard :
Design :
Mobile :
Code Thermomètre
<div class="cmd cmd-widget cmd-widget-#uid# #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 - 2024-04-26
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content content-#uid#">
<div class="left-#uid#"></div>
<div class="right-#uid#">
<div class="valDetail-#uid#">
<span class="value state"></span> <span class="unit"></span>
</div>
<div class="cmdStats cmdStats-#uid# #hide_history#">
<span title="{{Minimum}}" class="tooltips">Min : #minHistoryValue#</span>
<span title="{{Moyenne}}" class="tooltips">Max : #averageHistoryValue#</span>
<span title="{{Maximum}}" class="tooltips">Moy : #maxHistoryValue#</span>
<span class="tendance-#uid#" 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.cmd-widget-#uid#[data-type="info"][data-subtype="numeric"][data-template="tile"] .state {
font-size: 1.2em !important;
}
.cmd-widget-#uid# {
width: 120px;
display: block !important;
}
.content-#uid# {
display: block !important;
padding: 10px;
width: 120px;
height: 83px;
}
.left-#uid# {
float: left;
}
.right-#uid# {
text-align: left;
padding-left: 35px;
}
.valDetail-#uid# {
padding-bottom: 2px;
}
.valDetail-#uid# > span.value {
font-size: 15px !important;
}
.cmdStats-#uid# > span {
display: block;
}
.tendance-#uid# {
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-#uid#').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>
Code Hygromètre
<div class="cmd cmd-widget cmd-widget-#uid# #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.hygrometer.html
Jeedom Compatibility: v4.4.5
Version 2.0 - 2024-04-26
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content content-#uid#">
<div class="left-#uid#"></div>
<div class="right-#uid#">
<div class="valDetail-#uid#">
<span class="value state"></span> <span class="unit"></span>
</div>
<div class="cmdStats cmdStats-#uid# #hide_history#">
<span title="{{Minimum}}" class="tooltips">Min : #minHistoryValue#</span>
<span title="{{Moyenne}}" class="tooltips">Max : #averageHistoryValue#</span>
<span title="{{Maximum}}" class="tooltips">Moy : #maxHistoryValue#</span>
<span class="tendance-#uid#" 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.cmd-widget-#uid#[data-type="info"][data-subtype="numeric"][data-template="tile"] .state {
font-size: 1.2em !important;
}
.cmd-widget-#uid# {
width: 120px;
display: block !important;
}
.content-#uid# {
display: block !important;
padding: 10px;
width: 120px;
height: 83px;
}
.left-#uid# {
float: left;
}
.right-#uid# {
text-align: left;
padding-left: 35px;
}
.valDetail-#uid# {
padding-bottom: 2px;
}
.valDetail-#uid# > span.value {
font-size: 15px !important;
}
.cmdStats-#uid# > span {
display: block;
}
.tendance-#uid# {
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 && valeur < 10) {
imgNumber = '00';
} else if (valeur >= 10 && valeur < 20) {
imgNumber = '01';
} else if (valeur >= 20 && valeur < 30) {
imgNumber = '02';
} else if (valeur >= 30 && valeur < 40) {
imgNumber = '03';
} else if (valeur >= 40 && valeur < 50) {
imgNumber = '04';
} else if (valeur >= 50 && valeur < 60) {
imgNumber = '05';
} else if (valeur >= 60 && valeur < 70) {
imgNumber = '06';
} else if (valeur >= 70 && valeur < 80) {
imgNumber = '07';
} else if (valeur >= 80 && valeur < 90) {
imgNumber = '08';
} else if (valeur >= 90 && valeur < 100) {
imgNumber = '09';
} else {
imgNumber = '10';
}
cmd.querySelector('.left-#uid#').innerHTML = '<img src="data/img/hygrometer' + imgNumber + '.png"></img>';
}
})
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>
</div>
Bonjour
Merci pour ton partage mais j’ai fait un copié collé de ton code, mis le paramètre de la taille à 29 pour augmenter la taille de la goutte. Mais le texte est maintenant décalé
Je suis en jeedom 4.4.5
Y a-t-il un paramètre à modifier pour aligner le pourcentage vers le haut
Merci pour ta réponse
Je ne connais pas le widget de la goutte, sais-tu ou je peux trouver le code pour regarder.
Après je suis pas un expert, je bidouille pour essayer d’arriver à mes fins
C’est ton code qui pointe vers les PNG 
Bonjour,
Je viens de vérifier à l’instant
Nouvelle version => Thermomètre
Ancienne version => Hygromètre
Je valide 
Je n’ai pas ces PNG de gouttes, peux-tu m’en envoyer juste un exemple dans cette discussion que je regarde ou me donner la taille de l’image. Ceux que j’avais (qui ressemble a un thermomètre font 29 pixels de large et me dit que si la taille n’est pas la même ça risque de tout décaller.
<div style="min-width:150px;min-height:96px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
<!-- Info Widget
Widget de : JAG
Widget pour le Core : V4
Mise à jour : JAG 20201220 => Update suite changement localisation image
-->
<div class="title #hide_name#" style="width:100%">
<div class="cmdName" style="#hideCmdName#">#name_display#</div>
</div>
<div style="position:relative;width:45%;height:96px;float: left;">
<div style="width: 46px;height: 80px; position: absolute; z-index: 1; background: url('data/img/humidite/hu_goutteeau.png') no-repeat;background-size:46px 80px;" id="recipient#id#"></div>
<div style="width: 46px;height: 80px; position: absolute; background: url('data/img/humidite/hu_goutteeaumask.png') no-repeat;background-size:46px 80px;" id="recipientmask#id#"></div>
</div>
<div style="display:inline-block;width:55%">
<div class="value">
<span class="value#id# timeCmd label label-default value Stats#id#"></span>
<!-- Historique -->
<div class="cmdStats #hide_history# Stats_hist#id#" style="#displayHistory# text-align: left;">
<span title="Min" style="float:left;">Min : #minHistoryValue# #unite#</span><br />
<span title="Moy" style="float:left;">Moy : #averageHistoryValue# #unite#</span><br />
<span title="Max" style="float:left;">Max : #maxHistoryValue# #unite#</span><br />
<i class="#tendance#"></i>
</div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
// Variable Taille Texte et marge
var srcFontSize = ('#font_size#' != '#' + 'font_size#') ? "#font_size#" : "11px";
var srcMargSize = '#marge_size#';
var srcFontSizeStat = ('#font_size_hist#' != '#' + 'font_size_hist#') ? "#font_size_hist#" : "10px";
// Variable Taille Texte
var State = parseFloat(_options.display_value);
var Statemax = #maxValue#;
var height = parseInt(80 * (State / Statemax));
//Update
if (height > 80) {
height = 80;
}
topPosition = 80 - height;
$('#recipient#id#').css({
'height': height + 'px',
'top': topPosition + 'px',
'background-position': '0 -' + topPosition + 'px'
});
$('.cmd[data-cmd_id=#id#] .value#id#').empty().append(_options.display_value + ' ' + '#unite#');
$('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
//Taille Texte et marge pour la valeur
$('.cmd[data-cmd_id=#id#] .Stats#id#').css('font-size', srcFontSize);
$('.cmd[data-cmd_id=#id#] .Stats#id#').css('line-height', srcMargSize);
//Taille Texte pour l'historique
$('.cmd[data-cmd_id=#id#] .Stats_hist#id#').css('font-size', srcFontSizeStat);
}
jeedom.cmd.update['#id#']({
display_value: '#state#',
valueDate: '#valueDate#',
collectDate: '#collectDate#',
alertLevel: '#alertLevel#'
});
</script>
</div>