Salut @Salvialf
Malgré mes recherches supplémentaires, je n’y arrive pas. Tu as une idée?
Merci 
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