Style suivant une variable

**jibibi** · 07/06/2011, 12h38

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

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

**SpaceFrog** · 07/06/2011, 12h46

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**jibibi** · 07/06/2011, 12h56

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** · 07/06/2011, 12h59

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.

**keskidi** · 07/06/2011, 13h03

Envoy� par 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.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> ...

Invit� · 07/06/2011, 13h05

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

**keskidi** · 07/06/2011, 13h11

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.

**jibibi** · 07/06/2011, 13h19

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** · 07/06/2011, 13h41

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

**keskidi** · 07/06/2011, 13h42

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

**jibibi** · 07/06/2011, 13h54

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

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

**keskidi** · 07/06/2011, 14h01

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�)

**jibibi** · 07/06/2011, 14h43

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**jibibi** · 07/06/2011, 15h05

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

vous �tes surs et certains de la syntaxe?

il manque pas des zigouigouis dans les coins ou sur les c�t�s?

**SpaceFrog** · 07/06/2011, 15h09

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

**jibibi** · 07/06/2011, 15h17

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

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

**keskidi** · 07/06/2011, 15h28

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.

**SpaceFrog** · 07/06/2011, 15h35

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

**jibibi** · 07/06/2011, 15h36

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 ?

oui, tu as raison

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

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

**jibibi** · 07/06/2011, 15h45

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Style suivant une variable

JavaScript

Discussions similaires

Partager

Partager