Bouton 3 positions

De GCE Electronics
Aller à : navigation, rechercher


Tristate Button

012.png
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.

Tristate-data.png

Etape 2 : le widget

TristateW.png
  • 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