Discussion :

[patrick_81]

Bonjour,
Je suis tout nouveau sur ce forum et si je viens consulter les experts en javascript et développement web c'est que je suis dans une impasse.
Je tourne en rond et ne trouve pas de solutions à mon problème.
Je tente de développer un soft de pilotage de dispositif de mise au point pour télescope utilisant un téléphone comme raquette de commande.
Le tout s'articule autour d'un composant ESP32 qui fait tourner le serveur et le téléphone qui est le client de ce serveur.
La partie interface est donc en html pilotée par du javascript.
J'utilise firefox pour debugger en remote.

Le comportement est le suivant: les évènements en provenance du téléphone semblent ne pas fonctionner. J'ai des erreurs du style:

Mis en pause par une exception

ReferenceError: gofwd is not defined

que je place le code javascript en tête ou en queue du code html ne change pas le résultat.

La seule chose qui fonctionne c'est après suppression des addEventListener l'interface réagit sur PC mais toujours pas sur le téléphone.

Je ne peux utiliser l'event passé en argument de la fonction dans les addEventListener, ce dernier est déclaré comme indéfini quand j'essaie de l'utiliser dans la fonction.

Là je suis plus que perplexe.

Si vous avez des suggestions je suis preneur.

Je joins ici le script et le html.
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
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
var switchavant = 0; // déplacement entrant bouton appuyé 1 lâché 0
var switcharriere = 0;// déplacement sortant bouton appuyé 1 lâché 0
var switchspeedplus = 0;// incrémente vitesse bouton appuyé 1 lâché 0
var switchspeedmoins = 0;// diminue vitesse bouton appuyé 1 lâché 0
var engaged = true;// débraye le moteur bouton appuyé 1 lâché 0
var lockunlock = true;// débraye le moteur bouton appuyé 1 lâché 0
document.addEventListener('DOMContentLoaded', (event) => {
    gofwd = document.getElementById("fwd");
    gobwd = document.getElementById("bwd");
    speedup = document.getElementById("vplus");
    speeddown = document.getElementById("vmoins");
    embrayer = document.getElementById("engaged");    
    //the event occurred
})
gofwd.addEventListener('touchstart', function(ev) {  
    ev.preventDefault(); 
    switchavant =1;
});
gofwd.addEventListener('touchend', function(ev) {
    ev.preventDefault();
    switchavant = 0;
});
gobwd.addEventListener('touchstart', function(ev) {
    ev.preventDefault();
    switcharriere =1;
});
gobwd.addEventListener('touchstart', function(ev) {
    ev.preventDefault();
    switcharriere = 0;
});
speedup.addEventListener('touchstart',  function(ev) {
    ev.preventDefault();
    switchspeedplus = 1;
});
speedup.addEventListener('touchend',  function(ev) {
});
speeddown.addEventListener('touchstart',  function(ev) {
    ev.preventDefault();
    switchspeedmoins = 1;
});
speeddown.addEventListener('touchend',  function(ev) {
});
embrayer.addEventListener('touchstart', function(ev) {
      ev.preventDefault();
      lockunlock = true;
});
embrayer.addEventListener('touchend',  function(ev) {
});
// réglage de =1 la vitesse
function plus() {
    switchspeedplus = 1;
}
function moins() {
    switchspeedmoins = 1;
}
// débraye le moteur
function debraye() {
    lockunlock  = true;
}
function startavant() {
    // console.log(ev.touches);
    switchavant = 1;
    // if(loopon == 0) loop();
}
function stopavant() {
    // console.log(ev.touches);
    switchavant = 0;
    // if(loopon == 0) loop();
}
function startarriere() {
    switcharriere = 1;
    // if(loopon == 0) loop();
}
function stoparriere() {
    switcharriere = 0;
    // if(loopon == 0) loop();
}
function loop() {
     if (switchavant == 1)
    {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "avant", true);
        xhttp.send();
    } 
    else if(switcharriere == 1)
    {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "arriere", true);
        xhttp.send();
    } 
    else if (switchspeedplus == 1 )
    {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "vplus", true);
        xhttp.send(); 
        switchspeedplus = 0;
    } 
    else if (switchspeedmoins == 1 )
    {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "vmoins", true);
        xhttp.send();        
        switchspeedmoins = 0;
    }
    else if (lockunlock)
    {
        engaged = !engaged;
        if (engaged)
        {
            document.getElementById('engaged').innerText = "DEBRAYE";
            document.getElementById("engaged").style.background='#FF5733'
        }
        else
        {
            document.getElementById('engaged').innerText = "EMBRAYE";
            document.getElementById("engaged").style.background='#DAF7A6'
        }
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "lock", true);
        xhttp.send();
        lockunlock = false;
     }
    // t=setTimeout('loop()',200);
}
loopon = setInterval(loop, 100);
// document.getElementById("bwd").addEventListener("onmouseup", function(){ switchavant = 1;});
// document.getElementById("fwd").addEventListener("onmousedown", function(){ switchavant = 0;});
// document.getElementById("bwd").addEventListener("onmouseup", stopavant);
// document.getElementById("bwd").addEventListener("onmousedown", startavant);
// document.getElementById("fwd").addEventListener("onmouseup", stoparriere);
// document.getElementById("fwd").addEventListener("onmousedown", startarriere);
function getData()
{
    var pos = new XMLHttpRequest();
    var speed = new XMLHttpRequest();
    var eng = new XMLHttpRequest();
    pos.onreadystatechange = function()
    {
        if(this.readyState == 4 && this.status == 200)
        {
            document.getElementById("position").innerHTML = this.responseText;
        }
    };
    pos.open("GET", "position", true);
    pos.send();
    speed.onreadystatechange = function()
    {
        if(this.readyState == 4 && this.status == 200)
        {
            document.getElementById("speed").innerHTML = this.responseText;
        }
    }; 
    speed.open("GET", "speed", true);
    speed.send();
    // eng.onreadystatechange = function()
    // {
    //     if(this.readyState == 4 && this.status == 200)
    //     {
    //         let lbl = document.getElementById('engaged');
    //         if (strcmp(lbl.innerText, this.responseText) === -1 )
    //         {
    //             lbl.innerText = this.responseText;
    //             document.getElementById("button").style.background='#000000'
    //         }
    //         else
    //         {
    //         }
    //     }
    // }; 
    // eng.open("GET", "engaged", true);
    // eng.send();
 
}
// mets à jour les champs de la page html
getdata = setInterval(getData, 300);

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>HANDPAD</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8"/>
        <link rel="stylesheet" type="text/css" href="w3.css">
	</head>
	<body class="w3-animate-opacity">
    	<div class="w3-card w3-blue w3-padding-small w3-center">
        	<h1>RAQUETTE</h1>
    	</div>
 
		<div class="w3-margin w3-center w3-card w3-padding-24">
        	<p class="w3-xlarge">Position focuser : <span id="position">0</span></p>
            <button
                onMouseDown="startavant()" onMouseUp="stopavant()"
                id="fwd" class="w3-button w3-green w3-round w3-large w3-ripple w3-wide" 
                style="width:40%;">AVANT</button>
            <button
                onMouseDown="startarriere()" onMouseUp="stoparriere()"
                id="bwd" class="w3-button w3-red w3-round w3-large w3-ripple w3-wide"
                style="width:40%;">ARRIERE</button>
        </div>
 
		<div class="w3-margin w3-center w3-card w3-padding-24">
        	<p class="w3-xlarge">Vitesse :  <span id="speed">1</span></p>
            <button onclick="plus()" id="vplus" class="w3-button w3-green w3-large w3-ripple w3-wide" style="width:40%;" >V+</button>
        	<button onclick="moins()" id="vmoins" class="w3-button w3-red w3-large w3-ripple w3-wide" style="width:40%;" >V-</button>
		</div>
 
		<div class="w3-margin w3-center w3-card w3-padding-24">
        	<button onclick="debraye()" id="engaged" class="w3-button w3-green w3-large w3-ripple w3-wide" style="width:60%;">DEBRAYE</button>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>