Ajout partie Web

2026-02-23 10:53:32 +01:00
parent b891c12400
commit c0d50a20ba
11 changed files with 346 additions and 28 deletions
--- a/data/mouse.html
+++ b/data/mouse.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mouse Speedometer</title>
+  <style>
+    body { background: #f4f4f4; font-family: Arial, sans-serif; }
+    .container { max-width: 400px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 32px; }
+    #speedometer { display: block; margin: 0 auto; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h2>Mouse Speedometer</h2>
+    <div id="speedometer">
+      <!-- Inline SVG for speedometer -->
+      <svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+        <image href="Speed.png" x="0" y="0" width="300" height="200"/>
+        <line id="needle" x1="150" y1="120" x2="150" y2="70" stroke="#e74c3c" stroke-width="6" stroke-linecap="round" />
+      </svg>
+    </div>
+    <div style="text-align:center; margin-top:20px;">
+      <button onclick="setSpeed(0)">0</button>
+      <button onclick="setSpeed(100)">100</button>
+      <button onclick="setSpeed(200)">200</button>
+    </div>
+  </div>
+  <script>
+    /**
+     * Speed is expected to be in the range 0-200. This function maps it to an angle for the needle.
+     * at 100Kmh, needle is vertical, it's length is 50px, and it rotates from -120deg (0 speed) to +120deg (max speed).
+     * At speed=100, x2=150, y2=70
+     */
+    function setSpeed(speed) 
+    {
+      // Clamp speed
+      speed = Math.max(0, Math.min(200, speed));
+      // Map speed to angle: 0 = -120deg, 100 = 0deg, 200 = +120deg
+      var angle = -120 + (speed / 200) * 240;
+      var rad = angle * Math.PI / 180;
+      var r = 50; // needle length
+      var cx = 150, cy = 120;
+      var x2 = cx + r * Math.sin(rad); // Use sin for x, cos for y to match SVG coordinate system
+      var y2 = cy - r * Math.cos(rad);
+      document.getElementById('needle').setAttribute('x2', x2);
+      document.getElementById('needle').setAttribute('y2', y2);
+    }
+    // Example: set speed to 0 initially
+    setSpeed(20);
+  </script>
+</body>
+</html>