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