mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
Mazeyar Moeini Feizabadi
5ea6d81310
Normalize GeoJSON ground footprints, preserve explicit KML track heights, and tessellate ground paths before native loading. Validate coordinates, geometry types and decoded image budgets before allocating native resources; strip loader-sensitive metadata and settle deferred failures and cancellation. Render static pins in owned billboard collections instead of walking tens of thousands of point entities each frame. Refine nearby ground heights in batches, isolate imported pins from height picks, and release owned resources and point selections on removal. Use safe ray origins above a hidden coarse globe and retain valid mesh heights outside the current footprint. Frame complete geometry with viewport-aware nadir arrivals, including walls and rotated overlays; respect camera gestures and accept document file drops. Strengthen real-loader, native 3D Tiles, paint, clock and lifecycle coverage. Addresses both P1 and all 25 P2 findings in the follow-up review of #1122.
192 lines
13 KiB
HTML
192 lines
13 KiB
HTML
<!-- Post-processing toggles (top-right) -->
|
||
<div id="pp-toggles" class="panel-collapsible collapsed" data-panel-id="pp-toggles">
|
||
<div class="compact pp-header-row">
|
||
<span class="pp-header-label">DISPLAY</span>
|
||
<span class="panel-divider" aria-hidden="true"></span>
|
||
<button class="panel-collapse-btn pp-collapse-btn" data-collapse-target="pp-toggles" title="Collapse panel">◀</button>
|
||
</div>
|
||
<div class="pp-panel-body" data-rail-scroller>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="hud-toggle" title="Intelligence HUD (H)">
|
||
<span class="pp-icon">◎</span>
|
||
<span class="pp-label">HUD</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="hud-layout-row">
|
||
<span class="pp-slider-mini-label">Layout</span>
|
||
<select id="hud-layout-select" class="pp-select" aria-label="HUD layout">
|
||
<option value="tactical">Tactical</option>
|
||
<option value="operator">Operator</option>
|
||
<option value="minimal">Minimal</option>
|
||
<option value="cyber">Cyber</option>
|
||
</select>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-toggle-row" id="cyber-sonar-row">
|
||
<span class="pp-slider-mini-label">Sonar</span>
|
||
<button class="pp-mode-btn active" id="cyber-sonar-toggle" title="Cyber sonar contact scanner" aria-label="Cyber sonar contact scanner" aria-pressed="true">ON</button>
|
||
</div>
|
||
<output id="cyber-sonar-status" class="cyber-sonar-control" role="status"></output>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-rings-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-rings">Rings</label>
|
||
<input type="range" class="pp-slider" id="cyber-sonar-rings" min="3" max="12" step="1" value="8" aria-label="Sonar ring count" />
|
||
<span class="pp-slider-value" id="cyber-sonar-rings-value">8</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-range-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-range">Range</label>
|
||
<input type="range" class="pp-slider" id="cyber-sonar-range" min="60" max="120" step="1" value="100" aria-label="Sonar ring range" />
|
||
<span class="pp-slider-value" id="cyber-sonar-range-value">100%</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-intensity-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-intensity">Power</label>
|
||
<input type="range" class="pp-slider" id="cyber-sonar-intensity" min="0" max="100" step="1" value="70" aria-label="Sonar intensity" />
|
||
<span class="pp-slider-value" id="cyber-sonar-intensity-value">70%</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-opacity-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-opacity">Opacity</label>
|
||
<input type="range" class="pp-slider" id="cyber-sonar-opacity" min="35" max="100" step="1" value="84" aria-label="Cyber contact and label opacity" title="Minimum opacity for map dots, icons, models, brackets, and labels between sonar passes" />
|
||
<span class="pp-slider-value" id="cyber-sonar-opacity-value">84%</span>
|
||
</div>
|
||
<div class="pp-slider-row cyber-sonar-control cyber-sonar-setting" id="cyber-sonar-sector-row">
|
||
<label class="pp-slider-mini-label" for="cyber-sonar-sector">Sector</label>
|
||
<input type="range" class="pp-slider" id="cyber-sonar-sector" min="8" max="60" step="1" value="24" aria-label="Sonar sector width" />
|
||
<span class="pp-slider-value" id="cyber-sonar-sector-value">24°</span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="detection-toggle" title="Detection Overlay (D)" aria-label="Detection overlay" aria-pressed="false">
|
||
<span class="pp-icon">▣</span>
|
||
<span class="pp-label">DETECT</span>
|
||
</button>
|
||
<div class="pp-slider-row detection-slider-row" id="detection-slider-row">
|
||
<label class="pp-slider-mini-label" for="detection-density-slider">Density</label>
|
||
<input type="range" class="pp-slider" id="detection-density-slider" min="0" max="100" step="25" value="50" aria-label="Detection label density" />
|
||
<span class="pp-slider-value" id="detection-density-value">50%</span>
|
||
</div>
|
||
<div class="pp-slider-row detection-allocation-row" id="detection-allocation-row">
|
||
<span class="pp-slider-mini-label">Allocation</span>
|
||
<div class="pp-mode-seg detection-allocation-seg" role="radiogroup" aria-label="Detection label allocation">
|
||
<button class="pp-mode-btn active" id="detection-allocation-elastic" data-allocation="ELASTIC" role="radio" aria-checked="true">Elastic</button>
|
||
<button class="pp-mode-btn" id="detection-allocation-weighted" data-allocation="WEIGHTED" role="radio" aria-checked="false">Weighted</button>
|
||
</div>
|
||
</div>
|
||
<div class="pp-slider-row detection-fade-row" id="detection-fade-row">
|
||
<label class="pp-slider-mini-label" for="detection-fade-slider">Fade</label>
|
||
<input type="range" class="pp-slider" id="detection-fade-slider" min="0" max="40" step="1" value="7" aria-label="Detection fade distance" title="World-overlay fade distance outside the keyhole as a percentage of its radius" />
|
||
<span class="pp-slider-value" id="detection-fade-value">7%</span>
|
||
</div>
|
||
<div class="pp-slider-row detection-opacity-row" id="detection-opacity-row">
|
||
<label class="pp-slider-mini-label" for="detection-opacity-slider">Outside</label>
|
||
<input type="range" class="pp-slider" id="detection-opacity-slider" min="0" max="100" step="1" value="1" aria-label="Detection opacity outside the keyhole" title="World-overlay label and card opacity beyond the fade distance" />
|
||
<span class="pp-slider-value" id="detection-opacity-value">1%</span>
|
||
</div>
|
||
</div>
|
||
<!-- The one shared preset-parameter surface is inserted here at runtime. -->
|
||
<div id="param-slider-panel">
|
||
<div class="param-panel-header">
|
||
<span class="param-panel-title">PARAMETERS</span>
|
||
<span class="param-panel-divider"></span>
|
||
<button class="panel-collapse-btn" id="param-panel-collapse-btn" data-collapse-target="param-slider-panel" title="Collapse panel">−</button>
|
||
</div>
|
||
<div id="param-sliders"></div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<!-- 3D aircraft is DEFAULT-ON in Proximity (owner directive 2026-08-22), so the
|
||
button ships lit and the mode row ships open — the same markup-carries-the-default
|
||
convention as #scope-toggle. ui.js re-syncs both from durable layer state, which
|
||
is what flips them back for a share link or a stored session carrying 3D off. -->
|
||
<button class="pp-toggle-btn active" id="models3d-toggle" aria-pressed="true" title="3D aircraft — flat icons zoomed out, 3D models up close">
|
||
<span class="pp-icon">✈</span>
|
||
<span class="pp-label">3D</span>
|
||
</button>
|
||
<div class="pp-slider-row visible" id="models3d-mode-row">
|
||
<span class="pp-slider-mini-label">Models</span>
|
||
<div class="pp-mode-seg" role="radiogroup" aria-label="3D model coverage">
|
||
<button class="pp-mode-btn active" id="models3d-mode-proximity" data-mode="proximity" role="radio" aria-checked="true">Proximity</button>
|
||
<button class="pp-mode-btn" id="models3d-mode-all" data-mode="all" role="radio" aria-checked="false">All</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn active" id="scope-toggle" title="Scope — the circular viewport mask" aria-pressed="true">
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">adjust</span>
|
||
<span class="pp-label">Scope</span>
|
||
</button>
|
||
<div class="pp-slider-row visible" id="scope-slider-row">
|
||
<span class="pp-slider-mini-label">Feather</span>
|
||
<!-- Feather starts at an 11% soft scope-mask edge (owner final lock
|
||
2026-08-24, superseding the 08-22 hard-crop and 08-23 8% rulings);
|
||
mirrors SCOPE_FEATHER_RATIO_DEFAULT in src/scopeMask.js. Feather
|
||
softens the black mask edge; label fading is the separate Fade
|
||
slider. -->
|
||
<input type="range" class="pp-slider" id="scope-feather-slider" min="0" max="100" value="11" aria-label="Scope edge feather" title="Scope edge feather as a percentage of the keyhole radius" />
|
||
<span class="pp-slider-value" id="scope-feather-value">11%</span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="draw-toggle" title="Draw on the world — click vertices, double-click or Enter to finish, Esc to cancel" aria-pressed="false">
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">draw</span>
|
||
<span class="pp-label">Draw</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="draw-mode-row">
|
||
<span class="pp-slider-mini-label">Shape</span>
|
||
<div class="pp-mode-seg" role="radiogroup" aria-label="Shape to draw">
|
||
<button class="pp-mode-btn active" data-shape="area" role="radio" aria-checked="true">Area</button>
|
||
<button class="pp-mode-btn" data-shape="line" role="radio" aria-checked="false">Line</button>
|
||
<button class="pp-mode-btn" data-shape="pin" role="radio" aria-checked="false">Pin</button>
|
||
</div>
|
||
</div>
|
||
<div class="pp-slider-row" id="draw-label-row">
|
||
<input type="text" class="pp-text-input" id="draw-label-input" maxlength="120" placeholder="Label (optional)" aria-label="Label for the drawn shape" autocomplete="off" spellcheck="false">
|
||
<select class="pp-select draw-color-select" id="draw-color-select" aria-label="Colour of the drawn shape">
|
||
<option value="primary">Primary</option>
|
||
<option value="amber">Amber</option>
|
||
<option value="cyan">Cyan</option>
|
||
<option value="green">Green</option>
|
||
<option value="red">Red</option>
|
||
</select>
|
||
<button class="pp-mode-btn draw-clear-btn" id="draw-clear" type="button" title="Remove every mark from the board">Clear</button>
|
||
<span class="draw-hint" id="draw-hint" aria-live="polite"></span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group" id="geo-import-group">
|
||
<button class="pp-toggle-btn" id="geo-import-button" type="button" title="Show your own GeoJSON, KML, KMZ or GPX files on the globe (or drop them onto it). File bytes stay on this device; overlays can appear in map screenshots shared with voice.">
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">upload_file</span>
|
||
<span class="pp-label">Import</span>
|
||
</button>
|
||
<input type="file" id="geo-import-input" accept=".geojson,.json,.kml,.kmz,.gpx" multiple hidden aria-label="Choose GeoJSON, KML, KMZ or GPX files">
|
||
<ul class="geo-import-list" id="geo-import-list" aria-label="Imported files"></ul>
|
||
<span class="draw-hint geo-import-hint" id="geo-import-hint" aria-live="polite"></span>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="celestial-toggle" title="Celestial ring — reveal the full globe" aria-pressed="false">
|
||
<span class="pp-icon material-symbols-outlined" aria-hidden="true">flare</span>
|
||
<span class="pp-label">Celestial</span>
|
||
</button>
|
||
</div>
|
||
<button class="pp-toggle-btn" id="clean-view-toggle" title="Hide UI chrome">
|
||
<span class="pp-icon">□</span>
|
||
<span class="pp-label">Clean UI</span>
|
||
</button>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="bloom-toggle" title="Bloom / Glow">
|
||
<span class="pp-icon">✨</span>
|
||
<span class="pp-label">Bloom</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="bloom-slider-row">
|
||
<input type="range" class="pp-slider" id="bloom-intensity-slider" min="0" max="200" value="0" aria-label="Bloom intensity" />
|
||
<span class="pp-slider-value" id="bloom-intensity-value">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="pp-toggle-group">
|
||
<button class="pp-toggle-btn" id="sharpen-toggle" title="Sharpening">
|
||
<span class="pp-icon">🔍</span>
|
||
<span class="pp-label">Sharpen</span>
|
||
</button>
|
||
<div class="pp-slider-row" id="sharpen-slider-row">
|
||
<input type="range" class="pp-slider" id="sharpen-intensity-slider" min="0" max="100" value="49" aria-label="Sharpen intensity" />
|
||
<span class="pp-slider-value" id="sharpen-intensity-value">49%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button id="clean-view-exit" title="Return UI controls">EXIT CLEAN VIEW</button>
|