Discussion :

[dje8269]

Bonjour à tous,

JE continue mes recherches en examinant les codes qui vous m'envoyer !

J’entrevois une possibilité d'améliorer ma méthode .
Voila l'idée histoire d’améliorer ma compréhension du fonctionnement.
Je créer plusieurs bouton de même type ( je pourrais avoir plusieurs type par la suite). Donc ces boutons auront beaucoup de chose en commun quand on appui dessus.
Changement de couleur par exemple. donc tous les boutons de ce type deviennent rouge quand on appuie dessus.
Le seul truc a changer ce serait le texte de la construction de la requête.

avec par exemple

Code html :

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

1
2
<BP><button class="BP_poussoir" id="BP2" >BP2</button></BP>
		<BP><button class="BP_poussoir" id="BP3" >BP3</button></BP>

Code :

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

1
2
3
4
5
6
7
const elemBP = document.querySelectorAll("BP");
		elemBP.forEach((btn) => {
			// pour tous supports
			btn.addEventListener("pointerdown", F_BPdown);
			btn.addEventListener("pointerup", F_BPup);
			btn.addEventListener("pointerleave", F_BPup);
		});

Avec ce code je pense que j'affecte à chaque boutons du type "BP", une fonction en fonction de l'évenemetn qui lui arrive dessus.

Les choses se corsent à partir d'ici.

Donc si l'événement "pointerdown" est détecter sur un élément "btn" de type "BP" la fonction "F_BPdown" est effectuée

Ca c'est dans ma tête, peut être que j'ai fais de la merde.

Ensuite la construction de la fonction devra être personnalisée suivant le bouton qui à été détecter. C'est ici que ca coince !

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
		function F_BPdown() 
			{
				console.log(btn.target.name); 		// ici zone de test pour essaye de voir comment recuperer l'ID du bouton qui a enclencher l'événement
				var xhttp = new XMLHttpRequest();	// Création d'un objet requete
				xhttp.open("GET", 'consignes.php?C_'nom du botuon'=1', true);  // Ici j'aimerais construire le texte en fonction du bouton qui a declenché
				xhttp.send();	// envoi de la requete créer au dessus
				nom du botuon.style.background = "red"   // Ici j'aimerais selectionné le style du bouton déclenché
				nom du botuon.textContent = "Allumée !"
			}
		function F_BPup() 
			{
				var xhttp = new XMLHttpRequest();
				xhttp.open("GET", 'consignes.php?C_BP1=0', true);
				xhttp.send();
				imageBP1on.style.display ='none';
				imageBP1off.style.display ='inline';
				BP1.style.background = "none"
				BP1.textContent = "PRESS"
			}

Avec la console j'ai essayé moultes combinaison pour afficher l'ID de mon bouton qui à enclenché la fonction mais j'y parviens pas. Du .taget du .ID du btn , du elemBP etc ......

Une fois cet ID recuperer j'aurais plus qu'a l’incruster dans les commandes suivant pour faire des affections seulement a ce bouton et n'envoyer que le texte correspondant.

Je sais pas si j'ai été super clair .
Merci de m'avoir lu

[NoSmoking]

Bonjour,
pour commencer <bp> n'est pas un élément du HTML, il te faut simplement écrire :

Code html :

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

<button class="BP_poussoir" id="BP2" >BP2</button>

Le seul truc a changer ce serait le texte de la construction de la requête.

pour récupérer l’élément cliqué il te faut connaitre l'événement donc l'avoir parmi la liste de tes paramètres, donc la signature de la fonction est

Code :

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

