Widget HTML : Avis d'expert javascript demandé

du coup on risque de se poser trop de questions, et taper à côté. :frowning:

comment s’affiche le widget, peux-tu nous faire une capture ?
comment est définie la datasource ?
qu’est-ce qui est relié à l’entrée 2 ?

Pas vraiment, mais je crois que je sais d’où vient le problème :slight_smile:

Vous parlez de gérer l’entrée digitale n°2 mais vous utilisez l’état de l’entrée digitale n°4 !

En effet, vous utilisez

datasources["XML_V4"]["response"]["in"][3]

qui donne le status du l’entrée digitale 3 + 1 = 4, alors qu’il faut utiliser

datasources["XML_V4"]["response"]["in"][1]

qui donne le status de l’entrée digitale 1 + 1 = 2 :wink:

3 « J'aime »

Bien vu, je n’avais pas tilté sur l’inversion d’index :frowning:

Que dire à part BRAVO !!! et surtout un super grand merci :slight_smile:
Honte à moi :confounded:

2 « J'aime »

Merci à toi aussi, bien-sûr.
Vous êtes les Chevaliers Blancs de ce topic :slight_smile:
Cdlt.

2 « J'aime »

Bonsoir @ZogStriP,

Dans le 14ème message de ce post il y a le widget de @Aspro95 qui est très simpa, si
j’avais un script fonctionnel je pourrai éventuellement l’adapter.
Malheureusement, le script ne fonctionne pas, et je ne comprend pas pourquoi absolument
rien ne se passe (ni message d’erreur, ni icones mal placées…).
Je vais finir par croire que j’ai du mal avec « copier/coller ».
Le script tel qu’il est est-il complet …?

Cdt

Avez-vous une source de données sur le dashboard sur lequel vous utilisez le widget qui s’appelle « XML_V4 » ?

J’ai simplement modifié ceci:

var isSwitchedOn = datasources["XML_V4"]["response"]["in"][1] == 0;

non, le flux « XML_V4 » n’est pas fourni par l’IPX ?

Non, il faut créer une source de données pour que les widgets se mettent à jour :wink:

Ok, j’étais mal parti… j’étais tellement persuadé du contraire que je ne me suis même pas
posé la question (le nom du flux de donné est très bien choisi) ^^

pour utiliser le script tel quel, la datasource doit pointer sur io.xml.

1 « J'aime »

Widget HTML avec ipx800_V1 version 2.05.03 :sweat_smile:
J’ai créé un widget HTML après avoir créé une source de données V1 (X-Devices (XML) l’autre type XML ne fonctionnant pas.
J’arrive à afficher dans le widget la température sur l’entrée analogique1 de la V1. Jusque là tout va bien :innocent:
Je voudrais enrichir le widget avec un icône et afficher °C derrière la valeur et là c’est galère !

return `
<table width='100%'>
  <tr>
    <td align=left valign=middle width=‘10%’><span style=‘color: #ff00ff'class="glyphicons glyphicons-temperature x2"></span></td>
    <td align=left valign=middle width=‘50%’><span style=‘color: #ff00ff'>Départ plancher</span></td>
    <td align=right valign=middle><span style=‘color: #ff00ff;font-size: 20px;'>${((datasources["V1"]["response"]["an1"])*0.00323)*100).toFixed(1)} °C</span></td>
  </tr>
</table>
`;

Exemple de ce que cela donne

Qu’en pensent les experts SVP ?
Cdlt

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>
3 « J'aime »

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 :slight_smile:

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.