Bonjour


PREAMBULE

J'ai fait l'acquisition de cartes IPX800 pour gérer mon éclairage, le portail, la ventilation, l'arrosage, etc..
Chacune des cartes a 8 relais commandables par IP au travers de la freebox.
Les relais répondent à des commandes de type:
newAJAXCommand('url de la carte/leds.cgi?led=i')

Par exemple, une fonction ONCLICK

Code : Sélectionner tout - Visualiser dans une fenêtre à part
onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=4')
fait basculer le relais n°4 de la carte dont l'adresse IP est 81.xx.xx.xxx sur le port 9025
et donc la lampe correspondante s'allume

Par ailleurs, les relais sont connectés à des boutons poussoirs (les interrupteurs de la maison), qui font également basculer les relais.

L'états des relais sont enregistrés dans des fichier status.xml, hébergé par les cartes.
Je récupère bien les états des relais avec les fonctions

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
xhttp.open("GET","http://81.xx.xx.xxx:9025/status.xml",false);
x=xmlDoc.getElementsByTagName
etc...
je peux même renseigner un tableau array de type LED[i]

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<script type="text/javascript">
var LED = new Array();
for (i = 0; i <= 7; i++)
{
x=xmlDoc.getElementsByTagName("led"+i)[0].childNodes[0];
LED[i] = x.nodeValue;
}
</script>
si LED[2]=0, indique que le relais n°2 est éteint



PROBLEME JAVASCRIPT


Donc pour résumé, je sais commander les relais avec ONCLICK:
newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=1')
Et je connais l'état des relais au travers d'un ARRAY de type LED[i]= (0 ou 1)


Je souhaiterai faire une interface sous forme d'un tableau, TABLE,
ou chaque cellule prend le style correspondant à l'état du relais
si LED[i]=1, la cellule n°i prend le style CSS on.
si LED[i]=0 la cellule n°i prend le style CSS off.
Nom : interface.jpg Affichages : 144 Taille : 35,3 Ko

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.on
{
text-align:center;
background-color:lightgray;
font-family:Arial,Helvetica,sans-serif;
font-size:30px;
color:white;
}
.off
{
text-align:center;
background-color:gray;
font-family:Arial,Helvetica,sans-serif;
font-size:30px;
color:black;
}
</style>


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table style="width:100%; height:90%; style="background-color: #07B133; color: #ffffff;">
<col span="4" style="background-color: #07B133; color: #ffffff;" />
<tr>
	<td class="off ou on en fonction de LED[1]" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=1');">ENTREE</td>
	<td class="off ou on en fonction de LED[2]" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=2');">CUISINE</td>
	<td class="off ou on en fonction de LED[3]" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=3');">SEJOUR1</td>
</tr>
<tr>
	<td class="off ou on en fonction de LED[4]" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=4');">SEJOUR2</td>
	<td class="off ou on en fonction de LED[5]" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=5');">BUREAU</td>
	<td class="off ou on en fonction de LED[6]" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=6');">BUANDERIE</td>
etc..
</tr>
</table>
Comment faire pour réaliser ça:
class="off ou on en fonction de LED[1] égale 0 ou 1"

Peut-être faut-il faut faire une fonction à base de

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
if LED[i]=1 {
document.getElementById("LED").innerHTML =' "class=on"';
}
else {
document.getElementById("LED").innerHTML =' "class=off"';
et introduire un ID dans le tableau, mais je ne sais pas comment, je suis largué

merci de votre aide