2 scripts mais 1 seul ne s'exécute pour Philips Hue.

**lesyl2042** · 06/12/2020, 19h18

Bonjour,

J'ai un script qui sert à allumer et éteindre des ampoules Hue avec deux boutons on et off, en faisant appel à l'api hue.

J'avoue humblement l'avoir trouvé sur le net.

Le script fonctionne parfaitement pour 1 ampoule.

Je souhaite maintenant le dupliquer 6 fois car j'ai 6 ampoules.

Pour tester, j'ai donc bidouillé un code qui ferait appel au même script, dans chaque colonne d'une table. Sachant que la différence entre les ampoules se fait au niveau de la variable "grouplamp".

Je vous mets mon code, très dégueu, je le concède, car je ne cesse de faire des tests.

Pour dupliquer le script, j'ai simplement dupliquer les variables en leur donnant un nom différent (avec le 1 à la fin pour le second).

J'ai essayé en dupliquant et renommant les variables IP, ID, etc...

J'ai essayé en renommant les functions, etc...

Mon souci, c'est que selon mes modifs, le script ne s'exécute pas correctement.

Soit j'ai le script de l'ampoule 2 qui s'exécute sur les 4 boutons, soit le script 1 qui s'exécute sur les 4 boutons ;

Comme si il ne lisait qu'un seul script.

Je n'arrive pas à faire en sorte que dans la même page, chaque script s'exécute indépendamment. 1 pour chaque ampoule en fait.

MErci du coup de main.

Voici le code (et ne hurlez pas !)

Cette version m'affiche mes 4 boutons, on et off. Mais les 4 n'actionnent que la seconde lampe (grouplamp=17)

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
 
<!doctype html>
<html lang="fr">
<head>
 <style>
   button {
     background-color:#383838;
     border:none;
   }
  
  </style>
    <meta charset="UTF-8">
    <title>Controlling hue</title>
</head>
<body>
 
<script type="text/javascript">
    // See API documentation to retrieve your own ID
    // https://www.developers.meethue.com/documentation/getting-started
    
    var hueIP = "XXX" // Your hue bridge IP
    var hueID = "XXX" // Get your ID from the hue bridge
     var hueIP1 = "XXX" // Your hue bridge IP
    var hueID1 = "XXX" // Get your ID from the hue bridge
    var grouplamp = "1" // the group to comtrol
    var grouplamp1 = "17" // the group to comtrol
        
 
 
    function turnOn() {
        send({"on":true})
    }
 
    function turnOff() {
        send({"on":false})
    }
  
  function turnOn1() {
        send({"on":true})
    }
 
    function turnOff1() {
        send({"on":false})
    }
 
    
 
</script>
<div align="center">
 
 
<table>
 
 <thead>
        <tr>
            <th colspan="2">Lumières</th>
        </tr>
    </thead>
  <tbody>
  <tr><td>
    <script> 
      function callback() {}
      function send(obj) {
        var xmlhttp = new XMLHttpRequest();
        var url = "http://"+ hueIP +"/api/"+ hueID +"/groups/"+ grouplamp +"/action/" ;
        xmlhttp.open("PUT", url, true, callback);
        xmlhttp.setRequestHeader("Content-type", "application/json");    
        var parameters = JSON.stringify(obj);
        xmlhttp.send(parameters);
      }</script>
<div align="center" 
<span style="font-family:Helvetica, Arial, sans-serif; font-size:16px; text-align:center; color:#99cc00">Plafond TV
  <br><br></body></html></div>
  <button onclick="javascript:turnOn()"><img src="/js-perso/images/on.png"></button>
    <button onclick="javascript:turnOff()"><img src="/js-perso/images/off.png"></button>
</td>
 <td>
    <script> 
   function callback() {}
      function send(obj) {
        var xmlhttp = new XMLHttpRequest();
        var url = "http://"+ hueIP1 +"/api/"+ hueID1 +"/groups/"+ grouplamp1 +"/action/" ;
        xmlhttp.open("PUT", url, true, callback);
        xmlhttp.setRequestHeader("Content-type", "application/json");    
        var parameters = JSON.stringify(obj);
        xmlhttp.send(parameters);
      }</script>
<div align="center" 
<span style="font-family:Helvetica, Arial, sans-serif; font-size:16px; text-align:center; color:#99cc00">Plafond TV
  <br><br></body></html></div>
  <button onclick="javascript:turnOn1()"><img src="/js-perso/images/on.png"></button>
    <button onclick="javascript:turnOff1()"><img src="/js-perso/images/off.png"></button>
</td></tr>
  </div>
 
</table>
</html>
</body>
</html>

**mathieu** · 06/12/2020, 19h51

tout ce qui est entre balises "script" est considéré comme un seul bloc. donc quand vous déclarez deux fois "function send", au final il n'y en a qu'une seule qui existe et donc quelque soit le bouton, c'est la même fonction qui allume le même bouton.

donc vous devriez plutot avoir des fonctions de ce genre

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
 
function turnOn_ampoulampe1() {
 
	send({
		"grouplamp" : 1,
		"on" : true,
	});
 
}
 
function turnOff_ampoulampe1() {
 
	send({
		"grouplamp" : 1,
		"on" : false,
	});
 
}
 
function turnOn_ampoulampe2() {
 
	send({
		"grouplamp" : 17,
		"on" : true,
	});
 
}
 
function turnOff_ampoulampe2() {
 
	send({
		"grouplamp" : 17,
		"on" : false,
	});
 
}

et ensuite vous avez une seule fonction "send" qui lit le numéro et l'identifiant de l'ampoule dans les arguments et qui construit la requête HTTP à partir de cela.

en faisant cela vous aurez un code qui fonctionne bien mais qui n'est pas très clair donc une fois que ça fonctionne vous pourrez passez à l'optimisation. puisque la règle simple qui concerne l'optimisation est que ça ne sert pas à grand chose d'optimiser quelque chose qui ne fonctionne pas.

**lesyl2042** · 06/12/2020, 20h22

Merci d'avoir passé du temps sur ce souci.

JE tente des choses, mais je ne comprends pas bien.

Je dois tout de même bien affecter la fonction à chaque image.

Chaque image faisant sa propre re<uête http; je ne comprends pas comment en avoir qu'une seule?

Ma requete appelle un grouplam, et je ne vois pas comment lui faire appeler la fonction selon la lampe?

**mathieu** · 07/12/2020, 05h26

voilà un exemple avec la fonction factorisée.
la création des boutons se fait avec jQuery parce que j'ai l'habitude de faire comme ça mais ça peut aussi se simplifier.

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
<html>
<head>
 
<meta charset="UTF-8"/>
 
<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
></script>
 
<style>
        
        button {
                background-color : #383838;
                border : none;
                margin : 1em;
        }
        
        .libelle_ampoule {
                display : inline-block;
                width : 8em;
                
                font-family : Helvetica, Arial, sans-serif;
                font-size : 16px;
                color : #9C0;
                
        }
        
</style>
 
</head>
<body>
 
<ul class="liste_ampoules"></ul>
 
 
<script>
"use strict";
 
$(function () {
        
        let adresse_ip = "127.0.0.1";
        let identifiant_utilisateur = "abcd";
        
        let ampoules = [
                {
                        "libelle" : "plafond TV",
                        "grouplamp" : "1",
                },
                {
                        "libelle" : "une 2e ampoule",
                        "grouplamp" : "17",
                },
                {
                        "libelle" : "niche de pilou",
                        "grouplamp" : "21",
                },
        ];
        
        
        console.clear();
        
        
        // construction des boutons
        
        $(ampoules).each(function (index, ampoule) {
                
                let li = $("<li></li>");
                
                li.append("<span class=\"libelle_ampoule\">" + ampoule["libelle"] + "</span>");
                
                // bouton d'allumage
                li.append($("<button></button>")
                        .append("<img src=\"on.png\"/>")
                        .click(function () {
                                
                                envoi_requete(ampoule["grouplamp"], true);
                                
                        })
                );
                
                // bouton d'extinction 
                li.append($("<button></button>")
                        .append("<img src=\"off.png\"/>")
                        .click(function () {
                                
                                envoi_requete(ampoule["grouplamp"], false);
                                
                        })
                );
                
                
                // ajout dans la liste HTML
                $(".liste_ampoules").append(li);
                
        });
        
        
        // fonction de dialogue avec les ampoules
        
        function envoi_requete(grouplamp, etat_ampoule) {
                
                var xmlhttp = new XMLHttpRequest();
                
                var url = "http://"+ adresse_ip +"/api/"+ identifiant_utilisateur +"/groups/"+ grouplamp +"/action/" ;
                aff(url);
                
                let donnnees_envoi = {"on" : etat_ampoule};
                var parameters = JSON.stringify(donnnees_envoi);
                aff(parameters);
                
                xmlhttp.open("PUT", url, true, function () {});
                xmlhttp.setRequestHeader("Content-type", "application/json");
                
                xmlhttp.send(parameters);
                
        }
        
        
});
 
function aff(variable)
{
        console.log(variable);
}
 
</script>
 
 
</body>
 
</html>

**lesyl2042** · 07/12/2020, 10h14

Wahou...

Merci infiniment pour la réécriture complète du code...

Cela change pas mal de choses...

Je ne suis pas en local aujourd'hui et ne pourrais pas tester. Car l'API hue ne peut s'appeler qu'en local. (a vérifier d'ailleurs).

Je teste ceci ce soir et vous ferais un retour.

Encore un grand merci... Pour Pilou

**lesyl2042** · 07/12/2020, 11h34

Bon, je n'ai pas pu m'empêcher de tester à distance.

Et cela semble fonctionner parfaitement

J'ai pu ajouter mes 6 zones, et effectivement, le coup de la boucle est juste d'enfer.

N'étant pas chez moi, je ne peux vérifier l'allumage ou l'extinction, mais mon appli Hue me retourne les bons états. Allumé ou éteint. Donc, cela doit être fonctionnel.

Je me permets d'abuser un peu, car j'avoue avoir un peu de mal d'imbriquer du html dans du JS... Je bidouille des choses, mais je fais encore beaucoup d'erreurs de syntaxe.

L'idée, selon votre principe, c'est de construire une table sans bordures qui s'alimente automatiquement par votre boucle en <tr>x et <td>.

Ou alors, peut-être qu'il est préférable de construire cette table directement en JS?

Vous m'avez proposé la liste en "li".

Je souhaiterais l'avoir en table.

Titre en haut, et boutons en dessous, le tout alignés sur une seule ligne.

Je me permets de mettre le résultat attendu.

Nom : Capture.PNG
Affichages : 71
Taille : 10,2 Ko

Nom : Capture.PNG
Affichages : 71
Taille : 10,2 Ko

Je vois bien que c'est là que cela se passe, mais toujours des erreurs de syntaxe avec 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
let li = $("<li></li>");
 
                li.append("<span class=\"libelle_ampoule\">" + ampoule["libelle"] + "</span>");
 
                // bouton d'allumage
                li.append($("<button></button>")
                        .append("<img src=\"on.png\"/>")
                        .click(function () {
 
                                envoi_requete(ampoule["grouplamp"], true);
 
                        })
                );
 
                // bouton d'extinction 
                li.append($("<button></button>")
                        .append("<img src=\"off.png\"/>")
                        .click(function () {
 
                                envoi_requete(ampoule["grouplamp"], false);
 
                        })
                );

Un grand merci d'avance à vous du temps que vous consacrez à mon petit souci...

**lesyl2042** · 08/12/2020, 09h17

Je suis idiot, et je tentais des choses bien compliquées.

Au final, je m'en suis sorti et tout fonctionne à merveille.

Encore un grand merci à vous, sujet résolu.

2 scripts mais 1 seul ne s'exécute pour Philips Hue.

JavaScript

Discussions similaires

Partager

Partager