Style suivant une variable [Résolu]

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

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

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

[SpaceFrog]

Code :

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

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

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

[keskidi]

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

[mekal]

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

[keskidi]

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]

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

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

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]

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]

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]

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

[jibibi]

Code :

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]

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]

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>

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

[SpaceFrog]

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

[jibibi]

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]

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