diff --git a/ui/bootstrap-5.3.3-dist/js/bootstrap.js b/ui/bootstrap-5.3.3-dist/js/bootstrap.js
index e3a59e3..9ed52e8 100644
--- a/ui/bootstrap-5.3.3-dist/js/bootstrap.js
+++ b/ui/bootstrap-5.3.3-dist/js/bootstrap.js
@@ -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
diff --git a/ui/index.html b/ui/index.html
index d4c73ae..e9abe6f 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,10 +4,30 @@
-
MinHAUMTaure
Bienvenue sur MinHAUMTaure
+
+ Fonctionnalités
+
+
+
+
+ Sélection de la couleur
+
+
+
+
+
+ Directions
+
+
+
+
+
+ Automatique
+
+