J"essaye depuis quelques heures de faire quelque chose de très simple sans succès, j’en appelle donc à votre aide/lumières.
Je souhaite créer un widget dont le texte change de couleur en fonction de critères que je souhaite rendre paramétrables, genre:
color1 : green;
limit1 : 50;
color2: orange;
limite2: 100;
Ceci pour l’utiliser dans mes designs pour mes infos numériques type temperature, qualité de l’air,… : si la valeur est inférieure à 50, alors prend la couleur 1, si la valeur est inférieure à 100, alors prend la couleur 2,…
J’ai donc commencé par réutiliser le widget core line qui correspond parfaitement à la mise en page qui m’intéresse hormis les couleurs du texte.
Je donc recopié le code dans un widget à part (OK pas de souci).
Ensuite, dans le code, après la balise « script », j’essaye pour l’instant bêtement d’assigner une couleur à mon texte sans succès:
Création de la variable pour la couleur: var color1 = ('#color1#' !='#'+'color1#') ? "#color1#" :'green';
Assignation de la couleur pour le nom de la commande (ça fonctionne): $(".cmdName").css('color',color1);
Assignation de la couleur pour la valeur (ça ne fonctionne pas, i.e. la couleur de la valeur ne change pas): $(".state#id#").css('color',color1);
(j’ai tenté plein d’autres trucs exotiques sans succès)
Sauriez-vous ce que j’ai mal fait ? je ne comprend pas…
Merci d’avance,
Alex
Bon je me réponds à moi même, en m’inspirant de ce qui avait déjà été fait, j’ai adapté le widget core line à mon besoin. Ça fonctionne plutôt bien si ce n’est que je suis obligé de saisir tous les paramètres dans les paramètre optionnels du widget (pas si optionnels que ça). J’imagine qu’avec une boucle ça pourrait s’améliorer (tant qu’il y a des paramètres, tu les prends en compte).
Du coup il faut définir color1 limit1 color2 limit2 color3 limit3 color4 limit4 color5 limit5
Fonctionne très très bien avec les équipements type température et surtout (celui qui m’intéressait) la commande « qualité de l’air » de l’équipement « vigilance météo ».
Bonjour,
Je me permets juste de te remercier d’avoir partagé ta solution.
Effectivement je cherchais comme toi à utiliser le widget line car j’avais remarqué que c’était le seul widget qui ne créait pas des colonnes à taille gigantesque dans le core.
Et grâce à ta modification, on peut avoir une info sur la qualité en couleur tout simplement :).
Je me suis même permis de dévier ton widget pour faire un code adaptatif pour une plage de valeurs (par exemple autour d’une consigne à 1°, 2° etc) pour avoir l’indication si je suis dans la plage de l’agenda en cours.
Le tout ajouté au bloc php de @noodom, j’obtiens la possibilité de faire la modification visuelle en fonction d’une consigne qui varie au cours du temps … en passant cette consigne dans le temps en paramètre du widget :).
Pour avoir un range à 1° près, 2° près avec une valeur passée (option limit) et les range associés en paramètres (range1, range2) et 3 couleurs : vert/orange/rouge par exemple :
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="content-xs">
<span class="cmdNameColor#id# cmdName #hide_name#">#name_display# </span><span class="valueColor#id# value">#state#</span><span class="uniteColor#id# unite"> #unite#</span>
</div>
<style>
.cmdNameColor#id# {
font-size: 12px;
}
.valueColor#id# {
font-size: 12px;
}
.uniteColor#id# {
font-size: 12px;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]')
//Définition des paramètres et couleurs par défaut et définition des limites par défaut
//Sinon à passer en paramètres !
var color1 = ('#color1#' != '#' + 'color1#') ? "#color1#" : "#5078aa";
var color2 = ('#color1#' != '#' + 'color1#') ? "#color2#" : "#acacac";
var color3 = ('#color1#' != '#' + 'color1#') ? "#color3#" : "#ff8c00";
var AppliedColor = ('#AppliedColor#' != '#' + 'AppliedColor#') ? "#AppliedColor#" : "#FFFFFF";
var limit = is_numeric('#limit#') ? parseFloat('#limit#'):15;
var range1 = is_numeric('#limit#') ? parseFloat('#limit#'):1;
var range2 = is_numeric('#limit#') ? parseFloat('#limit#'):2;
var valeur = parseFloat(_options.display_value).toFixed(1);
//Fonctionne sur un range +/-1 ; +/-2 ; à défaut hors range
if ((#limit#-#range1#) < valeur && valeur < (#limit#+#range1#)) {
AppliedColor = color1;
} else if ((#limit#-#range2#) < valeur && valeur < (#limit#+#range2#)) {
AppliedColor = color2;
} else {
AppliedColor = color3;
}
cmd.find('.cmdNameColor#id#').attr('style', 'color: ' + AppliedColor + ';');
cmd.find('.valueColor#id#').attr('style', 'color: ' + AppliedColor + ';');
cmd.find('.uniteColor#id#').attr('style', 'color: ' + AppliedColor + ';');
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value);
if(_options.alertLevel){
if(_options.alertLevel == 'warning'){
cmd.find('.content-xs').addClass('label label-warning')
cmd.attr('data-alertlevel','warning');
}else if(_options.alertLevel == 'danger'){
cmd.find('.content-xs').addClass('label label-danger')
cmd.attr('data-alertlevel','danger');
}else{
cmd.find('.content-xs').removeClass('label label-warning label-danger')
cmd.attr('data-alertlevel','none');
}
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
Je déterre ce sujet car je voulais l’utiliser pour modifier des couleurs en passant par « Line » plutôt qu’un widget.
J’ai testé le widget multistate mais au niveau affichage cela ne me convient pas.
J’ai essayé le code fourni par @Alexou en pensant l’adapter à mes besoins, mais j’ai l’impression qu’en version 4.4.5 du core cela ne fonctionne plus.
J’ai ouvert le fichier Line du core et le contenu est bien différent de celui proposé par @Alexou . Cela explique sans doute pourquoi il ne fonctionne pas.
Quelqu’un aurait-il adapté ce code pour la version 4.4.5 ?
J’ai tenté d’en comprendre la structure, mais pour être franc, ça dépasse de loin mes compétences.
