Partage

Question avec jquery et arduino

Sujet résolu
1 janvier 2018 à 16:08:15

Bonjour, je suis entrain de créer un petit projet arduino. Et j'utilise Jquery pour la "liaison" entre le navigateur et l'arduino faisant office de serveur.

Sur la page web, j'ai un input range, et j'aimerais envoyer la valeur de ce range au serveur quand celle ci change. Pour l'instant je n'arrive pas à envoyer une valeur dés que celle ci change.

Comment faire?

Merci d'avance :)

1 janvier 2018 à 19:31:20

Bonjour,

Pourrais tu nous montrer ce que as fait ? Du code HTML, JS etc...

Ne connaissant pas arduino j'aimerai savoir:

- En quel langage est fait le server ?

- Un peu de code ? Pour que je sache l'environnement de travail

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
1 janvier 2018 à 22:32:29

Voila la code html et javascript(Jquery) de la page

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
    $(function() {
      $('#angleX').change(function() {
        var valeur = $('#angleX').val();
        $.get('http://192.168.1.27/angle1?val='+valeur, function(data) {
          
        });
      });
      $('#angleY').change(function() {
        var valeur = $('#angleY').val();
        $.get('http://192.168.1.27/angle2?val='+valeur, function(data) {
          
        });
      });
    // });
    });
 </script>
<table width=100% border=0 height=100%><tr><td><div align=center valign=center><iframe width='680' height='360' src='https://www.youtube.com/embed/OfhOTjEDSak' frameborder='0' gesture='media' allow='encrypted-media' allowfullscreen></iframe></div>
</td><td><div align=center><input style='transform: rotate(-90deg);' id=angleX type='range' min='0' max='180' value='90' step='2' name='angle1' list='powers'></div></td></tr><tr><td><div align=center><input id=angleY type='range' min='0' max='180' value='90' step='2' name='angle2' list='powers'></div></td></tr></table>

Du coté serveur(arduino), je reçois les requêtes GET. Le langage du serveur est le C.

Le but de cette application est de visualiser une caméra à distance est de pouvoir faire bouger cette caméra à l'aide des deux curseurs.

Le seul soucis, c'est qu'il faut relâcher la souris pour actualiser la valeur du curseur.

2 janvier 2018 à 2:20:55

Re,

L'event change ne permet pas de faire ce que tu souhaites malheuresement. Cependant il est possible de le faire autrement. Je pense que le seul moyen est  d'utiliser la fonction requestAnimationFrame (https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame). En gros a chaque frame il faudra que tu regarde la valeur de X et de Y et que tu determines si il a changé ou pas. Si il a changer tu peux faire ta requete sinon tu ne fais rien

Si tu veux plus de détail tu peux me mp

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 11:00:55

Bonjour, j'ai essayé de modifier mon code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    $(function() {
    var AncX = -1;
    var AncY = -1;
      function refresh(){
        var valeur = $('#angleX').val();
        if(valeur != AncX){
        AncX = valeur;
          $.get('http://192.168.1.27/angle1?val='+valeur, function(data) {
            
          });}
     
        var valeur = $('#angleY').val();
        if(valeur != AncY){
        AncY = valeur;
        $.get('http://192.168.1.27/angle2?val='+valeur, function(data) {
          
        });}
      }
    });
    requestAnimationFrame(refresh);
    </script>
    <table width=100% border=0 height=100%><tr><td><div align=center valign=center><iframe width='680' height='360' src='https://www.youtube.com/embed/OfhOTjEDSak' frameborder='0' gesture='media' allow='encrypted-media' allowfullscreen></iframe></div>
    </td><td><div align=center><input style='transform: rotate(-90deg);' id=angleX type='range' min='0' max='180' value='90' step='2' name='angle1' list='powers'></div></td></tr><tr><td><div align=center><input id=angleY type='range' min='0' max='180' value='90' step='2' name='angle2' list='powers'></div></td></tr></table>

Mais ça ne marche pas.

2 janvier 2018 à 15:40:09

Humm quand tu appelle refresh (ligne 23), la fonction est bien appelé mais cette fonction ne rappelle requestAnimationFrame, a chaque appelle de refresh tu dois appeler requestAnimationFrame
Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 17:32:33

Je viens de rajouter requestAnimationFrame(refresh) au début de la fonction, mais toujours rien.
2 janvier 2018 à 18:26:55

Il faut le rajouter a la fin, pas au debut
Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 18:44:07

Je l'ai mis à la fin et toujours pas. Par contre, j'ai essayé de mettre un alert("test"); au debut de la fonction refresh pour voir si elle était bien appelé, et rien, pas de boite de dialogue qui s'ouvre.
2 janvier 2018 à 18:51:58

Tu as un probleme de scoping, a la ligne 23 il n'y a pas de fonction refresh (je t'invite a voir cette notion si cela ne te dit rien), c'est a dire qu'elle n'existe pas, elle existe que sur le scope de $function

essaye ce code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var AncX = -1;
    var AncY = -1;
    function refresh(){
        var valeur = $('#angleX').val();
     
        if(valeur != AncX){
        AncX = valeur;
          $.get('http://192.168.1.27/angle1?val='+valeur, function(data) {
             
          });}
      
        var valeur = $('#angleY').val();
        if(valeur != AncY){
        AncY = valeur;
        $.get('http://192.168.1.27/angle2?val='+valeur, function(data) {
           
        });}

        requestAnimationFrame(refresh)
    }
    requestAnimationFrame(refresh);
    </script>
    <table width=100% border=0 height=100%><tr><td><div align=center valign=center><iframe width='680' height='360' src='https://www.youtube.com/embed/OfhOTjEDSak' frameborder='0' gesture='media' allow='encrypted-media' allowfullscreen></iframe></div>
    </td><td><div align=center><input style='transform: rotate(-90deg);' id=angleX type='range' min='0' max='180' value='90' step='2' name='angle1' list='powers'></div></td></tr><tr><td><div align=center><input id=angleY type='range' min='0' max='180' value='90' step='2' name='angle2' list='powers'></div></td></tr></table>
Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 18:58:30

ça marche :), merci beaucoup, juste une petite question, est il possible de réguler l'"actualisation" des données?
2 janvier 2018 à 19:06:49

Oui,

T'as plusieurs choix:

- Soit tu stocke angleX et angleY en variable global, et a chaque animationFrame tu regardes si la valeurs a changer (si oui tu fait une requetes sinon tu fais rien)

- Sinon tu peux utiliser un setTimeout() ( ou setInterval() auquel cas tu peux enlever requestAnimationFrame(refresh) dans le refresh )avec genre 3 seconds, du coup tous les trois seconds il va appeler requestAnimationFrame

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 19:14:01

Tout marche parfaitement merci beaucoup @Stelyus !!!! :):)

Question avec jquery et arduino

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown