+
+
+
+
+
+
+
+
📚
+
+
User Manual
+
Quick-Start Guide & Reference
+
+
+
+
+
+
+
+
+
+
diff --git a/steps/shortcuts.html b/steps/shortcuts.html
new file mode 100644
index 0000000..d62f58d
--- /dev/null
+++ b/steps/shortcuts.html
@@ -0,0 +1,137 @@
+
+
+
+
+
+
Keyboard Shortcuts - Radar & Video Synchronizer
+
+
+
+
+
+
+
+
+
+
+
+ ⌨️
+ Keyboard Shortcuts
+
+ Quick reference guide for controlling the Radar & Video Synchronizer.
+
+
+
+
+
+
+
+
Playback & Navigation
+
+ - Spacebar - Play / Pause
+ - ArrowRight - Next Frame (pauses)
+ - ArrowLeft - Previous Frame (pauses)
+ - R - Reset to Frame 0
+
+
+
+
+
View & UI Toggles
+
+ - M - Toggle Sidebar Menu
+ - I - Toggle Data Explorer
+ - G - Toggle "GOD MODE" Zoom
+ - Q - Toggle Dark/Light Theme
+ - A - Toggle Advanced Debug Info
+ - F11 - Toggle Fullscreen
+
+
+
+
+
Data Display Toggles
+
+ - T - Toggle Tracks
+ - D - Toggle Object Details
+ - P - Toggle Predicted Position
+ - C - Toggle Confirmed Tracks Only
+ - 1 / S - Color by SNR
+ - 2 - Color by Cluster
+ - 3 - Color by Inlier
+ - 4 - Color by Stationary
+
+
+
+
+
+
+
+
+
+
diff --git a/steps/src/dom.js b/steps/src/dom.js
index 6419291..ef84e95 100644
--- a/steps/src/dom.js
+++ b/steps/src/dom.js
@@ -100,6 +100,13 @@ export const fullscreenExitIcon = document.getElementById("fullscreen-exit-icon"
export const menuScrim = document.getElementById("menu-scrim");
export const toggleConfirmedOnly = document.getElementById("toggle-confirmed-only");
export const explorerBtn = document.getElementById("explorer-btn");
+export const shortcutsBtn = document.getElementById("shortcuts-btn");
+export const shortcutsModal = document.getElementById("shortcuts-modal");
+export const shortcutsModalCloseBtn = document.getElementById("shortcuts-modal-close-btn");
+export const userManualBtn = document.getElementById("user-manual-btn");
+export const guideModal = document.getElementById("guide-modal");
+export const guideModalCloseBtn = document.getElementById("guide-modal-close-btn");
+
//----------------------Reset UI for New file Load----------------------//
diff --git a/steps/src/ui.js b/steps/src/ui.js
index 9de0166..7517cf8 100644
--- a/steps/src/ui.js
+++ b/steps/src/ui.js
@@ -31,6 +31,12 @@ import {
menuScrim,
fullscreenBtn,
toggleConfirmedOnly,
+ shortcutsBtn,
+ shortcutsModal,
+ shortcutsModalCloseBtn,
+ userManualBtn,
+ guideModal,
+ guideModalCloseBtn,
} from "./dom.js";
function toggleMenu(show) {
@@ -43,6 +49,22 @@ function toggleMenu(show) {
}
}
+function toggleShortcutsModal(show) {
+ if (show) {
+ shortcutsModal.classList.remove("hidden");
+ } else {
+ shortcutsModal.classList.add("hidden");
+ }
+}
+
+function toggleGuideModal(show) {
+ if (show) {
+ guideModal.classList.remove("hidden");
+ } else {
+ guideModal.classList.add("hidden");
+ }
+}
+
function handleColorToggles(e) {
const colorToggles = [
toggleSnrColor,
@@ -60,6 +82,48 @@ function handleColorToggles(e) {
}
export function initUIEventListeners() {
+ // --- Shortcuts Modal ---
+ shortcutsBtn.addEventListener("click", (e) => {
+ e.preventDefault();
+ toggleShortcutsModal(true);
+ });
+ shortcutsModalCloseBtn.addEventListener("click", () => toggleShortcutsModal(false));
+ shortcutsModal.addEventListener("click", (e) => {
+ // Close if clicking the background overlay (self), but not children
+ if (e.target === shortcutsModal) {
+ toggleShortcutsModal(false);
+ }
+ });
+
+ // --- Guide Modal ---
+ userManualBtn.addEventListener("click", (e) => {
+ e.preventDefault();
+ toggleGuideModal(true);
+ });
+ guideModalCloseBtn.addEventListener("click", () => toggleGuideModal(false));
+ guideModal.addEventListener("click", (e) => {
+ if (e.target === guideModal) {
+ toggleGuideModal(false);
+ }
+ });
+
+ // Global Key Listener for 'k' and 'ESC'
+ document.addEventListener("keydown", (e) => {
+ if (e.key.toLowerCase() === "k") {
+ // Toggle visibility
+ const isHidden = shortcutsModal.classList.contains("hidden");
+ toggleShortcutsModal(isHidden);
+ }
+ // Prioritize closing the guide modal if open, then shortcuts modal
+ if (e.key === "Escape") {
+ if (!guideModal.classList.contains("hidden")) {
+ toggleGuideModal(false);
+ } else if (!shortcutsModal.classList.contains("hidden")) {
+ toggleShortcutsModal(false);
+ }
+ }
+ });
+
// --- Menu and Fullscreen ---
toggleMenuBtn.addEventListener("click", () => toggleMenu(true));
closeMenuBtn.addEventListener("click", () => toggleMenu(false));