Mise en place premiers éléments graphique

2025-03-22 16:30:22 +01:00
parent aa017a2715
commit ed0bbdaf13
2 changed files with 104 additions and 1 deletions
@@ -4488,7 +4488,90 @@
    Tooltip
  };

+  document.getElementById("colorLed").onchange=function(){
+    // do whatever you want with value
+    console.log(this.value);
+  };
+
+  const btnsz = 40;
+  let positionX = 0, positionY = 0;
+  let clicked = false;
+  let lastsend = performance.now();
+  const joystick_draw = () => {
+    const ctx = motors_joystick.getContext("2d");
+    const w = motors_joystick.width;
+    const h = motors_joystick.height;
+    ctx.clearRect(0, 0, w, h);
+  
+    ctx.fillStyle = "#00aa0040";
+    ctx.beginPath();
+    ctx.arc(w/2, h/2, w/2-btnsz, 0, 2 * Math.PI);
+    ctx.fill();
+  
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#009900";
+    ctx.fillStyle = "#00aa00";
+    ctx.beginPath();
+    ctx.arc(w/2 + positionX, h/2 + positionY, btnsz, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.stroke();
+  }
+
+  const updatePosition = e => {
+    const clientX = e.clientX || e.touches[0].clientX;
+    const clientY = e.clientY || e.touches[0].clientY;
+    const r = motors_joystick.getBoundingClientRect();
+    const kw = r.width/2 - btnsz;
+    let vx = Math.max(-1, Math.min((clientX - r.left - r.width/2) / kw, 1));
+    let vy = Math.max(-1, Math.min((clientY - r.top - r.height/2) / kw, 1));
+    if (vx*vx + vy*vy > 1) {
+      const a = Math.atan2(vy, vx);
+      vx = Math.cos(a);
+      vy = Math.sin(a);
+    }
+    positionX = vx * kw;
+    positionY = vy * kw;
+    console.log("PositionX : "+ Math.round(positionX))
+    console.log("PositionY : "+ Math.round(positionY))
+    vy *= -1;
+    if (performance.now() - lastsend > 250) {
+      //send_motors(vy+vx, vy-vx);
+      lastsend = performance.now();
+    }
+    joystick_draw();
+  }
+  const ondown = e => {
+    clicked = true;
+    motors_joystick.style.cursor = 'none'
+    updatePosition(e);
+  };
+  const onmove = e => {
+    if (clicked) {
+      updatePosition(e);
+    }
+  };
+  const onup = () => {
+    if (clicked) {
+      //send_motors(0, 0);
+      motors_joystick.style.cursor = ''
+      clicked = false;
+      positionX = positionY = 0;
+      joystick_draw();
+    }
+  };
+  joystick_draw();
+  motors_joystick.addEventListener('mousedown', ondown);
+  motors_joystick.addEventListener('mousemove', onmove);
+  motors_joystick.addEventListener('mouseup', onup);
+  motors_joystick.addEventListener('mouseleave', onup);
+  motors_joystick.addEventListener('touchstart', ondown);
+  motors_joystick.addEventListener('touchmove', onmove);
+  motors_joystick.addEventListener('touchend', onup);
+  motors_joystick.addEventListener('touchcancel', onup);
+
  return index_umd;

+  
+
 }));
 //# sourceMappingURL=bootstrap.js.map