Différences entre les versions de « Bouton 3 positions »
Aller à la navigation
Aller à la recherche
| (15 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 4 : | Ligne 4 : | ||
{{Infobox IPX800 | {{Infobox IPX800 | ||
| titre = Tristate Button | | titre = Tristate Button | ||
| image = | | image = 012.png | ||
| famille = IPX800 V4 | | famille = IPX800 V4 | ||
| date-create = 28/10/2020 | | date-create = 28/10/2020 | ||
| date-update = | | date-update = 07/03/2021 | ||
| auteur = fgtoul | | auteur = fgtoul | ||
}} | }} | ||
==Introduction== | ==Introduction== | ||
Présentation d'un widget développé à la demande d'un membre de la communauté. | Présentation d'un widget pour IPX800 V4, développé à la demande d'un membre de la communauté. | ||
Ce widget utilise 3 sorties virtuelles. Il faudra donc quelques scénarios pour le bon fonctionnement. | Ce widget utilise 3 sorties virtuelles. Il faudra donc quelques scénarios pour le bon fonctionnement. | ||
==Etape 1 : la source de données== | ==Etape 1 : la source de données== | ||
L'état des sorties virtuelles sera récupéré dans le fichier status.xml. | |||
Via le menu Administrateur, cliquez sur "AJOUTER SOURCE DE DONNEES" et paramétrez la source comme suit. | Via le menu Administrateur, cliquez sur "AJOUTER SOURCE DE DONNEES" et paramétrez la source comme suit. | ||
[[Fichier: | [[Fichier:Tristate-data.png|700px|center]] | ||
==Etape 2 : le widget== | ==Etape 2 : le widget== | ||
[[fichier:tristateW.png]] | [[fichier:tristateW.png|center]] | ||
* Créez un widget type HTML de 2 blocs de hauteur | |||
* Collez le code ci-dessous | |||
* Renseignez les numéros de sorties virtuelles utilisées dans vos scénarios (saisir n° de la SV-1) dans les variables vout1, vout2 et vout3. L’exemple donne SV n°6, SV n°3 et SV n°4 | |||
* Renseignez les noms des 3 états dans le tableau titres | |||
< | |||
<syntaxhighlight lang="php" style="overflow:auto;"> | |||
let vout1=5,vout2=2,vout3=3; | let vout1=5,vout2=2,vout3=3; | ||
let titres=["Filtration arrêtée","Filtration automatique","Filtration forcée"]; | let titres=["Filtration arrêtée","Filtration automatique","Filtration forcée"]; | ||
| Ligne 57 : | Ligne 57 : | ||
<center> | <center> | ||
`; | `; | ||
</ | </syntaxhighlight> | ||
==Etape 3 : les scénarios== | ==Etape 3 : les scénarios== | ||
Version actuelle datée du 1 septembre 2021 à 15:41
| |||
|---|---|---|---|
| |||
| Nom | Tristate Button | ||
| Famille | IPX800 V4 | ||
| Wiki créé le | 28/10/2020 | ||
| Wiki mis à jour le | 07/03/2021 | ||
| Auteur | fgtoul | ||
Introduction
Présentation d'un widget pour IPX800 V4, développé à la demande d'un membre de la communauté. Ce widget utilise 3 sorties virtuelles. Il faudra donc quelques scénarios pour le bon fonctionnement.
Etape 1 : la source de données
L'état des sorties virtuelles sera récupéré dans le fichier status.xml.
Via le menu Administrateur, cliquez sur "AJOUTER SOURCE DE DONNEES" et paramétrez la source comme suit.
Etape 2 : le widget
- Créez un widget type HTML de 2 blocs de hauteur
- Collez le code ci-dessous
- Renseignez les numéros de sorties virtuelles utilisées dans vos scénarios (saisir n° de la SV-1) dans les variables vout1, vout2 et vout3. L’exemple donne SV n°6, SV n°3 et SV n°4
- Renseignez les noms des 3 états dans le tableau titres
let vout1=5,vout2=2,vout3=3;
let titres=["Filtration arrêtée","Filtration automatique","Filtration forcée"];
let labels=["0","A","I"];
//ne rien modifier ci-dessous
let st=0;let etat=["off","off","off"];
if (datasources["STATUS"]["response"]["vout" + vout1] ==1) {st=0;etat[0]="on";}
if (datasources["STATUS"]["response"]["vout" + vout2] ==1) {st=1;etat[1]="on";}
if (datasources["STATUS"]["response"]["vout" + vout3] ==1) {st=2;etat[2]="on";}
return `
<center>
<p style="font-size:16px;">${titres[st]}</p>
<div class="bouton2" style="width:141px;height:45px;border-radius:22px">
<div class="indicator-light2 vout${vout1} voutta${vout1} ${etat[0]}" onclick="newAJAXCommand('io.cgi?vout=${vout1}');" style="width:30px;height:30px;margin-top:0px"></div>
<div class="indicator-light2 vout${vout2} voutta${vout2} ${etat[1]}" onclick="newAJAXCommand('io.cgi?vout=${vout2}');" style="width:30px;height:30px;margin-top:0px"></div>
<div class="indicator-light2 vout${vout3} voutta${vout3} ${etat[2]}" onclick="newAJAXCommand('io.cgi?vout=${vout3}');" style="width:30px;height:30px;margin-top:0px"></div>
<div style="font-size:10px;">
<div style="position:absolute;margin-left:15px;margin-top:36px;" >${labels[0]}</div>
<div style="position:absolute;margin-left:62px;margin-top:36px;">${labels[1]}</div>
<div style="position:absolute;margin-left:112px;margin-top:36px;">${labels[2]}</div>
</div></div>
<center>
`;Etape 3 : les scénarios
Ecrivez 3 scénarios en remplaçant SV1 SV2 et SV3 par les sorties virtuelles utilisées :
scène 1 : appui bouton 1
événement : SV1
action : OFF
résultat : SV2 ; SV3
scène 2 : appui bouton 2
événement : SV2
action : OFF
résultat : SV1 ; SV3
scène 3 : appui bouton 3
événement : SV3
action : OFF
résultat : SV1 ; SV2
Les 3 scènes qui précèdent permettent le fonctionnement du widget. Il faut écrire quelques scènes supplémentaire pour piloter les appareils, en fonction de la position du bouton. Les scènes vont provoquer une action en fonction de l'état des 3 sorties virtuelles.
scène 4 : appui bouton 1
événement : SV1
action : ON
résultat : ce que vous voulez
scène 5 : appui bouton 2
événement : SV2
action : ON
résultat : ce que vous voulez
scène 6 : appui bouton 3
événement : SV3
action : ON
résultat : ce que vous voulez