Je me réponds à moi-même après avoir longuement jonglé avec les (, [, et autre }, j’ai fini par trouver la bonne syntaxe ouf !
<td align=center valign=middle><span style='color: #ff00ff;font-size: 20px;'>${(((datasources["V1"]["response"]["an1"])*0.00323)*100).toFixed(1)} °C</span></td>
Bonjour,
J’ai mis en place un widget « ACCES » qui me permet de mettre sur la même présentation les commandes pilotables et la visu de l’état et cela fonctionne.
Cependant, je me trompe souvent à appuyer sur la visu pour commander et je voudrais plutôt fusionner les 2.
Du coup, l’idée est de d’utiliser le script HTML de visualisation et d’y insérer une commande AJAX positionnée sur l’icone dynamique.
J’ai pas mal jonglé et ou ce n’est pas faisable ou je m’u prends mal.
Si quelqu’un à une idée, je suis preneur.
Ci dessous le script actuel et la commande que je voudrais positionner.
var isGateOpen = datasources["Compteurs"]["D7"] == 0;
var color = `color: #${ isGateOpen ? '7FFF00' : 'ff0000' };`;
return `
<div class="widget" style="${color}">
<div class="tw-display">
<div class="tw-tr">
<div class="tw-value-wrapper tw-td">
<span class="glyphicons glyphicons-${ isGateOpen ? "home" : "home" } x2"></span>
</div>
<div class="tw-value" style="font-size: 18px; margin: 20px 0 0 20px;${color}">
GARAGE : ${ isGateOpen ? "Fermé" : "Ouvert" }
</div>
</div>
</div>
</div>`;
Et la commande à intégrer sur l’icone glyphicon.
Merci
Bonjour Tirso,
Je me suis penché sur ton code et je n’arrive pas à activer une sortie par exemple sur un clic de l’icône.
J’ai exactement le même code que toi au niveau de l’animation de l’icône (garage ouvert/fermé), mais lorsque le clique dessus, cela ne change pas l’état de ma sortie. J’ai mis le code suivant : je pense pourtant que la syntaxe a l’air ok :
onClick=« newAJAXCommand(‹ io.cgi?rly=1 ›) »;
Tu aurais une explication ?
Merci bien,
Moi non plus. cependant, cela fonctionne dans un autre script mais les balises avant/après jouent surement un rôle mais je ne suis pas expert Javascript…
Extrait d’un script qui fonctionne :
Je pense qu’il faut gérer la vairable 'ici s) pour le champ clicable.
Ci-dessous le scripte en chantier avec un petit commentaire 
Ce que je cherche à faire (dans l’idéal):
A gauche, la visu du volet ouvert/ferme (ça fonctionne)
Ensuite 2 compteurs (% de volet ferme et Compte à rebours) cela fonctionne.
3eme colonne Position Haut et basse 2 icones figées (image Chrono et Dashboard). Celle du milieu serai l’état d’un indicateur (DIx) qui pourrait être un cadenas ouvert ou fermé selon le cas (capteur magnetique de volet témoin).
ET enfin, sur la droite, les 2 fleches, HAUT et BAS (qui nécessitent de l’action « oncloc/Ajax ».
Et le top serai qu’elle change de couleur si le relais est actif (R1/R2).
var C6 = (datasources["Compteurs"]["C6"]).toFixed(0);
var C5 = (datasources["Compteurs"]["C5"]).toFixed(0);
var VUP = datasources["CompteursR"]["R1"] ==1;
var VDN = datasources["CompteursR"]["R2"] ==1;
var isVoletsOpen = datasources["CompteursD"]["D8"] ==1;
var color = `color: #${ isVoletsOpen ? '7FFF00' : 'fcdc12' };`;
var color2 = `color: #${ VUP ? '7FFF01' : 'fcdc13' };`;
var color3 = `color: #${ VDN ? '7FFF02' : 'fcdc14' };`;
var s = '<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">' +
'<h2 class="section-title"></h2>' +
// 1 colonne volets
'<div class="indicator-vr">' +
'<div class="indicator-vrFond" style="height:' + C6 + '%;"></div>' +
'</div>' +
// 2 colonne Haut 100%
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -20px;margin-left: 30px;font-size:16px">' + C6 + ' %</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -40px;margin-left: 100px;font-size:16px">' + VUP +'</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -68px;margin-left: 220px;font-size:24px" class="police-arrow-up" onclick="newAJAXCommand(' + "'io.cgi?rly=1'" + ');">' + '</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -55px;margin-left: 90px;font-size:16px">' + C5 + ' s</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -75px;margin-left: 160px;font-size:16px">' + isVoletsOpen + ' </h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -95px;margin-left: 220px;font-size:10px">' + color +'F</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -85px;margin-left: 90px;font-size:10px">' + color3 +'</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -105px;margin-left: 160px;font-size:10px">' + color2+ '</h2>' +
'<div style="height:20px;"></div>' +
'<h2 class="section-title" style="float:left;width: 25%;margin-top: -125px;margin-left: 220px;font-size:20px">' + 'DN</h2>' +
'<div style="height:0px;"></div>';
// 3 colonne Commandes
// Up
s = s + '<div style="height:10px;"></div>' +
'<span class="police-arrow-up" style="width:25%;margin-left:20px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=0'" + ');"></span>' ;
// Stop : supprimé pour le VR 3 car impossible par construction
s = s + '<br style="margin:10px;">' +
'<span class="police-stop" style="width:25%;margin-left:20px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=99'" + ');"></span>' ;
// Down
s = s + '<br style="margin:10px;">' +
'<span class="police-arrow-down" style="width:25%;margin-left:20px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=1'" + ');"></span>' ;
s = s + '</div>';
return s
Bonjour,
Je retrouve plus comment intégrer une image qui change suivant l’état d’une sortie comme bouton. (dans mon exemple c’est une entrée virtuelle mais le principe est le même).
La c’est un code qui affiche des boutons similaire à ceux de GCE mais je remplacerai bien certain bouton par des images simple. Genre une ampoule allumé ou éteinte suivant la l’état de la lumière.
Prenons ces deux images comme exemple:
Comment puis-je les intégrer dans le code qui suit?
Merci
var EcsOnOff = datasources["IPX800 - io"]["response"]["vin"][6];
var ColorEcsOnOff = `color: #${ EcsOnOff ? '000' : '0f0' };`;
var EcsProg = datasources["IPX800 - io"]["response"]["vin"][8];
return `
<input type="button" class="bouton2" style="margin: 18px 15px; width: 40%; color:#${ EcsOnOff=="0" ? "eee" : "0f0" };" value=${ EcsOnOff=="0" ? "Off" : "On" } onclick="newAJAXCommand('/api/xdevices.json?user=user&key=Sm17081987&ToggleVI=007');">
<input type="button" class="bouton2" style="margin: 18px 1px; width: 40%; color:#${ EcsProg=="0" ? "eee" : "0f0" };" value=${ EcsProg=="0" ? "Manu" : "Auto" } onclick="newAJAXCommand('/api/xdevices.json?user=user&key=Sm17081987&ToggleVI=009');">
`;
Bonjour,
Je suis mal placé pour vous aider car ce que j’ai réussi à faire n’a pu l’être que grâce aux contributeurs cités plus haut dans le post. Pour ma part, dans mon exemple, j’ai utilisé la bibliothèque de glyphicons.
Elargissez votre demande, vous aurez certainement la solution à ce problème.
Cdlt.