Quelle méthode pour changer la couleur d'un bouton

**dje8269** · 27/06/2021, 09h59

Bonjour à tous,

Me revoilà avec mes boutons et mes leds !

Tout fonctionne parfaitement, et je comprends a peu prêt ce que je fais !

Je cherche un conseil pour faire une petite action, et poser une question de faisabilité.

Commençons par la question :
Je n'ai pas trouvé, alors je me demande si c'est possible, de reconnaitre un bouton "pressé" d'un bouton "relaché" ? genre "onpress" et "onrelease" ; Mon but est donc d'allumer une led tant que le bouton est appuyé et que la led s’éteigne quand le bouton est relâché.

Pour la petite action.

J'ai donc deux boutons par led un rouge pour "off" et un vert pour "on".
Je souhaiterais que quand la led est allumée le bouton "ON" soit plus foncé et le bouton "OFF" soit bien visible, car comme la led est allumée la seule action possible c'est de l'éteindre.
et vice versa quand la led est éteinte, le bouton "ON" bien visible et le bouton "OFF" plus sombre.

- A/ Dois-je créer deux images boutons "on" et "off" l'un sombre et l'autre clair, les mettre dans le html , et sélectionner celui qui s'affiche.
- B/ Dois-je créer une classe pour le bouton "on" clair et une autre pour le "on" sombre par exemple et appliquer la classe quand je clic ?
- La réponse "D"

Merci

JE vous remets mon code ici

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
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
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
		<link href="style.css" rel="stylesheet" media="screen" type="text/css"> 
		<title>Commande LED</title>
    </head>
 
    <body>
 
		<h1 id="titre" style='text-align:center;'>Serveur de Jérémy</h1>
 
		<table align="center">
			<tr height:100px>
				<td>
					<table class="ta_BP">
						<tr>
							<td class="td_txt" >La LED VERTE est <span id="id-etat-ledv">---</span></td>
							<td style="text-align:left;" ><img id="imageLedVon" src="images/led_v_on.png"><img id="imageLedVoff" src="images/led_v_off.png"></td>
						</tr>
 
						<tr>
							<td width=300px style="text-align:center;" colspan=2 >
								<button class="bouton_on"  onclick="BoutonLED1on()">ON </button>
								<button class="bouton_off" onclick="BoutonLED1off()">OFF</button>
							</td>
						</tr>	
					</table>
				</td>
				<td width=50px;> </td>
				<td>
					<table align="center" style="border:2pt solid red;"  >
						<tr>
							<td class="td_txt">La LED BLEUE est <span id="id-etat-ledb">-</span></td>
							<td style="text-align:left;" ><img id="imageLedBon"src="images/led_v_on.png"><img id="imageLedBoff" src="images/led_v_off.png"></td>
						</tr>
 
						<tr>
							<td class="td_BP" colspan=2>
								<button class="bouton_on"  onclick="BoutonLED2on()">ON </button>
								<button class="bouton_off" onclick="BoutonLED2off()">OFF</button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
 
 
 
		<script type="text/javascript">
                
                        function viewImage(id,etat) {
                document.getElementById(id).innerHTML=etat;
            }
 
                        function BoutonLED1on() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED1=1', true);
                xhttp.send();
            }
                        function BoutonLED1off() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED1=0', true);
                xhttp.send();
            }
                        function BoutonLED2on() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED2=1', true);
                xhttp.send();
            } 
                        function BoutonLED2off() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED2=0', true);
                xhttp.send();
            }                   
 
                        //-------------------------------------------------------------------------------
                        /*Met à jour l'état des LEDs  toutes les 0.5 secondes */              
                        function MAJLedV() {
                                
                                const idTextLed1 = document.getElementById("id-etat-ledv"); // je défini l'endroirt du texte que je dois remplacer par son ID
                const requete_LEDV = new XMLHttpRequest();
                                requete_LEDV.open("GET", "/etatLED1.php", true);
                                requete_LEDV.send();
                                requete_LEDV.addEventListener("load", () => {
                                        idTextLed1.textContent = requete_LEDV.responseText ;
                                        
                                        if (requete_LEDV.responseText.includes("éteinte")) {
                                        imageLedVon.style.display ='none';
                                                imageLedVoff.style.display ='inline';
                                        } else if (requete_LEDV.responseText.includes("allumée")) {
                                                imageLedVon.style.display ='inline';
                                                imageLedVoff.style.display ='none';
                                        }
                                    setTimeout( MAJLedV, 500 )  
                                })                                                                      
                        }                       
                        MAJLedV()  // je repete l'opération toute les 0.5 secondes
 
                        function MAJLedB() {
                                
                                const idTextLed2 = document.getElementById("id-etat-ledb"); // je défini l'endroirt du texte que je dois remplacer par son ID
                                const requete_LEDB = new XMLHttpRequest();  // Je créer un objet de type requete
                                requete_LEDB.open("GET", '/etatLED2.php', true);  // je constitue ma requete
                requete_LEDB.send();  // j'envoie ma requete            
                                requete_LEDB.addEventListener("load", () => {  // à la reception de la réponse du réponse, je remplace le texte
                                        idTextLed2.textContent = requete_LEDB.responseText // je remplace le texte par la réponse recue dans la requete
                                        
                                        if (requete_LEDB.responseText.includes("éteinte")) {
                                        imageLedBon.style.display ='none';
                                                imageLedBoff.style.display ='inline';
                                        } else if (requete_LEDB.responseText.includes("allumée")) {
                                                imageLedBon.style.display ='inline';
                                                imageLedBoff.style.display ='none';
                                        }
                                        setTimeout( MAJLedB, 500 )
                                });
                                
                        }                                                               
                        MAJLedB()  // je repete l'opération toute les 0.5 secondes
                
                </script>
 
    </body>
