You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
18 KiB
364 lines
18 KiB
<!DOCTYPE html>
|
|
<!-- DARK MODE: The 'dark' class will be toggled here by JavaScript -->
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Radar and Video Visualizer - Timestamp Synchronized</title>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js"></script>
|
|
|
|
<!-- DARK MODE: Step 1 - Configure Tailwind to use the 'class' strategy for dark mode -->
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
};
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: "Roboto Mono", monospace;
|
|
}
|
|
|
|
.p5Canvas {
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
video {
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #2563eb;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #2563eb;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.shadow-up {
|
|
box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1),
|
|
0 -2px 4px -2px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
#modal-overlay {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
#modal-content {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
|
|
/* ... (your existing styles) ... */
|
|
|
|
#modal-content {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
/* ADD THIS NEW CSS RULE */
|
|
#progress-bar {
|
|
transition: width 0.1s linear;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 flex flex-col min-h-screen">
|
|
<header class="bg-white dark:bg-gray-800 shadow-md p-4 z-10 relative">
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
|
Radar and Video Synchronizer
|
|
</h1>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
High-precision, timestamp-synchronized playback.
|
|
</p>
|
|
|
|
<!-- DARK MODE: Step 2 - Add the toggle button -->
|
|
<div class="absolute top-4 right-4">
|
|
<button id="theme-toggle" type="button"
|
|
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
|
|
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
</svg>
|
|
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm-.707 12.122l.707-.707a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414-1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
|
fill-rule="evenodd" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow container mx-auto p-4 flex flex-col lg:flex-row gap-6">
|
|
<div class="lg:w-1/2 flex flex-col gap-4">
|
|
<div class="relative">
|
|
<div id="canvas-container"
|
|
class="w-full h-[60vh] bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-inner flex items-center justify-center">
|
|
<p id="canvas-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">
|
|
Load JSON data to start visualization
|
|
</p>
|
|
</div>
|
|
<!-- START: Add the new Radar Info Overlay here -->
|
|
<div id="radar-info-overlay"
|
|
class="absolute top-1 left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
|
|
<!-- Content will be added by JavaScript -->
|
|
</div>
|
|
<!-- END: Add the new Radar Info Overlay here -->
|
|
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center justify-center gap-4">
|
|
<div id="ego-speed-display"
|
|
class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
|
|
<div id="can-speed-display"
|
|
class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
|
|
</div>
|
|
</div>
|
|
<div id="feature-toggles"
|
|
class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border dark:border-gray-700 flex flex-col items-center gap-4 hidden">
|
|
<div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-snr-color"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Color by SNR</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-cluster-color"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Color by Cluster</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-inlier-color"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Color by Inlier</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox"
|
|
id="toggle-stationary-color" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Color by Stationary</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-velocity"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked />
|
|
Show Object Details</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-tracks"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked />
|
|
Show Tracks</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-ego-speed"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked />
|
|
Show Ego Speed</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-frame-norm"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Per-Frame SNR</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-debug-overlay"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Show Debug Info</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox"
|
|
id="toggle-debug2-overlay" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Show Advanced Debug</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-close-up"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
CLOSE-UP</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
|
<input type="checkbox" id="toggle-predicted-pos"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Show Predicted Position</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
|
<input type="checkbox" id="toggle-covariance"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
Show Covariance</label>
|
|
</div>
|
|
<!-- START: Add This Entire New Block for Custom TTC Controls -->
|
|
<div class="border-t border-gray-200 dark:border-gray-700 w-full mt-4 pt-4">
|
|
<div class="text-sm font-medium mb-2 text-center">Track Coloring Mode</div>
|
|
<div class="flex justify-center items-center gap-6 mb-3">
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
|
<input type="radio" name="ttc-mode" id="ttc-mode-default" class="form-radio h-4 w-4 text-blue-600"
|
|
checked>
|
|
Default TTC
|
|
</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
|
<input type="radio" name="ttc-mode" id="ttc-mode-custom" class="form-radio h-4 w-4 text-blue-600">
|
|
Custom TTC
|
|
</label>
|
|
</div>
|
|
|
|
<!-- This container will be shown/hidden by JavaScript -->
|
|
<div id="custom-ttc-panel"
|
|
class="hidden flex-col md:flex-row flex-wrap justify-center items-center gap-x-6 gap-y-3">
|
|
<!-- Critical Risk -->
|
|
<div class="flex items-center gap-2">
|
|
<input type="color" id="ttc-color-critical" value="#ff0000" class="w-8 h-8 rounded-md">
|
|
<label for="ttc-time-critical" class="text-sm">Critical if TTC <=</label>
|
|
<input type="number" id="ttc-time-critical" value="5" step="0.1"
|
|
class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm">
|
|
<span class="text-sm">s</span>
|
|
</div>
|
|
<!-- High Risk -->
|
|
<div class="flex items-center gap-2">
|
|
<input type="color" id="ttc-color-high" value="#ffa500" class="w-8 h-8 rounded-md">
|
|
<label for="ttc-time-high" class="text-sm">High if TTC <=</label>
|
|
<input type="number" id="ttc-time-high" value="10" step="0.1"
|
|
class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm">
|
|
<span class="text-sm">s</span>
|
|
</div>
|
|
<!-- Medium Risk -->
|
|
<div class="flex items-center gap-2">
|
|
<input type="color" id="ttc-color-medium" value="#FFC300" class="w-8 h-8 rounded-md">
|
|
<label for="ttc-time-medium" class="text-sm">Medium if TTC <=</label>
|
|
<input type="number" id="ttc-time-medium" value="30" step="0.1"
|
|
class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm">
|
|
<span class="text-sm">s</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<input type="color" id="ttc-color-low" value="#00ff00" class="w-8 h-8 rounded-md">
|
|
<label class="text-sm">Low Risk (everything else)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Add This Entire New Block -->
|
|
<div class="flex items-center gap-4 hidden">
|
|
<div class="flex items-center gap-2">
|
|
<label for="snr-min-input" class="text-sm font-medium">Min SNR:</label><input type="number"
|
|
id="snr-min-input" step="0.1"
|
|
class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label for="snr-max-input" class="text-sm font-medium">Max SNR:</label><input type="number"
|
|
id="snr-max-input" step="0.1"
|
|
class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
|
|
</div>
|
|
<button id="apply-snr-btn"
|
|
class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium">
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:w-1/2 flex flex-col gap-4">
|
|
<div class="w-full h-[45vh] bg-black rounded-lg shadow-inner flex items-center justify-center relative">
|
|
<video id="video-player" class="w-full h-full object-contain hidden" muted playsinline></video>
|
|
<p id="video-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">
|
|
Load a video file
|
|
</p>
|
|
<!-- START: Add the new Video Info Overlay here -->
|
|
<div id="video-info-overlay"
|
|
class="absolute top-1 left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
|
|
<!-- Content will be added by JavaScript -->
|
|
</div>
|
|
<!-- END: Add the new Video Info Overlay here -->
|
|
<div id="debug-overlay"
|
|
class="absolute top-0 left-0 bg-black bg-opacity-60 text-white p-2 font-mono text-xs hidden w-full"></div>
|
|
</div>
|
|
<div id="speed-graph-container"
|
|
class="w-full h-[27vh] bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-inner flex items-center justify-center">
|
|
<p id="speed-graph-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">
|
|
Load JSON to see speed graph
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="bg-white dark:bg-gray-800 shadow-up w-full p-4 mt-auto sticky bottom-0 z-20">
|
|
<div class="mb-4">
|
|
<div id="timeline-tooltip"
|
|
class="absolute hidden bg-gray-900 dark:bg-gray-700 text-white text-xs rounded py-1 px-2 pointer-events-none text-center"
|
|
style="transform: translate(-50%, -125%);">
|
|
</div>
|
|
<input type="range" id="timeline-slider" min="0" max="0" value="0"
|
|
class="w-full h-2 bg-gray-300 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer" />
|
|
</div>
|
|
<div class="flex flex-wrap items-center justify-center md:justify-between gap-4">
|
|
<div class="flex items-center gap-4 justify-center">
|
|
<button id="load-json-btn"
|
|
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
|
|
Load JSON
|
|
</button>
|
|
<button id="load-video-btn"
|
|
class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
|
|
Load Video
|
|
</button>
|
|
<button id="clear-cache-btn"
|
|
class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
|
|
Clear Cache
|
|
</button>
|
|
<button id="save-session-btn"
|
|
class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">Save
|
|
Session</button>
|
|
<button id="load-session-btn"
|
|
class="bg-teal-600 text-white px-4 py-2 rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium">Load
|
|
Session</button>
|
|
<div class="flex items-center gap-2">
|
|
<label for="offset-input" class="text-sm font-medium">
|
|
Offset (ms):<br /><small>(+ve values if radar<br />
|
|
lags behind video)</small></label>
|
|
<input type="number" id="offset-input" value="0"
|
|
class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
|
|
<span id="auto-offset-indicator" class="text-green-600 font-semibold text-sm hidden">(auto)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-4">
|
|
<button id="play-pause-btn"
|
|
class="px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold w-20">
|
|
Play
|
|
</button>
|
|
<button id="stop-btn"
|
|
class="px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold">
|
|
Stop
|
|
</button>
|
|
<div class="text-center">
|
|
<span id="frame-counter" class="font-mono text-lg">Frame: 0 / 0</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<label for="speed-slider" class="text-sm font-medium">Speed:</label>
|
|
<input type="range" id="speed-slider" min="0.1" max="2" value="1" step="0.1"
|
|
class="w-32 h-2 bg-gray-300 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer" />
|
|
<span id="speed-display" class="font-mono text-sm w-12 text-center">1.0x</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="modal-container" class="fixed inset-0 z-50 flex items-center justify-center hidden">
|
|
<div id="modal-overlay" class="absolute inset-0 bg-black bg-opacity-50"></div>
|
|
<div id="modal-content"
|
|
class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md z-10 transform scale-95">
|
|
<p id="modal-text" class="text-gray-700 dark:text-gray-300 mb-4"></p>
|
|
<div id="modal-progress-container" class="hidden w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-600 my-4">
|
|
<div id="modal-progress-bar" class="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
|
|
style="width: 0%"></div>
|
|
</div>
|
|
<span id="modal-progress-text" class="text-sm text-gray-500 dark:text-gray-400 mt-1 block text-center"></span>
|
|
<div id="modal-buttons" class="flex justify-end gap-4">
|
|
</div>
|
|
<div id="modal-buttons" class="flex justify-end gap-4">
|
|
<button id="modal-cancel-btn"
|
|
class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold">
|
|
Cancel</button><button id="modal-ok-btn"
|
|
class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 font-semibold">
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="json-file-input" class="hidden" accept=".json" />
|
|
<input type="file" id="video-file-input" class="hidden" accept="video/*" />
|
|
<input type="file" id="session-file-input" class="hidden" accept=".json" />
|
|
<script type="module" src="./src/main.js"></script>
|
|
</body>
|
|
|
|
</html>
|