function F_BPdown(ev) { // ev = l'événement passé en paramètre

ensuite tu récupères ce que tu veux

Code :

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

1
2
3
4
5
function F_BPdown(ev) {
  const cible = ev.taget;
  const nameCcble = cible.name;
  // EnvoiMessage() ...
}

avec cela tu peux construire ta requête.

Ta fonction envoiMessage peut être commune en lui passant des paramètres.

[dje8269]

Merci NoSmoking.
ta réponse m'a bien fait avancé.

Par contre sans mes balises <BP> ca ne fonctionne pas. Je pensais que c'était des balises que l'(on pouvait fabriquer à sa guise pour encapsuler.

Comment se fait -il que sa fonctionne avec et pas sans ?

Je vais chercher une solution pour effectuer la même chose sur la couleur du bouton et seulement celui-ci.

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
		<BP><button class="BP_poussoir" id="BP1" >BP1</button></BP>
		<BP><button class="BP_poussoir" id="BP2" >BP3</button></BP>
 
		<!-- ######################################################    JAVA SCRIPT    #############################################################-->
		<script type="text/javascript">
 
		const elemBP = document.querySelectorAll("BP"); // Je créer un objet qui contient tout les types BP donc tous mes bouton d'un certains types
		elemBP.forEach((btn) => { 						// Ici j'affecte une fonction à chaque boutons suivant leurs evenements
			btn.addEventListener("pointerdown", F_BPdown);
			btn.addEventListener("pointerup", F_BPup);
			btn.addEventListener("pointerleave", F_BPup); 
		});
 
		function F_BPdown(ev) 
			{
				const BP = ev.target.id ;
				var xhttp = new XMLHttpRequest();	
				xhttp.open("GET", 'consignes.php?C_'+BP+'=1', true); 
				xhttp.send();
			}
 
		function F_BPup(ev) 
			{
				const BP = ev.target.id ;				
				var xhttp = new XMLHttpRequest();
				xhttp.open("GET", 'consignes.php?C_'+BP+'=0', true);
				xhttp.send();
			}

[jreaux62]

Code :

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

		const elemBP = document.querySelectorAll(".BP_poussoir");

[dje8269]

Bonjour à tous,

Je soumet mon code qui a l'air de fonctionné a votre jugement, mais ne soyez pas trop dur hein !

Donc le principe est le suivant, il s'agit d'un bouton a double action. C'est a dire qu'il effectue une tache quand il est pressé et une autre ( ici il arrête la tache en cours) quand il est relâché ou que la souris sort du bouton.
L'avantage c'est que je peux créer autant de bouton que je veux, il suffit de leurs mettre la "class="BP_poussoir"" .
Les arguments que renvoient ces boutons sont leur ID. Il faut juste veiller à avoir une certaine logique dans la gestion des arguments pour une bonne prise en compte.

Code du bouton dans le HTML

Code html :

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

<button class="BP_poussoir" id="LED2" >BP2</button>

Traitement du bouton dans le JS

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
 
		//****************************   Bouton à impulsion   ************************************************* */
		const elemBP = document.querySelectorAll(".BP_poussoir"); // Je créer un objet qui contient tout les types BP donc tous mes bouton d'un certains types
		elemBP.forEach((btn) => { 						// Ici j'affecte une fonction à chaque boutons suivant leurs evenements
			btn.addEventListener("pointerdown", F_BPdown);
			btn.addEventListener("pointerup", F_BPup);
			btn.addEventListener("pointerleave", F_BPup); 
		});
 
		function F_BPdown(ev) 
		{
			const BP_ID = ev.target.id ;	// J'ernegistre l'ID du bouton appuyé et qui a provoqué l'evenement
			const BP_doc = document.getElementById(BP_ID); // Je  créer un document pour pouvoir modifier le texte
			BP_doc.textContent = "Appuyé !"
			var xhttp = new XMLHttpRequest();	
			xhttp.open("GET", 'consignes.php?C_'+BP_ID+'=1', true);  
			xhttp.send();
		}
 
		function F_BPup(ev) 
		{
			const BP_ID = ev.target.id ;
 
			document.getElementById(BP_ID).textContent = BP_ID ;	
			var xhttp = new XMLHttpRequest();
			xhttp.open("GET", 'consignes.php?C_'+BP_ID+'=0', true);
			xhttp.send();
		}

Pour créer un bouton poussoir à simple action ( par exemple pour incrémenter une valeur) il me suffira d'enlever la fonction down pour ne garder que la up ou inversement .

Maintenant je sèche sur les boutons verrouillable, c'est à dire les cases à cocher. Ces boutons quand on clic dessus exécute une action et reste dans la position pressé. quand on re-appui dessus il exécute une autre action et redevienne à l'état non pressé.

Je voulais partir du même principe c'est à dire, a créer des boutons en leur application une class. et de sélectionné le bouton qui a changer.
Mais je n'y arrive pas. j'ai un vrai problème de compréhension sur les arguments, leurs portées dans le code et/ou comment les appelés.

Voici mon code qui ne fonctionne pas :

Code du bouton dans le HTML

Code html :

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

1
2
3
4
		<div class="checkbox-button">
			<input type="checkbox" id="LED4">
			<label for="LED4"></label>
		</div>

Code du bouton dans le JS

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
 
		element_Check.forEach((btn_chk) => { 
			btn_chk.addEventListener('change', change);
		});
 
		function change(){
 
			if (element_Check.checked) {
				var xhttp = new XMLHttpRequest();
				xhttp.open("GET", 'consignes.php?C_LED2=1', true);
				xhttp.send();
			} else {
				var xhttp = new XMLHttpRequest();
				xhttp.open("GET", 'consignes.php?C_LED2=0', true);
				xhttp.send();
			}
		}

J'ai essayé énormément de combinaison avant de venir vous demander de l'aide.

Bonne journée

[NoSmoking]

Dans ton code

Code :

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

1
2
const BP_ID = ev.target.id ;	// J'ernegistre l'ID du bouton appuyé et qui a provoqué l'evenement
const BP_doc = document.getElementById(BP_ID); // Je  créer un document pour pouvoir modifier le texte

tu as avantage à ne pas utiliser document.getElementById car tu connais ton élément à ligne en dessus qui est ev.target.
tu peux donc écrire directement :

Code :

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

1
2
const objBtn = e.target;
const idBtn = objBtn.id;

cela reviendra au même en « plus clair ».

Lorsque tu écris

Code :

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

1
2
3
var xhttp = new XMLHttpRequest();	
xhttp.open("GET", 'consignes.php?C_'+BP_ID+'=1', true);  
xhttp.send();

et dans ton autre fonction

Code :

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

1
2
3
var xhttp = new XMLHttpRequest();
xhttp.open("GET", 'consignes.php?C_'+BP_ID+'=0', true);
xhttp.send();

la seule chose qui change c'est le paramètre que tu passes à ta requête, donc autant faire une fonction commune et l’appeler avec le paramètre de chaque action.

Code :

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

1
2
3
4
5
6
function sendMessage(param) {
  const url = "consignes.php?";
  const xhttp = new XMLHttpRequest();
  xhttp.open("GET", url + param, true);
  xhttp.send();
}

et dans chacune des tes autres fonctions il ne te reste qu'à faire un appel à celle-ci :

Code :

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

1
2
3
4
5
6
function F_BPdown(ev) {
  const objBtn = ev.target;
  const idBtn = objBtn.id;
  objBtn.textContent = "Appuyé !"
  sendMessage("C_" + idBtn + "=1");
}

idem pour l'autre

Code :

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

1
2
3
4
5
6
function F_BPup(ev) {
  const objBtn = ev.target;
  const idBtn = objBtn.id;
  objBtn.textContent = idBtn;
  sendMessage("C_" + idBtn + "=0");
}

Juste une remarque au passage pourquoi ne pas mettre le C_ dans d'ID de l'élément ?

Voilà essaie déjà de « digérer » cela !
chi va piano va sano

[dje8269]

Merci NoSmoking ,

Digestion effectuée !
Tes explications sont parfaites, je comprends beaucoup mieux !

cependant quelques petites remarques. Je n'ai pas tout simplifié.

le "e" par exemple pour le moment n'est pas intuitif pour moi, même si je ne doute pas qu'il va vite le devenir ! je préfère écrire "evt". le "e" j'ai l'impression qu'il fait référence à un argument du html ou à un mot clé.

Un autre truc, je comprends mieux quand c'est écrit comme cela

Code :

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

1
2
3
 
const obj_BP = evt.target;
const ID_BP = evt.target.id ;

Plutôt que

Code :

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

1
2
3
 
const obj_BP = evt.target;
const ID_BP = obj_BP.id ;

Bon c'est juste une question de goût ! mais pour moi c'est plus clair car redondant. Je vois plus vite que la première ligne fait référence à la target d'un évenement et que en dessous, je fais réference à l'ID de la target de l'évenement. Au final c'est pareil je pense.

Question : y-a-t-il une vrai plus value à écrire une fonction commune pour envoyer le message ? car au final je n'ai que 2 possibilités soit 0 ou 1. J'hésite a garder comme ça , sauf si tu me dis que c'est mieux !

Pour le "C_" je préfère ne pas l'incorporer, le C signifiant Consigne . Ainsi j'ai juste à appeler mes BP sans me soucier de rajouter le "C_" devant. LE "C_" n'est pas anodin , il me sert de lautre coté, coté ESP32 pour distinguer les Consignes d'autres textes !

En tout cas c'est bien plus limpide grâce à toi merci encore.

voici ma fonction qui fonctionne parfaitement !

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
//****************************   Bouton à impulsion   ************************************************* */
		const elemBP = document.querySelectorAll(".BP_poussoir"); // Je créer un objet qui contient tout les types BP donc tous mes bouton d'un certains types
		elemBP.forEach((btn) => { 						// Ici j'affecte une fonction à chaque boutons suivant leurs evenements
			btn.addEventListener("pointerdown", F_BPdown);
			btn.addEventListener("pointerup", F_BPup);
			btn.addEventListener("pointerleave", F_BPup); 
		});
 
		function F_BPdown(evt) 
		{
			const obj_BP = evt.target;			// Je reléve l'objet qui à provoqué un evenement "evt" : ici un bouton
			const ID_BP = evt.target.id ;		// J'enregistre l'ID de l'objet qui a provoqué l'evenement ( au dessus) : ici l'ID du bouton
			obj_BP.textContent = "Appuyé !" ;	// Je change le texte de l'objet selectionné
			sendConsignes(ID_BP + "=1");		// J'appelle la fonction qui envoie le GET, en lui envoyant le BP et son etat en parametre
		}
 
		function F_BPup(evt) 
		{
			const obj_BP = evt.target;
			const ID_BP = evt.target.id ;
			obj_BP.textContent = ID_BP ;		// J'écris l'ID du bouton sur le BP
			sendConsignes(ID_BP + "=0");
		}
 
		function sendConsignes(param)
		{
  			const xhttp = new XMLHttpRequest();
  			xhttp.open("GET", "consignes.php?C_"+ param, true);
  			xhttp.send();
		}

[NoSmoking]

le "e" par exemple pour le moment n'est pas intuitif pour moi, même si je ne doute pas qu'il va vite le devenir ! je préfère écrire "evt"

le nommage des variables reste à l'initiative du codant tant que tu t'y retrouves, il est simplement de bonne pratique que l'on sache de quoi on parle.
Donc tu peux même écrire

Code :

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

1
2
3
function handleEvent(event) {
  // le code
}

Bon c'est juste une question de goût ! mais pour moi c'est plus clair car redondant.

C'est justement le redondant qui est à éviter si possible, dès que l'on écrit deux fois la même chose on essaie de factoriser. Concernant les variables c'est qu'il est préférable de mettre celle ci en « cache » plutôt d'y faire maintes fois référence, une fois que l'on a lu quelque chose on le met en mémoire.
Pourquoi dans ton cas tu n'écris donc pas :

Code :

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

1
2
const ID_BP = evt.target.id;
evt.target.textContent = "Appuyé !"

PS : je pense que tu peux passer cette discussion en résolu et concernant ton deuxième point de ton post #5, si tu n'y arrives toujours pas, ouvre une nouvelle discussion.

[dje8269]

Super merci !

J'allais ouvrir un sujet pour mon autre problème mais je pense l'avoir résolu à force de tâtonner ! peut-être un coup de chance

Avec ce code partie html :

Code html :

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

1
2
3
4
		<div class="checkbox-button">
		<input type="checkbox" id="LED2">
		<label for="LED2">test</label>
		</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
		const element_Check = document.querySelectorAll(".checkbox-button");
 
		element_Check.forEach((bp_chk) => {
			bp_chk.addEventListener('change', (event) => {
				if (event.target.checked) {
					console.log("check");
					sendConsignes(event.target.id + "=1");
				} else {
					console.log("pas check;")
					sendConsignes(event.target.id + "=0");	
				}		
			})
		});