update todo
This commit is contained in:
PROFERIS - Mi³osz Stocki
@@ -1 +1 @@
|
||||
Implement mechanical stall homing
|
||||
I want you to implement proper motor homing. I think the original used stall homing, please look it up and reimplement it properly. Make sure map on the website starts in proper place. Please update both web (kinematics.js and stepper-test.js) and mcu (main.cpp) code and make sure we are updated on this topic in gemini.md. I have had some desync issues with agent before so there may be some remnants.
|
||||
+162
-167
@@ -1,10 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>WijiBoard – Control Dashboard</title>
|
||||
<meta name="description" content="WijiBoard SCARA arm control dashboard. Web Bluetooth interface for the ESP32-S3 stepper controller." />
|
||||
<meta name="description"
|
||||
content="WijiBoard SCARA arm control dashboard. Web Bluetooth interface for the ESP32-S3 stepper controller." />
|
||||
|
||||
<!-- Shared styles -->
|
||||
<link rel="stylesheet" href="web/styles/base.css" />
|
||||
@@ -12,193 +14,186 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<div class="app-shell">
|
||||
|
||||
<!-- ── Sidebar overlay (click to close) ──────────────────────── -->
|
||||
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
||||
<!-- ── Sidebar overlay (click to close) ──────────────────────── -->
|
||||
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
||||
|
||||
<!-- ── Sidebar ───────────────────────────────────────────────── -->
|
||||
<nav class="sidebar" id="sidebar" aria-label="Main navigation">
|
||||
<!-- ── Sidebar ───────────────────────────────────────────────── -->
|
||||
<nav class="sidebar" id="sidebar" aria-label="Main navigation">
|
||||
|
||||
<span class="sidebar-section-label">Navigation</span>
|
||||
<span class="sidebar-section-label">Navigation</span>
|
||||
|
||||
<a class="sidebar-nav-item active" id="nav-home"
|
||||
href="#home" data-route="home"
|
||||
role="button" aria-label="Go to Home">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
<a class="sidebar-nav-item active" id="nav-home" href="#home" data-route="home" role="button"
|
||||
aria-label="Go to Home">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a class="sidebar-nav-item" id="nav-stepper-test"
|
||||
href="#stepper-test" data-route="stepper-test"
|
||||
role="button" aria-label="Go to Stepper Test">
|
||||
<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>
|
||||
Stepper Test
|
||||
</a>
|
||||
<a class="sidebar-nav-item" id="nav-stepper-test" href="#stepper-test" data-route="stepper-test" role="button"
|
||||
aria-label="Go to Stepper Test">
|
||||
<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>
|
||||
Stepper Test
|
||||
</a>
|
||||
|
||||
<!-- Spacer + coming soon -->
|
||||
<div style="flex:1"></div>
|
||||
<div class="divider"></div>
|
||||
<span class="sidebar-section-label">Coming Soon</span>
|
||||
<!-- Spacer + coming soon -->
|
||||
<div style="flex:1"></div>
|
||||
<div class="divider"></div>
|
||||
<span class="sidebar-section-label">Coming Soon</span>
|
||||
|
||||
<div class="sidebar-nav-item" style="opacity:0.35;cursor:default" aria-disabled="true">
|
||||
<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>
|
||||
Board Control
|
||||
</div>
|
||||
|
||||
<div class="sidebar-nav-item" style="opacity:0.35;cursor:default" aria-disabled="true">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/>
|
||||
</svg>
|
||||
Sequence Editor
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ── Main area ──────────────────────────────────────────────── -->
|
||||
<div style="display:flex;flex-direction:column;flex:1;overflow:hidden">
|
||||
|
||||
<!-- Top bar -->
|
||||
<header class="topbar" role="banner">
|
||||
<!-- Hamburger -->
|
||||
<button class="hamburger" id="hamburger-btn"
|
||||
aria-label="Toggle sidebar" aria-expanded="true" aria-controls="sidebar">
|
||||
<div class="hamburger-bar"></div>
|
||||
<div class="hamburger-bar"></div>
|
||||
<div class="hamburger-bar"></div>
|
||||
</button>
|
||||
|
||||
<!-- Brand -->
|
||||
<div class="topbar-brand">
|
||||
<div class="brand-icon" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L3 7v10l9 5 9-5V7L12 2Z"
|
||||
stroke="#448aff" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="12" r="2.5" fill="#448aff" opacity="0.7"/>
|
||||
</svg>
|
||||
</div>
|
||||
WijiBoard
|
||||
<div class="sidebar-nav-item" style="opacity:0.35;cursor:default" aria-disabled="true">
|
||||
<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>
|
||||
Board Control
|
||||
</div>
|
||||
|
||||
<!-- BLE actions -->
|
||||
<div class="topbar-actions">
|
||||
<!-- BLE status pill -->
|
||||
<div class="ble-status" id="ble-status" aria-live="polite">
|
||||
<div class="ble-dot" id="ble-dot"></div>
|
||||
<span class="ble-label" id="ble-label">Disconnected</span>
|
||||
</div>
|
||||
<div class="sidebar-nav-item" style="opacity:0.35;cursor:default" aria-disabled="true">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
|
||||
</svg>
|
||||
Sequence Editor
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Connect / Disconnect button -->
|
||||
<button class="btn btn-sm btn-primary" id="btn-ble-connect"
|
||||
aria-label="Connect to WijiBoard via Bluetooth">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2.5"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M6.5 6.5l11 11M17.5 6.5l-5 5 5 5"/>
|
||||
<path d="M6 17.5l5-5-5-5"/>
|
||||
</svg>
|
||||
<span class="btn-text">Connect</span>
|
||||
<!-- ── Main area ──────────────────────────────────────────────── -->
|
||||
<div style="display:flex;flex-direction:column;flex:1;overflow:hidden">
|
||||
|
||||
<!-- Top bar -->
|
||||
<header class="topbar" role="banner">
|
||||
<!-- Hamburger -->
|
||||
<button class="hamburger" id="hamburger-btn" aria-label="Toggle sidebar" aria-expanded="true"
|
||||
aria-controls="sidebar">
|
||||
<div class="hamburger-bar"></div>
|
||||
<div class="hamburger-bar"></div>
|
||||
<div class="hamburger-bar"></div>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Router outlet -->
|
||||
<main class="main-content" id="view" role="main" aria-label="Page content">
|
||||
<!-- Sections are injected here by router.js -->
|
||||
</main>
|
||||
<!-- Brand -->
|
||||
<div class="topbar-brand">
|
||||
<div class="brand-icon" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L3 7v10l9 5 9-5V7L12 2Z" stroke="#448aff" stroke-width="1.5" stroke-linejoin="round" />
|
||||
<circle cx="12" cy="12" r="2.5" fill="#448aff" opacity="0.7" />
|
||||
</svg>
|
||||
</div>
|
||||
WijiBoard
|
||||
</div>
|
||||
|
||||
<!-- BLE actions -->
|
||||
<div class="topbar-actions">
|
||||
<!-- BLE status pill -->
|
||||
<div class="ble-status" id="ble-status" aria-live="polite">
|
||||
<div class="ble-dot" id="ble-dot"></div>
|
||||
<span class="ble-label" id="ble-label">Disconnected</span>
|
||||
</div>
|
||||
|
||||
<!-- Connect / Disconnect button -->
|
||||
<button class="btn btn-sm btn-primary" id="btn-ble-connect" aria-label="Connect to WijiBoard via Bluetooth">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M6.5 6.5l11 11M17.5 6.5l-5 5 5 5" />
|
||||
<path d="M6 17.5l5-5-5-5" />
|
||||
</svg>
|
||||
<span class="btn-text">Connect</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Router outlet -->
|
||||
<main class="main-content" id="view" role="main" aria-label="Page content">
|
||||
<!-- Sections are injected here by router.js -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- ── App bootstrap (ES module entry point) ─────────────────── -->
|
||||
<script type="module">
|
||||
const V = Date.now(); // cache-buster – ensures fresh module load on every page refresh
|
||||
const { default: Router } = await import(`./web/js/router.js?v=${V}`);
|
||||
const { default: BLE } = await import(`./web/js/ble.js?v=${V}`);
|
||||
const { default: UI } = await import(`./web/js/ui.js?v=${V}`);
|
||||
const { default: HomeSection } = await import(`./web/js/sections/home.js?v=${V}`);
|
||||
const { default: StepperSection } = await import(`./web/js/sections/stepper-test.js?v=${V}`);
|
||||
|
||||
<!-- ── App bootstrap (ES module entry point) ─────────────────── -->
|
||||
<script type="module">
|
||||
const V = Date.now(); // cache-buster – ensures fresh module load on every page refresh
|
||||
const { default: Router } = await import(`./web/js/router.js?v=${V}`);
|
||||
const { default: BLE } = await import(`./web/js/ble.js?v=${V}`);
|
||||
const { default: UI } = await import(`./web/js/ui.js?v=${V}`);
|
||||
const { default: HomeSection } = await import(`./web/js/sections/home.js?v=${V}`);
|
||||
const { default: StepperSection } = await import(`./web/js/sections/stepper-test.js?v=${V}`);
|
||||
// ── Register routes ────────────────────────────────────────────
|
||||
Router.register('home', HomeSection);
|
||||
Router.register('stepper-test', StepperSection);
|
||||
|
||||
// ── Register routes ────────────────────────────────────────────
|
||||
Router.register('home', HomeSection);
|
||||
Router.register('stepper-test', StepperSection);
|
||||
// ── Sidebar toggle logic ───────────────────────────────────────
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sidebar-overlay');
|
||||
const hamburger = document.getElementById('hamburger-btn');
|
||||
const mainContent = document.getElementById('view');
|
||||
|
||||
// ── Sidebar toggle logic ───────────────────────────────────────
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sidebar-overlay');
|
||||
const hamburger = document.getElementById('hamburger-btn');
|
||||
const mainContent = document.getElementById('view');
|
||||
let sidebarOpen = true;
|
||||
|
||||
let sidebarOpen = true;
|
||||
function setSidebarOpen(open) {
|
||||
sidebarOpen = open;
|
||||
sidebar.classList.toggle('collapsed', !open);
|
||||
overlay.classList.toggle('visible', open && window.innerWidth < 900);
|
||||
hamburger.classList.toggle('open', open);
|
||||
hamburger.setAttribute('aria-expanded', open);
|
||||
|
||||
function setSidebarOpen(open) {
|
||||
sidebarOpen = open;
|
||||
sidebar.classList.toggle('collapsed', !open);
|
||||
overlay.classList.toggle('visible', open && window.innerWidth < 900);
|
||||
hamburger.classList.toggle('open', open);
|
||||
hamburger.setAttribute('aria-expanded', open);
|
||||
|
||||
// Shift main content on desktop
|
||||
const mc = hamburger.closest('.app-shell')?.querySelector('.main-content');
|
||||
if (mc) mc.classList.toggle('sidebar-collapsed', !open);
|
||||
}
|
||||
|
||||
hamburger.addEventListener('click', () => setSidebarOpen(!sidebarOpen));
|
||||
overlay.addEventListener('click', () => setSidebarOpen(false));
|
||||
|
||||
// Close sidebar on small screens when nav link clicked
|
||||
document.querySelectorAll('.sidebar-nav-item[data-route]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const route = link.dataset.route;
|
||||
Router.navigate('#' + route);
|
||||
if (window.innerWidth < 900) setSidebarOpen(false);
|
||||
});
|
||||
});
|
||||
|
||||
// Collapse sidebar by default on small screens
|
||||
if (window.innerWidth < 900) setSidebarOpen(false);
|
||||
|
||||
// ── Wire BLE events to shared UI ──────────────────────────────
|
||||
UI.initBLEListeners();
|
||||
|
||||
// Connect button handler (initial state)
|
||||
document.getElementById('btn-ble-connect').addEventListener('click', () => {
|
||||
if (BLE.isConnected()) {
|
||||
BLE.disconnect();
|
||||
} else {
|
||||
BLE.connect().catch(e => {
|
||||
if (!e.message?.includes('cancelled') && !e.name?.includes('NotFound')) {
|
||||
UI.log(`Connect error: ${e.message}`, 'error');
|
||||
}
|
||||
});
|
||||
// Shift main content on desktop
|
||||
const mc = hamburger.closest('.app-shell')?.querySelector('.main-content');
|
||||
if (mc) mc.classList.toggle('sidebar-collapsed', !open);
|
||||
}
|
||||
});
|
||||
|
||||
// ── Init router (last step) ────────────────────────────────────
|
||||
Router.init('#view', '#home');
|
||||
hamburger.addEventListener('click', () => setSidebarOpen(!sidebarOpen));
|
||||
overlay.addEventListener('click', () => setSidebarOpen(false));
|
||||
|
||||
// ── Check Web Bluetooth availability ──────────────────────────
|
||||
if (!navigator.bluetooth) {
|
||||
setTimeout(() => {
|
||||
UI.log('⚠ Web Bluetooth not available. Use Chrome or Edge on localhost/HTTPS.', 'error');
|
||||
}, 600);
|
||||
}
|
||||
</script>
|
||||
// Close sidebar on small screens when nav link clicked
|
||||
document.querySelectorAll('.sidebar-nav-item[data-route]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const route = link.dataset.route;
|
||||
Router.navigate('#' + route);
|
||||
if (window.innerWidth < 900) setSidebarOpen(false);
|
||||
});
|
||||
});
|
||||
|
||||
// Collapse sidebar by default on small screens
|
||||
if (window.innerWidth < 900) setSidebarOpen(false);
|
||||
|
||||
// ── Wire BLE events to shared UI ──────────────────────────────
|
||||
UI.initBLEListeners();
|
||||
|
||||
// Connect button handler (initial state)
|
||||
document.getElementById('btn-ble-connect').addEventListener('click', () => {
|
||||
if (BLE.isConnected()) {
|
||||
BLE.disconnect();
|
||||
} else {
|
||||
BLE.connect().catch(e => {
|
||||
if (!e.message?.includes('cancelled') && !e.name?.includes('NotFound')) {
|
||||
UI.log(`Connect error: ${e.message}`, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ── Init router (last step) ────────────────────────────────────
|
||||
Router.init('#view', '#home');
|
||||
|
||||
// ── Check Web Bluetooth availability ──────────────────────────
|
||||
if (!navigator.bluetooth) {
|
||||
setTimeout(() => {
|
||||
UI.log('⚠ Web Bluetooth not available. Use Chrome or Edge on localhost/HTTPS.', 'error');
|
||||
}, 600);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+8
-8
@@ -37,15 +37,15 @@ const UI = (() => {
|
||||
// ── BLE status indicator (top bar) ──────────────────────────
|
||||
function setConnectionStatus(connected, deviceName = null) {
|
||||
const statusEl = document.getElementById('ble-status');
|
||||
const labelEl = document.getElementById('ble-label');
|
||||
const btn = document.getElementById('btn-ble-connect');
|
||||
const labelEl = document.getElementById('ble-label');
|
||||
const btn = document.getElementById('btn-ble-connect');
|
||||
|
||||
if (statusEl) statusEl.classList.toggle('connected', connected);
|
||||
if (labelEl) labelEl.textContent = connected
|
||||
if (labelEl) labelEl.textContent = connected
|
||||
? (deviceName ?? 'Connected')
|
||||
: 'Disconnected';
|
||||
if (btn) {
|
||||
btn.disabled = connected;
|
||||
btn.disabled = connected;
|
||||
btn.innerHTML = connected
|
||||
? '<span class="btn-text">Disconnect</span>'
|
||||
: '<span class="btn-text">Connect</span>';
|
||||
@@ -57,10 +57,10 @@ const UI = (() => {
|
||||
btn.onclick = connected
|
||||
? () => BLE.disconnect()
|
||||
: () => BLE.connect().catch(e => {
|
||||
if (!e.message?.includes('cancelled')) {
|
||||
log(`Connect failed: ${e.message}`, 'error');
|
||||
}
|
||||
});
|
||||
if (!e.message?.includes('cancelled')) {
|
||||
log(`Connect failed: ${e.message}`, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user