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.

[dje8269]

Bonjour NoSmoking,

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

Je sais que cela n'as pas l'air, mais crois moi, j'ai vraiment cherché a bien faire.

Comme pour le HTML par exemple, tu m'as déconseillé de le faire avec des tables alors j'ai planché dessus avec des div etc.... Mais après plusieurs heures je n'y suis pas arrivé, alors qu'avec les tables j'ai réussis.
J'essaye de m'améliorer et de retenir un maximum d’informations que vous me transmettez, mais c'est pas évident de les appliquer.
Tu serais a coté de moi ce ne serais pas la même chose. Mais la, en attendant une réponse, je continue de cherche de mon coté et forcement je dévie. " C'est en faisant des erreurs que l'on apprend le mieux "

Revenons a nos moutons !

TU m'indique que le retour de mon serveur devrait être un objet JSON ? késako un objet JSON ?
Même ma base données doit être toute pourrie dans sa construction, c'est la première fois que j'en fais une !

Donc je vais chercher des infos sur les objets JSON , et je vais essayer de trouver comment faire en sorte que ma réponse de serveur ressemble a ce que tu m'as indiqué !

Merci de ta patience et crois moi encore que je prends en compte tout ce que vous m'avez dit!

[mathieu]

Même ma base données doit être toute pourrie dans sa construction, c'est la première fois que j'en fais une !

si j'ai bien suivi, tu as juste une table actuellement avec une ligne par valeur donc s'il y a quelque chose à optimiser je pense que ça ne sera pas grand chose donc tu peux continuer de l'utiliser pour le moment.

TU m'indique que le retour de mon serveur devrait être un objet JSON ? késako un objet JSON ?

l'objet json c'est par exemple ce qu'il a mis comme exemple dans son message avec les "{" "}" et ":".
en php tu peux faire cela :

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
<?php
 
 
$donnees = [];
$donnees["DIODE1"] = "1";
$donnees["POTAR2"] = "124";
 
/*
ici $donnees contient un tableau php avec cela : 
 
[
  'DIODE1' => '1',
  'POTAR2' => '124',
]
 
*/
 
 
$resultat_json = json_encode($donnees);
 
 
/*
ici $resultat_json contient une chaine de caractères avec ça : 
 
{
  "DIODE1" : "1",
  "POTAR2" : "124"
}
*/

tu vas surement dire que ça ne change pas grand chose en php mais là où ça change tout c'est en javascript.
ce format est la base des objets javascript donc si le serveur envoie ça, dans le code javascript tu pourras lire directement requete_MAJ.response["POTAR2"] pour avoir la valeur "124".

[dje8269]

Merci Mathieu de ton intervention explicite.

Bien que je pense avoir compris le principe c'est toujours et encore la forme et la construction qui me pose problème.

Mettre en forme la réponse de la requête pour que Javascript puisse plus facilement l'interpréter je comprends tout a fait.

J'ai donc modifier mon fichier Read_Base.php pour obtenir une réponse comme le préconise NoSmoking :

Voici mon fichier :

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
 
<?php
include("code_base_de_donnee.php");
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
 
$sql = "SELECT Capteur, Etat FROM Ma_table";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
  // output data of each row
  echo "{"."<br>";
  while($row = $result->fetch_assoc()) {
    echo "\"".$row["Capteur"]."\": \"" . $row["Etat"]. "\",<br>";  // ex : "LED1": "1",
  }
} else {
  echo "0 results";
}
echo "}";
$conn->close();
?>

Voici une image de ma base


Avec mon code voici le résultat de ma requête :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
{
"LED1": "1",
"LED2": "0",
"LED3": "1",
"INTER": "0",
"POTAR1": "1234",
"POTAR2": "5678",
"BUZ": "0",
"MAJ": "56",
"MAJ_web": "56",
"MAJ_ESP": "56",
}

J'ai l'impression que c'est bon ? En fait je pensais que cette architecture était faite directement par la Base de données. Mais apparemment il faut la construire !


