Bonjour,
Je rencontre un problème avec l’affichage des décimales dans le widget Température que j’ai légèrement modifié.
Lorsque la valeur de la décimale est supérieure à 95 (par exemple pour 20.98°C), il affiche 20.10°C au lieu de 20.9°C.
Merci pour cet excellent travail.
Alors dans l’ordre 
Pour le dot j’ai mis a jour le widget pour qu’il soit moins haut : 40px, j’ai cependant laisser la largeur pour ceux qui voudrais afficher le nom de la commande
Pour le widget température je penses que c’est un peu le même soucis il doit être trop haut si un bouton est sur la tuile. je vois deux solutions, soit diminuer aussi ça taille, mais la mon côté esthétique vas crier ou alors passer dans un mode de presentation tableau pour cette tuile ou tu peux fixer la hauteur de chaque cellule. Mais attention pour cette deuxième solution il faut attendre, mes test montrer que dans ce mode j’ai un bug d’affichage de ce type :
Et pour la batterie oui malheureusement je pensais que récupérer l’info fournie par le code suffisait mais non l’information semble être constamment à none et malgré les explications qu’on ma donné hier je n’ai pas encore trouvé la solution. Donc la je viens de faire une mise à jour en utilisant un bornage en dure, <5% alerte, entre 5 et 15 warning et sinon tout va bien voila en attendant de trouver une solution pour l’utilisation des valeurs définies
Je me suis permis de "fusionner " tout les widget au format json en un seul widget code.
Vous trouverez ça sur le github encore une fois j’ai fait des tests en fonction du matériel que je possède qui n’est pas encore énorme, si vous constaté des effets secondaires n’hesitez à me le signaler
C’est dû au code suivant
// Récupération des valeurs
var valeur = _options.display_value;
// Séparation des entier et décimal
var entier = Math.trunc(valeur);
var decimal = Math.abs(Math.round(valeur * 10 - entier * 10));
Le template HygroThermographe du core qui souffrait du même problème l’a résolu comme cela:
var valeur = parseFloat(_options.display_value).toFixed(1)
var entier = valeur.split('.')[0]
var decimal = valeur.split('.')[1]
Voir: Widget hygrothermographe affichage erroné de la température
Oui le round n’est pas optimisé, j’ai modifier le code pour que ca resorte mieux sans arrondi avec un max de 2 chiffre après la virgule, mise a jour dispo sur github
J’ai a peu de chose fait pareil 
merci beaucoup
En plus compliqué 
Oui bon ça va…
Voila j’ai simplifié
Petite bataille du week end la mise en forme, merci @Domotech pour les conseilles 
J’ai constaté et certain d’entre vous également que lorsque l’on met des virtuels ou des tuiles en disposition Tableau on avait quelque soucis d’afficher
Donc petit dimanche après midi a faire en sorte que ça se passe mieux
Donc le widget batterie à été mis à jour ainsi que le widget température. J’ai pris le parti de mettre l’unité en exposant de la valeur entière de la température
Comme d’habitude je vous laisse me faire un retour (n’oubliez pas les captures d’écran au besoin)
Alors j’ai fait une mise à jour du widget température, j’ai augmenter en bas la marge pour eviter du chevauchement, je ne sais pas si elle sera suffisante pour toi
Bonsoir,
Merci pour le partage.
J’aime bcp la « led » , j’en ai fait 2 versions avec une fréquence de clignotement différente.
En revanche pour la température , j’ai un problème , les chiffres après la virgule ne sont pas dans le cadre …
En tout cas , c’est du beau boulot 
Bonjour @Tarlak ,
Merci pour les widgets.
Sur le température j’ai le même souci que @pj66 . Je me demandais ce que j’avais raté:
J’ai mis opacity: 0.3; pour vous montrer les textes en bas.
La bulle d’aide est sur 1 seule ligne. En v4 les bulles sont sur 2 lignes avec un texte différent du votre.
Il manque les statistiques en bas du widget.
J’ai vu d’où venait le soucis
Voici le code normalement corrigé. On attend vos retours 
<div style="margin:auto; padding:0px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#"
data-cmd_uid="#uid#">
<div class="icone#uid# box_haut" style="z-index:1">
<div class="value-entier#id#"></div><div class="unite#id#">#unite#</div>
<div class="value-decimal#id#"></div>
<!--<div class="unite#id#">#unite#</div>-->
</div>
<div style="z-index:2;">
<div class="NomCmd#id# box_bas#id#">#name_display#</div>
</div>
<style>
/* Définition de variable CSS contenant les valeurs des couleurs) */
:root {
--bleu_clair: #00beff;
--bleu_fonce: #2989db;
--jaune: #f6ff00;
--orange_clair: #ffaa00;
--orange_moyen: #ff5a00;
--orange_fonce: #ff7300;
--rouge: #da3037;
--vert_fonce: #829f25;
--violet: #dc00ff;
--noir: #000000;
--gris: #787878;
--blanc: #ffffff;
}
/* class css permetant de faire une box arrondie sur les angles supérieur gauche et droit */
div.box_haut {
display:flex;
padding: 0px;
width: 85px;
height: 70px;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
background-color: var(--gris) !important;
}
[data-theme="core2019_Dark"] .box_haut {
display:flex;
margin: 0px;
padding: 0px;
width: 85px;
height: 70px;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
background-color: transparent !important;
}
/* class css permetant de faire une box arrondie sur les angles inférieur gauche et droit */
div.box_bas#id# {
padding: 0px;
margin: 0px;
width: 85px;
height: 25px;
border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-webkit-border-radius: 0px 0px 8px 8px;
}
/************ Définition de class de couleur ************/
/* chaque class appel la variable de couleur associée */
.bleu_clair {
background: var(--bleu_clair);
border: 2px solid var(--bleu_clair);
}
.bleu_fonce {
background: var(--bleu_fonce);
border: 2px var(--bleu_fonce);
}
.jaune {
background: var(--jaune);
border: 2px solid var(--jaune);
}
.orange_clair {
background: var(--orange_clair);
border: 2px solid var(--orange_clair);
}
.orange_moyen {
background: var(--orange_moyen);
border: 2px solid var(--orange_moyen);
}
.orange_fonce {
background: var(--orange_fonce);
border: 2px solid var(--orange_fonce);
}
.rouge {
background: var(--rouge);
border: 2px solid var(--rouge);
}
.vert_fonce {
background: var(--vert_fonce);
border: 2px solid var(--vert_fonce);
}
.violet {
background: var(--violet);
border: 2px solid var(--violet);
}
.noir {
background: var(--noir);
border: 2px solid var(--noir);
}
.gris {
background: var(--gris);
border: 2px solid var(--gris);
}
/* class css pour le txt dans le cadre inférieur (Température) */
.txt_noir {
color: var(--noir);
}
.txt_blanc {
color: var(--blanc);
}
/****** Fin de déclaration des class de couleur ******/
div.value-entier#id# {
margin: 24px 0 0 0;
font-size: 34px;
font-weight: bold;
width: 55px;
height: 30px;
z-index: 2;
letter-spacing: 0px;
text-align:right;
}
div.value-decimal#id# {
margin: 32px 0 0 0;
font-size: 12px;
font-weight: bold;
height: 25px;
z-index: 5;
letter-spacing: 0px;
}
div.unite#id# {
margin:8px 0 0 50px;
font-size: 12px;
font-weight: bold;
position: absolute;
width: 25px;
height: 10px;
z-index: 8;
letter-spacing: 0px;
text-align:left;
}
div.NomCmd#id# {
padding-top:2px;
font-size: 1em;
font-weight: bold;
position: absolute;
vertical-align: middle;
top: 82%;
left: 0%;
z-index: 2;
width:85px;
text-align: center;
}
[data-theme="core2019_Dark"] .NomCmd#id# {
padding-top:2px;
font-size: 1em;
font-weight: bold;
position: absolute;
vertical-align: middle;
top: 82%;
left: 0%;
z-index: 2;
width:85px;
text-align: center;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
// Récupération des valeurs
var valeur = _options.display_value;
// Séparation des entier et décimal
var entier = Math.trunc(valeur);
//Simplification merci @jpty
var valeur = parseFloat(_options.display_value).toFixed(2)
var entier = valeur.split('.')[0]
var decimal = valeur.split('.')[1]
// Regle d'affichage des decimaux suivant le valeur a afficher
if (entier == 1) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:8px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("." + decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-10px;');
} else if (entier == -1) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:12px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("." + decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-15px;');
} else if (valeur < 0 && valeur > -10) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:14px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("." + decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-16px;');
} else if (valeur <= -10 && valeur > -100) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:10px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("." + decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-30px;');
} else if (valeur >= 0 && valeur < 10) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text('0'+entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:13px;');
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("." + decimal);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').attr('style', 'right:-10px;');
} else if (valeur >= 100) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:0px;');
} else if (valeur <= -100) {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').attr('style', 'right:0px; font-size:35px;');
} else {
$('.cmd[data-cmd_uid=#uid#] .value-entier#id#').text(entier);
$('.cmd[data-cmd_uid=#uid#] .value-decimal#id#').text("." + decimal);
}
// Gestion des couleurs
//var srcImg = 'data/customTemplates/dashboard/cmd.info.numeric.TempDyna/fonds/mich0111/';
if (valeur < 0) {
// Modifiction de la couleur du cadre de la box supérieur en fonction de la temperature
$('.icone#uid#').css("border", "2px solid var(--bleu_clair)");
// Modification de la couleur du texte de la témpérature
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--bleu_clair)");
// Modification de la couleur box inférieur en fonction de la température
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("bleu_clair txt_noir");
} else if (valeur >= 0 && valeur < 5) {
$('.icone#uid#').css("border", "2px solid var(--bleu_fonce)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--bleu_fonce)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("bleu_fonce txt_blanc");
} else if (valeur >= 5 && valeur < 10) {
$('.icone#uid#').css("border", "2px solid var(--vert_fonce)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--vert_fonce)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("vert_fonce txt_blanc");
} else if (valeur >= 10 && valeur < 15) {
$('.icone#uid#').css("border", "2px solid var(--jaune)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--jaune)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("jaune txt_noir");
} else if (valeur >= 15 && valeur < 20) {
$('.icone#uid#').css("border", "2px solid var(--orange_clair)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--orange_clair)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("orange_clair txt_blanc");
} else if (valeur >= 20 && valeur < 25) {
$('.icone#uid#').css("border", "2px solid var(--orange_moyen)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--orange_moyen)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("orange_moyen txt_blanc");
} else if (valeur >= 25 && valeur < 30) {
$('.icone#uid#').css("border", "2px solid var(--orange_fonce)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--orange_fonce)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("orange_fonce txt_blanc");
} else if (valeur >= 30 && valeur < 35) {
$('.icone#uid#').css("border", "2px solid var(--rouge)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--rouge)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("rouge txt_blanc");
} else if (valeur >= 35 && valeur < 40) {
$('.icone#uid#').css("border", "2px solid var(--violet)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--violet)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("violet txt_blanc");
} else if (valeur >= 40 && valeur < 45) {
$('.icone#uid#').css("border", "2px solid var(--gris)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--gris)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("gris txt_blanc");
} else if (valeur >= 45) {
$('.icone#uid#').css("border", "2px solid var(--noir)");
$(".value-entier#id#,.value-decimal#id#,.unite#id#").css("color", "var(--noir)");
$(".NomCmd#id#").removeClass("bleu_clair bleu_fonce jaune orange_clair orange_moyen orange_fonce rouge vert_fonce violet noir gris txt_noir txt_blanc");
$(".NomCmd#id#").addClass("noir txt_blanc");
}
$('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
}
jeedom.cmd.update['#id#']({
display_value: '#state#',
valueDate: '#valueDate#',
collectDate: '#collectDate#',
alertLevel: '#alertLevel#'
});
</script>
</div>
Bonjour,
merci pour le partage et suivi .
Il semble toujours avoir un soucis d’affichage avec le code @Domotech (message 54)
…merci
Je m’étais trompé dans la première modif et ai modifié à nouveau le code.
Peut être que tu as pris avant la modif.
Peux tu réessayer avec ce code?
Chez moi c’est fonctionnel
Juste une proposition a la lecture de ton code sur la selection entier et valeur tu a énormément de elseif …
Ce serait pas plus élégant avec :
switch (expr) {
case
Merci @olive
Mais ça c’est plus destiné à @Tarlak lol
Moi je touche que au CSS car le reste c’est du chinois pour moi lol
oui, cela est ok avec la dernière modif. , Merci !
Ludis