Probleme d'affichage widget gaugeimg sous Jeedom 4.4.x

[Pingu]

Hello,

Depuis le passage en 4.4.x (directement en 4.4.5 pour ma part depuis une version 4.3.23 (je crois)), j’ai un souci d’affichage du widget GaugeIMG de @Salvialf , en effet celui-ci se déforme si le nom de l’équipement est trop long.

Cf : avec un nom d’objet court :

Et avec un nom « trop » long :

Je ne sait pas trop comment fixer ce point pour rendre l’image de la Gauge fixe, quelque soit la taille du nom de la commande. Si je masque le nom de l’équipement, l’affichage redevient correct. Mais je n’ai pas envie de m’amuser a créer 36 zones de texte pour réécrire au dessus de la Gauge le nom de la commande ça n’a pas trop de sens

Je vois que l’affichage du nom ce trouve ici dans le fichier : cmd.info.numeric.gaugeIMG.html :

  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>

Mais mes compétences en html s’arrête ici…

Si quelqu’un a une idée !

merci,

Très belle journée.

[Furaxworld]

Salut,

Voici avec la modification à faire ici via l’éditeur de fichiers

html/plugins/pimpJeedom/core/template/dashboard/cmd.info.numeric.GaugeIMG.html

<div style="margin:5px 2px 5px 2px;" 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#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div id="gaugeIMGdisplay" class="content-lg">
	<img id="IMGgauge"/>
    <span id="minvalue"></span>
    <span id="quartvalue"></span>
    <span id="midvalue"></span>
    <span id="troisquartvalue"></span>
  	<span id="maxvalue"></span>
    <div id="state_gauge"></div>
    <div id="unite_gauge">#unite#</div>
	<div id="indicator"></div>
  </div>
  <div class="cmdStats #hide_history#" style="margin-top:2px;">
	<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" data-type="info"></span>
<script>
    jeedom.cmd.update['#id#'] = function(_options){
    let cmd = $('.cmd[data-cmd_uid=#uid#]');
  	let valMin = is_numeric('#mini#') ? parseFloat('#mini#'):parseFloat('#minValue#');
  	let valMax = is_numeric('#maxi#') ? parseFloat('#maxi#'):parseFloat('#maxValue#');
    let midvalue = Math.round((valMax + valMin)*50)/100;
    let quartvalue = Math.round((valMin + midvalue)*50)/100;
    let troisquartvalue = Math.round((midvalue + valMax)*50)/100;
    let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
    let plage = valMax - valMin;
    let angle = '';
  	let colJauge = ('#gauge#' !='#'+'gauge#') ? "#gauge#":"blue";
  	let colAiguille = ('#arrow#' !='#'+'arrow#') ? "#arrow#":"blue";
    let changeColor = ('#change#' !='#'+'change#') ? '#change#':false;
    ('#CSS-time#' != '#'+'CSS-time#' && '#CSS-time#' != ' ') ? cmd.find('.timeCmd').attr('style','#CSS-time#') : '';

   if (changeColor != false) {
   	let arrChange = changeColor.split(',');
     for (let i=0; i < arrChange.length; i++) {
      let level = arrChange[i].split(':');
      let palier = level[0].split('_');
      let palierMin = parseFloat(palier[0]);
      let palierMax = parseFloat(palier[1]);
      let palierColor = level[1];
    	if (val >= palierMin && val < palierMax) {
       	colJauge = palierColor;
		}
     }
    }

    if (plage == 0) angle = -70;
    else if (valMin < valMax)  {
      if (val < valMin) angle = -10;
      else if (val > valMax) angle = 232;
      else angle = (val - valMin) * 225 / plage;
    } else {
      if (val < valMax) angle = 232;
      else if (val > valMin) angle = -10;
      else angle = (val - valMin) * 225 / plage;
    }

    cmd.find('#minvalue').text(valMin);
    cmd.find('#midvalue').text(midvalue);
    cmd.find('#quartvalue').text(quartvalue);
    cmd.find('#troisquartvalue').text(troisquartvalue);
    cmd.find('#maxvalue').text(valMax);
    cmd.find('#IMGgauge').attr('src','plugins/pimpJeedom/core/template/dashboard/cmd.info.numeric.GaugeIMG/fond_'+colJauge+'.png');
    cmd.find('#indicator').css({'background':'url(plugins/pimpJeedom/core/template/dashboard/cmd.info.numeric.GaugeIMG/center_'+colAiguille+'.png) center','-webkit-transform':'rotate('+angle+'deg)','-moz-transform':'rotate('+angle+'deg)','-ms-transform':'rotate('+angle+'deg)','-o-transform':'rotate('+angle+'deg)','transform':'rotate('+angle+'deg)'});
    cmd.find('#state_gauge').text(val);
    cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');

    if ('#time#' == 'duration') {
      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#' == 'hour') {
      let t = _options.valueDate.split(/[- :]/);
      let time = "à "+t[3]+":"+t[4]+":"+t[5];
      cmd.find('.timeCmd').html(time);
    } else {
      cmd.find('.timeCmd').remove();
    }
	}
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

  	if ('#size#' == 'small') {
      let cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.find('#IMGgauge').css({'height':'80px','width':'80px'});
      cmd.find('#indicator').css({'height':'48px','width':'48px','left':'16px','top':'15px'});
      cmd.find('#minvalue').css({'font-size':'0.5em','left':'15px','top':'43px'});
      cmd.find('#quartvalue').css({'font-size':'0.5em','left':'17px','top':'24px'});
      cmd.find('#midvalue').css({'font-size':'0.5em','top':'10px'});
      cmd.find('#troisquartvalue').css({'font-size':'0.5em','right':'17px','top':'24px'});
      cmd.find('#maxvalue').css({'font-size':'0.5em','right':'15px','top':'43px'});
      cmd.find('#state_gauge').css({'font-size':'17px','top':'54px'});
      cmd.find('#unite_gauge').css({'font-size':'6px','top':'44px'});
    }
    if ('#size#' == 'big') {
      let cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.find('#IMGgauge').css({'height':'160px','width':'160px'});
      cmd.find('#indicator').css({'height':'100px','width':'100px','left':'30px','top':'30px'});
      cmd.find('#minvalue').css({'font-size':'1em','left':'30px','top':'88px'});
      cmd.find('#quartvalue').css({'font-size':'1em','left':'34px','top':'48px'});
      cmd.find('#midvalue').css({'font-size':'1em','top':'25px'});
      cmd.find('#troisquartvalue').css({'font-size':'1em','right':'34px','top':'48px'});
      cmd.find('#maxvalue').css({'font-size':'1em','right':'30px','top':'88px'});
      cmd.find('#state_gauge').css({'font-size':'34px','top':'114px'});
      cmd.find('#unite_gauge').css({'font-size':'12px','top':'90px'});
    }
</script>
<style>
@font-face {
    font-family: "Digital7";
  	src: url("plugins/pimpJeedom/core/template/dashboard/cmd.info.numeric.GaugeIMG/digital-7.ttf") format("truetype");
}
  
#gaugeIMGdisplay {
        min-width: unset !important;
}

#state_gauge {
    font-family:"Digital7";
    font-size:26px;
  	position:absolute;
  	top:84px;
    width:100%;
  	text-align:center;
    font-weight:normal;
  }
#unite_gauge {
    font-size:10px;
    width:100%;
  	top:67px;
    position:absolute;
  	text-align:center;
    font-weight:normal;
  }
#minvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	left:22px;
    transform:rotate(-15deg);
  }
#quartvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:33px;
  	left:26px;
    transform:rotate(45deg);
  }
#midvalue {
  	display:block;
 	  width:100%;
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:18px;
  	text-align:center;
  }
#troisquartvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:33px;
  	right:26px;
    transform:rotate(-45deg);
  }
#maxvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	right:22px;
    transform:rotate(15deg);
  }
#gaugeIMGdisplay {
  	position:relative;
  	color:#F0F0F0;
}
#indicator {
    position:absolute;
    width:75px;
    height:75px;
  	left:22px;
    top:20px;
  	transition:transform .8s;
    -webkit-transform:rotate(0deg);
}
.timeCmd {
font-size:11px;
padding:2px 4px 2px 4px;
margin-top:4px;
line-height:1em!important;
display:inline-block!important;
}
</style>
</div>

Penser à vider le cache après avoir effectué la modification.

Réglages → système → configuration → cache

[Pingu]

Hello,

Merci, hum, par contre je n’utilisait pas le pluging pimpJeedom mais juste le widget GaugeIMG, du coup les path dans ton .html n’existe pas chez moi, j’ai essayé de remplacer les occurrences par le path où se trouve mes fichiers/images/polices (data/customTemplates/dashboard/cmd.info.numeric.GaugeIMG/) mais ça ne semble pas fonctionner mieux que cela

Une idée (autre que d’installer le plugin entier)

Merci

[Furaxworld]

Ajoutez ceci à la ligne 120

#gaugeIMGdisplay {
        min-width: unset !important;
}

[noodom]

Salut,

Tu peux regarder ici :

Probleme alignement aiguille Widget

Helloo, A tester pour dépannage rapide avant la refonte des widgets, tu peux essayer ça dans la personnalisation avancée de Jeedom (Système / personnalisation avancée / custom.css) récupérer la valeur de l’id de l’équipement à corriger : [image] ajouter les lignes suivantes dans custom.css (remplacer 8789 par l’id du libellé) : [data-cmd_id='8789'].cmd-widget .content-lg { min-width: fit-content !important; }

[Pingu]

(mince j’ai répondu dans l’autre sujet je repost ici désolé )

Merci pour vos réponses à tous les deux, hélas c’est sans succès.
Possiblement car j’utilise une vieille version de GaugeIMG (avant PimpJeedom), est-il possible de trouver une version a jour de GaugeIMG sans passer par Pimp ?

Là en tout cas, les deux fixes ne fonctionnent pas avec ma version…

/* Custom CSS Core 4.2.14 */
[data-cmd_id='3291'].cmd-widget .content-lg {
  min-width: fit-content !important;
}

or

<style>
@font-face {
    font-family: "Digital7";
        src: url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/font/digital-7.ttf") format("truetype");
}
#gaugeIMGdisplay {
        min-width: unset !important;
}
#state_gauge {
    font-family:"Digital7";
    font-size:26px;
        position:absolute;
        top:84px;
    width:100%;
        text-align:center;
    font-weight:normal;
  }

Merci à vous

[Furaxworld]

Il n’y a pas 2000 versions

@Furaxworld

Penser à vider le cache après avoir effectué la modification.

Réglages → système → configuration → cache

[Pingu]

J’ai bien vidé le cache comme tu l’avais indiqué. Il n’y en a sans doute pas 2000 mais au moins deux , pour preuve mes path sont en :

-       src: url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/font/digital-7.ttf") format("truetype");
+       src: url("plugins/pimpJeedom/core/template/dashboard/cmd.info.numeric.GaugeIMG/digital-7.ttf") format("truetype");

Et le contenu du fichier est différent de celui que tu m’a copier au début, tu doit etre en v4, et moi en v3.

Il y a eu pas mal de modif.
Je dirais que j’utilise cette version :

Salvialf/JEEDOM-widget-GaugeIMG/blob/master/V4/cmd.info.numeric.gaugeIMG.html

(oui c’est dans v4 mais ça semble au code du v3…)…

Je peux récup la source du widget sous pimp via le git, mais je ne sais pas comment l’installer pour que jeedom en tienne compte et j’ai pas envie de trop bidouiller le truc.
Je n’ai pas besoin de pimp à la base, gaugeimg en standalone marchait bien en 4.3.

Merki

[noodom]

@Pingu

fit-content

J’ai reprise le code et c’est ok chez moi en modifiant le contenu comme ceci (l.177 : ajout de la ligne min-width: fit-content !important;, les autres lignes existant déjà) :

#gaugeIMGdisplay {
  	position:relative;
  	color:#F0F0F0;
  	min-width: fit-content !important;
}

Dis-moi si ça fonctionne correctement sur ton Jeedom.

[Pingu]

Nope pas mieux

j’ai bien mis ton code :

#maxvalue {
    font-size:0.75em;
        font-weight:bold;
        position:absolute;
        top:65px;
        right:22px;
  }
#gaugeIMGdisplay {
        position:relative;
        color:#F0F0F0;
        min-width: fit-content !important;
}
#indicator {
    position:absolute;
    width:75px;
    height:75px;
        left:22px;
    top:20px;
        transition:transform .8s;
    -webkit-transform:rotate(0deg);
}
</style>
</div>

j’espère que je n’ai aps fait une typo… J’ai essayer aussi avec et sans les :

[data-cmd_id='3291'].cmd-widget .content-lg {
  min-width: fit-content !important;
}

dans le custom.css, ça ne change rien.

Si c’est trop compliqué je peut renommer mes cmd « Prod Jour » « Prod Inst »… mais bon, c’est moins sexy.

[Furaxworld]

Et en vidant le cache du navigateur car un code ou l’autre revient au même …

[Pingu]

En changent relative par absolute, la gauge est belle, mais il me met le texte en décaller

#gaugeIMGdisplay {
        position:absolute;
        color:#F0F0F0;
        min-width: fit-content !important;
}

C’est quel block qui affiche le texte ?

[Furaxworld]

Ca peut être joli non?

[Pingu]

Hahaha non carrément pas

[Pingu]

Ah flute, en absolute, il me fait des display chelou quand c’est un équipement et non une commande.

Il superpose les gauges… (ici c’est un virtuel avec 4 infos) en relative ça donne ça :

On peut pas tout avoir vous allez me dire

[Pingu]

Ça ne change rien, c’est le même fichier que j’ai déjà (après les modifs).
Ça a donc le même comportement avec le V2 (j’ai tester quand même au cas ou).

Si vous avez d’autre idée.

Bonne soirée (au lit)

[noodom]

Si tu ouvres le debugger du navigateur (F12) et que tu sélectionnes la flèche en haut à gauche, puis la zone du widget comme la capture, tu as quoi comme css : tu retrouves la nouvelle ligne ?

2 possibilités :

• Si tu retrouves la nouvelle ligne, c’est gênant, ça devrait corriger le problème
• Si tu ne retrouves pas la nouvelle ligne, c’est que ta modification n’est pas prise en compte au niveau de Jeedom (cache ou autre ?) et c’est bizarre si tu as bien vidé le cache. Essaie de lancer Jeedom en mode navigation privée de ton navigateur.

[Pingu]

Alors non c’est bien prise en compte :

Par contre je viens de voir sur ton screen que tu regarde sur le dashboard, moi je suis dans des designs (ne me dit pas que je n’ai pas préciser cela plus haut !!.. (si ? enfin dans les mini capture ça se voyait un peu) du coup sur le dashboard c’est bon, mais c’est sur le design que ça ne l’ai pas.

N’hésite pas si tu as d’autre piste avec cette super nouvelle information Je lirai demain, car la patronne a dit « au lit » et je veux pas de problème m’voyez !

Merci en tout cas pour le temps passé…

[noodom]

Je ne reproduis pas le problème dans un design (vide, si tu peux tester) avec la correction

[Phpvarious]

Bonjour,

le widget contient des éléments qui sont en position absolute, mais le container n’a pas de taille de défini, donc quand un autre contenu comme le titre élargie le container le widget ce retrouve complètement décalé. en Dashboard pas de soucis car tout est flex.

Il faut donc ajouter une taille au widget :

#gaugeIMGdisplay {
  	position:relative;
  	color:#F0F0F0;
    min-width: unset !important;
    width: 120px; /* Ajout */
}

et ne pas oublier aussi le param optionnel :

if ('#petit#' == 1) {
      let cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.find('#gaugeIMGdisplay').css({'width':'80px'}) // Ajout
      cmd.find('#IMGgauge').css({'height':'80px','width':'80px'});
      cmd.find('#indicator').css({'height':'48px','width':'48px','left':'16px','top':'15px'});
      cmd.find('#minvalue').css({'font-size':'0.5em','left':'15px','top':'43px'});
      cmd.find('#quartvalue').css({'font-size':'0.5em','left':'17px','top':'24px'});
      cmd.find('#midvalue').css({'font-size':'0.5em','top':'10px'});
      cmd.find('#troisquartvalue').css({'font-size':'0.5em','right':'17px','top':'24px'});
      cmd.find('#maxvalue').css({'font-size':'0.5em','right':'15px','top':'43px'});
      cmd.find('#state_gauge').css({'font-size':'17px','top':'54px'});
      cmd.find('#unite_gauge').css({'font-size':'6px','top':'44px'});
    }