Initial commit

2026-07-06 11:34:03 +02:00
commit 67b4eda6aa
12 changed files with 2735 additions and 0 deletions
@@ -0,0 +1,107 @@
+/**
+ * WijiBoard – Home Section
+ * web/js/sections/home.js
+ *
+ * A minimal placeholder home section.
+ */
+
+import BLE from '../ble.js';
+
+const HomeSection = {
+  _cleanup: [],
+
+  mount(container) {
+    container.innerHTML = `
+      <div class="section-page fade-in">
+        <div class="section-header">
+          <h2>WijiBoard</h2>
+          <p>WiFi Spirit Board — SCARA arm controller. Select a section from the sidebar to get started.</p>
+        </div>
+
+        <div class="grid-2" style="margin-bottom:16px">
+          <!-- Status card -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">Connection</span>
+            </div>
+            <div class="status-row" style="margin-bottom:10px">
+              <span class="status-label">BLE</span>
+              <span class="status-value" id="home-ble-status">
+                ${BLE.isConnected() ? `✓ ${BLE.getDeviceName()}` : 'Not connected'}
+              </span>
+            </div>
+            <p style="font-size:0.8rem;color:var(--text-muted)">
+              Use the <strong style="color:var(--text-secondary)">Connect</strong> button
+              in the top bar to pair with the WijiBoard via Bluetooth.
+              The device name is <code style="color:var(--accent-blue)">WijiBoard</code>.
+            </p>
+          </div>
+
+          <!-- About card -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">About</span>
+            </div>
+            <p style="font-size:0.82rem;line-height:1.8;color:var(--text-secondary)">
+              This dashboard controls a two-arm SCARA robot that moves a planchette 
+              across a spirit board. It uses <strong style="color:var(--text-primary)">Web Bluetooth</strong> 
+              to communicate with an ESP32-S3 running two 28BYJ-48 stepper motors 
+              with AccelStepper.
+            </p>
+          </div>
+        </div>
+
+        <!-- Sections overview -->
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">Sections</span>
+          </div>
+          <div class="grid-2">
+            <button class="sidebar-nav-item" data-route="stepper-test"
+                    onclick="document.getElementById('nav-stepper-test').click()"
+                    style="padding:14px 16px;background:var(--surface-2)">
+              <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
+              </svg>
+              <div>
+                <div style="font-weight:600;font-size:0.875rem;color:var(--text-primary)">Stepper Test</div>
+                <div style="font-size:0.75rem;color:var(--text-muted);margin-top:2px">Manually jog each motor, visualize arm position</div>
+              </div>
+            </button>
+
+            <div class="sidebar-nav-item" style="padding:14px 16px;background:var(--surface-2);opacity:0.45;cursor:default">
+              <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+              </svg>
+              <div>
+                <div style="font-weight:600;font-size:0.875rem;color:var(--text-primary)">Board Control</div>
+                <div style="font-size:0.75rem;color:var(--text-muted);margin-top:2px">Coming soon</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // Keep home BLE status label in sync
+    const statusEl = container.querySelector('#home-ble-status');
+    const update = () => {
+      if (statusEl) statusEl.textContent = BLE.isConnected()
+        ? `✓ ${BLE.getDeviceName()}`
+        : 'Not connected';
+    };
+    BLE.on('connected', update);
+    BLE.on('disconnected', update);
+    this._cleanup = [
+      () => BLE.off('connected', update),
+      () => BLE.off('disconnected', update),
+    ];
+  },
+
+  unmount() {
+    this._cleanup.forEach(fn => fn());
+    this._cleanup = [];
+  },
+};
+
+export default HomeSection;