Page 1 sur 2

Un coup de pouce pour un nul en JS

Posté : 20 mars 2020, 22:18
par Fra
Bonjour,

Je travaille sur un microcontrôleur esp32 qui doit commander un robot à l'aide d'un smartphone en wifi.
Pour que n'importe quel téléphone fonctionne je veux passer par une page web, faire une appli est hors de portée de mes connaissances.
Je suis ignorant en javascript et je pense que pour un pratiquant moyen l'aide dont j'ai besoin est facile à donner.

J'ai récupéré un fichier qui fonctionne bien comme un joystick sur l'écran.
Il est déplaçable au doigt et me permet de connaître la valeur en horizontal de la direction avec un retour au neutre quand on relâche et en vertical le moteur, là la valeur reste quand on relâche.
J'aurais besoin de trimer le neutre de la direction...
J'ai donc fait un peu de copier coller et en affichage c'est bon mais je ne sais pas comment une action sur la barre du bas permettrait d'avoir un retour au neutre non pas à 0 mais à la valeur définie en bas.

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" 
        content="width=device-width,        
        initial-scale=1.0,                 
        user-scalable=no" />                <!-- zoom interdit -->
  <title>Commande</title>
  <style>
    #container {
      width: 100%;
      height:500px;                     
      background-color: #133;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;              
      touch-action: none;
    }	
    #item {        
      width: 150px;                   
      height: 100px;                  
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 16, 136, .5);
      border-radius: 40%;             
      touch-action: none;
      user-select: none;
    }
    #item:active {                 
      background-color: rgba(168, 218, 220, 1.00);
    }
    #item:hover {                     
      cursor: pointer;
      border-width: 20px;
    }
	#container2 {
      width: 100%;
      height:20px;                      
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
    }
	#item2 {        
      width: 20px;                   
      height: 20px;                  
      background-color: rgb(45, 230, 99);
      border: 5px solid rgba(6, 6, 6, .5);
      touch-action: none;
      user-select: none;
    }
    #item2:active {                 
      background-color: rgba(168, 28, 220, 1.00);
    }
    #item2:hover {                   
      cursor: pointer;
      border-width: 12px;
    }
	
	
  </style>
</head>
<body>
  <div id="outerContainer">
    <div id="container">
      <div id="item">
      </div>
	</div>
	<div class="slidecontainer">
	<p><center>Trim direction</center></p>
	<div id="container2">
      <div id="item2">
      </div>
	</div>
	
 
  <script>
    var dragItem = document.querySelector("#item");
    var container = document.querySelector("#container");

    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }

      if (e.target === dragItem) {
        active = true;
      }
    }

    function dragEnd(e) {
       xOffset = 0;       
       setTranslate(0, currentY, dragItem);  
       initialY = currentY;

       active = false;
    }

    function drag(e) {
      if (active) {
      
        e.preventDefault();
      
        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
</body>

</html>

Re: Un coup de pouce pour un nul en JS

Posté : 22 mars 2020, 10:58
par webmaster
Bonjour,

Sympa ce projet avec du JS sur du ESP32 (je bricole moi meme avec arduino)

Par contre, j'ai besoin d'explication. Le script est sensé faire quoi ? Ca veut dire quoi "trimer le neutre de la direction" ?

Merci

Re: Un coup de pouce pour un nul en JS

Posté : 22 mars 2020, 11:53
par Fra
Le projet est de tenter de remplacer l'ensemble emetteur et récepteur de radiocommande par un smartphone et un esp32 qui serait serveur web et récupère la position en X pour la direction et en y pour la marche.

Comme la direction en ligne droite doit être précise un réglage fin de la position de retour au neutre est indispensable.
Ce que je ne sait pas faire en JS :
Quand on agit au niveau du bas il faudrait que la variable suive, que l'affichage suive et naturellement le retour au neutre du joystick suivrait.

Comment quand on touche l'écran sur le carré du trim récupère-t-on l'info ? et comment mettons à jour la variable et l'affichage ?

Ce doit être trop facile puisque personne ne m'aide... :(

Re: Un coup de pouce pour un nul en JS

Posté : 22 mars 2020, 18:36
par webmaster
Je ne vois pas trop comment envoyer les données a l'ESP

Mais on peut les afficher
https://www.toutjavascript.com/user/esp32.html

j'ai simplement ajouté la ligne
document.getElementById("coords").innerHTML=currentX+","+currentY;

Re: Un coup de pouce pour un nul en JS

Posté : 22 mars 2020, 22:26
par Fra
Merci cela me permet de savoir le contenu de ces variables.
Et si j'arrive à bien copier la valeurs d'autres

J'ai du mal à saisir pourquoi au départ le mot coordonnees est ensuite remplacé par les valeurs... C'est le > ?
C'est de la commande CSS ? (je ne pratique pas non plus, j'ai juste des bases en html des débuts).
j'ai simplement ajouté la ligne
document.getElementById("coords").innerHTML=currentX+","+currentY;
Et <div id="coords">Coordonnees</div>

Je vais chercher de la doc sur cela.

Je pense qu'il faudrait ajouter
var dragItem2 = document.querySelector("#item2");
Plus un
setTranslate(currentX, ???? , dragItem2);
Et d'autres trucs
Mais c'est plus de la vision dans le marc de café...

Re: Un coup de pouce pour un nul en JS

Posté : 23 mars 2020, 14:15
par webmaster
Les vraies coordonnées sont affichées quand l'événement de mouvement est déclenché.

Je pense que c'est un script compliqué pour commencer l'apprentissage.
Il faudrait démarrer avec un moyen plus simple de communiquer entre JS et l'ESP32.

Re: Un coup de pouce pour un nul en JS

Posté : 23 mars 2020, 19:05
par Fra
Oui mais dans container.

Il faudrait la même chose dans container2 quand on déplace item2

Je suis prêt à changer mais pour ?

Re: Un coup de pouce pour un nul en JS

Posté : 25 mars 2020, 16:13
par Fra
J'ai un peu avancé mais le manque de connaissances sur les méthodes de gestion de l'écran et la souris me bloque.

Je ne sais pas comment faire un lien comme
https://www.toutjavascript.com/user/esp32.html
aussi vous aurez droit à un bout de code
================================

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" 
        content="width=device-width,        
        initial-scale=1.0,                 
        user-scalable=no" />                <!-- zoom interdit -->
  <title>Commande</title>
  <style>
    #container {
      width: 100%;
      height:500px;                     
      background-color: #133;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;              
      touch-action: none;
    }	
    #item {        
      width: 150px;                   
      height: 100px;                  
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 16, 136, .5);
      border-radius: 40%;             
      touch-action: none;
      user-select: none;
    }
    #item:active {                 
      background-color: rgba(168, 218, 220, 1.00);
    }
    #item:hover {                     
      cursor: pointer;
      border-width: 20px;
    }
	#container2 {
      width: 100%;
      height:20px;                      
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
    }
	#item2 {        
      width: 20px;                   
      height: 20px;                  
      background-color: rgb(45, 230, 99);
      border: 5px solid rgba(6, 6, 6, .5);
      touch-action: none;
      user-select: none;
    }
    #item2:active {                 
      background-color: rgba(168, 28, 220, 1.00);
    }
    #item2:hover {                   
      cursor: pointer;
      border-width: 12px;
    }
	
	
  </style>
