Discussion :

[jibibi]

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.

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("LED").className =(LED[i]==1)? "on":"off";

[jibibi]

merci
et ensuite je place le id comme ça??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td id="LED" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=4');">ENTREE</td>

[keskidi]

merci
et ensuite je place le id comme ça??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td id="LED" onclick="newAJAXCommand('http://81.xxx.xxx.xxx:9025/leds.cgi?led=4');">ENTREE</td>

Oups, croisement, oui, mais comme tu as plusieurs LED, il faut que tu les numérotes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
document.getElementById("LED"+i).className =(LED[i]==1)? "on":"off";
 
...<td id="LED3" onclick="newAJAXCommand('http://81.xxx.xxx.xxx:9025/leds.cgi?led=3');">ENTREE</td>
<td id="LED4" onclick="newAJAXCommand('http://81.xxx.xxx.xxx:9025/leds.cgi?led=4');">ENTREE</td> ...

[keskidi]

Bonjour,

personellement, j'utiliserais JQuery qui possède les ordres que tu recherches.
puisque tout semble être en javascript, c'est ce qu'il y a de plus simple
Tu génère ton table avec des id pour chaque led, par exemple, id="led01" ..
et tu codes tes permutations d'état avec jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#led01").removeClass("off").addClass("on");

Logiquement, tu peux tout faire directement avec jquery, créer ta table, gérer ton accès ajax, il faut ajouter le plugins timer pour permettre la gestion des intervals ou des timeouts pour réactualiser le contenu des cellules. mais ça peut aussi se faire avec les fonctions javascripts setinterval et settimeout standards.

[Invité]

pourquoi jquery ? sa le forcerait a tout refaire sans pour autant améliorer le résultat

[keskidi]

pourquoi jquery ? sa le forcerait a tout refaire sans pour autant améliorer le résultat

oui, ma réponse s'est juste croisée avec celle de spacefrog et j'étais plutôt passé par la génération de la page complète en javascript et jquery permet de simplifier et d'accélérer le codage pour ce genre de chose.

[jibibi]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.getElementById("LED"+i).className =(LED[i]==1)? "on":"off";
 
...<td id="LED3" onclick="newAJAXCommand('http://81.xxx.xxx.xxx:9025/leds.cgi?led=3');">ENTREE</td>
<td id="LED4" onclick="newAJAXCommand('http://81.xxx.xxx.xxx:9025/leds.cgi?led=4');">ENTREE</td> ...

arrr misère, ca ne marche pas

[SpaceFrog]

elle fait quoi au juste ta fonction ajax sur le retour ??
car c'est sur le retour qu'il faut appliquer le style

[keskidi]

arrr misère, ca ne marche pas

Que se passe-t-il ? Ce n'est pas clair !

Trop cool, le système de traduction automatique des messages, mais bon, ça limite un peu la déconne liée à un "ça marche pas".