</html>

LE .css

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
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
.bouton_on  {
    display: inline-block;
    background-color: rgb(0, 155, 0);
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 125px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
 
.bouton_on:hover {
    background-color: rgb(2, 90, 2);
    color:black;
}
 
.bouton_off  {
    display: inline-block;
    background-color:red;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 125px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
 
.bouton_off:hover {
    background-color:rgb(155, 6, 6);
    color:black;
}
 
.td_txt {
    width:200px;
    text-align:left;
    padding-left:30px;
    height:50px;    
}
 
.td_BP {
    width:300px;
    text-align:center;
    column-span:2 ;
}
 
.ta_BP{
    text-align:center;
    border:2pt solid red;
}

PS : ne me donnez pas de code, juste la bonne méthode. J'aimerais essayer seul dans un premier temps et je vous montrerai mes âneries après !

**-Nikopol-** · 27/06/2021, 10h32

Tu peux dans un addeventlistener, utiliser des evenements tels que mouseup, mousedown click, ainsi tu pourras ajouter ou supprimer un classe à ton élément

**tag9724** · 27/06/2021, 17h46

Envoyé par dje8269

Je n'ai pas trouvé, alors je me demande si c'est possible, de reconnaitre un bouton "pressé" d'un bouton "relaché" ? genre "onpress" et "onrelease" ; Mon but est donc d'allumer une led tant que le bouton est appuyé et que la led s’éteigne quand le bouton est relâché.

Si tu souhaite faire en sorte qu'on bouton soit "ON" tant que le click est maintenus puis à "OFF" quand le click est relâché il faudra utiliser des évènements onmousedown et onmouseup, je t'ais mis un exemple ici https://jsfiddle.net/crbysvhn/

Ce que je pense en revanche que tu veux accomplir est de faire en sorte qu'un bouton se comporte comme une case à cocher, quand la case est cochée le bouton est "ON" quand elle est décochée le bouton est "OFF".

En soit c'est possible à faire mais pas directement avec un bouton, il faudra utiliser des checkbox avec un peux de CSS pour leurs donner une apparence de bouton, le plus simple pour commencer sera évidement de n'afficher que des cases à cocher à la place des boutons, ceci étant dit tu trouveras un exemple la encore https://jsfiddle.net/qz6u8Lvg/

A noter aussi que si tu utilise des checkbox il sera préférable d'utiliser comme évènement onchange à la place de onclick pour vérifier quand l'utilisateur a cliquer sur le "bouton", tu pourras facilement vérifier si une checkbox est cochée ou non avec checkboxElement.checked qui reverras un booléen.
En complément de l'exemple précédent donc : https://jsfiddle.net/cb10atwk/

**dje8269** · 28/06/2021, 18h27

Bonjour à tous,

Bon j'ai mis un peu de temps a répondre , car j'ai bossé un peu seul dans mon coin grâce a vos conseils.

La bonne nouvelle c'est que j'ai quelques chose qui fonctionne !! Pour l'électronicien que je suis , j'arrive donc a faire un Bouton style "a bascule", un bouton poussoir momentané classique, un bouton a impulsion , et un bouton poussoir a verrouillage
J'arrive à afficher quelques images et à les modifier.
Pour infos sur ma platine a la maison, quand j’appuie sur les boutons de l'écran ça allume les leds branchées sur ma platine. quand j’appuie sur le bp du buzzer la platine émet un son !

Bon j'avoue c'est certainement pas fait dans les règles de l'art !. Mais j'ai un truc qui fonctionne et qui donne envie d'en faire plus !

Je risque d'avoir besoin de quelque chose d'autres, c'est d’afficher des valeurs sur mon écran lu par mon ESP32.
Donc j'ai branché un potentiomètre à mon ESP32. Et je vais maintenant tenter d'afficher les valeurs lues sur mon écran !!!! Ainsi je pourrais connaitre par exemple la température de la maison et pourquoi pas envoyer un mail !

Allez j'y retourne !

Un grand merci à vous , j'avance vite grâce à vous

Mon code est toujours ouvert aux remarques de construction.
je vous mets le CSS avec .

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
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
		<link href="style.css" rel="stylesheet" media="screen" type="text/css"> 
		<title>Commande LED</title>
    </head>
 
    <body>
 
		<h1 id="titre" style='text-align:center;'>Serveur de Jérémy</h1>
 
		<table align="center">
			<tr>
				<td>
					<table class="ta_BP">
						<tr>
							<td class="td_txt" >La LED VERTE est <span id="id-etat-ledv">---</span></td>
							<td style="text-align:left;" ><img id="imageLedVon" style="display:none;" src="images/led_v_on.png"><img id="imageLedVoff" src="images/led_v_off.png"></td>
						</tr>
 
						<tr>
							<td width=300px style="text-align:center;" colspan=2 >
								<button class="bouton_on" id="Bouton1on" onclick="BoutonLED1on()">ON </button>
								<button class="bouton_off" id="Bouton1off" onclick="BoutonLED1off()">OFF</button>
							</td>
						</tr>	
					</table>
				</td>
				<td width=50px;> </td>
				<td>
					<table class="ta_BP" >
						<tr>
							<td class="td_txt">La LED BLEUE est <span id="id-etat-ledb">-</span></td>
							<td style="text-align:left;" ><img id="imageLedBon" style="display:none;" src="images/led_b_on.png"><img id="imageLedBoff" src="images/led_b_off.png"></td>
						</tr>
 
						<tr>
							<td class="td_BP" colspan=2>
								<button class="bouton_on"  onclick="BoutonLED2on()">ON </button>
								<button class="bouton_off" onclick="BoutonLED2off()">OFF</button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- ####### 2ieme LIGNE  ###############-->
			<tr>
				<td>
					<table class="ta_BP" style="height:125px">
						<tr>
							<td><button class="BP_poussoir" id="BP1">PRESS</button></td>
							<td style="text-align:left;" ><img id="imageBP1on" style="display:none;" src="images/led_r_on.png"><img id="imageBP1off" src="images/led_r_off.png"></td>
						</tr>	
					</table>
				</td>
				<td width=50px;> </td>
				<td>
					<table class="ta_BP" style="height:125px" >
						<tr>
							<td>
								<div class="checkbox-button">
									<input type="checkbox" id="id_checkbox">
									<label for="id_checkbox"></label>
								</div>
							</td>
							<td style="text-align:left;" ><img id="imageBuzzon" style="display:none;" src="images/buzzer_on.png"><img id="imageBuzzoff" src="images/buzzer_off.png"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
 
		<!-- ######################################################    JAVA SCRIPT    #############################################################-->
		<script type="text/javascript">
                        //***************************************************************************** */
                        // Traitements sur des cases à chocher
                        const checkbox = document.getElementById('id_checkbox')
 
                        checkbox.addEventListener('change', (event) => {
                        if (event.currentTarget.checked) {
                                var xhttp = new XMLHttpRequest();
                                xhttp.open("GET", 'consignes.php?C_BP2=1', true);
                                xhttp.send();
                                imageBuzzon.style.display ='inline';
                                imageBuzzoff.style.display ='none';
                        } else {
                                var xhttp = new XMLHttpRequest();
                                xhttp.open("GET", 'consignes.php?C_BP2=0', true);
                                xhttp.send();
                                imageBuzzon.style.display ='none';
                                imageBuzzoff.style.display ='inline';
                        }
                        })                              
                        
                        function viewImage(id,etat) {
                document.getElementById(id).innerHTML=etat;
            }
 
                        function BoutonLED1on() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED1=1', true);
                xhttp.send();
                                Bouton1on.style.background ='rgb(2, 90, 2)';
                                Bouton1off.style.background ='red';
            }
                        function BoutonLED1off() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED1=0', true);
                xhttp.send();
                                Bouton1on.style.background ='rgb(0, 155, 0)';
                                Bouton1off.style.background ='rgb(155, 6, 6)';
            }
                        function BoutonLED2on() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED2=1', true);
                xhttp.send();
            } 
                        function BoutonLED2off() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED2=0', true);
                xhttp.send();
            }                   
 
                        //-------------------------------------------------------------------------------
                        /*Met à jour l'état des LEDs  toutes les 0.5 secondes */              
                        function MAJLedV() {
                                
                                const idTextLed1 = document.getElementById("id-etat-ledv"); // je défini l'endroirt du texte que je dois remplacer par son ID
                const requete_LEDV = new XMLHttpRequest();
                                requete_LEDV.open("GET", "/etatLED1.php", true);
                                requete_LEDV.send();
                                requete_LEDV.addEventListener("load", () => {
                                        idTextLed1.textContent = requete_LEDV.responseText ;
                                        
                                        if (requete_LEDV.responseText.includes("éteinte")) {
                                        imageLedVon.style.display ='none';
                                                imageLedVoff.style.display ='inline';
                                        } else if (requete_LEDV.responseText.includes("allumée")) {
                                                imageLedVon.style.display ='inline';
                                                imageLedVoff.style.display ='none';
                                        }
                                    setTimeout( MAJLedV, 500 )  
                                })                                                                      
                        }                       
                        MAJLedV()  // je repete l'opération toute les 0.5 secondes
 
                        function MAJLedB() {
                                
                                const idTextLed2 = document.getElementById("id-etat-ledb"); // je défini l'endroirt du texte que je dois remplacer par son ID
                                const requete_LEDB = new XMLHttpRequest();  // Je créer un objet de type requete
                                requete_LEDB.open("GET", '/etatLED2.php', true);  // je constitue ma requete
                requete_LEDB.send();  // j'envoie ma requete            
                                requete_LEDB.addEventListener("load", () => {  // à la reception de la réponse du réponse, je remplace le texte
                                        idTextLed2.textContent = requete_LEDB.responseText // je remplace le texte par la réponse recue dans la requete
                                        
                                        if (requete_LEDB.responseText.includes("éteinte")) {
                                        imageLedBon.style.display ='none';
                                                imageLedBoff.style.display ='inline';
                                        } else if (requete_LEDB.responseText.includes("allumée")) {
                                                imageLedBon.style.display ='inline';
                                                imageLedBoff.style.display ='none';
                                        }
                                        setTimeout( MAJLedB, 500 )
                                });
                                
                        }                                                               
                        MAJLedB()  // je repete l'opération toute les 0.5 secondes
                        
                        
                        //***************************************************************************** */
                        // --------------- BP1 furtif
                        const button1 = document.getElementById("BP1");
                        
                        button1.onmousedown = () => {
                                var xhttp = new XMLHttpRequest();
                                xhttp.open("GET", 'consignes.php?C_BP1=1', true);
                                xhttp.send();
                                imageBP1on.style.display ='inline';
                                imageBP1off.style.display ='none';
                                BP1.style.background = "red"
                                BP1.textContent = "Allumée !"
                        }
 
                        button1.onmouseup = () => {
                                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"                               
                        }                       
                        /***************************************************************************** */
 
                </script>
 
    </body>
</html>

Le CSS

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
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
.bouton_on  {
    display: inline-block;
    background-color: rgb(0, 155, 0);
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 125px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
 
.bouton_on:hover {
    background-color: rgb(2, 90, 2);
    color:black;
}
 
.bouton_off  {
    display: inline-block;
    background-color:red;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 125px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
 
.bouton_off:hover {
    background-color:rgb(155, 6, 6);
    color:black;
}
 
.td_txt {
    width:200px;
    text-align:left;
    padding-left:30px;
    height:50px;    
}
 
.td_BP {
    width:300px;
    text-align:center;
    column-span:2 ;
}
 
.ta_BP{
    text-align:center;
    border:2pt solid red;
    width:300px; 
}
.BP_poussoir{
    font-size: 28px;
    width:200px;
    height:80px;
}
.BP_poussoir:hover{
    background-color:#888;
}
 
 
/* #######################     bouton checkbox   ###########################################*/
.checkbox-button label {
    width: 150px;
    padding: 22px;
    background: #eee;
    border: 2px solid #888;
    display: block;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    font-size: 28px;
    margin-left:20px;
  }
 
  /* Masque la checkbox */
 
  .checkbox-button input {
    display: none;
  }
 
  /* Change la couleur de <label> quand la checkbox est cochée */
 
  .checkbox-button input:checked~label {
    background: darkseagreen;
  }
 
  /* Controle le texte qui apparais dans le bouton */
 
  .checkbox-button label:before {
    content: "MUET";
 
  }
 
  .checkbox-button input:checked~label:before {
    content: "BIP !!!";
  }

Une petite photo du montage à l'état d'embryon
Nom : IMG_20210628_182155.jpg
Affichages : 207
Taille : 1,69 Mo

**mathieu** · 28/06/2021, 21h49

une petite remarque pour le bouton qui lance un son, je vous conseille de mettre une petite sécurité dans le cas où il y a un souci de connexion internet au moment de l'envoi de la commande d'arrêt.
vous pouvez par exemple arrêter le son au bout d'un temps donné, ça vous évitera de devoir arracher le haut parleur de la plaque le jour où le son ne s'arrête plus !

**NoSmoking** · 29/06/2021, 10h07

Bonjour,

Envoyé par dje8269

il sera préférable d'utiliser comme évènement onchange à la place de onclick

L'un comme l'autre fonctionnera, il suffit dans les deux cas des tester l'état de checked.

Envoyé par dje8269

- A/ Dois-je créer deux images boutons "on" et "off"

Non, le CSS est suffisamment robuste pour que tu puisses te passer de ces images actuellement.

Envoyé par dje8269

B/ Dois-je créer une classe pour le bouton "on" clair et une autre pour le "on"

C'est une bonne façon de faire effectivement.

Une remarque au sujet de ton CSS, il est inutile, à de rare exception de maintenir les « prefix-vendeur » qui alourdissent le code

Code css :

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

1
2
3
4
5
6
.classe {
/*  -webkit-transition: all 0.5s;   /*- out -*/
/*  -moz-transition: all 0.5s;      /*- out -*/
/*  -o-transition: all 0.5s;        /*- out -*/
  transition: all 0.5s;
}

Au passage le CSS peut-être un grand allié du JavaScript pour tout ce qui concerne le rendu d'affichage des éléments, soit via les add/remove des classes CSS, soit en utilisant les pseudos-classes comme :focus, :active ...

Remarque concernant la gestion des événements.

Concernant l'utilisation des mousedown/mouseup il est un schéma qui va faire foirer ton code.

Je m'explique :
• Soit un bouton sur lequel je « down la souris », cela entraine bien un événement mousedown sur ce bouton.
• Si je « up le souris » sur celui-ci, cela entraine bien un événement mouseup sur ce bouton.
• Maintenant si une fois le « down la souris » je déplace la souris hors du bouton et que je fais un « up la souris » cela ne déclenchera pas d'événement mouseup sur ce bouton et l'action liée à cet événement ne sera pas lancé.

Dernier point, mais cela sera pour plus tard, il te faudra prendre en compte que les événement mousdown/mouseup ne sont pas pris en compte sur les supports tactiles.

**dje8269** · 29/06/2021, 16h48

@Mathieu: Merci Mathieu. C'est sympa de me l'avoir signalé !

@NoSmoking :

Les deux problèmes sont effectivement problématiques. J'avais relevé la partie tactile qui ne fonctionnais pas, avec ma tablette et mon tel .
par contre j'avais vu le mouse down .Bien vu !

Comment puis-je contourner ces problèmes ?

Pour la partie tactile je ne vois pas comment faire !
Pour la souris relâché en dehors du bouton peut être avec une perte de focus sur le bouton ?

Sinon je pense ouvrir un nouveau post car je m'arrache les cheveux pour afficher une valeur numérique passée en requête et donc en texte !!!!

Je m’énerve encore un peu je reviens! je suis dans la partie ou je commence à tout mélanger a force de bosser dessus. La pause s'impose !

**dje8269** · 29/06/2021, 20h11

Pour la partie tactile j'ai utilisé "ontouchstart" et "ontouchend" en plus de l'event sur onmousedown et onmouseup.

Cela fait le script dans le HTML :

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
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
<script>
//***************************************************************************** */
                        // --------------- BP1 furtif
                        const button1 = document.getElementById("BP1");
                        
                        button1.onmousedown = () => {
                                var xhttp = new XMLHttpRequest();
                                xhttp.open("GET", 'consignes.php?C_BP1=1', true);
                                xhttp.send();
                                imageBP1on.style.display ='inline';
                                imageBP1off.style.display ='none';
                                BP1.style.background = "red"
                                BP1.textContent = "Allumée !"
                        }
 
                        button1.onmouseup = () => {
                                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"                               
                        }                       
                        /***************************************************************************** */
                        
                        function BP1press() 
                        {
                                var xhttp = new XMLHttpRequest();
                                xhttp.open("GET", 'consignes.php?C_BP1=1', true);
                                xhttp.send();
                                imageBP1on.style.display ='inline';
                                imageBP1off.style.display ='none';
                                BP1.style.background = "red"
                                BP1.textContent = "Allumée !"
                        }
 
                        function BP1release() 
                        {
                                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"       
                        }       
 
                </script>

Le html :

Code html :

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

1
2
3
4
5
6
					<table class="ta_BP" style="height:125px">
						<tr>
							<td><button class="BP_poussoir" id="BP1" ontouchstart="BP1press()" ontouchend="BP1release()">PRESS</button></td>
							<td style="text-align:left;" ><img id="imageBP1on" style="display:none;" src="images/led_r_on.png"><img id="imageBP1off" src="images/led_r_off.png"></td>
						</tr>	
					</table>

Et le CSS

Code CSS :

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

1
2
3
4
5
6
.BP_poussoir{
    font-size: 28px;
    width:200px;
    height:80px;
    user-select: none;
}

Cela fonctionne mais il y a un petit hic. C'est que je sélectionne le texte du bouton aussi ! j'ai essayé de rajouté "user-select" : none mais cela n'as aucun effet !

**NoSmoking** · 30/06/2021, 07h59

Envoyé par dje8269

Pour la partie tactile j'ai utilisé "ontouchstart" et "ontouchend" en plus de l'event sur onmousedown et onmouseup.

Il existe quand même une méthode plus simple de prendre en compte ces événements, plutôt que de rajouter des événements aux événements, je parle de l'API EventPointer, cela ne devient pas un jeu d'enfant mais presque !

Nota : si tu commences à mettre des appels de fonction dans le HTML tu finiras par ne plus savoir où tu en es

Je te mets un petit exemple de la mise en œuvre de cette prise en compte :

Test PointerEvent

**dje8269** · 30/06/2021, 08h25

Olalala c'est trop beau ! est ce que je peux récuperer le code ? si oui comment je peux faire ! je le vois dans la console mais c'est pas pratique pour étudier ! franchement bravo !