mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
183 lines
12 KiB
HTML
183 lines
12 KiB
HTML
<div id="left-panel-stack">
|
||
<!-- Data Layer Toggle Panel -->
|
||
<div id="data-panel" class="panel-collapsible collapsed active" data-panel-id="data-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="data-panel-inner">
|
||
<div class="panel-header">
|
||
<span class="panel-title" data-i18n>DATA LAYERS</span>
|
||
<span class="panel-divider"></span>
|
||
<button class="panel-collapse-btn" data-collapse-target="data-panel" title="Collapse panel" data-i18n-title>+</button>
|
||
</div>
|
||
<div id="data-toggles" class="data-toggle-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CCTV Coverage Panel -->
|
||
<div id="cctv-panel" class="panel-collapsible collapsed" data-panel-id="cctv-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="cctv-panel-inner" data-rail-scroller>
|
||
<div class="panel-header">
|
||
<span class="panel-title" data-i18n>CCTV</span>
|
||
<span class="panel-divider"></span>
|
||
<button class="panel-collapse-btn" data-collapse-target="cctv-panel" title="Collapse panel" data-i18n-title>+</button>
|
||
</div>
|
||
<div class="cyber-panel-body" data-rail-scroller>
|
||
<div id="cctv-frame-wrap" class="cctv-frame-wrap">
|
||
<span class="cctv-frame-caption" aria-hidden="true" data-i18n>ACQUIRING FRAME</span>
|
||
<img id="cctv-frame" alt="CCTV feed frame" />
|
||
<canvas id="cctv-video" class="cctv-frame" hidden></canvas>
|
||
</div>
|
||
<div id="cctv-source-badge" role="status" aria-live="polite" data-i18n>SOURCE · UNKNOWN</div>
|
||
<div id="cctv-meta" data-i18n>Enable CCTV to load camera intersections</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-enable-btn" class="scene-btn" data-i18n>CCTV OFF</button>
|
||
<button id="cctv-nearest-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEAREST</button>
|
||
</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-prev-btn" type="button" class="gev-action-button scene-btn" data-i18n>PREV</button>
|
||
<select id="cctv-camera-select" aria-label="CCTV camera" data-i18n-aria-label></select>
|
||
<button id="cctv-next-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEXT</button>
|
||
</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-focus-btn" type="button" class="gev-action-button scene-btn" data-i18n>FOCUS</button>
|
||
<button id="cctv-coverage-btn" class="scene-btn" data-i18n>COVERAGE OFF</button>
|
||
<button id="cctv-auto-hop-btn" class="scene-btn" data-i18n>AUTO HOP OFF</button>
|
||
</div>
|
||
<div class="cctv-controls">
|
||
<button id="cctv-projection-btn" class="scene-btn" data-i18n>PROJECTION ON</button>
|
||
<span id="cctv-quality-chip" data-i18n-runtime>CAL · --</span>
|
||
</div>
|
||
<div class="cctv-calibration-block">
|
||
<div class="cctv-calibration-header">
|
||
<div class="cctv-summary-label" data-i18n>CALIBRATION</div>
|
||
<button id="cctv-adjust-btn" class="scene-btn" title="Drag the camera in the world: rings rotate, arrows move, handles set range/FOV" data-i18n-title data-i18n>ADJUST</button>
|
||
</div>
|
||
<div id="cctv-cal-readout" class="cctv-cal-readout" aria-label="Camera pose — click a value to type" data-i18n-aria-label>
|
||
<button class="cctv-cal-value" data-cal-field="heading" title="Heading (compass °) — click to type" data-i18n-title data-i18n-runtime>HDG --</button>
|
||
<button class="cctv-cal-value" data-cal-field="pitch" title="Pitch (° up/down) — click to type" data-i18n-title data-i18n-runtime>PITCH --</button>
|
||
<button class="cctv-cal-value" data-cal-field="fov" title="Horizontal FOV (°) — click to type" data-i18n-title data-i18n-runtime>FOV --</button>
|
||
<button class="cctv-cal-value" data-cal-field="range" title="Range / monitor-plane distance (m) — click to type" data-i18n-title data-i18n-runtime>RANGE --</button>
|
||
<button class="cctv-cal-value" data-cal-field="height" title="Mount height above ground (m) — click to type" data-i18n-title data-i18n-runtime>HGT --</button>
|
||
<button class="cctv-cal-value" data-cal-field="north" title="North offset from catalog position (m) — click to type" data-i18n-title>ΔN --</button>
|
||
<button class="cctv-cal-value" data-cal-field="east" title="East offset from catalog position (m) — click to type" data-i18n-title>ΔE --</button>
|
||
</div>
|
||
<div class="cctv-controls cctv-calibration-actions">
|
||
<button id="cctv-calib-save-btn" type="button" class="gev-action-button scene-btn" data-i18n>SAVE CAL</button>
|
||
<button id="cctv-calib-reset-btn" type="button" class="gev-action-button scene-btn" data-i18n>RESET CAL</button>
|
||
</div>
|
||
</div>
|
||
<div class="cctv-summary-label" data-i18n>SCENE SUMMARY</div>
|
||
<div id="cctv-summary" data-i18n>Enable CCTV to start camera-linked intelligence summaries.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Street Level Panel (moved into #right-context-rail at runtime) -->
|
||
<div id="street-level-panel" class="panel-collapsible collapsed" data-panel-id="street-level-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="street-level-panel-inner" data-rail-scroller>
|
||
<div class="panel-header">
|
||
<span class="panel-title" data-i18n>STREET LEVEL</span>
|
||
<span class="panel-divider"></span>
|
||
<button id="sl-status" class="sl-status" type="button" aria-pressed="false" title="Turn Street Level on or off" data-i18n-title data-i18n>OFF</button>
|
||
<button class="panel-collapse-btn" data-collapse-target="street-level-panel" title="Expand panel" data-i18n-title>◀</button>
|
||
</div>
|
||
<div id="sl-body" class="sl-body">
|
||
<div id="sl-viewer-wrap" class="sl-viewer-wrap" hidden>
|
||
<div class="sl-viewer-bar">
|
||
<div class="sl-viewer-tools">
|
||
<button id="sl-viewer-expand" class="scene-btn" type="button" aria-pressed="false" title="Show the street-level view full screen (Esc shrinks it)" data-i18n-title><span class="sl-btn-icon" aria-hidden="true">⤢</span><span class="sl-btn-text" data-i18n>EXPAND</span></button>
|
||
<div class="gev-segmented sl-seg" role="radiogroup" aria-label="Image fit" data-i18n-aria-label>
|
||
<button type="button" class="gev-segment sl-seg-btn is-active" data-sl-render="letterbox" role="radio" aria-checked="true" title="Fit: show the whole photo, with dark bars where its shape differs from the frame" data-i18n-title data-i18n>FIT</button>
|
||
<button type="button" class="gev-segment sl-seg-btn" data-sl-render="fill" role="radio" aria-checked="false" tabindex="-1" title="Fill: fill the frame edge to edge, cropping the photo" data-i18n-title data-i18n>FILL</button>
|
||
</div>
|
||
</div>
|
||
<div class="sl-viewer-tools sl-viewer-tools-right">
|
||
<button id="sl-viewer-close" class="sl-viewer-x" type="button" title="Close the image and deselect it on the map" aria-label="Close the street-level image" data-i18n-title data-i18n-aria-label>×</button>
|
||
</div>
|
||
</div>
|
||
<div class="sl-viewer-stage">
|
||
<div id="sl-viewer-placeholder" class="sl-viewer-placeholder" hidden></div>
|
||
<div id="sl-viewer" class="sl-viewer" aria-label="Street-level viewer" data-i18n-aria-label></div>
|
||
</div>
|
||
<div id="sl-image-meta" class="sl-image-meta">
|
||
<span id="sl-image-by" class="sl-image-by"></span>
|
||
<span class="sl-image-right">
|
||
<span id="sl-image-when" class="sl-image-when"></span>
|
||
<a id="sl-image-link" class="sl-image-link" href="#" target="_blank" rel="noopener noreferrer" title="Open this image on the provider's site" data-i18n-title hidden></a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="sl-providers" role="group" aria-label="Imagery providers" data-i18n-aria-label>
|
||
<span class="cctv-summary-label" data-i18n>PROVIDERS</span>
|
||
<div id="sl-provider-chips" class="sl-chips"></div>
|
||
</div>
|
||
<div id="sl-error" class="sl-error" role="alert" hidden><span aria-hidden="true">⚠</span> <span id="sl-error-text"></span></div>
|
||
<!-- A missing key gates the filters only: the chips above stay
|
||
focusable so their tooltip can say how to add the key. -->
|
||
<fieldset id="sl-controls" class="sl-controls">
|
||
<div id="sl-pano-row" class="sl-filters" role="group" aria-label="Imagery filters" data-i18n-aria-label>
|
||
<span class="cctv-summary-label" data-i18n>IMAGERY</span>
|
||
<div class="gev-segmented sl-seg" role="radiogroup" aria-label="Panorama filter" data-i18n-aria-label>
|
||
<button type="button" class="gev-segment sl-seg-btn is-active" data-sl-pano="all" role="radio" aria-checked="true" data-i18n>ALL</button>
|
||
<button type="button" class="gev-segment sl-seg-btn" data-sl-pano="pano" role="radio" aria-checked="false" tabindex="-1">360°</button>
|
||
<button type="button" class="gev-segment sl-seg-btn" data-sl-pano="flat" role="radio" aria-checked="false" tabindex="-1" data-i18n>FLAT</button>
|
||
</div>
|
||
</div>
|
||
<div id="sl-since-row" class="sl-since">
|
||
<label class="cctv-summary-label" for="sl-since" data-i18n>SINCE</label>
|
||
<input id="sl-since" class="sl-range" type="range" min="0" max="8" step="1" value="0" aria-valuetext="ANY DATE" aria-describedby="sl-since-label sl-since-note" />
|
||
<span class="sl-since-value">
|
||
<output id="sl-since-label" class="sl-since-label" for="sl-since" data-i18n>ANY DATE</output>
|
||
<small id="sl-since-note" class="sl-since-note" hidden></small>
|
||
</span>
|
||
</div>
|
||
</fieldset>
|
||
<!-- The hint says how to open imagery; the button does it without a pointer. -->
|
||
<div class="sl-meta-row">
|
||
<div id="sl-coverage-meta" class="sl-meta"></div>
|
||
<button id="sl-nearest-btn" class="scene-btn sl-nearest-btn" type="button" hidden data-i18n-runtime>OPEN STREET VIEW</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scene Director Panel -->
|
||
<div id="scene-panel" class="panel-collapsible collapsed" data-panel-id="scene-panel">
|
||
<div class="panel-glow"></div>
|
||
<div class="scene-panel-inner">
|
||
<div class="panel-header">
|
||
<span class="panel-title" data-i18n>SCENES</span>
|
||
<span class="panel-divider"></span>
|
||
<button class="panel-collapse-btn" data-collapse-target="scene-panel" title="Collapse panel" data-i18n-title>+</button>
|
||
</div>
|
||
<div class="scene-controls">
|
||
<select id="scene-select" aria-label="Scene recipe" data-i18n-aria-label></select>
|
||
<button id="scene-new-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEW</button>
|
||
<button id="scene-delete-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" data-i18n>DEL</button>
|
||
</div>
|
||
<div class="scene-controls">
|
||
<button id="scene-capture-btn" type="button" class="gev-action-button scene-btn" data-i18n>CAPTURE SHOT</button>
|
||
<button id="scene-update-shot-btn" type="button" class="gev-action-button scene-btn" data-i18n>UPDATE SHOT</button>
|
||
</div>
|
||
<div id="scene-shot-list" class="scene-shot-list"></div>
|
||
<div class="scene-controls">
|
||
<button id="scene-start-btn" type="button" class="gev-action-button scene-btn" data-i18n>START</button>
|
||
<button id="scene-stop-btn" type="button" class="gev-action-button gev-action-button--danger scene-btn scene-btn-danger" data-i18n>STOP</button>
|
||
<button id="scene-next-btn" type="button" class="gev-action-button scene-btn" data-i18n>NEXT</button>
|
||
</div>
|
||
<div class="scene-controls">
|
||
<button id="scene-export-btn" type="button" class="gev-action-button scene-btn" data-i18n>EXPORT PRESETS</button>
|
||
<button id="scene-import-btn" type="button" class="gev-action-button scene-btn" data-i18n>IMPORT</button>
|
||
<button id="scene-download-btn" type="button" class="gev-action-button scene-btn" data-i18n>RUN LOG</button>
|
||
<input type="file" id="scene-import-file" accept="application/json,.json" hidden />
|
||
</div>
|
||
<div class="scene-progress">
|
||
<div id="scene-progress-fill">0%</div>
|
||
</div>
|
||
<div id="scene-status" data-i18n>Ready</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|