</head>
<body>
  <div id="coords">Coordonnees</div>	
  <div id="truc">trucs</div>	
  
  <div id="outerContainer">
    <div id="container">
      <div id="item">
      </div>
	</div>
	<div class="slidecontainer">
	<p><center>Trim direction</center></p>
	<div id="container2">
      <div id="item2">
      </div>
	  
	<div id="affichage"></div>
    <script language="text/javascript">document.getElementById('affichage').innerHTML = currentX;</script>
	</div>    
	
  <script>
    var dragItem = document.querySelector("#item");
    var container = document.querySelector("#container");
    var dragItem2 = document.querySelector("#item2");
    var container2 = document.querySelector("#container2");
    var active = false;
    var currentX;
	var currentX2;
    var currentY;
	var currentY2;
    var initialX;
	var initialX2;
    var initialY;
	var initialY2;
    var xOffset = 0;
    var yOffset = 0;
    var xOffset2 = 0;
    var yOffset2 = 0;
    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);
    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);
    
	container2.addEventListener("touchstart", dragStart2, false);
    container2.addEventListener("touchend", dragEnd2, false);
    container2.addEventListener("touchmove", drag2, false);
    container2.addEventListener("mousedown", dragStart2, false);
    container2.addEventListener("mouseup", dragEnd2, false);
    container2.addEventListener("mousemove", drag2, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }
      if (e.target === dragItem) {
        active = true;
      }
    }

	 function dragStart2(e) {
      if (e.type === "touchstart") {
          initialX2 = e.touches[0].clientX - xOffset2;
		  initialY2=0;
          //initialY2 = e.touches[0].clientY - yOffset2;
      } else {
          initialX2 = e.clientX - xOffset2;
          initialY2=0;
		  //initialY2 = e.clientY - yOffset2;
      }
      if (e.target === dragItem2) {
          active = true;
      }
    } 

    function dragEnd(e) {
        Offset = 0;       
        setTranslate(0, currentY, dragItem);  
	    initialY = currentY;
        active = false;
    }

	function dragEnd2(e) {
       initialX2 = currentX2;
       initialY2 = currentY2;
       active = false;
    }

    function drag(e) {
      if (active) {
        e.preventDefault();
        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }
        xOffset = currentX;
        yOffset = currentY;
        setTranslate(currentX, currentY, dragItem);
        document.getElementById("coords").innerHTML=currentX+","+currentY;
      }
    }
	
	function drag2(e) {
      if (active) {
        e.preventDefault();
        if (e.type === "touchmove") {
          currentX2 = e.touches[0].clientX - initialX2;
		  currentY2 = e.touches[0].clientY - initialY2;
        } else {
          currentX2 = e.clientX - initialX2;
          currentY2 = e.clientY - initialY2;
        }
        xOffset2 = currentX2;
        setTranslate(currentX2, 0, dragItem2);		
        document.getElementById("truc").innerHTML=currentX2+","+currentY2;
      }
    }
	
    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
	   }
	  
  </script>
</body>
</html>
Mon principal pb est quand la souris sélectionne le joystick (ou le bouton du trim) et qu'elle va dans la zone de l'autre, elle déclenche une modification des données de celui-ci (celles affichées en haut de la page) et après c'est du n'importe quoi.

Après y aura encore d'autres trucs mais moins bloquants.

Re: Un coup de pouce pour un nul en JS

Posté : 25 mars 2020, 16:54
par webmaster
Bonjour,

Je vais regarder demain plus en détail.
Mais je suppose qu'il y a des variables qui ne sont pas bien dédoublées pour les 2 modules de gestion.

Re: Un coup de pouce pour un nul en JS

Posté : 25 mars 2020, 20:16
par Fra
Merci