Top adopté aussi
1 « J'aime »
Bonjour,
merci pour le super travail
J’ai un petit problème
J’affiche bien la jauge pas de soucis, ma valeur est 95.4 %
Le problème vient du paramètre change,il n’est pas pris en compte.
D’où cela peut il venir?
Merci pour votre réponse
Quel version de Jeedom ?
Bonjour, je suis en 4.0.54
Hello, encore merci 
++
Tu a du raté un truc …
Je me doute, mais je vois pas quoi… J’ai importé les fichiers comme décrit, j’ai rajouté les paramètres mini maxi jauge aiguille et change
Tout marche, sauf change…
Peut tu faire une copie d’écran des options de ton widget ?
ton code est il identique a celui-ci ?
CODE
<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#">
<!-- ################ gaugeIMG ################ -->
<!-- ********** Paramètres Optionnels ********* -->
<!-- mini = borne minimum (valeur mini de la commande par défaut) -->
<!-- maxi = borne maximum (valeur maxi de la commande par défaut) -->
<!-- colJauge = couleur de la jauge (bleue par défaut) -->
<!-- colAiguille = couleur de l'aiguille (bleue par défaut) -->
<!--** 9 couleurs: bleue, verte, jaune, orange, rouge, rose, mauve, turquoise, blanche **-->
<!-- change = change la couleur de la jauge selon la valeur (exemple: 0-25:verte,25-75:orange,75-100:rouge) -->
<!-- petit = taille 80px*80px (1 | 120px*120px par défaut) -->
<!-- time = affiche la durée (duree | date | heure | désactivé par défaut) -->
<!-- ########### by @SALVIALF ;) ############# -->
<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#">
<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){
var cmd = $('.cmd[data-cmd_id=#id#]');
var valMin = is_numeric('#mini#') ? parseFloat('#mini#'):parseFloat('#minValue#');
var valMax = is_numeric('#maxi#') ? parseFloat('#maxi#'):parseFloat('#maxValue#');
var midvalue = Math.round((valMax + valMin)*50)/100;
var quartvalue = Math.round((valMin + midvalue)*50)/100;
var troisquartvalue = Math.round((midvalue + valMax)*50)/100;
var val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
var plage = valMax - valMin;
var angle = '';
var colJauge = ('#jauge#' !='#'+'jauge#') ? "#jauge#":"bleue";
var colAiguille = ('#aiguille#' !='#'+'aiguille#') ? "#aiguille#":"bleue";
var changeColor = ('#change#' !='#'+'change#') ? '#change#':false;
if (changeColor != false) {
var arrChange = changeColor.split(',');
for (var i=0; i < arrChange.length; i++) {
var level = arrChange[i].split(':');
var palier = level[0].split('_');
var palierMin = palier[0];
var palierMax = palier[1];
var 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) * 224 / plage;
} else {
if (val < valMax) angle = 232;
else if (val > valMin) angle = -10;
else angle = (val - valMin) * 224 / 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','data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/fond'+colJauge+'.png');
cmd.find('#indicator').css({'background':'url(data/customTemplates/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#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
}
else if ('#time#' == 'date') {
var week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
var date = new Date(_options.valueDate.replace(' ', 'T'));
var t = _options.valueDate.split(/[- :]/);
var format = week[date.getDay()]+" "+t[2]+"/"+t[1];
var time = "à "+t[3]+":"+t[4];
cmd.find('.timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
var date = new Date(_options.valueDate.replace(' ', 'T'));
var t = _options.valueDate.split(/[- :]/);
var 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#'});
if ('#petit#' == 1) {
var 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'});
}
</script>
<style>
@font-face {
font-family: "Digital7";
src: url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/font/digital-7.ttf") format("truetype");
}
#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;
}
#quartvalue {
font-size:0.75em;
font-weight:bold;
position:absolute;
top:35px;
left:26px;
}
#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:35px;
right:26px;
}
#maxvalue {
font-size:0.75em;
font-weight:bold;
position:absolute;
top:65px;
right:22px;
}
#gaugeIMGdisplay {
position:relative;
color:#F0F0F0;
}
#indicator {
position:absolute;
width:75px;
height:75px;
left:22px;
top:20px;
transition:transform .8s;
-webkit-transform:rotate(0deg);
}
</style>
</div>
Salut @olive,
On voit que tu as suivi le tutoriel avancé. 
C’est la première fois que je vois cette option utilisée
Bon dimanche
je l’avait trouvé bien avant d’avoir trouvé le tuto
1 « J'aime »
Pas moi.
La roue crantée il fallait la voir.
Faut dire que je n’avais pas cherché non plus.
Salut,
Sois certain de la syntaxe
Exemple :10_18:bleue,18_25:orange,25_40:rouge
J’ai cherché un bout de temps car je mettais des - au lieu de _
C’est pour ça que j’ai demandé la copie écran !
Bonjour
Merci pour votre temps.
Le code est a priori le même, je vérifierai ce soir, car sur le téléphone c’est pas évident. Mais j’avais copié celui de cette page le jour où j’ai mis ma première demande.
Voici une copie d’écran. J’ai bien mis des _ et pas des -
bon, j’ai copié collé le code cité plus haut, c’est le même, sauf que il y a var à la place de let.
Cela ne change rien , change n’est toujours pas pris en charge…
par contre, si j’arrondi ma valeur à 0 chiffre après la virgule, cela fonctionne…
bon j’ai trouvé le problème, je pense que c’est un problème de type de variables et du coup de comparaison :
il faut changer dans le code les lignes
var palierMin = palier[0];
var palierMax = palier[1];
par:
var palierMin = parseFloat(palier[0]);
var palierMax = parseFloat(palier[1]);
et là, ca roule.
Je ne sais pas si ça marchait chez vous comme ça, c’est étrange.
palier[] est un string, et on compare ensuite avec un float.
Dans le cas où palier[] est un entier, il doit y avoir un transtypage transparent, ce qui fait que ca marche sur des entiers, mais le transtypage ne doit plus fonctionner avec des floats.
Je maitrise plus le C++, mais s’il y a un pro de javascript, les explications sont les bienvenues!
1 « J'aime »
Merci et bravo 
SALVIAF pour cette gauge.
Elle correspond précisément à ce que je recherchais. Manifestement, je ne suis pas le seul.
Je vois que les autres Widget sont également de haut vol.
Une référence pour moi. 
Bonsoir,
J’ai peut etre loupé un truc mais l’affichage n’est pas correct sur mon test
j’ai mis cela en option
ai je loupé un truc?
Salut,
Non tu n’as rien loupé ça vient de tests que j’ai fait dans le cadre du développement du plugin qui va gérer l’installation, la mise à jour et le paramétrage de mes widgets.
Je viens de corriger, tu peux supprimer les fichiers que tu as copiés et télécharger à nouveau le *.zip pour réinstaller le widget corrigé.
1 « J'aime »
Merci beaucoup @Salvialf pour tout ce travail et ce suivi, je viens de l’installer et c’est du plus bel effet sans compter que tes explications me permettent de progresser dans ma comprehension !
1 « J'aime »