IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Piloter un composant ESP32


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    indépendant
    Inscrit en
    Décembre 2020
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : indépendant

    Informations forums :
    Inscription : Décembre 2020
    Messages : 2
    Par défaut Piloter un composant ESP32
    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>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    il y a une incohérence dans ton code au niveau des attachements des événements, ceux ci ne peuvent pas aboutir attendu que tu récupères la référence aux éléments dans ton « DOMContentLoaded » soit après les attachements.

    Comme ton script est situé en fin de page tu peux supprimer le document.addEventListener('DOMContentLoaded', (event) ..., ou alors tu mets tout dedans.

    Remarque : tu devrais peut-être passer par un objet plutôt que de déclarer toutes tes variables à la file indienne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    const monObjet = {
      avant: 0,             // déplacement entrant bouton appuyé 1 lâché 0
      arriere: 0,           // déplacement sortant bouton appuyé 1 lâché 0
      speedplus: 0,         // incrémente vitesse bouton appuyé 1 lâché 0
      speedmoins: 0,        // diminue vitesse bouton appuyé 1 lâché 0
      engaged: true,        // débraye le moteur bouton appuyé 1 lâché 0
      lockunlock: true      // débraye le moteur bouton appuyé 1 lâché 0
    }
    dans ton cas ce n'est pas une obligation mais c'est plus propre.

    Nota : je n'ai pas regardé le reste.

  3. #3
    Candidat au Club
    Homme Profil pro
    indépendant
    Inscrit en
    Décembre 2020
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : indépendant

    Informations forums :
    Inscription : Décembre 2020
    Messages : 2
    Par défaut Résolu
    @Nosmoking
    Merci mon problème est résolu grâce en partie à tes conseils. Je n'ai pas trop pigé quel est le processus d’interaction html/javascript quand on place le script dans le head ou en fin de body.
    J'imaginais naivement que l'interprétation du script ne pouvait s’exécuter qu'après chargement du html. Et donc j'installais le script dans le head mais avec des id indéfinis.
    Et quand je le plaçais en fin j'avais alors des event non définis. Ça reste donc un peu mystérieux pour moi car je ne saisis pas trop pourquoi maintenant ça fonctionne.
    index.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-large w3-ripple w3-wide" style="width:60%;background-color: green;">DEBRAYE</button>
            </div>
            <script type="text/javascript" src="script.js"></script>
        </body>
    </html>
    script.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
    const cntrl = {
        avant: 0,             // déplacement entrant bouton appuyé 1 lâché 0
        arriere: 0,           // déplacement sortant bouton appuyé 1 lâché 0
        speedplus: 0,         // incrémente vitesse bouton appuyé 1 lâché 0
        speedmoins: 0,        // diminue vitesse bouton appuyé 1 lâché 0
        engaged: true,        // débraye le moteur bouton appuyé 1 lâché 0
        lockunlock: true      // débraye le moteur bouton appuyé 1 lâché 0
    }
     
    gofwd = document.getElementById("fwd");
    gobwd = document.getElementById("bwd");
    speedup = document.getElementById("vplus");
    speeddown = document.getElementById("vmoins");
    embrayer = document.getElementById("engaged");    
    ///////////////////////////////////////////////////////////////
    // Commandes à partir de l'appareil mobile
    // Mouvement avant 
    gofwd.addEventListener('touchstart', function(ev) {  
        ev.preventDefault(); 
        cntrl.avant = 1;
    });
    gofwd.addEventListener('touchend', function(ev) {
        ev.preventDefault();
        cntrl.avant = 0;
    });
    // Mouvement arrière 
    gobwd.addEventListener('touchstart', function(ev) {
        ev.preventDefault();
        cntrl.arriere = 1;
    });
    gobwd.addEventListener('touchend', function(ev) {
        ev.preventDefault();
        cntrl.arriere = 0;
    });
    // augmentation de la vitesse 
    speedup.addEventListener('touchstart',  function(ev) {
        ev.preventDefault();
        cntrl.speedplus = 1;
    });
    speedup.addEventListener('touchend',  function(ev) {
    });
    // diminution de la vitesse 
    speeddown.addEventListener('touchstart',  function(ev) {
        ev.preventDefault();
        cntrl.speedmoins = 1;
     
    });
    speeddown.addEventListener('touchend',  function(ev) {
    });
    // embrayage ou débrayage du moteur
    embrayer.addEventListener('touchstart', function(ev) {
          ev.preventDefault();
        cntrl.lockunlock = true;
    });
    embrayer.addEventListener('touchend',  function(ev) {
    });
    ///////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////
    // Commandes à partir du PC
    ///////////////////////////////////////////////////////////////
    // augmente la vitesse
    function plus() {
        cntrl.speedplus = 1;
    }
    // diminue la vitess
    function moins() {
        cntrl.speedmoins = 1;
    }
    // débraye ou embraye le moteur
    function debraye() {
        cntrl.lockunlock = true;
    }
    // mouvement avant
    function startavant() {
        cntrl.avant = 1;
    }
    function stopavant() {
        cntrl.avant = 0;
    }
    // mouvement arrière
    function startarriere() {
        cntrl.arriere = 1;
    }
    function stoparriere() {
        cntrl.arriere = 0;
    }
    ///////////////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////
    // boucle d'actuation
    //////////////////// boucle d'actuation ///////////////////////
    function loop() {
         if (cntrl.avant == 1)
        {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "avant", true);
            xhttp.send();
        } 
        else if(cntrl.arriere == 1)
        {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "arriere", true);
            xhttp.send();
        } 
        else if (cntrl.speedplus == 1 )
        {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "vplus", true);
            xhttp.send(); 
            cntrl.speedplus = 0;
        } 
        else if (cntrl.speedmoins == 1 )
        {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "vmoins", true);
            xhttp.send();        
            cntrl.speedmoins = 0;
        }
        else if (cntrl.lockunlock)
        {
            cntrl.engaged = !cntrl.engaged;
            if (cntrl.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();
            cntrl.lockunlock = false;
         }
    }
    loopon = setInterval(loop, 100);
    ///////////////////// fin d'actuation /////////////////////////
     
    ///////////////////////////////////////////////////////////////
    // boucle d'actualisation de l'affichage
    ////////////// actualisation de l'affichage ///////////////////
     
    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(); 
    }
    // mets à jour les champs de la page html
    getdata = setInterval(getData, 300);
    ////////////// fin actualisation de l'affichage ////////////////

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Formulaire de données VBA je suis completement perdu
    Par david2troyes dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 29/12/2016, 07h57
  2. Bug ? Je suis completement perdu .
    Par aedius dans le forum PhpMyObject
    Réponses: 18
    Dernier message: 07/12/2007, 09h37
  3. Je suis complétement perdu ?
    Par hsazerty dans le forum Code::Blocks
    Réponses: 3
    Dernier message: 25/11/2007, 20h50
  4. Typage Caml light (je suis totalement perdu!)
    Par ficarre dans le forum Caml
    Réponses: 11
    Dernier message: 24/02/2007, 14h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo