Bouton 3 positions

Tristate Button
300px
Nom			Tristate Button
Famille			IPX800 V4
Wiki créé le			28/10/2020
Wiki mis à jour le			28/10/2020
Auteur			fgtoul

Introduction

Présentation d'un widget 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

Créez une source de données sur le dashboard.

La valeur de l'entrée analogique sera récupérée 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