Discussion :

[dje8269]

Bonjour à tous,

Je cherche comment je peux lire les données d'une base de données et surtout comment les traiter.

Toutes les 0.5 secondes j'aimerais lire l'état de capteur qui sont écris sur ma base de données. en fonction de ce qui est lu, j’aimerais effectué des actions.

Je pensais faire comme cela mais je dois mal m'y prendre car ca ne fonctionne pas.
Je vais lire ma base de données. celle-ci me renvoie les lignes suivantes par exemple :

Code :

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

1
2
3
4
5
LED1=1
LED2=0
LED3=0
BUZ=0
MAJ=0

Si dans le texte lu de la base de données je trouve LED1=0 alors je souhaite affiché une led éteinte mais si je trouve LED1=1 alors je souhaite afficher l'image de la led allumée.

Voici mon code lecture de la base de données en javascript:

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
			//-------------------------------------------------------------------------------
			/*Lit l'état des LEDs  toutes les 0.5 secondes */
			function Read_DB()
			{
				const requete_MAJ= new XMLHttpRequest();
				requete_MAJ.open("GET", "/Read_Base.php", true);
				requete_MAJ.send();
				requete_MAJ.addEventListener("load", () => {
 
					if (requete_MAJ.responseText.includes("LED1=1")) {
						imageLedBon.style.display ='inline';
						imageLedBoff.style.display ='none';						
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
						imageLedBon.style.display ='none';
						imageLedBoff.style.display ='inline';
					}
				    setTimeout( Read_DB, 500 )	
				})
			}
			Read_DB()  // je repete l'opération toute les 0.5 secondes

Dans mon HTML j'ai cela :

Code html :

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

<td><img id="imageLedBon" style="display:none;" src="images/led_b_on.png"><img id="imageLedBoff" style="display:inline;" src="images/led_b_off.png"></td>

J'ai essayé de faire un background-image dans une classe mais j'ai pas réussis non plus

Rien ne se passe ! j'ai l’impression que la condition "LED1=1" ou "LED1=0" n'est jamais trouvée ! Pourtant en affichant ma base de données j'ai bien le bon texte qui se modifie.

Merci à vous

[mathieu]

pour débuguer cela, la 1re chose à faire est d'afficher ce que vous récupérez avec

Code :

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

console.log(requete_MAJ.responseText);

si le contenu est correct, vous affichez les variables suivantes jusqu'à ce que vous trouvez la variable qui ne contient pas la valeur prévue.

[dje8269]

Bonjour Mathieu,

Merci de vous penchez sur mon problème.

Je viens de réaliser votre idée de "débug".

Voila ce que j'obtiens dans la console toutes les 500ms :

serveur.fantaspic.fr:169:14
LED1=1<br>LED2=0<br>LED3=0<br>BUZ=0<br>MAJ=0<br>
LED1=1<br>LED2=0<br>LED3=0<br>BUZ=0<br>MAJ=0<br>

J'ai donc bien mes bons textes.

Donc le probléme ce trouve plus bas.

dans ma fonction dont je me suis inspiré d'une ancienne qui fonctionnait, je recherche dans la réponse le texte "LED1=1" , s'il existe, ce qui est le cas d’après le débug, je devrais afficher mon image. Hors rien ne se passe .
Comme vous me l'avez suggéré, j'ai donc rajouté un text dans la console plutot que d'afficher une image, afin de voir si le texte est bien pris en compte.

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
			//-------------------------------------------------------------------------------
			/*Lit l'état des LEDs  toutes les 0.5 secondes */
			function Read_DB()
			{
				const requete_MAJ= new XMLHttpRequest();
				requete_MAJ.open("GET", "/Read_Base.php", true);
				requete_MAJ.send();
				requete_MAJ.addEventListener("load", () => {
					console.log(requete_MAJ.responseText);
 
					if (requete_MAJ.responseText.includes("LED1=1")) {
						imageLedBon.style.display ='inline';
						imageLedBoff.style.display ='none';
						console.log("LED1=1");
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
						imageLedBon.style.display ='none';
						imageLedBoff.style.display ='inline';
						console.log("LED1=0");
					}
				    setTimeout( Read_DB, 500 )	
				})
			}
			Read_DB()  // je repete l'opération toute les 0.5 secondes

Ici j'ai bien le bon texte qui s’affiche dans la console? Donc on s'approche du but . l'erreur vient de l’affichage de mon image ... qui ne se fait pas. alors que dans mon code d'avant ca fonctionnait. Je continue mes investigations

[dje8269]

Me revoilou !

Bon bizarrement c’a fonctionne maintenant ! j'avoue ne pas comprendre pourquoi ! peut être un mauvais rafraichissement de la page ?

J'ai l'impression que ma façon de faire n'est pas top, cependant je n'ai trouvé que çà tout seul et c’a fonctionne.

Je voudrais soumettre à votre expertise deux solutions qui fonctionne. laquelle vous parait la meilleur ?

Une première où je charge mes deux images dans une cellule.
quand je dois afficher une image , je mets la première sur 'none' et la seconde sur 'inline' , et vice versa dans l'autre sens .

Mon image en html :

Code html :

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

<td><img style="height:56px;" id="imageLedBon" src="images/led_b_on.png"><img style="height:56px;" id="imageLedBoff" src="images/led_b_off.png"></td>

