Alfred
/
sdr-visual-suite
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
173 Revīzijas
1 Atzars
302MB
Koks: d7b38ad978
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no 'd7b38ad978'
${ noResults }
sdr-visual-suite/web/index.html

387 rindas
23KB
Neapstrādāts Vainot Vēsture 

  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>Spectre UI</title>

  7.   <link rel="preconnect" href="https://fonts.googleapis.com" />

  8.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  9.   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />

  10.   <link rel="stylesheet" href="style.css" />

  11. </head>

  12. <body>

  13.   <div class="shell">

  14. 

  15.     <!-- ═══════════ TOPBAR ═══════════ -->

  16.     <header class="topbar">

  17.       <div class="brand">

  18.         <svg class="brand-mark" width="28" height="28" viewBox="0 0 28 28">

  19.           <circle cx="14" cy="14" r="11" fill="none" stroke="url(#bgrad)" stroke-width="2.2"/>

  20.           <path d="M8 14 Q10.5 6, 14 14 Q17.5 22, 20 14" stroke="url(#bgrad)" stroke-width="1.8" fill="none"/>

  21.           <defs><linearGradient id="bgrad" x1="0" y1="0" x2="28" y2="28"><stop offset="0%" stop-color="#00ffc8"/><stop offset="100%" stop-color="#0090ff"/></linearGradient></defs>

  22.         </svg>

  23.         <div class="brand-text">

  24.           <div class="brand-kicker">SDR Ops Console</div>

  25.           <div class="brand-title">Spectre<span class="brand-thin">UI</span></div>

  26.         </div>

  27.       </div>

  28. 

  29.       <nav class="topbar-center">

  30.         <div class="mode-strip" role="tablist" aria-label="Modes">

  31.           <button class="mode-btn active" data-mode="live" type="button"><span class="mode-dot"></span>Live</button>

  32.           <button class="mode-btn" data-mode="hunt" type="button">Hunt</button>

  33.           <button class="mode-btn" data-mode="review" type="button">Review</button>

  34.           <button class="mode-btn" data-mode="lab" type="button">Lab</button>

  35.         </div>

  36.       </nav>

  37. 

  38.       <div class="topbar-right">

  39.         <div class="ws-badge" id="wsBadge">Connecting</div>

  40.         <div class="top-meta" id="metaLine">Waiting for signal frames…</div>

  41.         <button class="shortcut-btn" id="shortcutToggle" type="button" title="Keyboard shortcuts">

  42.           <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="4" width="12" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M4 7h1M6.5 7h1M9 7h1M3.5 9.5h7" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>

  43.         </button>

  44.       </div>

  45.     </header>

  46. 

  47.     <!-- ═══════════ MAIN LAYOUT ═══════════ -->

  48.     <main class="layout">

  49. 

  50.       <!-- ──── STAGE (left) ──── -->

  51.       <section class="stage panel">

  52.         <div class="stage-head">

  53.           <div>

  54.             <div class="panel-title">RF Panorama</div>

  55.             <div class="panel-sub" id="heroSubtitle">Live spectrum, waterfall and signal overlays</div>

  56.           </div>

  57.           <div class="stage-actions">

  58.             <button class="act-btn" id="followBtn" type="button">Follow</button>

  59.             <button class="act-btn" id="fitBtn" type="button">Fit</button>

  60.             <button class="act-btn" id="resetMaxBtn" type="button">Reset Max</button>

  61.             <label class="pill-toggle pill-toggle--compact"><input id="debugOverlayToggle" type="checkbox" checked /><span class="pt"><span class="pk"></span></span><span class="pl">CFAR/Debug</span></label>

  62.           </div>

  63.         </div>

  64. 

  65.         <!-- Hero Metrics -->

  66.         <div class="hero-metrics" id="heroMetrics">

  67.           <div class="metric"><span class="metric-lbl">Center</span><span class="metric-val" id="metricCenter">-</span></div>

  68.           <div class="metric"><span class="metric-lbl">Span</span><span class="metric-val" id="metricSpan">-</span></div>

  69.           <div class="metric"><span class="metric-lbl">Res</span><span class="metric-val" id="metricRes">-</span></div>

  70.           <div class="metric"><span class="metric-lbl">Signals</span><span class="metric-val metric-val--accent" id="metricSignals">0</span></div>

  71.           <div class="metric"><span class="metric-lbl">GPU</span><span class="metric-val" id="metricGpu">-</span></div>

  72.           <div class="metric"><span class="metric-lbl">Source</span><span class="metric-val" id="metricSource">-</span></div>

  73.         </div>

  74. 

  75.         <!-- Band Navigator -->

  76.         <div class="nav-strip">

  77.           <span class="nav-label">Band navigator</span>

  78.           <canvas id="navCanvas"></canvas>

  79.         </div>

  80. 

  81.         <!-- Spectrum + Waterfall Stack -->

  82.         <div class="viz-stack">

  83.           <div class="viz-card">

  84.             <div class="viz-head">

  85.               <span class="viz-label">Spectrum</span>

  86.               <span class="viz-hint" id="spectrumMeta">Wheel = zoom · Drag = pan · Double-click = reset</span>

  87.               <span class="viz-legend" id="cfarLegend">

  88.                 <span class="legend-swatch"></span>

  89.                 Adaptive CFAR threshold

  90.               </span>

  91.             </div>

  92.             <canvas id="spectrum"></canvas>

  93.             <div class="signal-popover" id="signalPopover" aria-hidden="true"></div>

  94.           </div>

  95.           <div class="viz-card">

  96.             <div class="viz-head"><span class="viz-label">Waterfall</span><span class="viz-hint" id="waterfallMeta">Newest row at top</span></div>

  97.             <canvas id="waterfall"></canvas>

  98.           </div>

  99.         </div>

  100.       </section>

  101. 

  102.       <!-- ──── OPERATOR RAIL (right) ──── -->

  103.       <aside class="rail panel">

  104.         <div class="rail-head">

  105.           <div>

  106.             <div class="panel-title">Operator Rail</div>

  107.             <div class="panel-sub" id="configStatus">Loading config…</div>

  108.           </div>

  109.         </div>

  110. 

  111.         <div class="rail-tabs" role="tablist" aria-label="Control tabs">

  112.           <button class="rail-tab active" data-tab="radio" type="button">Radio</button>

  113.           <button class="rail-tab" data-tab="signals" type="button">Signals</button>

  114.           <button class="rail-tab" data-tab="events" type="button">Events</button>

  115.           <button class="rail-tab" data-tab="health" type="button">Health</button>

  116.           <button class="rail-tab" data-tab="recordings" type="button">Recordings</button>

  117.         </div>

  118. 

  119.         <div class="rail-body">

  120. 

  121.           <!-- ── Radio Tab ── -->

  122.           <section class="tab-panel active" data-panel="radio">

  123.             <div class="form-group">

  124.               <div class="grp-title">Tuning</div>

  125.               <label class="field"><span>Center (MHz)</span><input id="centerInput" type="number" step="0.001" min="0" /></label>

  126.               <div class="preset-row">

  127.                 <button class="preset-btn" data-center="7.1" type="button"><b>40m</b><small>7.1</small></button>

  128.                 <button class="preset-btn" data-center="14.1" type="button"><b>20m</b><small>14.1</small></button>

  129.                 <button class="preset-btn" data-center="18.1" type="button"><b>17m</b><small>18.1</small></button>

  130.                 <button class="preset-btn" data-center="145.5" type="button"><b>2m</b><small>145.5</small></button>

  131.               </div>

  132.               <label class="field"><span>Span (MHz)</span><input id="spanInput" type="number" step="0.05" min="0.01" /></label>

  133.               <div class="field-pair">

  134.                 <label class="field"><span>Sample Rate</span>

  135.                   <select id="sampleRateSelect">

  136.                     <option value="0.5">0.5 MHz</option><option value="1.0">1.0 MHz</option>

  137.                     <option value="1.536">1.536 MHz</option><option value="2.048">2.048 MHz</option>

  138.                     <option value="2.5">2.5 MHz</option><option value="3.072">3.072 MHz</option>

  139.                     <option value="4.096">4.096 MHz</option>

  140.                   </select>

  141.                 </label>

  142.                 <label class="field"><span>Tuner BW</span>

  143.                   <select id="bwSelect">

  144.                     <option value="200">200 kHz</option><option value="300">300 kHz</option>

  145.                     <option value="600">600 kHz</option><option value="1536">1536 kHz</option>

  146.                     <option value="5000">5 MHz</option><option value="6000">6 MHz</option>

  147.                     <option value="7000">7 MHz</option><option value="8000">8 MHz</option>

  148.                   </select>

  149.                 </label>

  150.               </div>

  151.             </div>

  152. 

  153.             <div class="form-group">

  154.               <div class="grp-title">DSP & Display</div>

  155.               <label class="field"><span>FFT Size</span>

  156.                 <select id="fftSelect">

  157.                   <option value="512">512</option><option value="1024">1024</option>

  158.                   <option value="2048">2048</option><option value="4096">4096</option>

  159.                   <option value="8192">8192</option><option value="16384">16384</option>

  160.                   <option value="32768">32768</option>

  161.                   <option value="65536">65536</option>

  162.                 </select>

  163.               </label>

  164.               <div class="slider-field">

  165.                 <span>Gain</span>

  166.                 <div class="slider-row"><input id="gainRange" type="range" min="0" max="60" step="1" /><input id="gainInput" type="number" min="0" max="60" step="1" class="slider-num" /><em>dB</em></div>

  167.               </div>

  168.               <label class="field"><span>Averaging</span>

  169.                 <select id="avgSelect">

  170.                   <option value="0">Off</option><option value="0.4">Fast</option>

  171.                   <option value="0.2">Medium</option>

  172.                   <option value="0.1">Slow</option>

  173.                 </select>

  174.               </label>

  175.               <div class="toggle-grid">

  176.                 <label class="pill-toggle"><input id="agcToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">AGC</span></label>

  177.                 <label class="pill-toggle"><input id="dcToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">DC Block</span></label>

  178.                 <label class="pill-toggle"><input id="iqToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">IQ Bal</span></label>

  179.                 <label class="pill-toggle"><input id="maxHoldToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Max Hold</span></label>

  180.                 <label class="pill-toggle"><input id="gpuToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">GPU FFT</span></label>

  181.               </div>

  182.             </div>

  183. 

  184.             <div class="form-group">

  185.               <div class="grp-title">Detector</div>

  186.               <div class="slider-field">

  187.                 <span>Threshold</span>

  188.                 <div class="slider-row"><input id="thresholdRange" type="range" min="-120" max="0" step="1" class="range--warn" /><input id="thresholdInput" type="number" min="-120" max="0" step="1" class="slider-num" /><em>dB</em></div>

  189.               </div>

  190.               <label class="field"><span>CFAR Guard Cells</span><input id="cfarGuardInput" type="number" step="1" min="0" /></label>

  191.               <label class="field"><span>CFAR Train Cells</span><input id="cfarTrainInput" type="number" step="1" min="1" /></label>

  192.               <label class="field"><span>CFAR Rank</span><input id="cfarRankInput" type="number" step="1" min="1" /></label>

  193.               <label class="field"><span>CFAR Scale (dB)</span><input id="cfarScaleInput" type="number" step="0.5" min="0" /></label>

  194.               <label class="field"><span>Min Duration (ms)</span><input id="minDurationInput" type="number" step="50" min="50" /></label>

  195.               <label class="field"><span>Hold (ms)</span><input id="holdInput" type="number" step="50" min="50" /></label>

  196.               <label class="field"><span>EMA Alpha</span><input id="emaAlphaInput" type="number" step="0.05" min="0" max="1" /></label>

  197.               <label class="field"><span>Hysteresis (dB)</span><input id="hysteresisInput" type="number" step="1" min="0" /></label>

  198.               <label class="field"><span>Min Stable Frames</span><input id="stableFramesInput" type="number" step="1" min="1" /></label>

  199.               <label class="field"><span>Gap Tolerance (ms)</span><input id="gapToleranceInput" type="number" step="50" min="0" /></label>

  200.               <label class="field"><span>Edge Margin (dB)</span><input id="edgeMarginInput" type="number" step="0.5" min="0" /></label>

  201.               <label class="field"><span>CFAR Mode</span>

  202.                 <select id="cfarModeSelect">

  203.                   <option value="OFF">Off</option>

  204.                   <option value="CA">CA (Cell-Averaging)</option>

  205.                   <option value="OS">OS (Ordered-Statistic)</option>

  206.                   <option value="GOSCA">GOSCA (Greatest-Of)</option>

  207.                   <option value="CASO">CASO (Smallest-Of)</option>

  208.                 </select>

  209.               </label>

  210.               <div class="toggle-grid">

  211.                 <label class="pill-toggle"><input id="cfarWrapToggle" type="checkbox" checked /><span class="pt"><span class="pk"></span></span><span class="pl">Wrap-Around</span></label>

  212.               </div>

  213.             </div>

  214. 

  215.             <div class="form-group">

  216.               <div class="grp-title">Recorder</div>

  217.               <div class="toggle-grid">

  218.                 <label class="pill-toggle"><input id="recEnableToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Enabled</span></label>

  219.                 <label class="pill-toggle"><input id="recIQToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Record IQ</span></label>

  220.                 <label class="pill-toggle"><input id="recAudioToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Record Audio</span></label>

  221.                 <label class="pill-toggle"><input id="recDemodToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Auto Demod</span></label>

  222.                 <label class="pill-toggle"><input id="recDecodeToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Auto Decode</span></label>

  223.               </div>

  224.               <label class="field"><span>Min SNR (dB)</span><input id="recMinSNR" type="number" step="1" min="0" /></label>

  225.               <label class="field"><span>Max Disk (MB)</span><input id="recMaxDisk" type="number" step="256" min="0" /></label>

  226.               <label class="field"><span>Class Filter (CSV)</span><input id="recClassFilter" type="text" placeholder="e.g. NFM,USB" /></label>

  227.             </div>

  228.           </section>

  229. 

  230.           <!-- ── Signals Tab ── -->

  231.           <section class="tab-panel" data-panel="signals">

  232.             <div class="list-head"><span class="grp-title">Detected carriers</span><span class="count-pill" id="signalCountBadge">0 live</span></div>

  233.             <div class="signal-list" id="signalList"><div class="empty-state">No live signals yet.</div></div>

  234.             <div class="field-pair">

  235.               <label class="field"><span>Listen sec</span><input id="listenSeconds" type="number" min="1" max="10" step="1" value="2" /></label>

  236.               <label class="field"><span>Listen mode</span>

  237.                 <select id="listenMode" class="ctrl-select">

  238.                   <option value="">Auto</option>

  239.                   <option value="AM">AM</option>

  240.                   <option value="NFM">NFM</option>

  241.                   <option value="WFM">WFM</option>

  242.                   <option value="WFM_STEREO">WFM_STEREO</option>

  243.                   <option value="USB">USB</option>

  244.                   <option value="LSB">LSB</option>

  245.                   <option value="CW">CW</option>

  246.                 </select>

  247.               </label>

  248.             </div>

  249.             <button class="act-btn" id="liveListenBtn" type="button">Live Listen</button>

  250.           </section>

  251. 

  252.           <!-- ── Events Tab ── -->

  253.           <section class="tab-panel" data-panel="events">

  254.             <div class="list-head"><span class="grp-title">Recent events</span><span class="count-pill" id="eventCountBadge">0 stored</span></div>

  255.             <div class="event-list" id="eventList"><div class="empty-state">No events yet.</div></div>

  256.           </section>

  257. 

  258.           <!-- ── Health Tab ── -->

  259.           <section class="tab-panel" data-panel="health">

  260.             <div class="health-grid">

  261.               <div class="health-card"><span class="health-lbl">Buffer</span><span class="health-val" id="healthBuffer">-</span></div>

  262.               <div class="health-card"><span class="health-lbl">Dropped</span><span class="health-val" id="healthDropped">-</span></div>

  263.               <div class="health-card"><span class="health-lbl">Resets</span><span class="health-val" id="healthResets">-</span></div>

  264.               <div class="health-card"><span class="health-lbl">Age</span><span class="health-val" id="healthAge">-</span></div>

  265.               <div class="health-card health-card--wide"><span class="health-lbl">GPU status</span><span class="health-val" id="healthGpu">-</span></div>

  266.               <div class="health-card health-card--wide"><span class="health-lbl">Render rate</span><span class="health-val" id="healthFps">-</span></div>

  267.             </div>

  268.           </section>

  269. 

  270.           <section class="tab-panel" data-panel="recordings">

  271.             <div class="list-head"><span class="grp-title">Recordings</span><span class="count-pill" id="recordingCountBadge">0</span></div>

  272.             <div class="event-list" id="recordingList"><div class="empty-state">No recordings yet.</div></div>

  273.           </section>

  274.         </div>

  275.       </aside>

  276. 

  277.       <!-- ──── TIMELINE (bottom) ──── -->

  278.       <section class="tl-panel panel">

  279.         <div class="tl-head">

  280.           <div>

  281.             <div class="panel-title">Activity Timeline</div>

  282.             <div class="panel-sub" id="timelineRange">Waiting for events…</div>

  283.           </div>

  284.           <div class="tl-actions">

  285.             <button class="act-btn" id="timelineFollowBtn" type="button">Follow</button>

  286.             <button class="act-btn" id="timelineFreezeBtn" type="button">Freeze</button>

  287.           </div>

  288.         </div>

  289.         <div class="tl-stack">

  290.           <div class="viz-card viz-card--compact">

  291.             <div class="viz-head"><span class="viz-label">Occupancy strip</span><span class="viz-hint">Band activity density</span></div>

  292.             <canvas id="occupancy"></canvas>

  293.           </div>

  294.           <div class="viz-card">

  295.             <div class="viz-head"><span class="viz-label">Event blocks</span><span class="viz-hint">Click block → inspector</span></div>

  296.             <canvas id="timeline"></canvas>

  297.           </div>

  298.         </div>

  299.       </section>

  300.     </main>

  301. 

  302.     <!-- ═══════════ INSPECTOR DRAWER ═══════════ -->

  303.     <aside class="inspector" id="eventDrawer" aria-hidden="true">

  304.       <div class="insp-head">

  305.         <div>

  306.           <div class="panel-title">Signal Inspector</div>

  307.           <div class="panel-sub" id="detailSubtitle">No event selected</div>

  308.         </div>

  309.         <div class="insp-actions">

  310.           <button class="act-btn" id="jumpToEventBtn" type="button">Go to freq</button>

  311.           <select id="decodeMode" class="ctrl-select">

  312.             <option value="FT8">FT8</option>

  313.             <option value="WSPR">WSPR</option>

  314.             <option value="DMR">DMR</option>

  315.             <option value="D-STAR">D-STAR</option>

  316.             <option value="FSK">FSK</option>

  317.             <option value="PSK">PSK</option>

  318.           </select>

  319.           <button class="act-btn" id="exportEventBtn" type="button">Export</button>

  320.           <button class="act-btn" id="liveListenEventBtn" type="button">Listen</button>

  321.           <button class="act-btn" id="decodeEventBtn" type="button">Decode</button>

  322.           <button class="act-btn act-btn--danger" id="drawerClose" type="button">Close</button>

  323.         </div>

  324.       </div>

  325.       <div class="insp-body">

  326.         <div class="detail-grid">

  327.           <div class="detail-item"><span class="detail-label">Center</span><span id="detailCenter">-</span></div>

  328.           <div class="detail-item"><span class="detail-label">Bandwidth</span><span id="detailBw">-</span></div>

  329.           <div class="detail-item"><span class="detail-label">Start</span><span id="detailStart">-</span></div>

  330.           <div class="detail-item"><span class="detail-label">End</span><span id="detailEnd">-</span></div>

  331.           <div class="detail-item"><span class="detail-label">SNR</span><span id="detailSnr">-</span></div>

  332.           <div class="detail-item"><span class="detail-label">Duration</span><span id="detailDur">-</span></div>

  333.           <div class="detail-item"><span class="detail-label">Class</span><span id="detailClass">-</span></div>

  334.         </div>

  335.         <div class="viz-card insp-viz">

  336.           <div class="viz-head"><span class="viz-label">Local spectrum slice</span><span class="viz-hint">Around selected event</span></div>

  337.           <canvas id="detailSpectrogram"></canvas>

  338.         </div>

  339.         <div class="insp-note">Ready for: IQ snippets, clip playback, bookmarks, annotations.</div>

  340.         <div class="insp-note" id="recordingMeta">Recording: -</div>

  341.         <div class="insp-note" id="decodeResult">Decode: -</div>

  342.         <div class="insp-note" id="classifierScores">Classifier scores: -</div>

  343.         <div class="insp-note">

  344.           <a id="recordingMetaLink" href="#" target="_blank">meta.json</a> ·

  345.           <a id="recordingIQLink" href="#" target="_blank">IQ</a> ·

  346.           <a id="recordingAudioLink" href="#" target="_blank">Audio</a>

  347.         </div>

  348.       </div>

  349.     </aside>

  350. 

  351.     <!-- ═══════════ KEYBOARD OVERLAY ═══════════ -->

  352.     <div class="kb-overlay" id="kbOverlay">

  353.       <div class="kb-card">

  354.         <div class="kb-title">Keyboard Shortcuts</div>

  355.         <div class="kb-grid">

  356.           <kbd>Space</kbd><span>Follow live</span>

  357.           <kbd>F</kbd><span>Fit view</span>

  358.           <kbd>M</kbd><span>Toggle max hold</span>

  359.           <kbd>G</kbd><span>Toggle GPU FFT</span>

  360.           <kbd>[ ]</kbd><span>Zoom in/out</span>

  361.           <kbd>← →</kbd><span>Pan left/right</span>

  362.           <kbd>?</kbd><span>This overlay</span>

  363.         </div>

  364.         <button class="act-btn kb-close" id="kbClose" type="button">Close</button>

  365.       </div>

  366.     </div>

  367. 

  368.   </div>

  369.   <script src="app.js"></script>

  370.   <script>

  371.     // Keyboard overlay toggle (new feature)

  372.     const kbOverlay = document.getElementById('kbOverlay');

  373.     const kbClose = document.getElementById('kbClose');

  374.     const kbToggle = document.getElementById('shortcutToggle');

  375.     function toggleKb() { kbOverlay.classList.toggle('open'); }

  376.     kbToggle.addEventListener('click', toggleKb);

  377.     kbClose.addEventListener('click', toggleKb);

  378.     window.addEventListener('keydown', (e) => {

  379.       if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;

  380.       if (e.key === '?') { e.preventDefault(); toggleKb(); }

  381.       if (e.key === 'Escape' && kbOverlay.classList.contains('open')) toggleKb();

  382.     });

  383.   </script>

  384. </body>

  385. </html>