Style suivant une variable

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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.
Pièce jointe 78567
Code:

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:

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:

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

07/06/2011, 12h46
SpaceFrog

Code:

document.getElementById("LED").className =(LED[i]==1)? "on":"off";
07/06/2011, 12h56
jibibi

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

Code:

<td id="LED" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=4');">ENTREE</td>
07/06/2011, 12h59
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:

$("#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.

Citation:

Envoyé par jibibi

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

Code:

<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:

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

07/06/2011, 13h05
Invité

pourquoi jquery ? sa le forcerait a tout refaire sans pour autant améliorer le résultat
07/06/2011, 13h11
keskidi

Citation:

Envoyé par mekal

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.

Code:

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

07/06/2011, 13h41
SpaceFrog

elle fait quoi au juste ta fonction ajax sur le retour ??
car c'est sur le retour qu'il faut appliquer le style
07/06/2011, 13h42
keskidi

Citation:

Envoyé par jibibi

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".
07/06/2011, 13h54
jibibi

pardon,
je viens de recevoir ma nouvelle freebox, il a fallu que je l'installe:aie:

il se passe que ca n'affecte pas le style des cellules du tableau

la fonction ajax bascule le relais, c'est tout
Mais les états des relais sont enregistrés sur un fichier status.xml dont je me sers pour renseigner les variables d'état des relais LED[i]

J'ai un petit script qui me permet de voir si ce tableau est bien renseigné, et ca fonctionne
07/06/2011, 14h01
keskidi

Et ce petit script est sur la page du contrôleur ?
N'aurais tu pas un peu plus de détails ?
Est-ce que tu n'appellerais pas la fonction de changement d'état un peu trop tôt ? (Avant que ton fichier status soit modifié)
07/06/2011, 14h43
jibibi
Citation:

Envoyé par keskidi

Et ce petit script est sur la page du contrôleur ?
N'aurais tu pas un peu plus de détails ?
Est-ce que tu n'appellerais pas la fonction de changement d'état un peu trop tôt ? (Avant que ton fichier status soit modifié)

non, je ne pense pas
J'ai un petit script de test, qui montre que les status sont bien repris en LED[i]
Code:

1 2 3 4 5 6 <script type="text/javascript"> for (i=0;i<LED.length;i++) { document.write("<h"+LED[i]+">" + PIECE [i+1] + "<br />"+"</h"+LED[i]+">"); } </script>
ca affiche le nom des pièces avec des style h1 ou h2 suivant l'état des LED[i]

Je me demande s'il n'y a pas une confusion par rapport à "LED",
qui est utilisé pour stocker les états avec LED[i]
et pour renseigner l'ID de la classe
07/06/2011, 15h05
jibibi

Code:

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

vous êtes surs et certains de la syntaxe?:calim2:
il manque pas des zigouigouis dans les coins ou sur les côtés?
07/06/2011, 15h09
SpaceFrog

Non la syntaxe est correcte
Pour moi la question est plutot d'ordre chronologique...
A quel moment tentes tu d'attribuer les styles ...

et a priori il faut un boucle ...

Voilà tout le code
C'est à la fin que ca se passe

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
 
<html>
<head>
 
<script src="js/mchp.js" type="text/javascript"></script>
 
<style type="text/css">
body
{
background-color:black;
}
h0
{
color:orange;
font-size:20px;
font-family:"Arial";
font-style:oblique;
text-align:center;
}
h1
{
color:gray;
font-size:20px;
font-family:"Arial";
font-style:oblique;
text-align:center;
}
</style>
 
 
<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>
 
 
 
<script type="text/javascript">
var PIECE = new Array();
PIECE[1]= "ENTREE"
PIECE[2]= "CUISINE"
PIECE[3]= "SEJOUR"
PIECE[4]= "SEJOUR2"
PIECE[5]= "BUREAU"
PIECE[6]= "BUANDERIE"
PIECE[7]= "ESCALIER"
PIECE[8]= "CELLIER"
</script>
 
 
<script type="text/javascript">
 
var xmlDoc;
 
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","http://81.xx.xx.xxx:9025/status.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
</script>
 
 
<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>
 
<script type="text/javascript">
for (i=0;i<LED.length;i++)
{
document.write("<h"+LED[i]+">" + PIECE [i+1] + "<br />"+"</h"+LED[i]+">");
}
</script>
 
<script type="text/javascript">
for (i=0;i<LED.length;i++)
{
document.getElementById("LED"+i).className=(LED[i]==1)? "on":"off";
}
</script> 
 
 
 
<table style="width:100%; height:90%; style="background-color: #07B133; color: #ffffff;">
<col span="4" style="background-color: #07B133; color: #ffffff;" />
 
<tr>
	<td id="LED1" onclick="newAJAXCommand('http://81.xx.xx.xxx:9025/leds.cgi?led=1');">ENTREE</td>
	<td class="off" >CUISINE</td>
	<td class="off" >SEJOUR1</td>
</tr>
<tr>
	<td class="off">SEJOUR2</td>
	<td class="off">BUREAU</td>
	<td class="off">BUANDERIE</td>
</tr>
<tr>
	<td class="off">ESCALIER</td>
	<td class="off">BUANDERIE</td>
	<td class="off">CELLIER</td>
</tr>
<tr>
	<td class="on">CHAMBRE1</td>
	<td class="off">CHAMBRE2</td>
	<td class="off">CHAMBRE3</td>
</tr>
<tr>
	<td class="off">SDB</td>
	<td class="off">DRESSING</td>
	<td class="off">GRENIER</td>
</tr>
</table>
 
 
<br>
 
 
 
</body>
</html>

07/06/2011, 15h28
keskidi

Note que ton script se base sur LED[0] et id="LED1", ça devrait être id="LED0"

Attention si il n'y a pas d'id LEDx, le script va s'arrêter, en l'occurrence, il s'arrête dans la boucle à 0, car LED0 n'existe pas.
07/06/2011, 15h35
SpaceFrog

heu je ne vois pas de readystatus ?
je pense que ton style est attribué avant d'avoir le retour ...
07/06/2011, 15h36
jibibi

Citation:

Excuse-moi mais si ça affiche h1 ou h2, c'est que LED[i] = 1 ou 2, non ?
Et le PIECE[i+1], ça correspond à quoi ? Pourquoi i + 1 ?

8O oui, tu as raison

Citation:

Et le PIECE[i+1], ça correspond à quoi ? Pourquoi i + 1 ?

Parce que les LED sont numérotés de 0 a 7
alors que les pièces de 1 à 8

Citation:

Attention si il n'y a pas d'id LEDx, le script va s'arrêter, en l'occurrence, il s'arrête dans la boucle à 0, car LED0 n'existe pas.

il faut que je modifie ça tout de suite illico !!!!!!!
07/06/2011, 15h45
jibibi
Citation:

Envoyé par keskidi

Note que ton script se base sur LED[0] et id="LED1", ça devrait être id="LED0"

Attention si il n'y a pas d'id LEDx, le script va s'arrêter, en l'occurrence, il s'arrête dans la boucle à 0, car LED0 n'existe pas.

MAIS SI!!!
LED[i] 0;7
Code:

1 2 3 4 5 6 var LED = new Array(); for (i = 0; i <= 7; i++) { x=xmlDoc.getElementsByTagName("led"+i)[0].childNodes[0]; LED[i] = x.nodeValue; }
ensuite j'ai une boucle i de 0 à 7
Code:

1 2 3 4 5 6 <script type="text/javascript"> for (i=0;i<LED.length;i++) { document.write("<h"+LED[i]+">" + PIECE [i+1] + "<br />"+"</h"+LED[i]+">"); } </script>
LED[0] existe

Tu parles de l'ID LED0 ?
je ne comprends pas
07/06/2011, 15h51
keskidi
Citation:

Envoyé par jibibi

Tu parles de l'ID LED0 ?
je ne comprends pas

Oui, dans ton table, la première ligne est un TD id="LED1" ...
et le script
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> for (i=0;i<LED.length;i++) { document.getElementById("LED"+i).className=(LED[i]==1)? "on":"off"; } </script>
utilise l'ID "LED"+i, soit l'id LED0, qui n'existe pas
Si dans ton table, tu met id="LED0" à la place de "LED1", ça doit marcher.
Ou ("LED"+(i+1)) dans le script.

Si tu développes sur internet explorer ou firefox, ..., tu devrais utiliser le débugger ou firebug, ils te diront tout de suite quel est l'erreur - c'est assez pratique ... parfois.
07/06/2011, 15h54
jibibi

Citation:

Envoyé par SpaceFrog

heu je ne vois pas de readystatus ?
je pense que ton style est attribué avant d'avoir le retour ...

ben apparemment, ca marche sans

Quand je clique sur la première cellule, ca allume bien une lampe
et le style dans mon script de test change bien d'état
(j'ai modifié les balises en h1 et h0)
07/06/2011, 16h07
jibibi

CA Y EST CA MARCHE!!!!!!!!!!:P:P:P:P:P:ccool::ccool::ccool::ccool::ccool:

MERCI MERCI MERCI

j'ai mis la boucle après le table, et c'est bon !!!!!!!

j'en reviens pas.
Les ID doivent être écrits, utilisés avant d'être renseignés..
je comprends absolument rien au javascript
Vous avez des cerveaux d'extra terrestres!!!

MERCI

j'ai pas mal de ménage à faire, mais le plus dure est fait
merci!
07/06/2011, 16h18
SpaceFrog

c'est une question d'instanciation d'objet ...
il est logique de ne pas pouvoir "utiliser" un objet avant qu'il existe ...
07/06/2011, 16h24
keskidi

Effectivement ( pas pour le cerveau ), mais le code javascript s'exécute au moment du chargement de la page et donc avant que le reste de la page soit géré par le navigateur.
C'est pourquoi en général, on utilise des fonctions javascript, qu'on peut alors appeler par un événement onLoad (une fois que la page est chargée).
C'est pourquoi spacefrog te parle de readystatus ; en fait pour faire fonctionner ta page, tu fais juste "actualiser la page". On était un peu plus loin, autoactualisation par interval, récupération du status Ajax pour affichage du nouveau statut directement après l'action.
07/06/2011, 16h43
jibibi

oui, d'accord..
il y a une partie du script qui manque pour actualiser automatiquement les status et la page
pour l'instant, effectivement, je doit réactualiser la page manuellement

Mais mon souci, était d'affecter le style de mon tableau par une variable d'état.
Et ça, c'est bon !