Mon code en JS :

Code :

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

1
2
3
4
5
6
7
8
9
if (requete_MAJ.responseText.includes("LED1=1")) {
						imageLedBon.style.display ='inline';
						imageLedBoff.style.display ='none';
 
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
						imageLedBon.style.display ='none';
						imageLedBoff.style.display ='inline';
 
					}

La seconde j'ai essayé de bien faire avec le CSS .
J'ai donc créer mon image en css avec 'back ground image' .

Mon CSS

Code CSS :

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

1
2
3
4
5
6
7
8
9
  .LED1_off{
    height: 65px;
    background-image: url('images/led_b_off.png');
    background-size: 80% auto;
    background-repeat: no-repeat;
  }
  .LED1_on{  
    background-image: url('images/led_b_on.png');
  }

Mon html :

Code html :

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

<td id="imageLedB" class="LED1_off"></td>

et mon JS :

Code :

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

1
2
3
4
5
6
7
					if (requete_MAJ.responseText.includes("LED1=1")) {
 
						document.getElementById("imageLedB").classList.add('LED1_on');
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
 
						document.getElementById("imageLedB").classList.remove('LED1_on');
					}

Voila les deux fonctionne apriori . L'une est elle mieux que l'autre , ou peut être qu'il y a encore mieux !

[dje8269]

Bonjour à tous,

Je suis maintenant bloqué sur la récupération des valeurs de mes potentiomètres !

En effet j'avance doucement et maintenant que tout fonctionne je cherche a recuprer les valeurs de mes potentiomètre stockés dans la base de données. Contrairement aux Boutons qui n'ont que deux positions et donc assez facile de lire la réponse, la il s'agit d'une valeur à 4 chiffres. Je ne peux donc pas faire une réponse pour chaque.

Peut être que je dois manipuler le texte de ma réponse pour en extraire seulement le chiffre qui m’intéresse ! oui mais comment faire ? je n'ai pas trouver de solution avec des .search ou des indexof !
Peut être que vous auriez une solution à me proposer !

Donc voici à quoi ressemble une réponse de ma requête qui va lire ma Base de données pour en traiter les infos !
Fichier Read_Base.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
LED1=0
LED2=1
LED3=0
INTER=0
POTAR1=1234
POTAR2=5678
BUZ=0
MAJ=56
MAJ_web=56
MAJ_ESP=56

Et voici mon coide JS qui traite les infos recus pour le moment :

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
//-------------------------------------------------------------------------------
			/*Lit l'état des LEDs  toutes les 0.5 secondes */
			function Read_DB()
			{
				const requete_MAJ= new XMLHttpRequest();
				requete_MAJ.open("GET", "/Read_Base.php", true);
				requete_MAJ.send();
				requete_MAJ.addEventListener("load", () => {
 
					if (requete_MAJ.responseText.includes("LED1=1")) {
						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
					}
					if (requete_MAJ.responseText.includes("LED2=1")) {
						imageLedJon.style.display ='inline'; imageLedJoff.style.display ='none';
					} else if (requete_MAJ.responseText.includes("LED2=0")) {
						imageLedJon.style.display ='none'; imageLedJoff.style.display ='inline';
					}
					if (requete_MAJ.responseText.includes("LED3=1")) {
						imageLedRon.style.display ='inline'; imageLedRoff.style.display ='none';
					} else if (requete_MAJ.responseText.includes("LED3=0")) {
						imageLedRon.style.display ='none'; imageLedRoff.style.display ='inline';
					}	
					if (requete_MAJ.responseText.includes("INTER=1")) {
						imageInteron.style.display ='inline'; imageInteroff.style.display ='none';
					} else if (requete_MAJ.responseText.includes("INTER=0")) {
						imageInteron.style.display ='none'; imageInteroff.style.display ='inline';
					}
 
 
				    setTimeout( Read_DB, 500 )	
				})
			}
			Read_DB()  // je repete l'opération toute les 0.5 secondes

PS : J'ai penser a créer une fichier PHP par potentiomètre mais bon c'est con, car tout est dans la meme base.

Comme vous le constatez, il est évident qu'il y certainement mieux comme façon de faire. Désolé si mon code vous fait saigner des yeux !

[NoSmoking]

Bonjour,
je constate à la lecture de la discussion que tu as peu tenu compte des remarques que l'on t'a faites !

Que se passera-t-il quand tu auras 30 capteurs, ou plus, à gérer ?

Le retour de ton serveur devrait plutôt être un objet type JSON et ressembler à :

Code :

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

1
2
3
4
5
6
7
8
9
{
  "LED1": "1",
  "LED2": "1",
  "LED3": "1",
  "LED4": "0",
  "INTER": "0",
  "POTAR1": "1234",
  "POTAR2": "5678"
}

à partir de là c'est un jeu d'enfant que de mettre à jour le DOM pour peu que les clés soient des IDs d'éléments HTML et que fonction du type d'éléments tu agisse en conséquence.

Je t'en avais mis un exemple de traitement dans ta première discussion.

Bien sûr, d'autres méthodes peuvent être mises en place mais il me semble que la réception d'un « JSON » te faciliterait bien la tâche en parcourant celui-ci.