A l’usage j’ai trouvé que le widget des volets roulants manquait de feedback : lorsque du rez de chaussée j’appuie sur les flèches pour actionner les volets roulants de l’étage rien ne me dit que ma demande a été enregistrée. De même, la question « As-tu fermé les volets ? » se soldait trop souvent par un aller/retour à l’étage.
J’ai donc intégré sur mon IPX (sans X-4VR) la logique nécessaire pour stocker le % de fermeture de chacun des volets dans des compteurs (heureusement je n’ai pas eu besoin de faire de règle de 3) . Grâce aux sources de données (rafraichies toutes les secondes) et au widget HTML j’ai un résultat satisfaisant (au détail d’alignement près).
Est-il possible de faire plus simple que ce code scolaire et/ou de consommer moins de ressources ? J’ai tenté désespérément de ne pas créer de datasource mais de me raccrocher à io.xml … sans succès
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 » ?
