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.
670 lines
34 KiB
670 lines
34 KiB
<!DOCTYPE html>
|
|
<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="./vendor/tailwind-cdn.js"></script>
|
|
<script>
|
|
!window.tailwind && (function() {
|
|
var s = document.createElement('script');
|
|
s.src = 'https://cdn.tailwindcss.com';
|
|
document.head.appendChild(s);
|
|
})();
|
|
</script>
|
|
|
|
<!-- <script src="https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js"></script> -->
|
|
<script src="./vendor/oboe.min.js"></script>
|
|
<script>
|
|
!window.oboe && (function() {
|
|
var s = document.createElement('script');
|
|
s.src = 'https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js';
|
|
document.head.appendChild(s);
|
|
})();
|
|
</script>
|
|
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
|
|
<script src="./vendor/chart.min.js"></script>
|
|
<script>
|
|
!window.Chart && (function() {
|
|
var s = document.createElement('script');
|
|
s.src = 'https://cdn.jsdelivr.net/npm/chart.js';
|
|
document.head.appendChild(s);
|
|
})();
|
|
</script>
|
|
|
|
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> -->
|
|
<script src="./vendor/ag-grid-community.min.js"></script>
|
|
<script>
|
|
!window.agGrid && (function() {
|
|
var s = document.createElement('script');
|
|
s.src = 'https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js';
|
|
document.head.appendChild(s);
|
|
})();
|
|
</script>
|
|
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> -->
|
|
<script src="./vendor/p5.js"></script>
|
|
<script>
|
|
!window.p5 && (function() {
|
|
var s = document.createElement('script');
|
|
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js';
|
|
document.head.appendChild(s);
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
};
|
|
</script>
|
|
<style>
|
|
.p5Canvas,
|
|
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,
|
|
#modal-content {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
#progress-bar {
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
/* --- START: CSS for Resizable/Draggable Panel --- */
|
|
.resizer {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: transparent;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resizer-t {
|
|
top: -5px;
|
|
left: 5px;
|
|
right: 5px;
|
|
height: 10px;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.resizer-r {
|
|
top: 5px;
|
|
right: -5px;
|
|
bottom: 5px;
|
|
width: 10px;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.resizer-b {
|
|
bottom: -5px;
|
|
left: 5px;
|
|
right: 5px;
|
|
height: 10px;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.resizer-l {
|
|
top: 5px;
|
|
left: -5px;
|
|
bottom: 5px;
|
|
width: 10px;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.resizer-tl {
|
|
top: -5px;
|
|
left: -5px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.resizer-tr {
|
|
top: -5px;
|
|
right: -5px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.resizer-br {
|
|
bottom: -5px;
|
|
right: -5px;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.resizer-bl {
|
|
bottom: -5px;
|
|
left: -5px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
/* When dragging/resizing, prevent text selection on the page */
|
|
body.resizing,
|
|
body.dragging {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* --- END: CSS for Resizable/Draggable Panel --- */
|
|
|
|
/* --- Keyboard Shortcuts Modal Styling --- */
|
|
kbd {
|
|
background-color: #e2e8f0;
|
|
/* slate-200 */
|
|
border: 1px solid #cbd5e1;
|
|
/* slate-300 */
|
|
border-bottom-width: 2px;
|
|
color: #334155;
|
|
/* slate-700 */
|
|
border-radius: 0.375rem;
|
|
padding: 0.125rem 0.5rem;
|
|
font-family: monospace;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin: 0 0.125rem;
|
|
}
|
|
|
|
/* Dark mode support for kbd */
|
|
.dark kbd {
|
|
background-color: #475569;
|
|
/* slate-600 */
|
|
border-color: #64748b;
|
|
/* slate-500 */
|
|
color: #f1f5f9;
|
|
/* slate-100 */
|
|
}
|
|
|
|
.feature-card {
|
|
/* Inherits bg-white/dark:bg-gray-800 from parent or class */
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .feature-card {
|
|
border-color: #4b5563;
|
|
/* gray-600 */
|
|
box-shadow: none;
|
|
}
|
|
</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 pt-0 px-4 pb-4 z-20 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>
|
|
<div class="absolute top-4 right-4 flex items-center gap-2">
|
|
<button id="fullscreen-btn" type="button"
|
|
class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all">
|
|
FULLSCREEN<br>
|
|
<span class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">(F11)
|
|
</span>
|
|
</button>
|
|
<button id="explorer-btn" type="button"
|
|
class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all">
|
|
Data-Explorer<br>(MATLAB)
|
|
<span
|
|
class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">
|
|
(i)
|
|
</span>
|
|
</button>
|
|
<button id="user-manual-btn" type="button"
|
|
class="bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100 border border-green-300 dark:border-green-600 shadow-sm hover:bg-green-200 dark:hover:bg-green-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
|
|
Quick-Start<br>Guide
|
|
</button>
|
|
<button id="codebase-btn" type="button"
|
|
class="bg-purple-100 dark:bg-purple-700 text-purple-800 dark:text-purple-100 border border-purple-300 dark:border-purple-600 shadow-sm hover:bg-purple-200 dark:hover:bg-purple-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
|
|
Codebase<br>Overview
|
|
</button>
|
|
<button id="shortcuts-btn" type="button"
|
|
class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 border border-blue-300 dark:border-blue-600 shadow-sm hover:bg-blue-200 dark:hover:bg-blue-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all text-center">
|
|
Keyboard<br>Shortcuts
|
|
</button>
|
|
<button id="theme-toggle" type="button" class="bg-indigo-900 dark:bg-amber-100 text-indigo-100 dark:text-amber-800 border border-indigo-700 dark:border-amber-300 shadow-sm hover:bg-indigo-800 dark:hover:bg-amber-200 active:scale-95 active:shadow-inner flex flex-row items-center gap-2 rounded-lg text-xs px-4 py-3.5 transition-all">
|
|
<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 0zm2 0a1 1 0 112 0v-1a1 1 0 00-2 0v1zm-14 0a1 1 0 112 0v-1a1 1 0 00-2 0v1zm8 6a1 1 0 100 2 1 1 0 000-2zm5.657-11.657a1 1 0 010 1.414l-1.414 1.414a1 1 0 11-1.414-1.414l1.414-1.414a1 1 0 011.414 0zm-11.314 0a1 1 0 011.414 0l1.414 1.414a1 1 0 11-1.414 1.414l-1.414-1.414a1 1 0 010-1.414zm11.314 11.314a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 011.414-1.414l1.414 1.414a1 1 0 010 1.414zm-11.314 0a1 1 0 010-1.414l1.414-1.414a1 1 0 011.414 1.414l-1.414 1.414a1 1 0 01-1.414 0z" fill-rule="evenodd" clip-rule="evenodd"></path>
|
|
</svg> </button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar (Initially hidden) -->
|
|
<aside id="collapsible-menu"
|
|
class="fixed top-0 left-0 h-full bg-white dark:bg-gray-800 shadow-xl z-30 transform -translate-x-full transition-transform duration-300 ease-in-out w-full max-w-sm flex flex-col">
|
|
<div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
|
|
<h2 class="text-xl font-bold">Display Settings</h2>
|
|
<button id="close-menu-btn"
|
|
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scrollable Content Area -->
|
|
<div class="flex-grow p-4 overflow-y-auto">
|
|
<div id="feature-toggles" class="flex flex-col items-start gap-4">
|
|
<!-- Checkboxes -->
|
|
<div class="flex flex-col items-start gap-3 w-full">
|
|
<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 (S) (1)</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 (2) </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 (3)</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 (4) </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
|
|
(D)</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 (T)</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" checked /> Dynamic 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 (A)</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" /> GOD MODE </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" checked /> Show Predicted Position
|
|
(P)</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>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-vehicle-dimensions"
|
|
class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked /> Show Dimensions</label>
|
|
<label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox"
|
|
id="toggle-confirmed-only" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500"
|
|
checked />
|
|
Confirmed Tracks
|
|
</label>
|
|
</div>
|
|
|
|
<!-- SNR Controls -->
|
|
<div class="border-t border-gray-200 dark:border-gray-700 w-full mt-4 pt-4 flex flex-col gap-3">
|
|
<h3 class="text-sm font-medium text-center">Global SNR Range</h3>
|
|
<div class="flex items-center gap-2"><label for="snr-min-input" class="text-sm font-medium w-16">Min
|
|
SNR:</label><input type="number" id="snr-min-input" step="0.1"
|
|
class="w-full 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 w-16">Max
|
|
SNR:</label><input type="number" id="snr-max-input" step="0.1"
|
|
class="w-full 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
|
|
Manual SNR</button>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<div id="custom-ttc-panel" class="hidden flex flex-col gap-3">
|
|
<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 <=</label><input
|
|
type="number" id="ttc-time-critical" value="1" 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-high" value="#ffa500"
|
|
class="w-8 h-8 rounded-md"><label for="ttc-time-high" class="text-sm">High <=</label><input
|
|
type="number" id="ttc-time-high" value="2" 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-medium" value="#FFC300"
|
|
class="w-8 h-8 rounded-md"><label for="ttc-time-medium" class="text-sm">Medium <=</label><input
|
|
type="number" id="ttc-time-medium" value="3" 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 (else)</label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div id="zoom-panel"
|
|
class="hidden fixed bottom-11 right-5 h-[50%] w-1/2 bg-white dark:bg-gray-800 z-20 shadow-2xl border-l-2 border-t-2 border-gray-300 dark:border-gray-600">
|
|
<div id="zoom-canvas-container" class="w-full h-full"></div>
|
|
</div>
|
|
<!-- Open Menu Button -->
|
|
<button id="toggle-menu-btn"
|
|
class="fixed top-20 left-3 z-20 bg-white dark:bg-gray-700 p-2 rounded-md shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-all">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- START: ADD THIS NEW SCRIM ELEMENT -->
|
|
<div id="menu-scrim" class="fixed inset-0 bg-black/50 z-20 hidden"></div>
|
|
<!-- END: ADD THIS NEW SCRIM ELEMENT -->
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-grow container mx-auto p-4 pt-8 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-[75vh] 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>
|
|
<div id="radar-info-overlay"
|
|
class="absolute top-[-35px] left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
|
|
</div>
|
|
<div class="absolute bottom 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>
|
|
<div class="lg:w-1/2 flex flex-col gap-4">
|
|
<div class="w-full h-[50vh] 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>
|
|
<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">
|
|
</div>
|
|
<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-[25vh] 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 & Video to see speed
|
|
graph
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="data-explorer-panel"
|
|
class="hidden fixed bottom-24 right-4 bg-white dark:bg-gray-800 shadow-2xl rounded-lg z-30 flex flex-col w-full max-w-2xl h-1/2 border dark:border-gray-600">
|
|
|
|
<!-- START: Add Draggable Header and Resizer Handles -->
|
|
<div id="data-explorer-header"
|
|
class="flex items-center justify-between p-2 border-b dark:border-gray-700 cursor-move">
|
|
<h2 class="text-lg font-bold ml-2">Data Explorer</h2>
|
|
<button id="close-explorer-btn"
|
|
class="text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-1.5">×</button>
|
|
</div>
|
|
<div class="resizer resizer-t"></div>
|
|
<div class="resizer resizer-r"></div>
|
|
<div class="resizer resizer-b"></div>
|
|
<div class="resizer resizer-l"></div>
|
|
<div class="resizer resizer-tl"></div>
|
|
<div class="resizer resizer-tr"></div>
|
|
<div class="resizer resizer-br"></div>
|
|
<div class="resizer resizer-bl"></div>
|
|
<!-- END: Add Draggable Header and Resizer Handles -->
|
|
|
|
|
|
<div class="flex border-b dark:border-gray-700">
|
|
<button id="tab-btn-tree" class="px-4 py-2 text-sm font-medium border-b-2 border-blue-500">Tree View</button>
|
|
<button id="tab-btn-grid" class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400">Grid
|
|
View</button>
|
|
<button id="tab-btn-track-grid" class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400">Track
|
|
Grid</button>
|
|
<button id="tab-btn-plot" class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400">Plot
|
|
View</button>
|
|
</div>
|
|
|
|
<div class="flex-grow overflow-auto">
|
|
<div id="tab-panel-tree" class="font-mono text-xs"></div>
|
|
<div id="tab-panel-grid" class="hidden h-full p-2">
|
|
<div id="data-grid" class="ag-theme-alpine-dark h-full w-full"></div>
|
|
</div>
|
|
<div id="tab-panel-track-grid" class="hidden h-full p-2">
|
|
<div id="track-data-grid" class="ag-theme-alpine-dark h-full w-full"></div>
|
|
</div>
|
|
<div id="tab-panel-plot" class="hidden p-2">
|
|
<canvas id="data-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="explorer-footer" class="p-2 border-t dark:border-gray-700 text-right hidden">
|
|
<button id="plot-selected-btn"
|
|
class="bg-blue-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-blue-700">Plot Selected Column</button>
|
|
</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=" hidden 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=" hidden 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 if radar
|
|
lags)</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-4 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>
|
|
|
|
<!-- SHORTCUTS MODAL -->
|
|
<div id="shortcuts-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80 backdrop-blur-sm p-4">
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-y-auto relative flex flex-col">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-3xl">⌨️</span>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Keyboard Shortcuts</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Press <kbd>ESC</kbd> or click outside to close</p>
|
|
</div>
|
|
</div>
|
|
<button id="shortcuts-modal-close-btn" class="px-6 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 font-semibold text-lg transition-colors">
|
|
Skip
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content Grid -->
|
|
<div class="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Playback -->
|
|
<div class="feature-card p-6 bg-gray-50 dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-bold text-blue-600 dark:text-blue-400 border-b pb-2 border-gray-200 dark:border-gray-700">Playback & Navigation</h3>
|
|
<ul class="space-y-3 text-sm text-gray-700 dark:text-gray-300">
|
|
<li class="flex justify-between items-center"><span>Play / Pause</span> <kbd>Space</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Next Frame</span> <kbd>→</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Prev Frame</span> <kbd>←</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Video Frame Step</span> <kbd>↑</kbd> / <kbd>↓</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Scroll Seek</span> <kbd>Mouse Wheel</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Reset Frame 0</span> <kbd>R</kbd></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- View & Toggles -->
|
|
<div class="feature-card p-6 bg-gray-50 dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-bold text-emerald-600 dark:text-emerald-400 border-b pb-2 border-gray-200 dark:border-gray-700">View & UI Toggles</h3>
|
|
<ul class="space-y-3 text-sm text-gray-700 dark:text-gray-300">
|
|
<li class="flex justify-between items-center"><span>Sidebar Menu</span> <kbd>M</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Data Explorer</span> <kbd>I</kbd></li>
|
|
<li class="flex justify-between items-center"><span>GOD MODE Zoom</span> <kbd>G</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Dark/Light Theme</span> <kbd>Q</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Adv. Debug Info</span> <kbd>A</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Fullscreen</span> <kbd>F11</kbd></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Data Display -->
|
|
<div class="feature-card p-6 bg-gray-50 dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-bold text-pink-600 dark:text-pink-400 border-b pb-2 border-gray-200 dark:border-gray-700">Data Visualization</h3>
|
|
<ul class="space-y-3 text-sm text-gray-700 dark:text-gray-300">
|
|
<li class="flex justify-between items-center"><span>Toggle Tracks</span> <kbd>T</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Object Details</span> <kbd>D</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Predicted Pos</span> <kbd>P</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Confirmed Only</span> <kbd>C</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Color by SNR</span> <kbd>1</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Color by Cluster</span> <kbd>2</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Color by Inlier</span> <kbd>3</kbd></li>
|
|
<li class="flex justify-between items-center"><span>Color by Stationary</span> <kbd>4</kbd></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer Tip -->
|
|
<div class="p-6 bg-gray-50 dark:bg-gray-800 text-center border-t border-gray-200 dark:border-gray-700 rounded-b-2xl">
|
|
<p class="text-sm text-gray-500">Pro Tip: You can also press <kbd>K</kbd> anytime to toggle this screen.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USER GUIDE MODAL -->
|
|
<div id="guide-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80 backdrop-blur-sm p-4">
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full h-full mx-8 my-4 relative flex flex-col">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between px-6 py-1 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-3xl">📚</span>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">User Manual</h2>
|
|
</div>
|
|
</div>
|
|
<button id="guide-modal-close-btn"
|
|
class="px-6 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 font-semibold text-lg">Next</button>
|
|
</div>
|
|
|
|
<!-- Iframe Content -->
|
|
<iframe id="user-manual-iframe" src="User_Manual.html" class="flex-grow w-full border-0 rounded-b-2xl" style="min-height: 400px;"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CODEBASE OVERVIEW MODAL -->
|
|
<div id="codebase-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80 backdrop-blur-sm p-4">
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full h-full mx-8 my-4 relative flex flex-col">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between px-6 py-1 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-3xl"></span>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white"></h2>
|
|
</div>
|
|
</div>
|
|
<button id="codebase-modal-close-btn"
|
|
class="px-6 py-2 rounded-lg bg-purple-600 text-white hover:bg-purple-700 font-semibold text-lg">Close</button>
|
|
</div>
|
|
|
|
<!-- Iframe Content -->
|
|
<iframe id="codebase-iframe" src="code-base-overview.html" class="flex-grow w-full border-0 rounded-b-2xl" style="min-height: 400px;"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<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 class="flex justify-end gap-4 mt-4">
|
|
<button id="modal-cancel-btn"
|
|
class="px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 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>
|