ai3111/smartgrid-lidar
0
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<title>Explore — SmartGrid-LiDAR</title>7<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none'%3E%3Ccircle cx='13' cy='13' r='11.5' stroke='%234b5068'/%3E%3Ccircle cx='13' cy='13' r='8' stroke='%238b7cf6' stroke-width='1.2'/%3E%3Ccircle cx='13' cy='13' r='4.8' stroke='%234a9ee0' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%237ee8fa'/%3E%3C/svg%3E">8<link rel="stylesheet" href="assets/site.css">9<style>10 .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 26px 0 16px; flex-wrap: wrap; }11 .head p { color: var(--dim); margin: 6px 0 0; max-width: 640px; }12 .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }13 .tabs .btn { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 16px; min-height: 54px; }14 .tabs .btn .t { font-weight: 600; }15 .tabs .btn .s { font-size: 11px; color: var(--dim); font-weight: 400; }16 .tabs .btn[aria-pressed="true"] .s { color: var(--accent-2); }17 18 .layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }19 .stage { aspect-ratio: 16 / 10; }20 .transport { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }21 .transport input[type=range] { flex: 1; min-width: 160px; }22 .transport .counter { font: 12px var(--font-mono); color: var(--dim); min-width: 110px; }23 .controls { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 12px; }24 .controls .label { font: 600 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-right: 2px; }25 .legend { margin-top: 12px; }26 .side .card + .card { margin-top: 14px; }27 .ds-title { font-size: 18px; font-weight: 600; }28 .ds-meta { color: var(--dim); font-size: 13px; margin: 4px 0 10px; }29 .ds-story { font-size: 14px; color: var(--dim); }30 .caveat { font-size: 13px; color: var(--dynamic); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }31 .kbd { font: 11px var(--font-mono); color: var(--mute); margin-top: 10px; }32 .kbd code { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; color: var(--dim); }33 @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }34</style>35</head>36<body>37 38<nav class="nav">39 <a class="brand" href="index.html" aria-label="SmartGrid-LiDAR home">40 <svg viewBox="0 0 26 26" fill="none" aria-hidden="true">41 <circle cx="13" cy="13" r="11.5" stroke="#4b5068" stroke-width="1"/>42 <circle cx="13" cy="13" r="8" stroke="#8b7cf6" stroke-width="1.2"/>43 <circle cx="13" cy="13" r="4.8" stroke="#4a9ee0" stroke-width="1.5"/>44 <circle cx="13" cy="13" r="2" fill="#7ee8fa"/>45 </svg>46 SmartGrid-LiDAR47 </a>48 <span class="tag">SIH 2026 · PS 26053 · DRDO</span>49 <div class="links">50 <a href="index.html">Overview</a>51 <a href="explore.html" class="active">Explore</a>52 <a href="lab.html">Grid Lab</a>53 <a href="report.html">Scan report</a>54 </div>55</nav>56 57<main class="wrap">58 59 <div class="head">60 <div>61 <div class="eyebrow">Multi-dataset viewer</div>62 <h2 style="margin:6px 0 0">Four drives, one pipeline</h2>63 <p>The map is fixed in the world and the vehicle drives through it. Switch datasets, recolour, and click any cell — it is data, not pixels.</p>64 </div>65 </div>66 67 <div id="tabs" class="tabs" role="tablist" aria-label="Datasets"></div>68 69 <div class="layout">70 <div>71 <div id="stage" class="stage">72 <canvas id="map" aria-label="Top-down 2.5D map"></canvas>73 <div class="hud" id="hud">74 <div class="hud-title">ADAPTIVE 2.5D LIDAR MAP</div>75 <div class="hud-row"><span>Sensor</span><b id="h-beams">–</b></div>76 <div class="hud-row"><span>Points / scan</span><b id="h-pts">–</b></div>77 <div class="hud-row"><span>Cells</span><b id="h-cells">–</b></div>78 <div class="hud-row"><span>Map memory</span><b id="h-mem">–</b></div>79 <div class="hud-row"><span>vs uniform 5 cm</span><b id="h-red">–</b></div>80 <div class="hud-row"><span>Grid build</span><b id="h-ms">–</b></div>81 <div class="hud-row" id="h-acc-row"><span>Accuracy</span><b id="h-acc">–</b></div>82 <div class="hud-sep"></div>83 <div class="hud-row"><span>Frame</span><b id="h-frame">–</b></div>84 <div class="hud-row"><span>Moving</span><b id="h-moving">–</b></div>85 <div class="hud-row"><span>Parked</span><b id="h-parked">–</b></div>86 <div class="hud-row"><span>Median speed</span><b id="h-speed">–</b></div>87 <div class="hud-row" id="h-ego-row" hidden><span>Ego speed</span><b id="h-ego">–</b></div>88 <div class="hud-row" id="h-rings-row" hidden><span>Fine ring</span><b id="h-rings">–</b></div>89 <div class="hud-row"><span>Travelled</span><b id="h-dist">–</b></div>90 </div>91 <div class="cursor" id="cursor"></div>92 <div class="loading" id="loading">Loading dataset…</div>93 </div>94 95 <div class="transport">96 <button class="btn small" id="play" aria-pressed="true">Pause</button>97 <button class="btn small icon" id="prev" aria-label="Previous frame">98 <svg viewBox="0 0 16 16" fill="currentColor"><path d="M11 3v10L4 8z"/></svg>99 </button>100 <button class="btn small icon" id="next" aria-label="Next frame">101 <svg viewBox="0 0 16 16" fill="currentColor"><path d="M5 3v10l7-5z"/></svg>102 </button>103 <button class="btn small" id="restart">Restart</button>104 <input type="range" id="scrub" min="0" max="0" value="0" aria-label="Frame">105 <span class="counter" id="counter">frame – / –</span>106 <button class="btn small" id="fit">Fit</button>107 </div>108 109 <div class="controls">110 <span class="label">Colour</span>111 <div class="seg" data-group="mode" role="group" aria-label="Colour mode">112 <button data-mode="category" aria-pressed="true">Category</button>113 <button data-mode="height" aria-pressed="false">Height</button>114 <button data-mode="ring" aria-pressed="false">Resolution ring</button>115 </div>116 <span class="label">Camera</span>117 <label class="check"><input type="checkbox" id="follow" checked> follow vehicle</label>118 <span class="label">Show</span>119 <label class="check"><input type="checkbox" id="ov-path" checked> path</label>120 <label class="check"><input type="checkbox" id="ov-tracks" checked> tracked objects</label>121 <label class="check"><input type="checkbox" id="ov-rings" checked> resolution rings</label>122 </div>123 124 <div class="legend" id="legend">125 <span><span class="swatch" style="background:#35d07f"></span>drivable</span>126 <span><span class="swatch" style="background:#e05a4a"></span>static obstacle</span>127 <span><span class="swatch" style="background:#f0c419"></span>dynamic object</span>128 <span><span class="swatch" style="background:#5a6376"></span>unknown</span>129 <span><span class="swatch" style="border:2px solid #ff4040;background:none"></span>confirmed moving</span>130 <span><span class="swatch" style="border:2px solid #4a9ee0;background:none"></span>parked</span>131 <span><span class="swatch" style="background:#fff"></span>vehicle</span>132 </div>133 </div>134 135 <aside class="side">136 <div class="card">137 <h3>Dataset</h3>138 <div class="ds-title" id="ds-title">–</div>139 <div class="ds-meta" id="ds-meta">–</div>140 <div class="ds-story" id="ds-story"></div>141 <div class="caveat" id="ds-caveat" hidden></div>142 </div>143 144 <div class="card inspect" id="inspect">145 <h3>Cell inspector</h3>146 <div class="empty">Click any cell on the map to read what it stores.</div>147 <dl class="fields">148 <dt>x</dt><dd id="i-x"></dd>149 <dt>y</dt><dd id="i-y"></dd>150 <dt>cell size</dt><dd id="i-size"></dd>151 <dt>ring</dt><dd id="i-ring"></dd>152 <dt>z min</dt><dd id="i-zmin"></dd>153 <dt>z max</dt><dd id="i-zmax"></dd>154 <dt>height</dt><dd id="i-h"></dd>155 <dt>points</dt><dd id="i-n"></dd>156 <dt>category</dt><dd id="i-cat"></dd>157 </dl>158 <div class="kbd"><code>space</code> play/pause · <code>←</code> <code>→</code> step · wheel zoom · drag pan</div>159 </div>160 161 <div class="card">162 <h3>What you are seeing</h3>163 <p class="small dim" style="margin:0">Each square is one grid cell drawn at its real size: 5 cm near the vehicle, 50 cm at the edge. Cells are kept in world coordinates, so the map stays put while the vehicle moves. Circles are objects tracked across frames — red ones are moving, blue ones are parked.</p>164 </div>165 </aside>166 </div>167 168</main>169 170<footer>171 <div class="wrap">172 <span>Smart India Hackathon 2026</span>173 <span>Problem Statement 26053 · DRDO</span>174 <span><b>Team Time2Act</b></span>175 <a href="https://github.com/aryan-labs/sih26">Source on GitHub</a>176 </div>177</footer>178 179<script src="assets/codec.js"></script>180<script src="assets/palette.js"></script>181<script src="assets/data.js"></script>182<script src="assets/render.js"></script>183<script src="assets/explore.js"></script>184</body>185</html>186