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.
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.
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:
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.
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 » ?
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
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.
il manque le backquote , mais il a peut-être disparu lors de ton copier/coller du code
EDIT : OK, après mise en forme de ton code par @ZogStrip, le bacquote est bien prèsent.
le datasource XML_V4 est bien enregistré sur le dashboard courant ?
quel fichier utilises-tu IO.xml ou bien status.xml ?
si tu utilises IO.XML, le script est ok
si c’est Status.xml, il faut utiliser [« Btn3 »] au lieu de [« IN »][3]
Merci pour ta réponse rapide. Je récape → 1) le datasource est bien enregistré sur le dashboard (il y a plusieurs widget html qui fonctionnent sur ce même dashboard.
2) j’utilise bien le fichier io.xml