Widget HTML : Avis d'expert javascript demandé

Perso, j’ai mis un widget « Volets roulants » au dessus d’un widget « Contrôle volets roulants » et ca rends plutôt bien :wink:

2 « J'aime »

C’est vrai que ça rend bien, mais ce n’est pas opérationnel en dehors des X-4VR.:sleepy:

Sauf si j’ai raté un paramétrage de l’IPX …

Dans tous les cas je vais regarder ce widget de plus près.

Merci

2 « J'aime »

Au temps pour moi, je n’avais pas vu que vous n’aviez pas d’X-4VR

Je vais regarder votre code de plus près mais pour

j’attends toujours une réponse à

1 « J'aime »

Aie. Je vois que nous partageons les mêmes analyses et les mêmes difficultés… J’ai buté également sur updateStatus et je me suis amusé à deviner comment le merge des données était réalisé dans le texte statique. En jouant sur les classes on arrive à retrouver certaines informations. Mais pour moi cela tient du hack, pas sûr que cela soit pérenne.

@GCE, je pense que la balle est dans votre camp et vous avez une décision à prendre : Souhaitez-vous, ou pas, que la communauté enrichisse la bibliothèque de widgets disponibles ?

Si vous créez le point d’entrée demandé par ZogStriP dans le code javascript (exécuté sur le client) des développeurs pourrons proposer des widgets à la communauté et apporter de la valeur à vos produits.

5 « J'aime »

Merci ZogStriP pour la bonne suggestion !

L’ntégration des graphiques est super simple. Pour ceux que cela intéresse voici le résultat visuel :

Et le bout de code (il montre par ailleurs comment piloter des sorties virtuelles pour contrôler les VR hétérogènes ou un groupe de VR dans mon cas)

Reste plus que l’avis de GCE sur l’utilisation de datasource ou de point d’entrée dans updateStatus :pensive:

4 « J'aime »

Bonsoir,

Un chevalier blanc m’ayant expliqué par mp comment publier du code pour qu’il reste lisible sur le forum (l’encadrer de « ``` ») , voici sous forme de texte une fusion du code des 2 widgets pour ceux que cela peut intéresser. A copier / coller dans un widget html de 4 de haut.

// Définir un data source pointant sur les compteurs nommé "Compteurs"
// http://<monipx>/api/xdevices.json?key=1234&Get=C
// rafraichi toutes les secondes
var C3 = (datasources["Compteurs"]["C3"]).toFixed(0);
var C4 = (datasources["Compteurs"]["C4"]).toFixed(0);
var C5 = (datasources["Compteurs"]["C5"]).toFixed(0);

 // Entete si % sous les boutons
//var s = '<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">' +
//        '<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">Parents</h2>'+
//        '<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">Enfants</h2>' +
//        '<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">Bureau</h2>' +
//        '<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">All</h2>';

// Ou Entête si graphique
var s = '<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">' +
        '<h2 class="section-title"></h2>' +
        '<h2 class="section-title" style="margin-left:12px;margin-top:8px;display: block;">Parents</h2>' +
        '<div class="indicator-vr">' +
        '<div class="indicator-vrFond" style="height:' + C3 + '%;"></div>' +
        '</div>' +
        '<h2 class="section-title" style="display: block;margin-top: -16px;margin-left: 85px;">Enfants</h2>' +
        '<div class="indicator-vr">' +
        '<div class="indicator-vrFond" style="height:' + C4 + '%;"></div>' +
        '</div>' +
        '<h2 class="section-title" style="display: block;margin-top: -16px;margin-left: 134px;">Bureau</h2>' + 
        '<div class="indicator-vr">' +
        '<div class="indicator-vrFond" style="height: ' + C5 + '%;"></div>' +
        '</div>' +
        '<h2 class="section-title" style="display: block;margin-top: -16px;margin-left: 206px;">All</h2>' + 
        '<div style="height:40px;"></div>';
        
// Up
s = s + '<div style="height:40px;"></div>' +
        '<span class="police-arrow-up" style="width:25%;margin-left:20px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=0'" + ');"></span>' +
        '<span class="police-arrow-up" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=2'" + ');"></span>' +
        '<span class="police-arrow-up" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?vout=4'" + ');"></span>' +
        '<span class="police-arrow-up" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?vout=54'" + ');"></span>';

// Stop : supprimé pour le VR 3 car impossible par construction
s = s + '<br style="margin:20px;">' +
        '<span class="police-stop" style="width:25%;margin-left:20px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=0'" + ');"></span>' +
        '<span class="police-stop" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=2'" + ');"></span>';
        
 // Down
 s = s + '<br style="margin:30px;">' +
         '<span class="police-arrow-down" style="width:25%;margin-left:20px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=1'" + ');"></span>' +
         '<span class="police-arrow-down" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?rly=3'" + ');"></span>' +
         '<span class="police-arrow-down" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?vout=5'" + ');"></span>' +
         '<span class="police-arrow-down" style="width:25%;margin-left:40px;font-size:20px" onclick="newAJAXCommand(' + "'io.cgi?vout=55'" + ');"></span>';

// Position en % si pas de graphique 
//s = s + '<div style="height:25px;"></div>' +
//    	'<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">' + C3 + ' %</h2>'+
//        '<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">' + C4 + ' %</h2>' +
//        '<h2 class="section-title" style="float:left;width: 25%;text-align: center;top: 0;">' + C5 + ' %</h2>';

//        <div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">

//        </div>
// Fermeture du div
s = s + '</div>';

return s 

Regardez-le, posez des questions, faites-le évoluer, et partagez vos évolutions.

Have fun

6 « J'aime »

Bonjour

super ce widget,
par contre comment alimentez vous les compteurs avec les % des volets ?

Bonsoir Kytrix,

La réponse n’est pas triviale, je vais essayer de poster un article dans le wiki ce weekend.

Cordialement,

Bonsoir @Kytrix,

Je viens de poster une solution complète ici :

3 « J'aime »

Ok merci !
par contre ça c’est dans le cas ou l’on utilise de simple relais , il n’y a pas plus simple avec un X-4VR ?

Bonsoir,

Si, dans ce cas je crois qu’il n’y a rien à faire d’autre que de brancher les fils et choisir le widget.
Mais je n’ai pas testé.

GCE a bien travaillé :slight_smile:

2 « J'aime »

exact ! Je n’avais pas recréé un widget!
Merci!

Bonjour,
Je voudrais fignoler un widget HTML qui me sert de tableau de bord et qui me permet, d’un coup d’oeil, de savoir ce qui est OK et ce qui ne l’est pas, et que j’étofferai au fur et à mesure des besoins.
Comment faire pour que dans le même widget, je puisse avoir un icône cadenas fermé ou cadenas ouvert en fonction du retour d’état d’une entrée numérique:

var isSwitchedOn = datasources["XML_V4"]["response"]["in"][7] == 0;
var color = `color: #${ isSwitchedOn ? 'fff' : 'ff7f00' };`;

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-lock x2"></span>
      </div>
      <div class="tw-value" style="font-size: 18px; margin: 20px 0 0 20px;${color}">
         Garage  : ${ isSwitchedOn ? "Fermé" : "Ouvert" }
      </div>
    </div>
  </div>
</div>
`;

Le code javascript n’est pas de moi, sinon je ne poserais pas la question :wink:

Merci par avance.

1 « J'aime »

Il faut rendre l’icône dynamique. Remplacez

<span class="glyphicons glyphicons-lock x2"></span>

par

<span class="glyphicons glyphicons-${ isSwitchedOn ? "lock" : "unlock" } x2"></span>

ou inversément… :lock:

5 « J'aime »

Super merci, ça marche nickel sans rien retoucher :heart_eyes::heart_eyes:

Grâce à votre aide, c’est que du bonheur cette V4 !

5 « J'aime »

Bonjour,

Il faudrait créer une section « widget » sur le forum avec des exemples complets, car
je dois reconnaître que « je suis vraiment pas doué pour le javascript »
( formule gentille pour dire que je n’y comprend absolument rien), alors que je
me débrouille pas mal en C++, php, basic.

Cdt

2 « J'aime »

N’hésitez pas à créer un sujet par example, je serais ravis d’y répondre :wink:

5 « J'aime »

Bonjour @ZogStriP,

Je devrais ouvrir un sujet, mais j’aime bien adapter les scripts que je trouve par-ci par là.

Prenons l’exemple ci-dessus, pourquoi si je fais un simple copier/coller du script, il ne se passe
rien ? pas de message d’erreur, même pas une icône perdu au milieu d’une fenêtre…
Il faut bien le coller dans « créer widget » / « html » / « javascript » ?

Y’a p’têtre un truc a activer quelque part…?

Quel exemple ? Il y en a plein dans ce sujet :relaxed:

Bonjour,
J’aurais un problème à soumettre, à savoir un wiget HTML affichant un mode ECO ou CONFORT avec un changement d’icône en fonction de l’entrée digitale N°2 (ECO avec lune et CONFORT avec soleil par exemple). J’ai cru m’en sortir tout seul mais… c’est un échec total :sob:
De plus, le widget ne réagit même pas au changement d’état de l’entrée digitale en question. Je m’étais pourtant inspiré de quelque chose qui fonctionne bien dans un autre widget.

var isSwitchedOn = datasources["XML_V4"]["response"]["in"][3] == 0;// "in"3 = Entrée digitale N°2
var color = `color: #${ isSwitchedOn ? '00ffff' : 'ffff00' };`;

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-${ isSwitchedOn ? "moon" : "sun" } x2"></span>
      </div>
      <div class="tw-value" style="font-size: 18px; margin: 20px 0 0 20px;${color}">
         Mode  : ${ isSwitchedOn ? "ECO" : "CONFORT" }
      </div>
    </div>
  </div>
</div>
`;

Où ai-je fait une (des) erreur (s) ?
Merci pour votre aide.