1 changed files with 0 additions and 233 deletions
@ -1,233 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="en"> |
|
||||
<head> |
|
||||
<meta charset="UTF-8"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||
<title>Radar & Video Synchronizer Infographic</title> |
|
||||
<script src="https://cdn.tailwindcss.com"></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"> |
|
||||
<!-- Chosen Palette: Energetic & Playful (#FF6B6B, #FFD166, #06D6A0, #118AB2, #073B4C on light background #f8fafc) --> |
|
||||
<!-- Application Structure Plan: Single-page scrollable infographic. Sections: Hero (Intro), Key Features (Cards with Icons), How it Works (Simple Flow Diagram), Setup Guide (Steps), Quick Usage (Highlights), File Structure (Visual Tree). This structure breaks down the README into digestible visual chunks, guiding the user from a high-level overview to specific details in a logical flow suitable for an infographic format. Interaction is minimal (hover effects) to keep the focus on information presentation. --> |
|
||||
<!-- Visualization & Content Choices: |
|
||||
- Report Info: README Overview -> Goal: Inform -> Viz/Method: Large Text + Description -> Interaction: None -> Justification: Clear intro -> Method: HTML/CSS. |
|
||||
- Report Info: README Features List -> Goal: Inform/Organize -> Viz/Method: Cards with Unicode Icons (Grid Layout) -> Interaction: Hover Effects -> Justification: Visually breaks down features -> Method: HTML/CSS/Tailwind. |
|
||||
- Report Info: Core App Logic (Load, Parse, Sync, Visualize) -> Goal: Organize -> Viz/Method: Simple Flow Diagram (Styled Divs + Arrows) -> Interaction: None -> Justification: Simplifies complex process -> Method: HTML/CSS/Tailwind. NO SVG/Mermaid. |
|
||||
- Report Info: README Setup Steps -> Goal: Inform/Organize -> Viz/Method: Numbered Steps with Icons -> Interaction: None -> Justification: Clear instructions -> Method: HTML/CSS/Tailwind. |
|
||||
- Report Info: README Usage Highlights -> Goal: Inform -> Viz/Method: Bullet points/Icons -> Interaction: None -> Justification: Quick reference -> Method: HTML/CSS/Tailwind. |
|
||||
- Report Info: README Project Structure -> Goal: Organize -> Viz/Method: Styled Nested List (Visual Tree) -> Interaction: None -> Justification: Clear representation of file layout -> Method: HTML/CSS/Tailwind. NO SVG/Mermaid. |
|
||||
- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. No Chart.js/Plotly needed. --> |
|
||||
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> |
|
||||
<style> |
|
||||
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; /* slate-50 */ color: #073B4C; } |
|
||||
.font-mono { font-family: 'Roboto Mono', monospace; } |
|
||||
.feature-card { background-color: white; border-left: 4px solid #118AB2; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } |
|
||||
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } |
|
||||
.flow-step { border: 1px solid #118AB2; background-color: #ffffff; color: #073B4C; } |
|
||||
.flow-arrow { color: #118AB2; font-weight: bold; } |
|
||||
.setup-step { background-color: white; border-top: 3px solid #06D6A0; } |
|
||||
.file-tree { list-style: none; padding-left: 0; } |
|
||||
.file-tree li { margin-bottom: 0.25rem; padding-left: 1.5em; position: relative; } |
|
||||
.file-tree .folder::before { content: '📁'; position: absolute; left: 0; color: #FFD166; } |
|
||||
.file-tree .file::before { content: '📄'; position: absolute; left: 0; color: #118AB2; } |
|
||||
.code-block { background-color: #073B4C; color: #f8fafc; padding: 0.5rem 1rem; border-radius: 0.375rem; font-family: 'Roboto Mono', monospace; overflow-x: auto; font-size: 0.875rem; line-height: 1.25rem; } |
|
||||
kbd { background-color: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-family: 'Roboto Mono', monospace; font-size: 0.8em; box-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: #334155; } |
|
||||
.section-divider { border-top: 2px dashed #118AB2; margin-top: 3rem; margin-bottom: 3rem; opacity: 0.6; } |
|
||||
|
|
||||
/* Responsive adjustments */ |
|
||||
@media (max-width: 768px) { |
|
||||
.flow-diagram { flex-direction: column; align-items: stretch; } |
|
||||
.flow-arrow { transform: rotate(90deg); margin: 0.5rem 0; font-size: 1.5rem; } |
|
||||
.file-tree li { padding-left: 1.8em; } /* More space for icons on mobile */ |
|
||||
} |
|
||||
</style> |
|
||||
</head> |
|
||||
<body class="antialiased"> |
|
||||
|
|
||||
<div class="container mx-auto px-4 py-12 max-w-5xl"> |
|
||||
|
|
||||
<!-- Hero Section --> |
|
||||
<section class="text-center mb-16"> |
|
||||
<div class="inline-block p-4 rounded-lg bg-gradient-to-r from-[#118AB2] to-[#06D6A0] mb-4"> |
|
||||
<span class="text-4xl">📡️ <span class="mx-2 text-white font-bold">+</span> 🎬</span> |
|
||||
</div> |
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-[#073B4C]">Radar & Video Synchronizer</h1> |
|
||||
<p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">A high-precision, browser-based tool for visualizing synchronized radar data and video, rebuilt with a modern modular JavaScript architecture.</p> |
|
||||
</section> |
|
||||
|
|
||||
<!-- Key Features Section --> |
|
||||
<section class="mb-16"> |
|
||||
<h2 class="text-3xl font-semibold text-center mb-10 text-[#073B4C]">Key Features</h2> |
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#FF6B6B]">🔄</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Synchronized Playback</h3> |
|
||||
<p class="text-slate-600 text-sm">Precise alignment of video and radar frames using high-resolution timers.</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#FFD166]">📂</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Unified File Loading</h3> |
|
||||
<p class="text-slate-600 text-sm">Load JSON & Video via buttons or drag & drop. Handles large files efficiently.</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#06D6A0]">⚙️</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Efficient Parsing</h3> |
|
||||
<p class="text-slate-600 text-sm">Web Worker + Streaming parser prevent UI freezes with large JSON datasets.</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#118AB2]">📊</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Interactive Visualization</h3> |
|
||||
<p class="text-slate-600 text-sm">p5.js renders point clouds, trajectories, speed graph, and details (TTC, ID).</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#FF6B6B]">🎨</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Dynamic Filtering & Colors</h3> |
|
||||
<p class="text-slate-600 text-sm">Color points by SNR, Cluster, etc. Customize TTC risk colors. Filter tracks.</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#FFD166]">▶️</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Advanced Controls</h3> |
|
||||
<p class="text-slate-600 text-sm">Full playback control, frame stepping, scroll-to-seek, zoom mode, sidebar, and shortcuts.</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#06D6A0]">💾</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Session Management</h3> |
|
||||
<p class="text-slate-600 text-sm">Cache files with IndexedDB for instant reload. Save/Load session state.</p> |
|
||||
</div> |
|
||||
<div class="feature-card rounded-lg shadow-md p-6"> |
|
||||
<div class="text-3xl mb-3 text-[#118AB2]">💡</div> |
|
||||
<h3 class="text-xl font-semibold mb-2 text-[#073B4C]">Modern UI/UX</h3> |
|
||||
<p class="text-slate-600 text-sm">Responsive design, dark/light theme, clear overlays, and intuitive controls.</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
<div class="section-divider"></div> |
|
||||
|
|
||||
<!-- How it Works Section --> |
|
||||
<section class="mb-16"> |
|
||||
<h2 class="text-3xl font-semibold text-center mb-10 text-[#073B4C]">How It Works: Data Flow</h2> |
|
||||
<div class="flow-diagram flex flex-col md:flex-row items-center justify-center gap-4 text-center text-sm md:text-base"> |
|
||||
<div class="flow-step rounded-lg p-4 shadow w-full md:w-auto">User Loads<br>JSON & Video Files<br>(Drag & Drop / Button)</div> |
|
||||
<div class="flow-arrow text-2xl mx-2 md:mx-0">➔</div> |
|
||||
<div class="flow-step rounded-lg p-4 shadow w-full md:w-auto">Files Cached<br>(IndexedDB) &<br>Worker Parses JSON</div> |
|
||||
<div class="flow-arrow text-2xl mx-2 md:mx-0">➔</div> |
|
||||
<div class="flow-step rounded-lg p-4 shadow w-full md:w-auto">Timestamps Synced<br>& Data Processed<br>(Main Thread)</div> |
|
||||
<div class="flow-arrow text-2xl mx-2 md:mx-0">➔</div> |
|
||||
<div class="flow-step rounded-lg p-4 shadow w-full md:w-auto">p5.js Visualizes<br>Radar & Speed Graph<br>(UI Updated)</div> |
|
||||
<div class="flow-arrow text-2xl mx-2 md:mx-0">➔</div> |
|
||||
<div class="flow-step rounded-lg p-4 shadow w-full md:w-auto">Animation Loop<br>Keeps Video & Radar<br>Synced During Playback</div> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
<div class="section-divider"></div> |
|
||||
|
|
||||
<!-- Setup Guide Section --> |
|
||||
<section class="mb-16"> |
|
||||
<h2 class="text-3xl font-semibold text-center mb-10 text-[#073B4C]">Setup Guide (Local)<br><b><i>"Only needed if MyApp.exe does not work in your case"</b></i></h2> |
|
||||
<p class="text-center text-slate-600 mb-8 max-w-2xl mx-auto">Due to browser security with ES Modules, you need a simple local server. Python 3 is recommended.</p> |
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center"> |
|
||||
<div class="setup-step rounded-lg shadow-md p-6"> |
|
||||
<div class="text-4xl mb-3">1️⃣</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Navigate</h3> |
|
||||
<p class="text-sm text-slate-600">Navigate to the "public" folder inside the Main Visualizer folder</p> |
|
||||
</div> |
|
||||
<div class="setup-step rounded-lg shadow-md p-6"> |
|
||||
<div class="text-4xl mb-3">2️⃣</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Check Python</h3> |
|
||||
<p class="text-sm text-slate-600">Run `python_check.bat` or `python --version` in terminal. Ensure Python 3.x is in PATH. </p> |
|
||||
</div> |
|
||||
<div class="setup-step rounded-lg shadow-md p-6"> |
|
||||
<div class="text-4xl mb-3">3️⃣</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Start Server</h3> |
|
||||
<p class="text-sm text-slate-600">Run `<b>Visualization_Start.bat</b>` or type: - `python -m http.server 8000` in a CMD terminal inside "public" folder. Keep terminal open.</p> |
|
||||
</div> |
|
||||
<div class="setup-step rounded-lg shadow-md p-6"> |
|
||||
<div class="text-4xl mb-3">4️⃣</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Browser Opens automatically</h3> |
|
||||
<p class="text-sm text-slate-600">Incase it doesn't, Go to `http://localhost:8000` (or the URL shown in terminal).</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
<div class="section-divider"></div> |
|
||||
|
|
||||
<!-- Quick Usage Section --> |
|
||||
<section class="mb-16"> |
|
||||
<h2 class="text-3xl font-semibold text-center mb-10 text-[#073B4C]">Quick Usage Guide</h2> |
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
||||
<div class="bg-white rounded-lg shadow p-6 text-center"> |
|
||||
<div class="text-3xl mb-3 text-[#FF6B6B]">🖱️</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Load Data</h3> |
|
||||
<p class="text-sm text-slate-600">Use buttons or drag & drop JSON/Video files.</p> |
|
||||
</div> |
|
||||
<div class="bg-white rounded-lg shadow p-6 text-center"> |
|
||||
<div class="text-3xl mb-3 text-[#FFD166]">▶️</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Control Playback</h3> |
|
||||
<p class="text-sm text-slate-600">Use Play/Pause/Stop, slider, arrows, or scroll wheel.</p> |
|
||||
</div> |
|
||||
<div class="bg-white rounded-lg shadow p-6 text-center"> |
|
||||
<div class="text-3xl mb-3 text-[#06D6A0]">☰</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Adjust Settings</h3> |
|
||||
<p class="text-sm text-slate-600">Use the sidebar (<kbd>M</kbd>) for toggles, SNR, TTC colors.</p> |
|
||||
</div> |
|
||||
<div class="bg-white rounded-lg shadow p-6 text-center"> |
|
||||
<div class="text-3xl mb-3 text-[#118AB2]">⌨️</div> |
|
||||
<h3 class="font-semibold mb-1 text-[#073B4C]">Use Shortcuts</h3> |
|
||||
<p class="text-sm text-slate-600"><kbd>Space</kbd>, <kbd>Arrows</kbd>, <kbd>1-4</kbd>, <kbd>T</kbd>, <kbd>D</kbd>, <kbd>G</kbd>, <kbd>Q</kbd>, etc. for speed.</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
<div class="section-divider"></div> |
|
||||
|
|
||||
<!-- File Structure Section --> |
|
||||
<section> |
|
||||
<h2 class="text-3xl font-semibold text-center mb-10 text-[#073B4C]">Project File Structure</h2> |
|
||||
<div class="bg-white rounded-lg shadow-md p-6 font-mono text-sm max-w-lg mx-auto"> |
|
||||
<ul class="file-tree"> |
|
||||
<li class="file">index.html</li> |
|
||||
<li class="file">README.md</li> |
|
||||
<li class="file">Visualization_Start.bat</li> |
|
||||
<li class="file">python_check.bat</li> |
|
||||
<li class="file">favicon.png</li> |
|
||||
<li class="folder">src/ |
|
||||
<ul class="file-tree pl-4 border-l border-slate-200 ml-1 mt-1"> |
|
||||
<li class="file">constants.js</li> |
|
||||
<li class="file">db.js</li> |
|
||||
<li class="file">dom.js</li> |
|
||||
<li class="file">drawUtils.js</li> |
|
||||
<li class="file">fileParsers.js</li> |
|
||||
<li class="file">main.js</li> |
|
||||
<li class="file">modal.js</li> |
|
||||
<li class="file">parser.worker.js</li> |
|
||||
<li class="file">state.js</li> |
|
||||
<li class="file">sync.js</li> |
|
||||
<li class="file">theme.js</li> |
|
||||
<li class="file">utils.js</li> |
|
||||
<li class="folder">p5/ |
|
||||
<ul class="file-tree pl-4 border-l border-slate-200 ml-1 mt-1"> |
|
||||
<li class="file">radarSketch.js</li> |
|
||||
<li class="file">speedGraphSketch.js</li> |
|
||||
<li class="file">zoomSketch.js</li> |
|
||||
</ul> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</li> |
|
||||
<li class="folder">tests/ |
|
||||
<ul class="file-tree pl-4 border-l border-slate-200 ml-1 mt-1"> |
|
||||
<li class="file">test-runner.html</li> |
|
||||
<li class="file">utils.test.js</li> |
|
||||
<li class="file">fileParsers.test.js</li> |
|
||||
</ul> |
|
||||
</li> |
|
||||
<li class="file">context.md</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</body> |
|
||||
</html> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue