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

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  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 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    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