Salut à tous,
J’utilise beaucoup le widget round dont le code est compatible v4.4.x.
Il est fonctionnel, j’aimerais juste améliorer le visuel :
Est-ce que l’entre vous pourrait m’aider à corriger dans le code ci-dessous ?
Merci d’avance.
widget_round.html.txt (9,2 Ko)
Bonjour @dvb,
Pour que l’on puisse t’aider, il faudrait fournir tous les éléments nécessaire pour que le plugin fonctionne.
Personnelement, il me manque les images (png) ainsi que les polices (fonts)
Après je ne sais pas si les auteurs d’origine n’ont pas déjà fais ce travail, il faut peut-être leur demandé.
Je ne suis pas un expert mais je veux bien essayé de t’aider.
@Heliospeed
En effet, voici les éléments :
fonts.zip.txt (921,8 Ko)
cmd.info.numeric.Round_V4.zip.txt (876,8 Ko)
On voit que plusieurs personnes ont travaillé sur ce wiget, mais cela date un peu :
by @SALVIALF &Renaud adapté par Morzini
J’avais déjà lancé un appel sans obtenir de réponse. Je retente aujourd’hui, car il ne manque pas beaucoup pour que ce widget soit parfait …
merci pour les infos.
Après avoir appliqué le code avec les fonts et image, je visualise ça :
Y a t-il d’autre chose a paramètrer ?
Merci
EDIT : J’ai trouvé le paramètre optionnel « taille » avec la valeur par défaut 1 est en faite obligatoire avec la valeur 1.
EDIT 2 :
Peux-tu me donner tes paramètres car moi c’est centré.
Il semble donc que le code soit hors de cause.
Désolé, j’ai omis de te pousser mes paramètres.
La partie commande :
La partie tableau :
Et enfin mon custom.css :
J’ai essayé de bidouillé en ajoutant un div id « value_round » que j’ai essayé de centrer.
Chez moi ça ne centrait pas correctement avec une taille < 1. Après je ne maitrise pas les css. Je te conseille de faire une nouvelle version du widget avec mon code. Si ça ne marche pas essaye sans ajouter les css custom, et d’ajouter progressivement pour identifier ce qui pourrait bloquer.
Perso j’ai désactiver le cache des widgets pour voir les changements et être sur que mes motifs sont bien prises en comptes
<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################
********** Paramètres Optionnels ***********
12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
taille = taille * 90px*90px (1 | 90px*90px par défaut)
reflet = a&ffiche un reflet sur le widget
textshadow = Police Ombrée
fontcolor = Change la couleur de la police
########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="round_V4display" class="content-lg">
<img id="IMGround"/>
<div id="value_round">
<div id="int_round"></div>
<div id="dec_round"></div>
</div>
<div id="unite_round">#unite#</div>
</div>
<div class="cmdStats #hide_history#">
<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<span class="timeCmd label label-default" data-type="info"></span>
<script>
jeedom.cmd.update['#id#'] = function(_options){
let cmd = $('.cmd[data-cmd_id=#id#]');
let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
//Récupération des décimales
var signNum = Math.sign(val);
var intNum = parseInt(val);
var decNum = Math.abs(Math.round((val - intNum) * 10));
if (signNum == "-1" && intNum == "0"){
var intNum = "-0";
}
//console.log('intNum : '+intNum);
//Calcul du nombre de chiffres
var valeurChaineInt = intNum + "";
longueurint = valeurChaineInt.length;
if (longueurint > 3) {
if (decNum != 0) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
else if (longueurint > 5) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
}
function TypeCouleur(valeur){
var typeCouleur;
//console.log('Valeur : '+valeur);
if(/true|false/.test(valeur)){
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
typeCouleur = 'html';
}else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
typeCouleur = 'nom';
}else if(/[-+]?\d+:.+\&?/i.test(valeur)){
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
typeCouleur = 'array';
}else{
typeCouleur = 'inconnu';
}
return typeCouleur;
}
let valeur2 = '#couleur#';
var test = TypeCouleur(valeur2);
//console.log('Test : '+test);
if(test == 'objet'){
var arrayVal = valeur2.split('&'), cleVal;
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
para[cleVal[0]] = cleVal[1];
if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
couleur2 = para[cleVal[0]];
}
}
} else if (test == 'nom'){
couleur2 = "#couleur#";
} else {
couleur2 = "grey";
}
testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
fontcolor2 = "#fontcolor#";
if (testfontcolor == false) {
cmd.find('#int_round').css('color',fontcolor2);
cmd.find('#dec_round').css('color',fontcolor2);
cmd.find('#unite_round').css('color',fontcolor2);
//console.log('Font color2 : '+ fontcolor2);
}
testfontweight = ("#fontweight#" == '#'+'fontweight#');
fontweight2 = "#fontweight#";
if (testfontweight == false) {
cmd.find('#int_round').css('font-weight',fontweight2);
cmd.find('#dec_round').css('font-weight',fontweight2);
cmd.find('#unite_round').css('font-weight',fontweight2);
//console.log('Font color2 : '+ fontcolor2);
}
if( '#reflet#' == 'yes' ) {
if ( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow' ) {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
}
}
else {
if( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow') {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
}
}
tailleRound = '#taille#';
widthRound = Math.round ( 80*tailleRound );
heightRound = Math.round ( 80*tailleRound );
ecart = Math.abs(Math.round((80 - widthRound)/2));
if ( '#textshadow#' == 'yes' ) {
cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');
}
cmd.find('#IMGround').css('width',''+widthRound+'px');
cmd.find('#IMGround').css('min-height',''+heightRound+'px');
cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(29+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(30+(tailleRound-1)*2)+'px','right':''+(20+(tailleRound-1)*5)+'px'});
cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
if ( tailleRound < 1.0 ) {
cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
//cmd.find('#int_round').css({'font-size':'14px','top':'27px','right':'28px'});
//cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'14px'});
cmd.find('#value_round').css({'font-size':'14px','top':'27px'});
cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
}
cmd.find('#int_round').text(intNum);
cmd.find('#dec_round').text('. '+decNum);
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
}
else if ('#time#' == 'date') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
let time = "à "+t[3]+":"+t[4];
cmd.find('.timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let time = "à "+t[3]+":"+t[4]+":"+t[5];
cmd.find('.timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
@font-face {font-family: "appleberry";
font-family: stateFont;
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
font-weight:normal;font-style:normal;
}
@font-face {
font-family: stateFont2;
src: url('data/fonts/jennifer.ttf');
}
@font-face {
font-family: uniteFont;
src: url('data/fonts/erasdust.ttf');
}
#int_round {
font-family: stateFont;
/*position:absolute;*/
}
#dec_round {
font-family: stateFont;
/*position:absolute;*/
}
#value_round{
width: 100%;
position:absolute;
display: inline-flex;
align-items: center;
justify-content: center;
}
#unite_round {
font-family: uniteFont;
position:absolute;
width: 100%;
text-align: center;
z-index:2;
}
#round_V4display {
position:relative;
color:#F0F0F0;
}
</style>
</div>
Depuis Jeedom v4.4.x, je me suis forcé à utiliser tous mes widgets à l’échelle 1. Si cela se trouve cela va coller. Je vais tester, à suivre.
Bien vu pour gagner du temps 
Merci beaucoup pour toutes ces infos.
(*) Sur la version d’origine (c’est pour ça que j’ai bidouillé une autre version).
Bonjour @Heliospeed
J’ai testé ton code et les résultats ne sont pas cohérents : quelque fois c’est centré, d’autre fois non.
Ce n’est pas logique, il faut que je revérifie les paramètres de mes thermostats et le css des tableaux. Je vais faire de nouveaux tests et je te dirai…
Je viens de faire des tests complémentaires et je confirme une bizarrerie 
virtuel LABO → code initial
virtuel LABO copie 2 → ton code
Les deux virtuels sont identiques : mise en page, tableau, code CSS (à part le code du widget évidemment).
Affichage des deux codes dans un design → KO
Dès suppression du virtuel avec le code initial, celui avec ton code → OK :
C’est incroyable ! Il y a interaction entre les deux virtuels ???
J’avoue que là je sèche…
Bonsoir @Heliospeed
Je me suis remis aux tests, et j’ai enfin trouvé : plusieurs thermostats perturbaient l’affichage dès leur présence sur le design. J’ai donc dupliqué les perturbateurs, utilisé les copies, et supprimé les objets sources.
→ Maintenant que tous les objets sont « sains », ton code modifié assure un parfait centrage :
Avant :
Après :
Je ne comprends toujours pas comment des objets indépendants ont pu interférer avec d’autres…
Un dernier petit détail à régler. Penses-tu qu’il soit possible de mettre l’unité sur la même ligne que la valeur ? Si trop compliqué, oublie pas de souci.
Merci !
J’ai mis le div sur la même ligne mais j’arrive pas à le relever plus haut type exposant.
<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################
********** Paramètres Optionnels ***********
12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
taille = taille * 90px*90px (1 | 90px*90px par défaut)
reflet = a&ffiche un reflet sur le widget
textshadow = Police Ombrée
fontcolor = Change la couleur de la police
########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="round_V4display" class="content-lg">
<img id="IMGround"/>
<div id="value_round">
<div id="int_round"></div>
<div id="dec_round"></div>
<div id="unite_round">#unite#</div>
</div>
</div>
<div class="cmdStats #hide_history#">
<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<span class="timeCmd label label-default" data-type="info"></span>
<script>
jeedom.cmd.update['#id#'] = function(_options){
let cmd = $('.cmd[data-cmd_id=#id#]');
let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
//Récupération des décimales
var signNum = Math.sign(val);
var intNum = parseInt(val);
var decNum = Math.abs(Math.round((val - intNum) * 10));
if (signNum == "-1" && intNum == "0"){
var intNum = "-0";
}
//console.log('intNum : '+intNum);
//Calcul du nombre de chiffres
var valeurChaineInt = intNum + "";
longueurint = valeurChaineInt.length;
if (longueurint > 3) {
if (decNum != 0) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
else if (longueurint > 5) {
cmd.find('#int_round').css('font-size','15px');
cmd.find('#dec_round').css('font-size','10px');
}
}
function TypeCouleur(valeur){
var typeCouleur;
//console.log('Valeur : '+valeur);
if(/true|false/.test(valeur)){
typeCouleur = 'bool';
}else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
typeCouleur = 'html';
}else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
typeCouleur = 'rgb';
}else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
typeCouleur = 'nom';
}else if(/[-+]?\d+:.+\&?/i.test(valeur)){
typeCouleur = 'objet';
}else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
typeCouleur = 'array';
}else{
typeCouleur = 'inconnu';
}
return typeCouleur;
}
let valeur2 = '#couleur#';
var test = TypeCouleur(valeur2);
//console.log('Test : '+test);
if(test == 'objet'){
var arrayVal = valeur2.split('&'), cleVal;
para = new Object();
for(var cle in arrayVal){
cleVal = arrayVal[cle].split(':');
para[cleVal[0]] = cleVal[1];
if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
couleur2 = para[cleVal[0]];
}
}
} else if (test == 'nom'){
couleur2 = "#couleur#";
} else {
couleur2 = "grey";
}
testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
fontcolor2 = "#fontcolor#";
if (testfontcolor == false) {
cmd.find('#int_round').css('color',fontcolor2);
cmd.find('#dec_round').css('color',fontcolor2);
cmd.find('#unite_round').css('color',fontcolor2);
//console.log('Font color2 : '+ fontcolor2);
}
testfontweight = ("#fontweight#" == '#'+'fontweight#');
fontweight2 = "#fontweight#";
if (testfontweight == false) {
cmd.find('#int_round').css('font-weight',fontweight2);
cmd.find('#dec_round').css('font-weight',fontweight2);
cmd.find('#unite_round').css('font-weight',fontweight2);
//console.log('Font color2 : '+ fontcolor2);
}
if( '#reflet#' == 'yes' ) {
if ( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow' ) {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
}
}
else {
if( couleur2 == 'red' || couleur2 == 'blue' || couleur2 == 'lightblue' || couleur2 == 'orange' || couleur2 == 'black' || couleur2 == 'green' || couleur2 == 'purple' || couleur2 == 'brown' || couleur2 == 'pink' || couleur2 == 'sand' || couleur2 == 'slategrey' || couleur2 == 'yellow') {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
}
else {
cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
}
}
tailleRound = '#taille#';
widthRound = Math.round ( 80*tailleRound );
heightRound = Math.round ( 80*tailleRound );
ecart = Math.abs(Math.round((80 - widthRound)/2));
if ( '#textshadow#' == 'yes' ) {
cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');
cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');
}
cmd.find('#IMGround').css('width',''+widthRound+'px');
cmd.find('#IMGround').css('min-height',''+heightRound+'px');
cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(29+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(30+(tailleRound-1)*2)+'px','right':''+(20+(tailleRound-1)*5)+'px'});
cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
if ( tailleRound < 1.0 ) {
cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
//cmd.find('#int_round').css({'font-size':'14px','top':'27px','right':'28px'});
//cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'14px'});
cmd.find('#value_round').css({'font-size':'14px','top':'30px'});
cmd.find('#unite_round').css({'font-size':'10px','top':'30px'});
}
cmd.find('#int_round').text(intNum);
cmd.find('#dec_round').text('. '+decNum);
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
}
else if ('#time#' == 'date') {
let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
let time = "à "+t[3]+":"+t[4];
cmd.find('.timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
let date = new Date(_options.valueDate.replace(' ', 'T'));
let t = _options.valueDate.split(/[- :]/);
let time = "à "+t[3]+":"+t[4]+":"+t[5];
cmd.find('.timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
@font-face {font-family: "appleberry";
font-family: stateFont;
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
font-weight:normal;font-style:normal;
}
@font-face {
font-family: stateFont2;
src: url('data/fonts/jennifer.ttf');
}
@font-face {
font-family: uniteFont;
src: url('data/fonts/erasdust.ttf');
}
#int_round {
font-family: stateFont;
/*position:absolute;*/
}
#dec_round {
font-family: stateFont;
/*position:absolute;*/
}
#value_round{
width: 100%;
position:absolute;
display: inline-flex;
align-items: center;
justify-content: center;
}
#unite_round {
font-family: uniteFont;
/*position:absolute;
width: 100%;
text-align: center;*/
z-index:2;
}
#round_V4display {
position:relative;
color:#F0F0F0;
}
</style>
</div>
J’espère que ça pourra te dépanner.
Bonjour,
Je trouve ce widget sympa 
J’ai testé le mode couleur variable : -20:purple&0:lightblue&19:green&24:red
Mais ça ne fonctionne pas. J’ai bien le rouge au dessus de 24 mais pas d’image dans les autres cas…
Idem chez vous?
EDIT : Autoréponse >> Le lightblue n’existe pas en fichier. Sorry…
Silkarion
Je viens de tester mais cela ne fonctionne pas :
→ l’unité « °C » a disparu…
PS : si trop compliqué on oublie…
Etrange,
Je suis parti du dernier code proposé (+ modif de la font) et ça donne ça :
J’ai bien l’unité…
Silkarion
Oui étrange…
Peux-tu préciser « + modif de la fonte » stp ?
Je revérifierai de mon côté ensuite.
J’ai trouvé la raison de cette différence.
Le nouveau code fonctionne correctement avec un virtuel classique :
Moi je l’utilise avec les thermostats du plugin « boilerThermostat ».
Je viens de me rendre compte que ce dernier n’offre pas d’option unité.
Avec le code initial, °C apparaît en dessous :
Avec le nouveau code, l’unité a disparu :
@Heliospeed
La gestion des unités ne semble pas standard. Cela explique peut-être pourquoi ta v2 ne l’affiche plus ?
En plan B, peut-on ajouter en dur dans le code « °C » à droite de la température à afficher ? Je ne sais pas si c’est faisable et sans effet de bord sur autre chose …
Pour mettre en dur l’unité, il faut par exemple remplacer la ligne suivante :
par
<div id="unite_round">°C</div>
Merci → je teste çà ce soir …
@Heliospeed
Bon cela ne fonctionne pas non plus.
Entre ton code v2 et l’objet thermostat, il y a un truc qui coince côté position unité…