et enfin dans mon fichier index.php dans la partie du code en javascript j'ai écrit cela !

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
 
			/*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';
						//document.getElementById("imageLedB").classList.add('LED1_on');
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
						//document.getElementById("imageLedB").classList.remove('LED1_on');
					}
					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';
					}
 
					console.log(requete_MAJ.response["POTAR2"]);
				    setTimeout( Read_DB, 500 )	
				})
			}
			Read_DB()  // je repete l'opération toute les 0.5 secondes

En rajoutant la ligne de console.log afin de voir la réponse ! cela m’écrit "undefined" dans la console ?
j'ai pas tout compris je pense !

PS : j'ai pas compris où doit se mettre ton code php que tu as écrit ?

[mathieu]

PS : j'ai pas compris où doit se mettre ton code php que tu as écrit ?

en fait la fonction "json_encode" remplace la construction que tu as faites dans la boucle. imagine que dans le futur tu aies une valeur qui contient un guillemet par exemple et ton résultat ne sera plus un objet json valide.

donc dans la boucle qui lit les données avec fetch_assoc, tu mets ces données dans un tableau php (le tableau $donnees de mon exemple) et ensuite tu utilises "json_encode".
je crois que j'ai vu le souci dans ton code, tu as mis un "<br>" mais c'est de l'html. là tu veux générer du json donc c'est un saut de ligne simple (qui n'est pas nécessaire en plus, tout peut se trouver sur une seule ligne).

au niveau du code javscript, je te conseille d'afficher directement le contenu de "requete_MAJ". ça affichera beaucoup de chose qui ne te seront pas utile mais au milieu de tout ça, tu verras où sont tes données.

[SpaceFrog]

Code :

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

1
2
"MAJ_ESP": "56",
}

Attention le dernier element ne doit pas être suivi d'une virgule ..
le meilleur moyen d'y arriver sans erreur n'est pas de concatener un string
mais de construire un array en php puis de faire un json_encode

Code php :

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

1
2
3
4
5
6
7
8
if ($result->num_rows > 0) {
$output=array();
  // output data of each row
  while($row = $result->fetch_assoc()) {
    $output[$row["Capteur"]]= $row["Etat"];
  }
 
echo json_encode($output);

[dje8269]

Voici mes modifications suite à tes explications !

Modification du fichier Read_base.php :

pour "encoder" le JSON comme il faut pour pouvoir être interpréter en JS .

Code php :

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
<?php
include("code_base_de_donnee.php");
 
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
 
$sql = "SELECT Capteur, Etat FROM Ma_table";
$result = $conn->query($sql);
 
$donnees = [];    // création d'un tableau pour stocker les données
 
if ($result->num_rows > 0) {  
    while($row = $result->fetch_assoc()) {          // output data of each row
 
        $donnees[$row["Capteur"]] = $row["Etat"];
    }
} 
else {
  echo "0 results";
}
 
$resultat_json = json_encode($donnees);
echo $resultat_json ;
 
$conn->close();
?>

Quand j'ouvre la requete cela me donne :

Code :

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

{"LED1":"1","LED2":"0","LED3":"0","INTER":"0","POTAR1":"1234","POTAR2":"5678","BUZ":"0","MAJ":"56","MAJ_web":"56","MAJ_ESP":"56"}

Ce qui as l'air d'être correct et attendu ! déjà la je sais pas trop comment j'ai réussis si j'ai bon !

Ensuite dans le html qui contient mon 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
			/*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';
						//document.getElementById("imageLedB").classList.add('LED1_on');
					} else if (requete_MAJ.responseText.includes("LED1=0")) {
						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
						//document.getElementById("imageLedB").classList.remove('LED1_on');
					}
					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';
					}
 
					 //var reponse = requete_MAJ.response["POTAR2"];
 
					console.log(requete_MAJ);
 
				    setTimeout( Read_DB, 500 )	
				})
			}
			Read_DB()  // je repete l'opération toute les 0.5 secondes

Le résultat semble correct dan la console j'obtiens :

Code :

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

XMLHttpRequest { onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: ".../Read_Base.php", status: 200, statusText: "OK", responseType: "", response: " {\"LED1\":\"1\",\"LED2\":\"0\",\"LED3\":\"0\",\"INTER\":\"0\",\"POTAR1\":\"1234\",\"POTAR2\":\"5678\",\"BUZ\":\"0\",\"MAJ\":\"56\",\"MAJ_web\":\"56\",\"MAJ_ESP\":\"56\"} " }

Ensuite quand je décommente la ligne

Code :

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

//var reponse = requete_MAJ.response["POTAR2"];

j'ai toujours le message "undefined" qui apparait !

[NoSmoking]

Comme pour le HTML par exemple, tu m'as déconseillé de le faire avec des tables alors j'ai planché dessus avec des div etc....

Cela n'a pas de caractère d'urgence

Le résultat semble correct dan la console j'obtiens :

Attention les données retournées par le serveur sont contenues dans une chaîne de caractères, avant exploitation sous forme d'objet il y a lieu de convertir celle-ci en objet et pour ce faire on utilise JSON.parse("chaine représentant l'objet").

Code :

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

1
2
3
4
5
6
7
8
9
10
requete_MAJ.addEventListener("load", () => {
      const datas = JSON.parse(requete_MAJ.responseText);
      if (datas["LED1"]) { // objet LED1 existe
        if (datas["LED1"] == 1) {
          // faire avec
        }
        else {
          // faire sinon
        }
        // la suite du code

tu verras par la suite à optimiser le code qui fatalement deviendra lourd !

[mathieu]

oups, j'ai l'habitude d'utiliser jquery où il se passe plein de choses automatiques. mais je crois que ce n'est pas le cas avec XMLHttpRequest et vous devez rajouter une ligne pour analyser la réponse.
donc au final dans le code javascript vous devez faire ça :

Code :

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

1
2
3
let donnees = JSON.parse(requete_MAJ.response);
console.log(donnees["INTER"]);
console.log(donnees["POTAR1"]);

[SpaceFrog]

Attention toutes fois au else ...
il vaut mieux prévoir une clef erreur ...

Code :

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

1
2
3
4
 
else {
  $output['erreur']='0 results'
}

De sorte que le JSON.parse puisse retourner un résultat cohérent.
il te suffira ensuite de tester si la clef 'erreur' existe cote client

ou alors prévoir une clef count avec le nombre de résulats ...

[dje8269]

Merci à tous les 3 ,

Ça donne envie de continuer avec des réponses aussi claires et explicites. Bien que mon niveau soit faible, j'arrive à obtenir l'effet désiré grâce à vous !

Pour vous "informaticiens" ça doit moins vous parler que pour moi "électronicien" mais j'aime aussi le concret. Et c'est un véritable plaisir de voir ma carte obéir à une interface web, de plus avec la petite image c'est très pédagogique. Mes enfants s'amusent comme des fous même si ce n'est pas le but !

Donc désolé d'avoir mis autant de temps pour répondre, mais comme on change le fichier Reab_Base de "format", il ne faut pas oublier que de l'autre coté j'ai aussi un client ( mon ESP) qui lui a aussi besoin de lire cette base. Du coup j'ai fait un fichier spécial pour lui au format qui lui convient.

Du coup ça donne çà.

Dans le HTML qui gère mes petites POTAR j'ai :

Code html :

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
		 <!-- #################   1 ere Colonne    #########################  -->
		 <table style="display:inline; vertical-align: top;" > 
		 	<tr>				
				<td style="height: 30px; width: 195px;"></td>		
			</tr>
			<tr>				
				<td style="height: 85px; text-align: right;">
					<button class="BP_poussoir" id="BUZ" value="Buzzer">Buzzer</button>
				</td>		
			</tr>
			<tr>				
				<td style="height: 125px;"></td>		
			</tr>
			<tr style="height: 85px;">				
				<td class="Potar" id="Potar1" >1245</td>		
			</tr>
			<tr>				
				<td style="height: 33px;"></td>		
			</tr>
			<tr style="height: 85px;">				
				<td class="Potar" id="Potar2">6789</td>		
			</tr>
		</table>

Coté JavaScript dans le HTML

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
 
			//-------------------------------------------------------------------------------
			/*Lit l'état des LEDs  toutes les 0.5 secondes */
			function Read_DB()
			{
				const idPotar1 = document.getElementById("Potar1");
				const idPotar2 = document.getElementById("Potar2");
 
				const requete_MAJ= new XMLHttpRequest();
				requete_MAJ.open("GET", "/Read_Base.php", true);
				requete_MAJ.send();
				requete_MAJ.addEventListener("load", () => {
 
					const donnees = JSON.parse(requete_MAJ.response);  // Ici je convertis la réponse en objet pour pouvoir l'utiliser en JS
 
					if ( donnees["LED1"] == 1 ) {
						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
					} else {
						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
					}
					if (donnees["LED2"] == 1) {
						imageLedJon.style.display ='inline'; imageLedJoff.style.display ='none';
					} else  {
						imageLedJon.style.display ='none'; imageLedJoff.style.display ='inline';
					}
					if (donnees["LED3"] == 1) {
						imageLedRon.style.display ='inline'; imageLedRoff.style.display ='none';
					} else {
						imageLedRon.style.display ='none'; imageLedRoff.style.display ='inline';
					}	
					if (donnees["INTER"] == 1) {
						imageInteron.style.display ='inline'; imageInteroff.style.display ='none';
					} else {
						imageInteron.style.display ='none'; imageInteroff.style.display ='inline';
					}
					idPotar1.textContent = donnees["POTAR1"];
					idPotar2.textContent = donnees["POTAR2"];			
 
				    setTimeout( Read_DB, 500 )	
				})
			}
			Read_DB()  // je repete l'opération toute les 0.5 secondes

Un véritable bonheur de voir bouger les chiffres en tournant les potar, et de voir changer la position de l’interrupteur sur l'écran quand on le change sur la carte .

Cependant il me reste un petit soucis à régler. C'est quand j'allume une led depuis ma platine et non depuis les boutons webs. Mettre à jour la base de données aucun problème.
Donc cela va m'afficher la bonne image de led ( soit allumée ou éteinte) , par contre le bouton " case à cocher" lui ne bouge pas ! est-il possible de le passer à chekced ?

Voici une petite photo en cadeau pour vous remercier de l'aide précieuse.

[dje8269]

trouvé pour mettre le bouton en "checked" .

Code :

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

1
2
3
4
5
6
7
8
 
				if ( donnees["LED1"] == 1 ) {
						imageLedBon.style.display ='inline'; imageLedBoff.style.display ='none';
						LED1.checked = true;
					} else {
						imageLedBon.style.display ='none'; imageLedBoff.style.display ='inline';
						LED1.checked = false;
					}