Oui je suis d’accord là-dessus. Mais cette image existe dans le nouveau répertoire, mais mon widget custon ne l’affiche pas (alors qu’elle s’affiche bien en créant un widget core). Je dois faire une erreur dans le chemin (que j’ai modifié par rapport à la v3 pour pointer sur le nouveau répertoire bien sur)
Salut,
Le chemin que tu dois écrire c’est: data/img/image.png
La racine étant le dossier html pour jeedom
Merci, c’est bien ça. Sauf que ça fonctionne un coup sur cinq (des fois il n’affiche plus rien), mais je pense que c’est dû à autre chose.
Hésites pas à poster le code complet du widget si tu veux que j’y jette un œil…
Oh tu es bien urbain mon ami 
Voici donc:
<div style="min-width:90px;min-height:25px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
<center>
<span ><img src="data/img/aller.png"/><span class="label label-success latency" >#state#</span> #unite#</span>
<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
<!-- <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>
</center>
<script>
// $('sgjee_tile').removeClass('label-success').addClass('label-danger');
if(parseFloat('#state#') > parseFloat('#sgjee_danger#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-danger');
} else if (parseFloat('#state#') > parseFloat('#sgjee_warning#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-warning');
}
</script>
</div>
Tu peux tester ce code mais sans conviction:
<div style="min-width:90px;min-height:25px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div ><img src="data/img/aller.png"/><span class="state label label-success latency"></span></div>
<div class="cmdStats #hide_history#">
<div class="col-xs-12 center-block">
<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>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
// $('sgjee_tile').removeClass('label-success').addClass('label-danger');
if(parseFloat(_options.display_value) > parseFloat('#sgjee_danger#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-danger');
} else if (parseFloat(_options.display_value) > parseFloat('#sgjee_warning#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-warning');
}
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Je l’ai juste réécris mais pas du tout testé donc peu de chances que ça fonctionne direct comme tu le veux mais pour aller plus loin il faut m’en dire un peu plus… Il te sert à quoi ce widget ? Tu attends quoi comme valeur ? A quoi correspondent #sgjee_danger# et #sgjee_warning# ?
Sans conviction, disais-tu, mais ça marche apparemment
Ce widget me sert pour Waze. L’image en question, c’est une voiture (soit vers la droite, soit vers la gauche, selon l’aller ou le retour).
Les sgjee_danger et sgjee_warning sont des seuils qui permettent le changement de couleur de la durée selon le temps, tout simplement.
Maintenant, si tu as la solution avec un widget core, je suis preneur
Wouah je m’épate moi-même !!! 
Bah ça a l’air de bien fonctionner comme ça pourquoi se prendre la tête ?! Allez au pire je vois dans la semaine pour te préparer un petit template perso ça me permettra de me faire la main.
Par contre tu n’utilises pas du tout les historiques avec ce widget ? Parce que j’ai ajouté le code correspondant qui était à moitié présent à la base.
Donc si pas besoin des historiques, tu peux supprimer toute cette partie du code de ton widget:
<div class="cmdStats #hide_history#">
<div class="col-xs-12 center-block">
<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>
</div>
Oui effectivement, si ça fonctionne comme ça, je vais le laisser
Pour l’historique, je vais effectivement supprimer car je n’historise pas du tout ces données.
En tout cas, merci à toi grand gourou du code
Je pense que je vais encore faire appel à toi bientot (si tu permets)
Du coup, j’abuse un peu
Voici ce que ça donne:
Je voudrais modifier la taille des carrés de couleur pour qu’ils soient un peu moins larges et moins hauts, mais je ne trouve pas le paramètre à modifier.
J’ai essayé de jouer avec les paramètres min-width et min-height, mais ça ne change rien…
Tu as une idée?
style="min-width:50px;min-height:20px;margin-right: 1px;margin-left: 1px;padding:5px !important;"
Bonjour
Une idée pour mes carrés de couleurs?
Car là, je séche
Salut,
Essayes en enlevant label sur la 2ème ligne:
<div ><img src="data/img/aller.png"/><span class="state label label-success latency"></span></div>
ce qui donne:
<div ><img src="data/img/aller.png"/><span class="state label-success latency"></span></div>
Salut
Encore une fois, ça marche
Mais… Le carré de couleur est donc maintenant autour du texte, comment faire pour y mettre une petite marge, pour qu’il soit un peu plus grand que le texte? C’est possible?
(encore une fois, j’ai essayé, mais je ne trouve pas le paramètre à modifier)
Bonjour
J’ai un autre widget où j’ai le même problème. La taille du carré de couleur semble lié à la taille de la police. Comment faire pour que ces carrés soient un peu plus grands?
Alors, en image. Pour le moment, j’ai ça (je donne l’exemple sur les deux widgets):
Et en V4, j’ai ceci:
Je pense que c’est plus parlant. Question subsidaire: sur le widget ETAT-CAM, comment faire pour que le texte soit aligné avec les carré C M A? A toute fin utile, voici le code de ce widget:
<div style="width:130px;min-height:20px;vertical-align:middle;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" title="#collectDate#">
<div style="display:inline-block;vertical-align:middle;float:left;">
<span class='cmdName' style="font-weight: bold;font-size : 10px;line-height: 24px;float : left;position:absolute;left: 2px;">#name_display#: </span>
</div>
<div style="display:inline-block;vertical-align:middle;float: left;position:absolute;left: 60px;">
<span class="label-default" style="font-size: 0.8em;color: white;" id="cam1#id#">C</span>
<span class="label-default" style="font-size: 0.8em;color: white;" id="cam2#id#">M</span>
<span class="label-default" style="font-size: 0.8em;color: white;" id="cam3#id#">A</span></div>
<script>
jeedom.cmd.update['#id#']=function(_options) {
/* Regexp originale:
const exp = /^C:(\w+)\n?\r?.?M:(\w+)\n?\r?.?A:(\w+)\n?\r?.?$/;
A utiliser si remplacement \n par caractère _:
const exp = /^C:(\w+)_?.?M:(\w+)_?.?A:(\w+)_?.?$/;
A utiliser si remplacement caractère par espace:
const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
*/
/* Regexp pour utilisation de l'espace */
const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
var str = _options.display_value;
const camId=['cam1#id#','cam2#id#','cam3#id#'];
let m;
if ((m = exp.exec(str)) !== null) {
m.forEach((match, groupIndex) => {
$('#'+camId[groupIndex-1]+'span.label').removeClass('label-success').addClass('label-default');
$('#'+camId[groupIndex-1]).css('background-color', '#3a3f44');
if (/^ARMED/.test(match) == true) {
$('#'+camId[groupIndex-1]+'span.label').removeClass('label-default').addClass('label-success');
$('#'+camId[groupIndex-1]).css('background-color', 'rgba(255,0,0,1)!important');
}
});
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'none'});
</script>
</div>
Merci d'avance
Un ptit up du week end pour pas que tu m’oublies 
Salut @drs,
Mieux vaut tard que jamais dit le dicton 
Si tu veux essayer ce code et me dire si ça convient ?:
<div style="min-width:90px;min-height:25px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div ><img src="data/img/aller.png"/><span class="label-success latency"></span></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
// $('sgjee_tile').removeClass('label-success').addClass('label-danger');
if(parseFloat(_options.display_value) > parseFloat('#sgjee_danger#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-danger');
} else if (parseFloat(_options.display_value) > parseFloat('#sgjee_warning#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-warning');
}
$('.cmd[data-cmd_id=#id#] .latency').empty().append(_options.display_value +' #unite#');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
.latency {
line-height:18px;
display:inline-block;
width:20px;
}
</style>
</div>
Bonjour
Merci pour ce code
Petit détail: il fonctionne et fait ce que je voulais, mais pas sur les 2 infos. Si je l’appplique sur les 2, cela me donne ceci:
Le second est décalé et ne donne pas la même chose que le premier. Si j’applique sur l’un ou sur l’autre c’est bon, mais pas sur les deux en même temps, c’est curieux.
Une autre petite question. J’ai bien vu le style .latency, et j’ai vu où il s’appliquait. Du coup, j’ai tenté de l’appliquer aussi à un autre widget, mais tu t’en doutes, sans succès (je suis pas très bon là-dessus!). Si tu pouvais jeter un oeil et me dire où le mettre, ça serait super sympa.
Mes problèmes sur ce widget sont des problèmes d’alignement du texte et des cases CMA, et comme pour le précédent l’écartement du carré de couleur. Voici le virtuel tel qu’il est aujourd’hui:
Et voici le code du widget:
<div style="width:130px;min-height:20px;vertical-align:middle;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" title="#collectDate#">
<div style="display:inline-block;vertical-align:middle;float:left;">
<span class='cmdName' style="font-weight: bold;font-size : 10px;line-height: 24px;float : left;position:absolute;left: 2px;">#name_display#: </span>
</div>
<div style="display:inline-block;vertical-align:middle;float: left;position:absolute;left: 60px;">
<span class="label-default" style="font-size: 0.8em;color: white;" id="cam1#id#">C</span>
<span class="label-default" style="font-size: 0.8em;color: white;" id="cam2#id#">M</span>
<span class="label-default" style="font-size: 0.8em;color: white;" id="cam3#id#">A</span></div>
<script>
jeedom.cmd.update['#id#']=function(_options) {
/* Regexp originale:
const exp = /^C:(\w+)\n?\r?.?M:(\w+)\n?\r?.?A:(\w+)\n?\r?.?$/;
A utiliser si remplacement \n par caractère _:
const exp = /^C:(\w+)_?.?M:(\w+)_?.?A:(\w+)_?.?$/;
A utiliser si remplacement caractère par espace:
const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
*/
/* Regexp pour utilisation de l'espace */
const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
var str = _options.display_value;
const camId=['cam1#id#','cam2#id#','cam3#id#'];
let m;
if ((m = exp.exec(str)) !== null) {
m.forEach((match, groupIndex) => {
$('#'+camId[groupIndex-1]+'span.label').removeClass('label-success').addClass('label-default');
$('#'+camId[groupIndex-1]).css('background-color', '#3a3f44');
if (/^ARMED/.test(match) == true) {
$('#'+camId[groupIndex-1]+'span.label').removeClass('label-default').addClass('label-success');
$('#'+camId[groupIndex-1]).css('background-color', 'rgba(255,0,0,1)!important');
}
});
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'none'});
</script>
</div>
Un grand merci à toi pour ton aide
Bonjour
Je viens de reprendre mes widgets, et je ne devais pas avoir les idées claires. Pour le premier (Waze), le problème est résolu, j’avais une balise div en trop (j’me mettrais des claques des fois)!!
Avec ce code:
<div style="min-width:90px;min-height:25px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div ><img src="data/img/aller.png"/><span class="label-success latency"></span></div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
// $('sgjee_tile').removeClass('label-success').addClass('label-danger');
if(parseFloat(_options.display_value) > parseFloat('#sgjee_danger#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-danger');
} else if (parseFloat(_options.display_value) > parseFloat('#sgjee_warning#') ) {
$('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-warning');
}
$('.cmd[data-cmd_id=#id#] .latency').empty().append(_options.display_value +' #unite#');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
.latency {
line-height:15px;
font-size: 10px;
font-family: Verdana;
font-weight: bold;
display:inline-block;
width:15px;
}
</style>
</div>
Pour le second, j’ai réussi à aligner un peu mieux, mais je ne comprends pas comment faire pour augmenter les carrés de couleur comme sur le widget waze:
J’ai bien vu qu’il y avait un style, mais je ne vois pas comment l’apppliquer…
Voici le code de l’état cam:
<div style="width:130px;min-height:20px;vertical-align:middle;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" title="#collectDate#">
<div style="display:inline-block;vertical-align:middle;float:left;">
<span class='cmdName' style="font-weight: bold;color: green;font-size : 10px;line-height: 24px;float : left;position:absolute;left: 2px;">#name_display#: </span>
</div>
<div style="display:inline-block;vertical-align:middle;line-height: 20px;float: left;position:absolute;left: 55px;">
<span class="label-default" style="font-size: 0.8em;font-family: Verdana; font-weight: bold;color: white;" id="cam1#id#">C</span>
<span class="label-default" style="font-size: 0.8em;font-family: Verdana; font-weight: bold;color: white;" id="cam2#id#">M</span>
<span class="label-default" style="font-size: 0.8em;font-family: Verdana; font-weight: bold;color: white;" id="cam3#id#">A</span></div>
<script>
jeedom.cmd.update['#id#']=function(_options) {
/* Regexp originale:
const exp = /^C:(\w+)\n?\r?.?M:(\w+)\n?\r?.?A:(\w+)\n?\r?.?$/;
A utiliser si remplacement \n par caractère _:
const exp = /^C:(\w+)_?.?M:(\w+)_?.?A:(\w+)_?.?$/;
A utiliser si remplacement caractère par espace:
const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
*/
/* Regexp pour utilisation de l'espace */
const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
var str = _options.display_value;
const camId=['cam1#id#','cam2#id#','cam3#id#'];
let m;
if ((m = exp.exec(str)) !== null) {
m.forEach((match, groupIndex) => {
$('#'+camId[groupIndex-1]+'span.label').removeClass('label-success').addClass('label-default');
$('#'+camId[groupIndex-1]).css('background-color', '#3a3f44');
if (/^ARMED/.test(match) == true) {
$('#'+camId[groupIndex-1]+'span.label').removeClass('label-default').addClass('label-success');
$('#'+camId[groupIndex-1]).css('background-color', 'rgba(255,0,0,1)!important');
}
});
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'none'});
</script>
</div>
Merci d’avance et bonne année