Bonjour,
Je cherche de l’aide (j’ai lu pas mal de posts mais …) pour coder une balise en javascript avec la fonction jeedom.cmd.update(_options).
Voilà j’ai une série de boutons sur mon design et je voudrais pour chaque bouton faire varier la couleur en fonction d’une commande virtuelle de type info (0=normal,1=warning,2=erreur). J’ai ceci en exemple (pour un bouton):
Bonjour,
Bon j’ai un peu avancé (merci les tutos) mais je ne parviens toujours pas à changer la couleur du bouton. Par contre bonne nouvelle j’ai la valeur de la commande info d’après son ID:
<ul class="vertical-button-content">
<li class="vertical-button">
<span class="button-parametre">
<a href="index.php?v=d&p=plan&plan_id=50">
<i class="fa font-awesome-cogs" style="font-size: 30px;"></i>
</a>
</span>
<script>
var FamilyStatusParametreID = 3778; //ID de la commande
jeedom.cmd.update[FamilyStatusParametreID] = function(_options) {
jeedom.cmd.execute({ // Récupération de la valeur
id: FamilyStatusParametreID,
success: function(StatusValue) {
console.log("get value : " + StatusValue);
if (StatusValue == 0) {
$('.button-parametre').attr('style', 'color: Grey;');
} else if (StatusValue == -1) {
$('.button-parametre').attr('style', 'color: DarkOrange;');
} else if (StatusValue == 1) {
$('.button-parametre').attr('style', 'color: Red;');
}
}
})
}
jeedom.cmd.update[FamilyStatusParametreID]();
</script>
</li>
</ul>
Sans doute la façon d’adresser le span ou la classe ?
cdt
Bonjour,
effectivement il faut jouer sur le <i> et non sur le <span>
tu peut déplacer la taille de l’icone dans une class css :
<style>
.button-parametre i {
font-size: 30px;
}
</style>
et ensuite jouer avec ton jQuery :
if (StatusValue == 0) {
$('.button-parametre i').attr('style', 'color: grey');
} else if ...
Autre détail qui a son importance,
lorsque tu utilise jeedom.cmd.update[ID AUTRE] = fonction....;
avec un id diffèrent de l’id d’origine du widget lui même, il ne faut pas que les 2 commandes soit visibles sur la même page jeedom, car 1 seul des 2 pourra être mise a jour en cas de nouvelle valeur de « ID AUTRE ». autrement dit, il ne faut pas que l’info portant l’id « 3778 » soit visible en même temps que ce widget.
Pour ceci, il va aussi falloir modifier ton code, car pour le moment tu fait tes essais sur 1 seul widget, quand tu multipliera ceux-ci ton code ne marchera plus ou mal car il ne contient aucun identifiant unique, exemple :
si un widget exécute le jQuery suivant : $('.button-parametre i').attr('style', 'color: grey'); il le fera pour tout les éléments <i> qui porte la class .button-parametre et donc les autres boutons qui utiliseront ce widget seront impactés.
Pour résoudre se soucis, il faut que tu utilise le tag #id# ou #uid# :
Bonjour,
Merci à tous les deux @ajja17orange et @Phpvarious, j’y suis presque. J’ai déplacé la taille du bouton dans la feuille de style css séparée (qui n’avait rien à faire ici puisque tous les boutons ont la même taille). Puis en ciblant la balise icon cela fonctionne bien avec un seul bouton. Seulement avec l’ajout de #id# cela ne fonctionne plus. J’ai affiché la valeur de #id# dans console.log mais aucune valeur n’apparait ?
Extrait de la feuille de style :
.vertical-btn-icon#id# i {
font-size: 30px;
color: LightSlateGray;
}
et mon script :
<ul class="vertical-button-content">
<li class="vertical-button">
<div class="vertical-button">
<a href="index.php?v=d&p=plan&plan_id=50">
<span class="vertical-btn-icon#id#"><i class="fa font-awesome-cogs"></i></span>
</a>
</div>
<script>
var FamilyStatusParametreID = 3778; //ID de la commande
jeedom.cmd.update[FamilyStatusParametreID] = function(_options) {
jeedom.cmd.execute({ // Récupération de la valeur
id: FamilyStatusParametreID,
success: function(StatusValue) {
console.log("get value : " + StatusValue + " " + "#id#");
if (StatusValue == 0) {
$('.vertical-btn-icon#id# i').attr('style', 'color: Grey;');
} else if (StatusValue == -1) {
$('.vertical-btn-icon#id# i').attr('style', 'color: DarkOrange;');
} else if (StatusValue == 1) {
$('.vertical-btn-icon#id# i').attr('style', 'color: Red;');
}
}
})
}
jeedom.cmd.update[FamilyStatusParametreID]();
</script>
</li>
</ul>
J’ai l’impression que la valeur #id# ne passe pas (?). Ce qui ne m’étonne pas car mon script n’est pas lié à une commande (?) … où je m’égare en ce dimanche matin ?
cdt
J’ai pourtant reproduit ton code et je n’est aucun soucis.
Pense a repasser le widget a Défaut → Sauvegarder, puis resélectionne ton widget → sauvegarder, a chaque fois que tu fais une modification dans le code de celui-ci , dans la config de la commande.
attention je sais pas si c’est voulu mais :
alors que dans ton code tu fait une condition que sur ces valeurs ( 0, -1, 1 )
if (StatusValue == 0) { ... }
else if (StatusValue == -1) { ... }
else if (StatusValue == 1) { ... }
oui j’ai changé les valeurs -1=warning 0=normal et 1=erreur. L’histoire de l’id ne fait penser que mon script n’est pas placé au bon endroit. Je récapitule le problème: Problème: J’ai aujourd’hui un menu design avec une barre de 10 boutons qui charge 10 autres pages. Chaque page correspond à un thème (chauffage, réseau, etc.). Chaque matin je vérifie en cliquant sur chacun des 10 boutons pour voir s’il y a un problème quelque part. C’est long et inutile. J’ai créé 10 commandes virtuelles/info/numérique qui prennent les valeur -1, 0 ou 1 et qui m’indique s’il y a un problème (exemple: un radiateur est suspendu à cause d’une ouverture => commande « chauffage »=-1). Je voudrais que ces 10 boutons changent de couleur en fonction de la valeur des 10 commandes associées. Approche 1: j’inclus dans mon html de page de design un script qui permet de connaitre la valeur d’une commande et je change la couleur de l’icone/bouton. Je ne sais pas comment tout cela se rafraichis mais bon… Approche 2: la commande se représente sous la forme d’un bouton avec une couleur différente en fonction de sa valeur d’où le script avec un #id# . Mais je ne sais pas comment l’afficher ? avec une icone différente à chaque bouton et un lien différent vers une page design différent.
J’ai préféré l’approche 1 qui me semblait plus intuitive mais il y a le problème des classe css à discriminer et le rafraichissement lorsque la valeur de la commande change. Je ne suis que débutant en JS et CSS.
Des avis ?
L’idée pourrai de te servir de ton virtuel qui regroupe les 10 info/numérique et ainsi l’afficher en tant que menu dans ton design, tu applique un widget perso (info/numeric) sur chacune de ces commandes.
Avantage :
Plus besoin de faire un jeedom.cmd.execute() car le widget se situe déja dans la commande qui prend la valeur -1, 1, 0.
soit :
Inconvénient
tu es peut-être un peu moins libre sur la mise en forme du menu en lui même, car il faudra jouer avec la disposition de l’équipement (Tableau…), tout dépend de se que tu as actuellement.
Bonne nouvelle, après moult essais j’y suis arrivé. J’ai utilisé l’approche 2 avec un code html simplifié (plus ul et li) et j’ai ajouté des tags tels que #iconClass# et #planID# ce qui donne ceci :
J’utilise un tableau pour placer chaque bouton au bon endroit. La taille des boutons doit être spécifiée ici car elle hérite de la taille du tableau qui est de 12px :
Ce qui donne au final (la barre à gauche est l’originale statique, la barre à droite est la nouvelle barre dynamique) :
