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.
574 lines
30 KiB
574 lines
30 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ADAS/ARAS Development for Indian Roads</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<!--
|
|
Palette Name: Energetic & Playful (Adapted for Professional Data)
|
|
Colors:
|
|
- Primary Navy: #003f5c
|
|
- Deep Purple: #58508d
|
|
- Vibrant Pink: #bc5090
|
|
- Alert Red: #ff6361
|
|
- Warning Yellow: #ffa600
|
|
-->
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #f3f4f6;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* Chart Container Styling - MANDATORY */
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: white;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Specific constraints for responsiveness */
|
|
.chart-box-lg {
|
|
height: 400px;
|
|
max-height: 500px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.chart-box-md {
|
|
height: 300px;
|
|
max-height: 400px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Scrollable Table Styling */
|
|
.scenarios-table-container {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #003f5c #e5e7eb;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #58508d;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #003f5c;
|
|
}
|
|
|
|
/* Diagram Utilities (CSS-only Flowchart) */
|
|
.flow-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background: white;
|
|
border-left: 4px solid #003f5c;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
border-radius: 0.375rem;
|
|
width: 100%;
|
|
}
|
|
.flow-arrow {
|
|
font-size: 2rem;
|
|
color: #bc5090;
|
|
margin: 0.5rem 0;
|
|
line-height: 1;
|
|
}
|
|
</style>
|
|
<!--
|
|
CRITICAL:
|
|
- Source Material: User provided context on ADAS/ARAS workflow + Request for 50 Scenarios.
|
|
- Narrative Plan:
|
|
1. Context & Challenge (Indian Roads).
|
|
2. The 50 Scenarios (Data Table + Distribution Analysis).
|
|
3. Workflow Optimization (Current vs. Future State).
|
|
4. Technical Recommendations (Tools).
|
|
- Visualizations:
|
|
1. Doughnut Chart (Scenario Categories) -> Goal: Inform composition.
|
|
2. Bubble Chart (Frequency vs Severity) -> Goal: Relationships/Prioritization.
|
|
3. HTML Table -> Goal: Organize the 50 items.
|
|
4. Radar Chart -> Goal: Compare Workflow Attributes.
|
|
5. CSS Flowchart -> Goal: Process Flow (NO MERMAID/SVG).
|
|
- NO SVG Used. NO Mermaid Used.
|
|
-->
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
|
|
<!-- Header -->
|
|
<header class="bg-[#003f5c] text-white py-8 shadow-lg">
|
|
<div class="container mx-auto px-4">
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-2">ADAS & ARAS Development: Indian Context</h1>
|
|
<p class="text-xl text-gray-200">Accelerating FCW & BSD Validation for 2/3-Wheelers</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-8 space-y-12">
|
|
|
|
<!-- Section 1: Introduction -->
|
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="md:col-span-2 bg-white p-6 rounded-lg shadow-md border-t-4 border-[#bc5090]">
|
|
<h2 class="text-2xl font-bold text-[#003f5c] mb-4">The Challenge: Engineering for Chaos</h2>
|
|
<p class="text-gray-700 leading-relaxed mb-4">
|
|
Developing Advanced Driver Assistance Systems (ADAS) for India requires moving beyond standard Euro NCAP definitions. The environment is characterized by high density, heterogeneous traffic (trucks sharing lanes with bicycles), and unpredictable road geometry.
|
|
</p>
|
|
<p class="text-gray-700 leading-relaxed">
|
|
The current workflow utilizes <strong>AWRL1432/1843 radar sensors</strong> and <strong>MATLAB-based tracking</strong>. To achieve robust Front Collision Warning (FCW) and Blind Spot Detection (BSD), we must validate against specific edge cases found only on Indian roads.
|
|
</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-lg shadow-md flex flex-col justify-center items-center text-center">
|
|
<div class="text-5xl font-bold text-[#ff6361] mb-2">50</div>
|
|
<div class="text-lg font-medium text-gray-600">Unique Scenarios Identified</div>
|
|
<div class="mt-4 w-full h-1 bg-gray-200 rounded">
|
|
<div class="h-1 bg-[#ff6361] rounded" style="width: 100%"></div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-2">Targeting High-Risk Edge Cases</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Scenario Analysis -->
|
|
<section>
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-[#003f5c]">Scenario Categorization</h2>
|
|
<p class="text-gray-600 mt-2">
|
|
Before diving into the list, we analyze the distribution of scenarios. Indian traffic creates a unique cluster of "Lateral" and "Static Obstacle" risks that are less prevalent in western datasets.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
|
<!-- Chart 1: Scenario Distribution -->
|
|
<div class="flex flex-col">
|
|
<div class="chart-container chart-box-md shadow-md">
|
|
<canvas id="scenarioDistChart"></canvas>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-2 italic text-center">Fig 1. Breakdown of the 50 generated scenarios by primary threat type.</p>
|
|
</div>
|
|
|
|
<!-- Chart 2: Priority Matrix (Bubble) -->
|
|
<div class="flex flex-col">
|
|
<div class="chart-container chart-box-md shadow-md">
|
|
<canvas id="riskBubbleChart"></canvas>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-2 italic text-center">Fig 2. Frequency vs. Severity. High severity/frequency items (Top Right) are critical for FCW.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Big Table -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden border-t-4 border-[#ffa600]">
|
|
<div class="p-6 bg-gray-50 border-b">
|
|
<h3 class="text-xl font-bold text-[#003f5c]">The 50 Critical Scenarios Matrix</h3>
|
|
<p class="text-sm text-gray-600">Compiled from Indian accident data reports and ADAS edge-case studies.</p>
|
|
</div>
|
|
<div class="scenarios-table-container">
|
|
<table class="min-w-full text-sm text-left">
|
|
<thead class="text-xs text-white uppercase bg-[#003f5c] sticky top-0 z-10">
|
|
<tr>
|
|
<th class="px-6 py-3">ID</th>
|
|
<th class="px-6 py-3">Scenario Name</th>
|
|
<th class="px-6 py-3">Type</th>
|
|
<th class="px-6 py-3">Indian Context / Description</th>
|
|
<th class="px-6 py-3">Priority</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="scenarioTableBody" class="divide-y divide-gray-200">
|
|
<!-- JS will populate this -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Workflow Optimization -->
|
|
<section>
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-[#003f5c]">Workflow Modernization</h2>
|
|
<p class="text-gray-600 mt-2">
|
|
Moving from a MATLAB-centric, human-in-the-loop workflow to a standardized ROS2 pipeline can reduce iteration time by estimated 40%. The current bottleneck is manual synchronization and the overhead of interpreted code.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
<!-- Chart 3: Radar Comparison -->
|
|
<div class="bg-white p-6 rounded-lg shadow-md">
|
|
<h3 class="text-lg font-bold text-[#58508d] mb-4">Pipeline Capabilities Comparison</h3>
|
|
<div class="chart-container chart-box-md mx-auto">
|
|
<canvas id="workflowRadarChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 text-sm text-gray-600">
|
|
<p><span class="inline-block w-3 h-3 bg-[#ff6361] mr-2"></span>Current (MATLAB) is excellent for rapid prototyping but struggles with real-time speed and integration.</p>
|
|
<p><span class="inline-block w-3 h-3 bg-[#003f5c] mr-2"></span>Proposed (ROS2/C++) offers superior sensor fusion capabilities and visualization tools.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Process Flow Diagram (CSS only) -->
|
|
<div class="bg-white p-6 rounded-lg shadow-md">
|
|
<h3 class="text-lg font-bold text-[#58508d] mb-4">Proposed Accelerated Workflow</h3>
|
|
<div class="flex flex-col items-center space-y-2">
|
|
<!-- Step 1 -->
|
|
<div class="flow-step border-l-[#ffa600]">
|
|
<h4 class="font-bold text-[#003f5c]">1. Data Ingestion (ROS2)</h4>
|
|
<p class="text-xs text-gray-500">AWRL1432 Driver Node → /radar/pointcloud2</p>
|
|
</div>
|
|
|
|
<div class="flow-arrow">↓</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="flow-step border-l-[#ff6361]">
|
|
<h4 class="font-bold text-[#003f5c]">2. Auto-Labeling</h4>
|
|
<p class="text-xs text-gray-500">Sync Video → YOLOv8/SAM for Ground Truth Bounding Boxes</p>
|
|
</div>
|
|
|
|
<div class="flow-arrow">↓</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="flow-step border-l-[#bc5090]">
|
|
<h4 class="font-bold text-[#003f5c]">3. Algorithm & Fusion</h4>
|
|
<p class="text-xs text-gray-500">C++ Tracking Nodes + Camera Fusion (Kalman Filter)</p>
|
|
</div>
|
|
|
|
<div class="flow-arrow">↓</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="flow-step border-l-[#58508d]">
|
|
<h4 class="font-bold text-[#003f5c]">4. Visualization (Foxglove)</h4>
|
|
<p class="text-xs text-gray-500">Web-based replay of Radar PCL + Video Overlay</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Recommendations -->
|
|
<section class="bg-[#003f5c] rounded-xl p-8 shadow-xl text-white">
|
|
<h2 class="text-2xl font-bold mb-6">Actionable Improvements</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Rec 1 -->
|
|
<div class="bg-white/10 p-4 rounded border border-white/20 backdrop-blur-sm">
|
|
<h3 class="text-[#ffa600] font-bold text-lg mb-2">1. Adopt Foxglove Studio</h3>
|
|
<p class="text-sm opacity-90">Replace the custom visualizer. Foxglove allows drag-and-drop visualization of point clouds and camera feeds, perfectly synchronized, via browser.</p>
|
|
</div>
|
|
<!-- Rec 2 -->
|
|
<div class="bg-white/10 p-4 rounded border border-white/20 backdrop-blur-sm">
|
|
<h3 class="text-[#ffa600] font-bold text-lg mb-2">2. Automated Ground Truth</h3>
|
|
<p class="text-sm opacity-90">Stop manual video comparison. Run the video through a pre-trained model (like YOLOv8) to generate "Ground Truth" boxes, then calculate Intersection over Union (IoU) with radar tracks automatically.</p>
|
|
</div>
|
|
<!-- Rec 3 -->
|
|
<div class="bg-white/10 p-4 rounded border border-white/20 backdrop-blur-sm">
|
|
<h3 class="text-[#ffa600] font-bold text-lg mb-2">3. Move to C++/ROS2</h3>
|
|
<p class="text-sm opacity-90">MATLAB is great for math, but slow for pipelines. Migrating the tracking logic to C++ nodes in ROS2 ensures the code is ready for embedded deployment.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="text-center text-gray-500 text-sm mt-8 pb-4">
|
|
<p>© 2025 ADAS Research Division. Generated for Internal Review.</p>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
// --- 1. Data Definitions ---
|
|
|
|
// The 50 Scenarios Data
|
|
const scenarios = [
|
|
// FCW - Urban/Congestion
|
|
{ id: 1, name: "The Auto-Rickshaw Cut-In", type: "FCW", desc: "Auto-rickshaw abruptly changes lane into ego path from left/right at low speed.", priority: "High" },
|
|
{ id: 2, name: "Sudden Stop for Pothole", type: "FCW", desc: "Lead vehicle brakes hard unexpectedly to avoid a road defect.", priority: "High" },
|
|
{ id: 3, name: "Pedestrian Jaywalking (Group)", type: "FCW", desc: "Group of pedestrians crossing mid-block in dense traffic.", priority: "High" },
|
|
{ id: 4, name: "Stray Dog Chasing", type: "FCW", desc: "Animal runs perpendicular to ego vehicle path.", priority: "Med" },
|
|
{ id: 5, name: "Cattle on Highway", type: "FCW", desc: "Stationary or slow-moving cow sitting on the median/lane.", priority: "High" },
|
|
{ id: 6, name: "Wrong-Way Motorcyclist", type: "FCW", desc: "Bike approaching head-on in the ego lane (shoulder riding).", priority: "Critical" },
|
|
{ id: 7, name: "Bus Stop Pull-Out", type: "FCW", desc: "Bus merges from stop without indicator.", priority: "Med" },
|
|
{ id: 8, name: "The 'Squeeze' Gap", type: "FCW", desc: "Two heavy vehicles creating a narrowing tunnel for the ego 2-wheeler.", priority: "High" },
|
|
{ id: 9, name: "Door Opening", type: "FCW", desc: "Parked car door opens into ego path.", priority: "Med" },
|
|
{ id: 10, name: "Intersection Creeper", type: "FCW", desc: "Vehicle inching into intersection during red light.", priority: "Med" },
|
|
|
|
// BSD - Overtaking & Filtering
|
|
{ id: 11, name: "Left-Side Overtake", type: "BSD", desc: "Faster bike overtaking ego vehicle from the left (blind spot).", priority: "Critical" },
|
|
{ id: 12, name: "Zig-Zagging Scooter", type: "BSD", desc: "Scooter weaving continuously through traffic behind ego.", priority: "High" },
|
|
{ id: 13, name: "Heavy Truck Blind Zone", type: "BSD", desc: "Truck alongside ego vehicle drifting into ego lane.", priority: "Critical" },
|
|
{ id: 14, name: "E-Rickshaw Silent Approach", type: "BSD", desc: "Electric rickshaw approaching silently in blind spot.", priority: "High" },
|
|
{ id: 15, name: "Cyclist Filtering", type: "BSD", desc: "Cyclist moving between ego vehicle and curb.", priority: "Med" },
|
|
|
|
// FCW - Highway
|
|
{ id: 16, name: "Unmarked Speed Breaker", type: "FCW", desc: "Lead vehicle becomes airborne/brakes hard for invisible hump.", priority: "High" },
|
|
{ id: 17, name: "Tractor Trolley (No Lights)", type: "FCW", desc: "Slow moving agricultural vehicle at night with no reflectors.", priority: "Critical" },
|
|
{ id: 18, name: "Construction Debris", type: "FCW", desc: "Pile of sand/bricks left on the carriageway.", priority: "Med" },
|
|
{ id: 19, name: "Broken Down Truck", type: "FCW", desc: "Stationary truck in fast lane without hazard lights.", priority: "Critical" },
|
|
{ id: 20, name: "Toll Plaza Queue", type: "FCW", desc: "Approaching stationary queue at high speed.", priority: "Low" },
|
|
|
|
// BSD - Turning
|
|
{ id: 21, name: "The 'U-Turn' Conflict", type: "BSD", desc: "Vehicle performing U-turn hits ego vehicle's rear flank.", priority: "High" },
|
|
{ id: 22, name: "Free Left Turn Merge", type: "BSD", desc: "Vehicle merging from free left turn into ego's blind spot.", priority: "Med" },
|
|
{ id: 23, name: "Roundabout Exit Cut", type: "BSD", desc: "Vehicle exiting roundabout cuts across ego's front/side.", priority: "Med" },
|
|
|
|
// Environmental / Sensor Noise
|
|
{ id: 24, name: "Heavy Rain Clutter", type: "Noise", desc: "Monsoon rain creating false positives in radar.", priority: "Med" },
|
|
{ id: 25, name: "Metal Fence Reflection", type: "Noise", desc: "Guard rails on curves interpreted as dynamic objects.", priority: "Low" },
|
|
{ id: 26, name: "Tunnel Entry/Exit", type: "Light", desc: "Sudden lighting change affecting camera verification.", priority: "Low" },
|
|
|
|
// More FCW/BSD Mix
|
|
{ id: 27, name: "Vegetable Cart", type: "FCW", desc: "Hand-pushed cart moving at walking pace in lane.", priority: "Med" },
|
|
{ id: 28, name: "Tailgating SUV", type: "BSD", desc: "Large vehicle following too closely, disappearing from mirrors.", priority: "High" },
|
|
{ id: 29, name: "Water Tanker Spillage", type: "FCW", desc: "Wet road surface causing lead vehicle to slip.", priority: "Low" },
|
|
{ id: 30, name: "Emergency Vehicle", type: "BSD", desc: "Ambulance approaching fast from rear quarter.", priority: "High" },
|
|
|
|
// Filling to 50 with variations
|
|
{ id: 31, name: "Median Jumper (Pedestrian)", type: "FCW", desc: "Person jumping over median divider.", priority: "High" },
|
|
{ id: 32, name: "Merging Traffic (High Speed)", type: "BSD", desc: "Highway on-ramp merge at unsafe speed.", priority: "Med" },
|
|
{ id: 33, name: "Sudden Lane Expansion", type: "FCW", desc: "Traffic fanning out causing erratic lateral movements.", priority: "Low" },
|
|
{ id: 34, name: "Auto-Rickshaw U-Turn", type: "FCW", desc: "3-wheeler making tight U-turn on narrow road.", priority: "High" },
|
|
{ id: 35, name: "Loose Gravel Skid", type: "FCW", desc: "Lead bike skids on gravel.", priority: "Med" },
|
|
{ id: 36, name: "Police Barricade", type: "FCW", desc: "Unmarked zigzag barricades on highway.", priority: "Critical" },
|
|
{ id: 37, name: "Overloaded Truck Sway", type: "BSD", desc: "Cargo extending beyond truck width into ego lane.", priority: "High" },
|
|
{ id: 38, name: "Child on Road", type: "FCW", desc: "Small radar cross-section target (child).", priority: "Critical" },
|
|
{ id: 39, name: "Fog/Smog Visibility", type: "Noise", desc: "Reduced visibility scenarios for camera validation.", priority: "Med" },
|
|
{ id: 40, name: "Garbage Dump", type: "FCW", desc: "Pile of garbage extending onto road.", priority: "Med" },
|
|
{ id: 41, name: "Hawker on Roadside", type: "BSD", desc: "Stationary seller forcing traffic to swerve into ego.", priority: "Med" },
|
|
{ id: 42, name: "Shadow Contrast", type: "Light", desc: "Deep shadows under flyovers confusing tracking.", priority: "Low" },
|
|
{ id: 43, name: "Motorcycle Convoy", type: "BSD", desc: "Group of bikers surrounding ego vehicle.", priority: "High" },
|
|
{ id: 44, name: "Bus Stopping Mid-Road", type: "FCW", desc: "Bus stops to let passengers off not at a stop.", priority: "High" },
|
|
{ id: 45, name: "Reversing Vehicle", type: "FCW", desc: "Car reversing on main road due to missed turn.", priority: "Critical" },
|
|
{ id: 46, name: "Hanging Cables", type: "FCW", desc: "Low hanging wires (radar ghost target).", priority: "Low" },
|
|
{ id: 47, name: "Manhole Open", type: "FCW", desc: "Open manhole requiring sharp evasion.", priority: "Critical" },
|
|
{ id: 48, name: "Speeding Delivery Bike", type: "BSD", desc: "Swiggy/Zomato rider cutting aggressively.", priority: "High" },
|
|
{ id: 49, name: "Follow-Me Car", type: "FCW", desc: "Vehicle with erratic speed profile.", priority: "Med" },
|
|
{ id: 50, name: "Traffic Police Signal", type: "FCW", desc: "Hand gesture stop (not detected by radar).", priority: "Med" }
|
|
];
|
|
|
|
// --- 2. Utility Functions ---
|
|
|
|
// Label Wrapping Helper
|
|
function wrapLabel(str, maxLen) {
|
|
if (str.length <= maxLen) return str;
|
|
const words = str.split(' ');
|
|
const lines = [];
|
|
let currentLine = words[0];
|
|
|
|
for (let i = 1; i < words.length; i++) {
|
|
if ((currentLine + " " + words[i]).length < maxLen) {
|
|
currentLine += " " + words[i];
|
|
} else {
|
|
lines.push(currentLine);
|
|
currentLine = words[i];
|
|
}
|
|
}
|
|
lines.push(currentLine);
|
|
return lines;
|
|
}
|
|
|
|
// Common Chart Options
|
|
const commonOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { font: { family: 'Roboto' } }
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(0, 63, 92, 0.9)',
|
|
titleFont: { size: 14, family: 'Roboto' },
|
|
bodyFont: { size: 13, family: 'Roboto' },
|
|
padding: 12,
|
|
callbacks: {
|
|
title: function(tooltipItems) {
|
|
const item = tooltipItems[0];
|
|
let label = item.chart.data.labels[item.dataIndex];
|
|
if (Array.isArray(label)) {
|
|
return label.join(' ');
|
|
} else {
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// --- 3. Chart Generation ---
|
|
|
|
// Chart 1: Scenario Distribution (Doughnut)
|
|
function renderDistChart() {
|
|
const counts = { FCW: 0, BSD: 0, Noise: 0, Light: 0 };
|
|
scenarios.forEach(s => counts[s.type] = (counts[s.type] || 0) + 1);
|
|
|
|
const ctx = document.getElementById('scenarioDistChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['FCW Scenarios', 'BSD Scenarios', 'Sensor Noise', 'Lighting/Env'],
|
|
datasets: [{
|
|
data: [counts.FCW, counts.BSD, counts.Noise, counts.Light],
|
|
backgroundColor: ['#003f5c', '#bc5090', '#ffa600', '#ff6361'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
cutout: '60%',
|
|
plugins: {
|
|
...commonOptions.plugins,
|
|
title: {
|
|
display: true,
|
|
text: 'Scenario Composition',
|
|
font: { size: 16 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Chart 2: Risk Bubble Chart (Frequency vs Severity)
|
|
function renderBubbleChart() {
|
|
const ctx = document.getElementById('riskBubbleChart').getContext('2d');
|
|
|
|
// Mapping categories to approximate Frequency (X) and Severity (Y) for visualization
|
|
// High Priority = High Severity (Y > 8)
|
|
// Common Indian Scenario = High Frequency (X > 7)
|
|
|
|
const dataPoints = [
|
|
{ x: 9, y: 9, r: 15, label: 'Wrong-Way Driver' },
|
|
{ x: 9, y: 7, r: 12, label: 'Auto-Rickshaw Cut-In' },
|
|
{ x: 8, y: 8, r: 10, label: 'Cattle on Road' },
|
|
{ x: 9, y: 6, r: 10, label: 'Left Overtake' },
|
|
{ x: 6, y: 9, r: 8, label: 'Unmarked Breaker' },
|
|
{ x: 5, y: 9, r: 8, label: 'Broken Truck' },
|
|
{ x: 8, y: 4, r: 6, label: 'Jaywalkers' },
|
|
{ x: 4, y: 3, r: 5, label: 'Rain Clutter' },
|
|
{ x: 3, y: 8, r: 6, label: 'Child' }
|
|
];
|
|
|
|
new Chart(ctx, {
|
|
type: 'bubble',
|
|
data: {
|
|
datasets: [{
|
|
label: 'Scenario Risk Analysis',
|
|
data: dataPoints,
|
|
backgroundColor: dataPoints.map(d => d.y > 8 ? '#ff6361' : '#58508d'),
|
|
}]
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
scales: {
|
|
x: {
|
|
title: { display: true, text: 'Frequency of Occurrence (India)' },
|
|
min: 0, max: 10
|
|
},
|
|
y: {
|
|
title: { display: true, text: 'Severity / Safety Risk' },
|
|
min: 0, max: 10
|
|
}
|
|
},
|
|
plugins: {
|
|
...commonOptions.plugins,
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.raw.label + ` (Freq: ${context.raw.x}, Sev: ${context.raw.y})`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Chart 3: Radar Chart (Workflow Comparison)
|
|
function renderRadarChart() {
|
|
const ctx = document.getElementById('workflowRadarChart').getContext('2d');
|
|
|
|
const labels = ['Real-time Performance', 'Sensor Fusion Ease', 'Visualization Tools', 'Debugging Speed', 'Deployment Readiness'];
|
|
// Wrap labels
|
|
const wrappedLabels = labels.map(l => wrapLabel(l, 16));
|
|
|
|
new Chart(ctx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: wrappedLabels,
|
|
datasets: [{
|
|
label: 'Current (MATLAB)',
|
|
data: [4, 5, 5, 8, 3], // MATLAB good at debug, poor at real-time/deploy
|
|
fill: true,
|
|
backgroundColor: 'rgba(255, 99, 97, 0.2)',
|
|
borderColor: '#ff6361',
|
|
pointBackgroundColor: '#ff6361',
|
|
}, {
|
|
label: 'Proposed (ROS2/C++)',
|
|
data: [9, 9, 8, 6, 9], // ROS2 great at real-time, fusion, deploy
|
|
fill: true,
|
|
backgroundColor: 'rgba(0, 63, 92, 0.2)',
|
|
borderColor: '#003f5c',
|
|
pointBackgroundColor: '#003f5c',
|
|
}]
|
|
},
|
|
options: {
|
|
...commonOptions,
|
|
scales: {
|
|
r: {
|
|
angleLines: { color: '#e5e7eb' },
|
|
grid: { color: '#e5e7eb' },
|
|
pointLabels: {
|
|
font: { size: 12, family: 'Roboto' }
|
|
},
|
|
suggestedMin: 0,
|
|
suggestedMax: 10
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- 4. Table Population ---
|
|
function populateTable() {
|
|
const tbody = document.getElementById('scenarioTableBody');
|
|
scenarios.forEach(s => {
|
|
const tr = document.createElement('tr');
|
|
tr.className = "bg-white border-b hover:bg-gray-50";
|
|
|
|
// Color code priority
|
|
let priorityClass = "text-gray-600";
|
|
if (s.priority === 'Critical') priorityClass = "text-[#ff6361] font-bold";
|
|
if (s.priority === 'High') priorityClass = "text-[#ffa600] font-bold";
|
|
|
|
tr.innerHTML = `
|
|
<td class="px-6 py-4 font-medium text-gray-900">${s.id}</td>
|
|
<td class="px-6 py-4 font-semibold text-[#003f5c]">${s.name}</td>
|
|
<td class="px-6 py-4"><span class="bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-gray-500">${s.type}</span></td>
|
|
<td class="px-6 py-4 text-gray-600">${s.desc}</td>
|
|
<td class="px-6 py-4 ${priorityClass}">${s.priority}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
// --- 5. Initialization ---
|
|
window.onload = function() {
|
|
renderDistChart();
|
|
renderBubbleChart();
|
|
renderRadarChart();
|
|
populateTable();
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|