From 49b731c26cdf7ac3f480b5e2e4628d0451ff244d Mon Sep 17 00:00:00 2001
From: Serge NOEL <s.noel@hexa-h.com>
Date: Mon, 23 Feb 2026 13:13:32 +0100
Subject: [PATCH] Update mouse

---
 data/css/style.css       |  18 +++++++++++
 data/{ => img}/Speed.png | Bin
 data/js/mouse.js         |  67 +++++++++++++++++++++++++++++++++++++++
 data/mouse.html          |  67 ++++++++++++++++++++-------------------
 4 files changed, 120 insertions(+), 32 deletions(-)
 create mode 100644 data/css/style.css
 rename data/{ => img}/Speed.png (100%)
 create mode 100644 data/js/mouse.js

diff --git a/data/css/style.css b/data/css/style.css
new file mode 100644
index 0000000..d2c2c59
--- /dev/null
+++ b/data/css/style.css
@@ -0,0 +1,18 @@
+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; 
+}
\ No newline at end of file
diff --git a/data/Speed.png b/data/img/Speed.png
similarity index 100%
rename from data/Speed.png
rename to data/img/Speed.png
diff --git a/data/js/mouse.js b/data/js/mouse.js
new file mode 100644
index 0000000..de24acf
--- /dev/null
+++ b/data/js/mouse.js
@@ -0,0 +1,67 @@
+// Enum available loco mode
+var LOCO_MODE = {
+    ANALOG: 0,  // Analog mode is for old DC locomotives that use a variable voltage on the track to control speed.
+    MARKLIN: 1, // Märklin mode is for old marklin analog AC (with relay dir) Märklin locomotives.
+    DCC: 2      // DCC mode is for Digital Command Control, a standard for digital model railway control.
+};
+
+var LOCO_DIR = {
+    FORWARD: 0, // Forward direction
+    BACKWARD: 1 // Backward direction
+};
+
+var Loco = {
+    Mode: LOCO_MODE.DCC,
+    ID: 0,
+    Speed: 0,
+    Dir: LOCO_DIR.FORWARD,
+    Scale: 1,    // Example real loco speed is 45Kmh/max, so what are step (128 for digital to represent 0-200Kmh) per Kmh
+    MaxSpeed: 100, // Max speed in DCC step (<129) to reach scale speed (e.g. 45Kmh)
+    setMode: function(mode) {
+        this.Mode = mode;
+    },
+    setID: function(id) {
+        this.ID = id;
+    },
+    setSpeed: function(speed) {
+        this.Speed = speed;
+        setSpeed(speed); // Update the speedometer needle
+    },
+    setDir: function(dir) {
+        this.Dir = dir;
+    }
+};
+
+/**
+ * Update the speedometer based on the slider value. The slider value is expected to be in the range 0-128, 
+ * when a value is received, it is converted to a speed in Kmh based on the loco's scale and max speed, 
+ * then the speedometer needle is updated accordingly.
+ * 
+ * @param {int} value 
+ */
+function updateSpeedometer(value) {
+    Loco.setSpeed(parseInt(value));
+}
+
+/**
+ * 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(0);
\ No newline at end of file
diff --git a/data/mouse.html b/data/mouse.html
index 6dd2cc3..f014f09 100644
--- a/data/mouse.html
+++ b/data/mouse.html
@@ -4,50 +4,53 @@
   <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>
+  <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body>
   <div class="container">
     <h2>Mouse Speedometer</h2>
+    <div id="toolBar">
+      <!-- ON/OFF (Gray OFF/ Orange ON)  -->
+      <i class="fa-solid fa-power-off"></i>
+      <!-- display DCCID or '-' if Analogique or Marklin -->
+      <i class="fa-solid fa-train"></i><span id="DCCID">34</span>
+      <!-- display mode (Analogique or Marklin or DCC) -->
+      <i class="fa-solid fa-wave-square"></i><span id="Mode">Analogique</span>
+      <!-- display direction (Forward or Reverse) -->
+      <i class="fa-solid fa-forward"></i>
+      <!-- Program CV -->
+      <i class="fa-solid fa-cogs"></i>
+      <!-- Accessories switch to accessories page -->
+      <i class="fa-solid fa-traffic-light"></i> 
+    </div>
+    <div id="SelectLoco">
+      <!-- display a view of scale model -->
+      <img src="img/locos/loco.png" alt="Loco" width="300" height="50" onClick="SelectLoco();" style="cursor:pointer; margin-right:20px;">
+    </div>
     <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"/>
+        <image href="img/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>
+      <!-- slider-->
+      <input type="range" id="speedSlider" min="0" max="128" value="0" oninput="updateSpeedometer(this.value);" style="width:80%;">
+    </div>
+    <div id="Functions">
+      <!-- Display F0 to F7 -->
+      <div class="function" id="F0">F0</div>
+      <div class="function" id="F1">F1</div>
+      <div class="function" id="F2">F2</div>
+      <div class="function" id="F3">F3</div>
+      <div class="function" id="F4">F4</div>
+      <div class="function" id="F5">F5</div>
+      <div class="function" id="F6">F6</div>
+      <div class="function" id="F7">F7</div>
     </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>
+  <script type="text/javascript" src="js/mouse.js"></script>
 </body>
 </html>
+