Implement Text Input

web/js/sections/board-control.js

@@ -1,6 +1,7 @@
 import BLE from '../ble.js';
 import UI from '../ui.js';
 import IK from '../kinematics.js';
+import Settings from '../settings.js';
 
 let eventCleanup = [];
 let isHomed = false;
@@ -109,6 +110,21 @@ function buildHTML() {
               </select>
             </div>
 
+            <!-- Settings -->
+            <div style="background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm); margin-bottom: 12px;">
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <label class="form-label" style="margin:0;">Speed</label>
+                <span id="speed-val" style="font-size: 0.8rem; color: var(--text-muted);">${Settings.speed}</span>
+              </div>
+              <input type="range" id="bc-slider-speed" min="100" max="2000" step="100" value="${Settings.speed}" style="width:100%; margin-bottom: 8px;">
+              
+              <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+                <label class="form-label" style="margin:0;">Accel</label>
+                <span id="accel-val" style="font-size: 0.8rem; color: var(--text-muted);">${Settings.accel}</span>
+              </div>
+              <input type="range" id="bc-slider-accel" min="50" max="1000" step="50" value="${Settings.accel}" style="width:100%;">
+            </div>
+
             <div class="form-group" style="margin-bottom: 12px;">
               <label class="form-label">Movement Mode</label>
               <select id="mode-select" class="form-input" style="width:100%;">
@@ -180,6 +196,16 @@ async function loadSpots() {
   }
 }
 
+async function sendSettings() {
+  if (!BLE.isConnected()) return;
+  try {
+    await BLE.write(`SPD:${Settings.speed}`);
+    await BLE.write(`ACC:${Settings.accel}`);
+  } catch (e) {
+    console.error('Failed to send settings', e);
+  }
+}
+
 function renderSpots() {
   const listEl = document.getElementById('spot-list');
   const markersEl = document.getElementById('markers-layer');
@@ -294,6 +320,26 @@ export default {
       });
     }
 
+    // ── Settings Sliders ──────────────────────────────────────
+    const sSpeed = document.getElementById('bc-slider-speed');
+    const sAccel = document.getElementById('bc-slider-accel');
+    
+    if (sSpeed) {
+      sSpeed.addEventListener('input', (e) => {
+        Settings.speed = parseInt(e.target.value);
+        document.getElementById('speed-val').textContent = Settings.speed;
+        sendSettings();
+      });
+    }
+
+    if (sAccel) {
+      sAccel.addEventListener('input', (e) => {
+        Settings.accel = parseInt(e.target.value);
+        document.getElementById('accel-val').textContent = Settings.accel;
+        sendSettings();
+      });
+    }
+
     // ── Homing Logic ──────────────────────────────────────────
     document.getElementById('btn-force-home').addEventListener('click', async () => {
       isHomed = true;
@@ -348,6 +394,7 @@ export default {
     // Sync position on mount if connected
     if (BLE.isConnected()) {
       BLE.write('POS').catch(() => {});
+      sendSettings();
     } else {
       updatePositionReadout();
     }