Discussion :

[erwannoo]

Bonjour,

J'aimerai créer comme un "voyant" sur un page web qui indiquerait l'état (allumé ou éteint) d'un ordinateur distant. Mais je ne vois pas trop comment structurer tout ça.

J'utilise un serveur nodejs qui fait la gestion de boutons et je voudrais y associer un état du PC.

En gros et de manière simple, j'ai un serveur qui permet de démarrer un PC en envoyant un paquet magique. Sur cette partie la, je n'ai pas de problème ça fonctionne bien. Par contre, coté état du PC distant, j'aimerai faire un test ping qui renverrai au serveur node l'état actif ou inactif et qui emettrait un message vers la page html pour mettre a jour le fameux "voyant". Je ne sais pas si c'est clair et aussi si ce n'est pas une usine a gaz que j'essaie de faire...

Coté nodejs je sais traiter les variables et utiliser io.emit pour les envoyer vers la page web, par contre coté page web, je sais pas trop comment gérer la construction du voyant. Je voulais partir sur un truc du genre :

Code html :

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

<div title="PC State" class="favorite styledvoyant_state" id="voyant" value=""></div>

avec la définition ".styledvoyant_state" dans le fichier form.css

Merci pour vos conseils.

[erwannoo]

Je me dis que peut en faisant :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div title="PC State" class="favorite styledvoyant_state" id="voyant" value=""></div>
 
<script defer>
	var socket = io.connect();	
 
	if (pc1_on ==1){
		document.getElementById("voyant").classList.add("off");
	}else{
		document.getElementById("voyant").classList.remove("on");
	}
</script>

avec dans le code css le parametrage des classes .on et .off

Code css :

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
.on
{
	font-family: "Verdana", Arial, Verdana, serif;
	font-size: 0.8em;
	font-weight: bold;	
	text-align: center;
	color: #000000 !important;
	background-color: #2cde33 !important;	/* vert */
	background-image: url("pictures/on.png");	
	border-radius: 5px;
	width: 70px;
	height: 25px;
	border-color: #000000;
}
 
.off
{
	font-family: "Verdana", Arial, Verdana, serif;
	font-size: 0.8em;
	font-weight: bold;	
	text-align: center;
	color: #000000 !important;
	background-color: #ff0e32 !important;	/* rouge */
	background-image: url("pictures/off.png");	
	border-radius: 5px;
	width: 70px;
	height: 25px;
	border-color: #000000;
}

mais cela n'a pas l'air de très bien fonctionner.

[NoSmoking]

Bonjour,
un petit exemple de ce que l'on peut faire visuellement : https://nosmoking.developpez.com/dem...-poussoir.html

PS :
on peut faire plus sophistiqué, voir : [Coup de cœur CSS] Realistic Red Switch

[erwannoo]

Bonjour,

Merci pour la réponse, ce que j'aimerai faire c'est pouvoir jouer sur l'état du voyant ( vert / rouge par exemple ) en fonction de l'état d'une variable. L'état de cette variable étant fournie par le nodejs, via socket, mais pour ce sujet je n'ai pas de difficultés. La seule difficulté est sur la partie : déclaration de la zone du voyant ( div ... ) et codage du script dans la page html.

Je continues de chercher...

Merci.

[mathieu]

jouer sur l'état du voyant ( vert / rouge par exemple ) en fonction de l'état d'une variable

c'est ce que fait la page que NoSmoking vous a montré.
je ne comprends pas ce que vous continuez de chercher, est ce que cette discussion est résolue et vous avez un autre souci ?

[erwannoo]

Bonjour,

Oui c'est bon, j'ai trouvé mon bonheur.

Merci.