Différences entre les versions de « Bouton 3 positions »
Aller à la navigation
Aller à la recherche
| Ligne 32 : | Ligne 32 : | ||
* Renseignez les noms des 3 états dans le tableau titres | * 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 56 : | 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