Affectation de variable dans une boucle

**psylo24** · 24/09/2016, 22h04

Bonsoir tout le monde,

Je me permet de vous solliciter car j'ai un petit probléme dans mon script :

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
for(var i = 0; i < document.images.length; i++){
        new_button = document.images[i].id;
        alert(new_button);
        //
 
        new_button.addEventListener("click", function () {
        alert("toto");
        //if red
        if ( new_button.alt === "off" ) {
                //use the function
                var new_status = change_pin ( 21, 'in');
        //        if (new_status !== "fail") {
                        new_button.alt = "on"
                        new_button.src = "data/img/green_0.jpg";
                        return 0;
          //              }
                }
        //if green
        if ( new_button.alt === "on" ) {
                //use the function
                var new_status = change_pin ( 21, 'out');
            //    if (new_status !== "fail") {
                        new_button.alt = "off"
                        new_button.src = "data/img/red_0.jpg";
                        return 0;
              //          }
                }
} );
}

J'ai bien une alterte avec l'id de mon bouton quand j’accède à la page, mais mon problème se situe à la ligne

Code :

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

new_button.addEventListener("click", function () {

car en fait la valeur new_button doit contenir le nom de mon bouton or ce n'est pas le cas. (car je n'entre pas dans la boucle, je ne vois pas le message "toto"). Je veux que le nom soit chargé dynamiquement à chaque passage dans ma boucle.
Quand je remplace

Code :

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

new_button.addEventListener("click", function () {

par

Code :

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

button_21.addEventListener("click", function () {

button_21 étant l'id de mon image, j'ai bien le message "toto"

Le but de mon script étant de parcourir les images (qui sont des boutons) et d'avoir une seule boucle au lieu d'avoir une pavasse de code JS pour chaque bouton.

Auriez vous une idée ?

**eleydet** · 24/09/2016, 22h27

Bonsoir,

Avez-vous essayé ceci :

Code :

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

1
2
3
4
5
6
7
8
for(var i = 0; i < getElementsByTagName("IMG").length; i++){
        new_button = document.getElementsByTagName("IMG")[i];
        alert(new_button);
        //
 
        new_button.addEventListener("click", function () {
        alert("toto");
	...

et cela :

Code :

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

1
2
3
4
5
6
7
8
9
new_button = [];
for(var i = 0; i < getElementsByTagName("IMG").length; i++){
        new_button[i] = document.getElementsByTagName("IMG")[i];
        alert(new_button[i]);
        //
 
        new_button[i].addEventListener("click", function () {
        alert("toto");
	...

**psylo24** · 24/09/2016, 22h38

Merci beaucoup la première solution fonctionne

**NoSmoking** · 25/09/2016, 09h22

Bonjour,
quand tu fais

Code :

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

1
2
3
4
new_button = document.images[i].id;
alert(new_button);
 
new_button.addEventListener("click", function () {

tu essaies d'affecter à une string une méthode qu'elle ne possède pas, cela revient à écrire

Code :

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

"id-de-mon-image".addEventListener("click", function () {

le script dans ce cas plante !

Par contre l'écriture de la fonction dans la boucle peut être améliorée en utilisant this, d'autres simplifications pourrait être faite mais ce n'est pas l'objet

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
var oImages = document.images;  // on pourrait cibler les images plus précisément ici
var i, nb = oImages.length;
 
for ( i = 0; i < nb; i += 1) {
 
    oImages[i].addEventListener('click', function () {
 
        if ( this.alt === 'off') {
            this.alt = 'on'
            this.src = 'data/img/green_0.jpg';
        }
 
        if (this.alt === 'on') {
            this.alt = 'off'
            this.src = 'data/img/red_0.jpg';
        }
    });
}

**psylo24** · 25/09/2016, 11h15

Bonjour, finalement ce que je veux faire ca ne fonctionne pas,

Contexte : script permettant de changer l'état d'un GPIO de mon raspberri
Je créé un tableau en PHP avec mes boutons (dans mon exemple 21, 22 et 28)

Je veux que quand on clique sur un des boutons généré dynamiquement, ca fasse appel à ma fonction change_pin (en js). et que une fois l'état du pin changé alors également changer l'image du bouton

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
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
<html>
 
 
	<body>
	<div id="divbut" name="divbut" onclick="DisplayFormValues();">
	<?php
	$gpios = array (21,22, 28);
	foreach($gpios as $gpio) {
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
        	exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
 
        	if ($gpios[$gpio][0] == 0 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/red_0.jpg' alt='off'/>");
	        }
	        if ($gpios[$gpio][0] == 1 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/green_0.jpg' alt='on'/>");
	        }
	     }
	?>
	</div>
<script>
 
function change_pin (pin, status) {
	//this is the http request
	var request = new XMLHttpRequest();
	request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
	request.send(null);
	//receiving information
	request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200) {
			return (parseInt(request.responseText));
		}
	//test if fail
		else if (request.readyState == 4 && request.status == 500) {
			alert ("server error");
			return ("fail");
		}
	//else 
		else { return ("fail"); }
	}
}
 
 
 
//var delimeter = '/';
//var string = 'part1/part2';
//var splitted = string.split(delimeter);
//alert(splitted[0]); 
 
 
 
var oImages = document.images;  // on pourrait cibler les images plus précisément ici
var i, nb = oImages.length;
 
for ( i = 0; i < nb; i += 1) {
 
    oImages[i].addEventListener('click', function () {
     alert(i);
        if ( this.alt === 'off') {
            this.alt = 'on'
            this.src = 'data/img/green_0.jpg';
        }
 
        if (this.alt === 'on') {
            this.alt = 'off'
            this.src = 'data/img/red_0.jpg';
        }
    });
}
 
 
 
 
 
</script>
 
 
 
 	</body>
</html>

Avec ce code quand je clique sur n'importe quel bouton i = 3, or je voudrais que quand je clique sur un bouton ca me fasse appel à ma fonction change_pi tout en récupérant l'ID du pin qui est égal au dernier (ou 2 derniers) chiffres d'lid de mon bouton ; ex : img qui a pour id=button_21 je dois récupérer ce qu'il y a aprés le _

Si je reprend mon code JS du début :

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
for(var i = 0; i < document.images.length; i++){
//	new_button = document.images[i].id;
 
new_button = document.getElementsByTagName("IMG")[i];
var x = document.getElementById("button_21");
alert(x.alt);
 
var delimeter = '_';
var splitted = new_button.id.split(delimeter);
//alert(splitted[1]); 
 
	new_button.addEventListener("click", function () {
	alert(splitted[1]);
 
 
 
        //if red
        if ( new_button.alt === "off" ) {
                //use the function
                var new_status = change_pin ( 21, 'in');
        //        if (new_status !== "fail") {
                        new_button.alt = "on"
                        new_button.src = "data/img/green_0.jpg";
                        return 0;
          //              }
                }
        //if green
        if ( new_button.alt === "on" ) {
                //use the function
                var new_status = change_pin ( 21, 'out');
            //    if (new_status !== "fail") {
                        new_button.alt = "off"
                        new_button.src = "data/img/red_0.jpg";
                        return 0;
              //          }
                }
} );
}

Quand je clique sur n'importe quel bouton la valeur affichée est 28 (et jamais 21 ou 22) => issue de ma commande : alert(splitted[1]); aprés la commande new_button.addEventListener("click", function () {

Par contre si je vais un avant la commande new_button.addEventListener("click", function () { alors le resultat est le bon j'ai bien un message avec le bon numéro quand je clique sur le bouton (si je clique sur le bouton qui a pour id button_21 j'ai un message "21").

Auriez vous une idée ?

**sekaijin** · 25/09/2016, 12h37

Envoyé par psylo24

...

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
 
	$gpios = array (21,22, 28);
	foreach($gpios as $gpio) {
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
        	exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
 
        	if ($gpios[$gpio][0] == 0 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/red_0.jpg' alt='off'/>");
	        }
	        if ($gpios[$gpio][0] == 1 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/green_0.jpg' alt='on'/>");
	        }
	     }

...

Il y a u truc que je ne comprends pas dans ton code php $gpios est un tableau qui contient 21 22 et 23.
Or tu fais $gpios[$gpio][0] == 0 si j'interprète le code à la première itération de la boucle $gpio => 0 donc $gpios[$gpio] => $gpios[0] => 21 ce qui fait que $gpios[$gpio][0] => $gpios[0][0] => 21[0] et 21 n'est pas un tableau.

j'imagine que la commande exec modifie le tableau $gpios mais dans ce cas c'est pas top pour le foreach si exec modifie $gpios[$gpio] alors vaudrait mieux utiliser une autre variable (là tu as de la chance qu'il n'y ai pas d'effet de bord dans ta boucle).

quant au reste du code php un simple tableau et tu t'en sort sans code compliqué

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
 
	$boutons = array(
		array("img" => "data/img/red_0.jpg",     "alt" => "off'", "status" => false),
		array("img" => "data/img/green_0.jpg", "alt" => "on'",  "status" => true),
        );
	$gpios = array (21,22, 28);
	foreach($gpios as $gpio) {
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
        	exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
 
	        echo ("<img id='button_".$gpio."' data-numero=".$gpio." data-status='".$boutons[$gpios[$gpio][0]].status." src='".$boutons[$gpios[$gpio][0]].img."' alt='".$boutons[$gpios[$gpio][0]].alt."'/>");
	     }

quant au javascript que de mélange !! j'avoue avoir du mal à suivre ta pensée.

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
(function() {
 //définition d'une fonction pour gérer tous les click sur les images
 var clickHandler = function () {
   alert(this.dataset.numero); //affiche le numéro de l'image
   change_pin(this);
 };
 
 //récupérer toutes les images
 var images = document.getElementsByTagName("IMG");
 //pour toutes les images
 for (var i=0; i < images.length; i++) {
  //affecter le gestionnaire de click à l'évé
  images[i].addEventListener("click", clickHandler);
 }
})();

enfin pour ta fonction change_pin, il y a un problème de conception
soit tu le gère avec une valeur de retour comme en C alors le type de retour doit toujours être le même.
ta fonction retourne un integer mais si ça plante elle retourne une string
si tu choisis cette voie tu dois retourner un integer en C par exemple tu a des fonction qui te retourne une valeur entre 0 et N si elle plante elle retourne -1
tu est donc homogène.

si tu préfère géré les erreur alors il te faut utilise les exception. si tout est Ok elle retourne un interger sinon elle lève une exception.

mais il y a surtout un problème c'est que tu fait un appel XHR donc ta fonction ne retourne rien
lorsque tu l'appelle elle prépare une requête au serveur et définie un fonction qui traitera la réponse.
elle envoie la requête et retourne rien.
puis la réponse arrive et la fonction traite la réponse et c'est elle qui contient un return or il n'y a aucun code pour récupérer cette valeur.

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
function change_pin (img) //on passe l'image en paramètre
{
  var pin = img.dataset.numero;
  var status = ! this.dataset.status; //change le status
  //this is the http request
  var request = new XMLHttpRequest();
  request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
  request.send(null);
  //receiving information
  request.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200) {
      //je suppose que  gpio.php retourne 0 ou 1
      if (1== parseInt(request.responseText)) {
         //le status est true on le passe à false
         img.dataset.status = false;
         img.alt = 'off';
         img.src = 'data/img/red_0.jpg';
       } else {
         //le status est false on le passe à true
         img.dataset.status = true;
         img.alt = 'on';
         img.src = 'data/img/green_0.jpg';
      }
    } else {
      console.log (img.dataset.numero + " change status fail");
   }
  }
}

A+JYT
PS: je n'ai pas vérifié mon code. il faut probablement le débuger mais c'est pour le principe

**psylo24** · 25/09/2016, 14h02

Bonjour et merci pour ta réponse mais j'ai du mal m'exprimer car ce n'est pas ca que je recherche à faire ;

Contexte : Modifier l'état d'un GPIO (pin) du raspberry

Etapes :
1. Creation d'un tableau avec les GPIO que l'on veut controler
2. On rempli le tableau : pour chaque GPIO on éxécute gpio read pour le pin en question, pour connaitre son état (0 ou 1) (exec)
3. On fait une boucle pour remplir et parcourir le tableau des GPIO
a. On met une image verte si la valeur dans le tableau du GPIO en question est à 1 (l'id de l'image est button_X où X est le numéro du gpio (ici 21, 22 ou 28)
b. On met une image rouge si la valeur dans le tableau du GPIO en question est à 0

foreach = permet de récupérer l'état du pin (0 ou 1) via la commande exec et de m'afficher mes boutons avec la bonne couleur selon leur état
0 = red
1 = green

JAVASCRIPT
4. Je veux que quand je clique sur un des boutons, ca me change l'état de mon GPIO et cela par le biais de la fonction JS change_pi
a. si il est à 1 alors on passe le pin à 0 et on affiche l'image rouge
b. si il est à 0 alors on passe le pin à 1 et on affiche l'image verte

Le changement d'état est effectué par le biais de la fonction change_pin qui fait une requete php vers une autre page web. on lui envoie en paramétre le numéro du gpio et l'état auquel on souhaite le positionner.

Résultat :
A ce stade tout fonctionne quand dans mon js je fais un bloque par bouton.

PHP 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
<html>
 
 
        <body>
        <div id="divbut" name="divbut" onclick="DisplayFormValues();">
        <?php
        $gpios = array (21,22, 28);
        foreach($gpios as $gpio) {
                //set the pin's mode to output and read them
                //echo ($status[$i]);
                exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
                //echo "GPIO ".$gpio."";
                //echo "\n\n\n\n\n";
 
                if ($gpios[$gpio][0] == 0 ) {
                echo ("<img id='button_".$gpio."' src='data/img/red_0.jpg' alt='off'/>");
                }
                if ($gpios[$gpio][0] == 1 ) {
                echo ("<img id='button_".$gpio."' src='data/img/green_0.jpg' alt='on'/>");
                }
             }
        ?>
 
    <script src="script.js"></script>
        </div>
</body>
</html>

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
41
42
43
44
45
46
47
48
49
50
51
 
var button_21 = document.getElementById("button_21");
var button_22 = document.getElementById("button_22");
var button_28 = document.getElementById("button_28");
 
 
 
//this function sends and receives the pin's status
function change_pin (pin, status) {
	//this is the http request
	var request = new XMLHttpRequest();
	request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
	request.send(null);
	//receiving information
	request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200) {
			return (parseInt(request.responseText));
		}
	//test if fail
		else if (request.readyState == 4 && request.status == 500) {
			alert ("server error");
			return ("fail");
		}
	//else 
		else { return ("fail"); }
	}
}
 
//these are all the button's events, it just calls the change_pin function and updates the page in function of the return of it.
button_21.addEventListener("click", function () { 
	//if red
	if ( button_21.alt === "off" ) {
		//use the function
		var new_status = change_pin ( 21, 'in');
		if (new_status !== "fail") { 
			button_21.alt = "on"
			button_21.src = "data/img/green_0.jpg"; 
			return 0;
			}
		}
	//if green
	if ( button_21.alt === "on" ) {
		//use the function
		var new_status = change_pin ( 21, 'out');
		if (new_status !== "fail") { 
			button_21.alt = "off"
			button_21.src = "data/img/red_0.jpg"; 
			return 0;
			}
		}
} );

Et recopier le bloc pour le gpio 22 et 28.

Objectif :
Mon but est de faire une boucle en JS qui permet de parser les boutons dans ma page web qui commencent par "button_" pour ensuite faire une boucle pour changer l'état du GPIO sur lequel on clique (si on clique sur un bouton).
Si on clique sur le premier bouton alors ca doit :
changer l'image
changer l'état en utilisant la fonction change_pin et donc en ayant au préalable récupérer le ou les 2 derniers caractéres de l'id du bouton (à savoir button_X ou button_XX)
Et si possible faire en sorte que les boutons se mettent à jour régulièrement (car je peux aussi activer les GPIOs par d'autres moyens que la page web

**tiste87** · 25/09/2016, 14h15

Bonjour

Objectif N°2 :

Si l'état du pin change "en arriere plan" ( sans appui sur un bouton ) , il faudrait que la page web "soit au courant" et donc modifie automatiquement la couleur de l'image ...
apparemment ça serait du "polling" ou push ... Mais j'ai / on a pas tout compris

Par exemple : si le pin est relié à un capteur , la page afficherait "instantanément " le changement de 0 à 1 ... en changeant la couleur du bouton

**sekaijin** · 25/09/2016, 14h55

c'était bien le propos de ma réponse

Envoyé par psylo24

Bonjour et merci pour ta réponse mais j'ai du mal m'exprimer car ce n'est pas ca que je recherche à faire ;

Contexte : Modifier l'état d'un GPIO (pin) du raspberry

Etapes :
1. Creation d'un tableau avec les GPIO que l'on veut controler
2. On rempli le tableau : pour chaque GPIO on éxécute gpio read pour le pin en question, pour connaitre son état (0 ou 1) (exec)
3. On fait une boucle pour remplir et parcourir le tableau des GPIO
a. On met une image verte si la valeur dans le tableau du GPIO en question est à 1 (l'id de l'image est button_X où X est le numéro du gpio (ici 21, 22 ou 28)
b. On met une image rouge si la valeur dans le tableau du GPIO en question est à 0

foreach = permet de récupérer l'état du pin (0 ou 1) via la commande exec et de m'afficher mes boutons avec la bonne couleur selon leur état
0 = red
1 = green

outre le fait que je ne comprends pas ton code php qui dé-référence 21[0]

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
	$boutons = array(
		array("img" => "data/img/red_0.jpg",     "alt" => "off'", "status" => false),
		array("img" => "data/img/green_0.jpg", "alt" => "on'",  "status" => true),
        );
	$gpios = array (21,22, 28); //1. Creation d'un tableau avec les GPIO que l'on veut controler
	foreach($gpios as $gpio) {//3. On fait une boucle pour remplir et parcourir le tableau des GPIO
        //c'est ici que je comprends pas ton php $gpios = array (21,22, 28) et au premier passage dans la boucle $gpio=21
 
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
                // ICI tu appelle donc au premier passage gpio read ".$gpio, $gpios[$gpio] soit gpio read 21, $gpios[21] !! mais $gpios[21] n'existe pas
         	exec ("gpio read ".$gpio, $gpios[$gpio], $return ); //2. On rempli le tableau : pour chaque GPIO on éxécute gpio read pour le pin en question, pour connaitre son état (0 ou 1) (exec)
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
/* dans ton code tu avais
if ($gpios[$gpio][0] == 0 ) {
 là encore ça ne marche pas $gpio = 21 et $gpios = array (21,22, 28) 
 en supposant qu'il n'y ait pas de pb d'indice et que $gpios[21] existe $gpios[x] est un integer et pas un tableau
donc $gpios[21][0] ne peut pas exister.
*/
 
 
	        /*
    a. On met une image verte si la valeur dans le tableau du GPIO en question est à 1 (l'id de l'image est button_X où X est le numéro du gpio (ici 21, 22 ou 28)
	b. On met une image rouge si la valeur dans le tableau du GPIO en question est à 0
 
	foreach = permet de récupérer l'état du pin (0 ou 1) via la commande exec et de m'afficher mes boutons avec la bonne couleur selon leur état
	0 = red
	1 = green
 
c'est bien ce que fait ce code si je me réfère à ce que tu dit de ton code $gpios[$gpio][0]] vaut 0 ou 1 (0 pour red et 1 pour green)
si tu lis le code
$boutons[0].status vaut false et $boutons[1].status vaut true
$boutons[0].img vaut "data/img/red_0.jpg" et $boutons[0].img vaut "data/img/green_0.jpg" 
$boutons[0].alt vaut "off" et $boutons[1].alt vaut "on"
 
on a donc pour 0 et 21
<img id='button_21' data-numero='21' data-status='false' src='data/img/red_0.jpg' alt='off'/>
on a donc pour 1 et 21
<img id='button_21' data-numero='21' data-status='true' src='data/img/green_0.jpg' alt='on'/>
et la même chose pour les autres éléments du tableau.
	        */
	        echo ("<img id='button_".$gpio."' data-numero='".$gpio."' data-status='".$boutons[$gpios[$gpio][0]].status."' src='".$boutons[$gpios[$gpio][0]].img."' alt='".$boutons[$gpios[$gpio][0]].alt."'/>");
	     }

Envoyé par psylo24

JAVASCRIPT
4. Je veux que quand je clique sur un des boutons, ca me change l'état de mon GPIO et cela par le biais de la fonction JS change_pi
a. si il est à 1 alors on passe le pin à 0 et on affiche l'image rouge
b. si il est à 0 alors on passe le pin à 1 et on affiche l'image verte

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
(function() {
 //définition d'une fonction pour gérer tous les click sur les images
 var clickHandler = function () {
   alert(this.dataset.numero); //affiche le numéro de l'image
   //c'est la fonction change_pin qui doit changer la couleur et les attributs du bouton
   change_pin(this);
 };
 
 //récupérer toutes les images
 var images = document.getElementsByTagName("IMG");
 //pour toutes les images
 for (var i=0; i < images.length; i++) {
  //affecter le gestionnaire de click à l'évé
  images[i].addEventListener("click", clickHandler);
 }
})();

Envoyé par psylo24

Objectif :
Mon but est de faire une boucle en JS qui permet de parser les boutons dans ma page web qui commencent par "button_" pour ensuite faire une boucle pour changer l'état du GPIO sur lequel on clique (si on clique sur un bouton).
Si on clique sur le premier bouton alors ca doit :
changer l'image
changer l'état en utilisant la fonction change_pin et donc en ayant au préalable récupérer le ou les 2 derniers caractéres de l'id du bouton (à savoir button_X ou button_XX)
Et si possible faire en sorte que les boutons se mettent à jour régulièrement (car je peux aussi activer les GPIOs par d'autres moyens que la page web

Là je comprends pas il me semble que ce que tu cherche à faire c'est que lorsqu'on clique sur un bouton on appelle le php sur le pin correspondant et qu'en fonction de la réponse php tu change la couleur du bouton

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
function change_pin (img) //on passe l'image en paramètre
{
  var pin = img.dataset.numero;
  var status = ! this.dataset.status; //change le status
  //this is the http request
//on appelle le php en fonction du pin correspondant au bouton cliqué  ainsi que son status
  var request = new XMLHttpRequest();
  request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
  request.send(null);
  //receiving information
  request.onreadystatechange = function () {
    //lorsque le php répond on met à jour le bouton
    if (request.readyState == 4 && request.status == 200) {
      //je suppose que  gpio.php retourne 0 ou 1
      if (1== parseInt(request.responseText)) {
        //le php à répondu 1 on passe au vert
         //le status est false on le passe à true
         img.dataset.status = true;
         img.alt = 'on';
         img.src = 'data/img/green_0.jpg';
       } else {
    //le php à répondu 0 on passe à rouge
         //le status est true on le passe à false
         img.dataset.status = false;
         img.alt = 'off';
         img.src = 'data/img/red_0.jpg';
      }
    } else {
      console.log (img.dataset.numero + " change status fail");
   }
  }
}

je maintient dans ton code tu as un problème de conception

tu as deux fonctions change_pin et onreadystatechange
change_pin ne retourne aucune valeur alors que l'appel est
status = change_pin(....);

et onreadystatechange est appelé lorsque le php envoi la réponse cet appel est simplement
onreadystatechange(request, response); or tu y place un return (parseInt(request.responseText));

la bonne pratique est de donner à onreadystatechange un access à l'élément à modifier (l'élément img)
du coup lorsque la réponse arrive cette fonction change l'image le alt et le status

A+JYT

**sekaijin** · 25/09/2016, 14h57

Envoyé par tiste87

Bonjour

Objectif N°2 :

Si l'état du pin change "en arriere plan" ( sans appui sur un bouton ) , il faudrait que la page web "soit au courant" et donc modifie automatiquement la couleur de l'image ...
apparemment ça serait du "polling" ou push ... Mais j'ai / on a pas tout compris

Par exemple : si le pin est relié à un capteur , la page afficherait "instantanément " le changement de 0 à 1 ... en changeant la couleur du bouton

ça c'est un autre sujet
je te conseille d'en finir avec le problème des boutons et lorsque le tout sera Ok tu marque la question résolu
et tu poste une autre question pour le push ou pull
A+JYT

**psylo24** · 25/09/2016, 16h47

Merci j'ai testé ton code mais j'ai un petit problème,

quand je lance ma page je ne vois pas les images mais 3 fois "Arrayalt"

Avec firebug je vois que mes variables ne sont pas chargeés ;

Code :

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

1
2
3
4
 
<img id="button_21" data-numero="21" data-status="Arraystatus" src="Arrayimg" alt="Arrayalt">
<img id="button_22" data-numero="22" data-status="Arraystatus" src="Arrayimg" alt="Arrayalt">
<img id="button_28" data-numero="28" data-status="Arraystatus" src="Arrayimg" alt="Arrayalt"

>

Et quand je fais un print_r($boutons);

Code :

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

1
2
3
Array ( [0] => Array ( [img] => data/img/red_0.jpg [alt] => off' [status] => ) [1] => Array ( [img] => data/img/green_0.jpg [alt] => on' [status] => 1 ) ) Arrayalt
Array ( [0] => Array ( [img] => data/img/red_0.jpg [alt] => off' [status] => ) [1] => Array ( [img] => data/img/green_0.jpg [alt] => on' [status] => 1 ) ) Arrayalt
Array ( [0] => Array ( [img] => data/img/red_0.jpg [alt] => off' [status] => ) [1] => Array ( [img] => data/img/green_0.jpg [alt] => on' [status] => 1 ) ) Arrayalt

**sekaijin** · 25/09/2016, 18h23

c'est ce que je t'ai dis tu as dans ton code une référence incorrecte j'ai supposé que je n'avais pas tous les élément et j'ai gardé ta référence mais elle ne marche pas

Code php :

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

1
2
3
4
5
$gpios = array (21,22, 28); //1. Creation d'un tableau avec les GPIO que l'on veut controler
foreach($gpios as $gpio) {
  exec ("gpio read ".$gpio, $gpios[$gpio], $return );
  print_r($gpios[$gpio][0]);// c'est cette référence là que j'ai utilisé parce qu'elle est dans ton code et que je ne sais pass ce qu'elle représente mais qui ne marche pas
}

Code php :

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

1
2
3
4
5
$boutons = array(
  array("img" => "data/img/red_0.jpg",   "alt" => "off", "status" => "false"),
  array("img" => "data/img/green_0.jpg", "alt" => "on",  "status" => "true"),
);
print_r($boutons);

je ne vois pas comment ce code peut produire

Code text :

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

1
2
3
Array ( [0] => Array ( [img] => data/img/red_0.jpg [alt] => off' [status] => ) [1] => Array ( [img] => data/img/green_0.jpg [alt] => on' [status] => 1 ) ) Arrayalt
Array ( [0] => Array ( [img] => data/img/red_0.jpg [alt] => off' [status] => ) [1] => Array ( [img] => data/img/green_0.jpg [alt] => on' [status] => 1 ) ) Arrayalt
Array ( [0] => Array ( [img] => data/img/red_0.jpg [alt] => off' [status] => ) [1] => Array ( [img] => data/img/green_0.jpg [alt] => on' [status] => 1 ) ) Arrayalt

il produit

Code text :

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

1
2
3
4
5
6
7
8
9
10
11
12
Array ( 
  [0] => Array ( 
    [img] => data/img/red_0.jpg 
    [alt] => off
    [status] => false
  ) 
  [1] => Array ( 
    [img] => data/img/green_0.jpg 
    [alt] => on
    [status] => true 
  )
)

Je maintiens qu'il y a un problème dans ton code php
$gpios est un tableau d'entier donc $gpios[$gpio][0] ne peut pas exister

je te propose de faire

Code php :

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

1
2
3
4
5
$gpios = array (21,22, 28); //1. Creation d'un tableau avec les GPIO que l'on veut controler
foreach($gpios as $gpio) {
  exec ("gpio read ".$gpio, $valeurLue, $return );
  print_r($valeurLue);
}

afin de voir ce que contient $valeurLue car là c'est incompréhensible.

si je reprends mon code en oubliant cet appel à read dont on ne sait rien et en corrigeant la syntaxe (j'ai bien signalé dans mon post que je donnais un principe, je n'ai pas débugé)

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$boutons = array(
  array("img" => "data/img/red_0.jpg",     "alt" => "off", "status" => "false"),
  array("img" => "data/img/green_0.jpg", "alt" => "on",  "status" => "true"),
);
 
$gpios = array (21,22, 28);
foreach($gpios as $gpio) {
 $etat = getEtat($gpio); //getEtat retourne 1 ou 0
 
  //print_r($boutons[$etat]);
  echo ("<img id='button_".$gpio."' data-numero='".$gpio."' data-status='".$boutons[$etat]['status']."' src='".$boutons[$etat]['img']."' alt='".$boutons[$etat]['alt']."'/>\n");
}

ce code me donne

Code html :

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

1
2
3
<img id='button_21' data-numero='21' data-status='true' src='data/img/green_0.jpg' alt='on'/>
<img id='button_22' data-numero='22' data-status='false' src='data/img/red_0.jpg' alt='off'/>
<img id='button_28' data-numero='28' data-status='false' src='data/img/red_0.jpg' alt='off'/>

pour tester j'ai simplement utilisé

Code :

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

1
2
3
function getEtat($x) {
  return $x % 2;
}

en fait u n'a même pas besoin du js pour faire le addListener

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$boutons = array(
  array("img" => "data/img/red_0.jpg",     "alt" => "off'", "status" => "false"),
  array("img" => "data/img/green_0.jpg", "alt" => "on'",  "status" => "true"),
);
 
$gpios = array (21,22, 28);
foreach($gpios as $gpio) {
 $etat = getEtat($gpio); //getEtat retourne 1 ou 0
 
  //print_r($boutons[$etat]);
  echo ("<img id='button_".$gpio."' data-numero='".$gpio."' data-status='".$boutons[$etat]['status']."' src='".$boutons[$etat]['img']."' alt='".$boutons[$etat]['alt']."' onclick='change_pin(this);' />\n");
}

cela done

Code html :

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

1
2
3
<img id='button_21' data-numero='21' data-status='true' src='data/img/green_0.jpg' alt='on' onclick='change_pin(this);' />
<img id='button_22' data-numero='22' data-status='false' src='data/img/red_0.jpg' alt='off' onclick='change_pin(this);' />
<img id='button_28' data-numero='28' data-status='false' src='data/img/red_0.jpg' alt='off' onclick='change_pin(this);' />

avec la fonction

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
function change_pin (img) //on passe l'image en paramètre
{
  var pin = img.dataset.numero;
  var status = ("false" ==  this.dataset.status); //change le status
  //this is the http request
  //on appelle le php en fonction du pin correspondant au bouton cliqué  ainsi que son status
  var request = new XMLHttpRequest();
  request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
  request.send(null);
  //receiving information
  request.onreadystatechange = function () {
    //lorsque le php répond on met à jour le bouton
    if (request.readyState == 4 && request.status == 200) {
      //je suppose que  gpio.php retourne 0 ou 1
      if (1== parseInt(request.responseText)) {
        //le php à répondu 1 on passe au vert
         //le status est false on le passe à true
         img.dataset.status = true;
         img.alt = 'on';
         img.src = 'data/img/green_0.jpg';
       } else {
    //le php à répondu 0 on passe à rouge
         //le status est true on le passe à false
         img.dataset.status = false;
         img.alt = 'off';
         img.src = 'data/img/red_0.jpg';
      }
    } else {
      console.log (img.dataset.numero + " change status fail");
   }
  }
}

reste 2 grosses inconnue
le exec ('read... dont on ne sait rien et que j'ai remplacer par getEtat pour ne plus trainer les référence incomprehensible de ton code (ce que tu donne ne permets pas de savoir pourquoi $gpios qui est un tableau contenant des entiers aux indices 0, 1 et 2 est utilisé avec les indices 21 22 et 28 avec des valeurs qui sont des tableaux.
ce que retourne l'appel php à gpio.php?pin=21&status=false là j'ai supposé que ça retournait 0 ou 1

A+JYT

**psylo24** · 25/09/2016, 19h15

Code :

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

1
2
3
4
foreach($gpios as $gpio) {
  exec ("gpio read ".$gpio, $valeurLue, $return );
  print_r($valeurLue);
}

Me répond :

Code :

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

 Array ( [0] => 1 ) Array ( [0] => 1 [1] => 1 ) Array ( [0] => 1 [1] => 1 [2] => 0 )

jusque là c'est correct, ca me retourne bien 1 pour le gpio 21 et 22 et 0 pour le gpio 28

Là ça à l'air de fonctionner coté PHP mais le JS ne fonctionne pas encore ça ne récupère pas la valeur status, il faut que je me penche dessus pour trouver le problème.

En tout cas merci beaucoup pour ton aide précieuse si je ne m'en sors pas je reviendrais vers toi

et même quand ça fonctionnera

**sekaijin** · 27/09/2016, 09h39

par rapport à mon code si j'ai bien compris il faut faire

Code php :

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

1
2
3
4
function getEtat($x) {
  exec ("gpio read ".$gpio, $valeurLue, $return );
  return $valeurLue[0];
}

pour le javascript tu fais F12 dans ton navigateur tu mets un point d'arrêt ligne 3 et un autre ligne 15

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
function change_pin (img) //on passe l'image en paramètre
{
  var pin = img.dataset.numero;
  var status = ("false" ==  this.dataset.status); //change le status
  //this is the http request
  //on appelle le php en fonction du pin correspondant au bouton cliqué  ainsi que son status
  var request = new XMLHttpRequest();
  request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
  request.send(null);
  //receiving information
  request.onreadystatechange = function () {
    //lorsque le php répond on met à jour le bouton
    if (this.readyState == 4 && this.status == 200) {// ATTTENTION ici je n'avais pas vu il faut this
      //je suppose que  gpio.php retourne 0 ou 1
      if (1== parseInt(this.responseText)) { // ATTTENTION ici je n'avais pas vu il faut this
        //le php à répondu 1 on passe au vert
         //le status est false on le passe à true
         img.dataset.status = "true";
         img.alt = 'on';
         img.src = 'data/img/green_0.jpg';
       } else {
    //le php à répondu 0 on passe à rouge
         //le status est true on le passe à false
         img.dataset.status = "false";
         img.alt = 'off';
         img.src = 'data/img/red_0.jpg';
      }
    } else {
      console.log (img.dataset.numero + " change status fail");
   }
  }
}

tu clique sur une des images tu devrais avoir dans le debugeur l'objet img avec ses attributs et donc voir les valeurs de
img.dataset.numero et this.dataset.status
en avançant pas à pas tu dois voir :
request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status ); => gpio.php?pin=21&status=true.
si tu avance pas à pas tu vas sortir de la fonction avant de passer par le deuxième point d'arrêt il te faut alors continuer sans pas à pas.

le navigateur va continuer sont job est s'arrêter au deuxième point d'arrêt.
là en inspectant this tu dois trouver les infos sur l'échange don la réponse

A+JYT

Affectation de variable dans une boucle

JavaScript

Discussions similaires

Partager

Partager