Widget " Visualisation de son Alarme "

Bonjour a tous,

Voila, je cherchais un moyen de visualiser mon système d’alarme d’un coup d’œil.

Compliqué avec des capteurs Eno, des relais et des entrées Virtuelles, entrées digitales…

Voyant avec couleur rouge et verte , titre au passage de la souris et action sur le voyant.

et un grand MERCI a @fgtoul pour son aide précieuse :wink:

ici alarme OFF et on voit les portes ou fenêtre ouvertes
Capture8
ici alarme ON et on voit les portes ou fenêtres fermées
et action sur le voyant rouge pour éteindre
Capture9
ici on voit le détecteur quand on pointe dessus.
Capture7

Effet très visuel !!! et encore, rien n’aurait été possible sans @fgtoul

Cordialement
JF

PS: Je vous mettrez le code si cela vous intéresse… :smiley:

9 « J'aime »

Bonjour merokaly

En effet le partage du code de ces widgets est intéressant. Il pourra nous donner des idées sur nos propres installations. :+1:

Merci d’avance

Intéressé aussi !!!:grinning::grinning::grinning::grinning:

Bonjour,

je vous le poste ce soir…

Cordialement.
JF

Voici le code a aménager a votre gout…:wink:

if  (datasources["IPX"]["response"]["vout0"] == 1) {var m1= "indicator-light4-off";} else {m1="indicator-light4-on";}
if  (datasources["IPX"]["response"]["eno0"] == 1) {var m2= "indicator-light2 on";} else {m2="indicator-light2 off";}
if  (datasources["IPX"]["response"]["eno1"] == 1) {var m3= "indicator-light4-off";} else {m3="indicator-light4-on";}
if  (datasources["IPX"]["response"]["led0"] == 1) {var m4= "indicator-light4-off";} else {m4="indicator-light4-on";}
if  (datasources["IPX"]["response"]["vout5"] == 1) {var m9= "indicator-light2 on";} else {m9="indicator-light2 off";}

if  (datasources["IPX"]["response"]["eno2"] == 1) {var m5= "indicator-light4-on";} else {m5="indicator-light4-off";}
if  (datasources["IPX"]["response"]["eno3"] == 1) {var m6= "indicator-light4-on";} else {m6="indicator-light4-off";}
if  (datasources["IPX"]["response"]["eno4"] == 1) {var m7= "indicator-light4-on";} else {m7="indicator-light4-off";}
if  (datasources["IPX"]["response"]["eno5"] == 1) {var m8= "indicator-light4-on";} else {m8="indicator-light4-off";}
if  (datasources["IPX"]["response"]["eno6"] == 1) {var m10= "indicator-light4-on";} else {m10="indicator-light4-off";}
if  (datasources["IPX"]["response"]["eno7"] == 1) {var m11= "indicator-light4-on";} else {m11="indicator-light4-off";}
if  (datasources["IPX"]["response"]["btn8"] == 1) {var m12= "indicator-light4-on";} else {m12="indicator-light4-off";}


var titre1="ON/OFF";
var titre2="SIRENES"
var titre3="CAPTEURS MAGNETIQUE";
var titre4="AP";

return `

<style>
.indicator-light4-on {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    margin-top: 15px;
    float: left;
    background-color: #3fb740;
    margin-right: 10px;
    margin-left: 3px;
}
.indicator-light4-off {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    margin-top: 15px;
    float: left;
    background-color: red;
    margin-right: 10px;
    margin-left: 3px;
}
</style>

<br>
<span style="margin-left:10px;color:GRE;">${titre1}</span><span style="margin-left:45px;color:GRE;">${titre2}</span><span style="margin-left:45px;color:GRE;">${titre4}</span><br>
<div title="bouton" class="${m1}" style="margin-left:15px;margin-top:8px;" onclick="newAJAXCommand('io.cgi?rly=0');"></div>
<div title="bouton" class="${m2}" style="margin-left:5px;margin-top:8px;" onclick="newAJAXCommand('io.cgi?rly=0');"></div>
<div title="bouton" class="${m3}" style="margin-left:40px;margin-top:8px;" onclick="newAJAXCommand('io.cgi?rly=0');"></div>
<div title="bouton" class="${m4}" style="margin-left:5px;margin-top:8px;" onclick="newAJAXCommand('io.cgi?rly=0');"></div>
<div title="bouton" class="${m9}" style="margin-left:45px;margin-top:8px;"></div>

<br><br>
<span style="margin-left:20px;color:GRE;">${titre3}</span><br>
<div title="bouton" class="${m5}" style="margin-left:15px;margin-top:8px;"></div>
<div title="bouton" class="${m6}" style="margin-left:5px;margin-top:8px;"></div>
<div title="bouton" class="${m7}" style="margin-left:5px;margin-top:8px;"></div>
<div title="bouton" class="${m8}" style="margin-left:5px;margin-top:8px;"></div>
<div title="bouton" class="${m10}" style="margin-left:5px;margin-top:8px;"></div>
<div title="bouton" class="${m11}" style="margin-left:5px;margin-top:8px;"></div>
<div title="bouton" class="${m12}" style="margin-left:5px;margin-top:8px;"></div>
`;   

Bonne journée a tous
Cdt
JF

4 « J'aime »