Alfred
/
sdr-visual-suite


			
				
					
						
						
							
							<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SDR Spectrum + Waterfall</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <div class="title">SDRplay RSP1b Visualizer</div>
    <div class="meta" id="meta"></div>
  </header>
  <main>
    <section class="panel controls-panel">
      <div class="panel-header">
        <div>Radio Controls</div>
        <div class="panel-subtitle" id="configStatus">Loading...</div>
      </div>
      <div class="controls-grid">
        <label class="control-label" for="centerInput">Center (MHz)</label>
        <div class="control-row">
          <input id="centerInput" type="number" step="0.001" min="0" />
          <div class="preset-row">
            <button class="preset-btn" data-center="7.1">40m</button>
            <button class="preset-btn" data-center="14.1">20m</button>
            <button class="preset-btn" data-center="18.1">17m</button>
          </div>
        </div>

        <label class="control-label" for="spanInput">Span (MHz)</label>
        <div class="control-row">
          <input id="spanInput" type="number" step="0.05" min="0.05" />
        </div>

        <label class="control-label" for="sampleRateSelect">Sample Rate (MHz)</label>
        <div class="control-row">
          <select id="sampleRateSelect">
            <option value="0.5">0.5</option>
            <option value="1.0">1.0</option>
            <option value="1.536">1.536</option>
            <option value="2.048">2.048</option>
            <option value="2.5">2.5</option>
            <option value="3.072">3.072</option>
            <option value="4.096">4.096</option>
          </select>
        </div>

        <label class="control-label" for="bwSelect">Tuner BW (kHz)</label>
        <div class="control-row">
          <select id="bwSelect">
            <option value="200">200</option>
            <option value="300">300</option>
            <option value="600">600</option>
            <option value="1536">1536</option>
            <option value="5000">5000</option>
            <option value="6000">6000</option>
            <option value="7000">7000</option>
            <option value="8000">8000</option>
          </select>
        </div>

        <label class="control-label" for="fftSelect">FFT Size</label>
        <div class="control-row">
          <select id="fftSelect">
            <option value="512">512</option>
            <option value="1024">1024</option>
            <option value="2048">2048</option>
            <option value="4096">4096</option>
            <option value="8192">8192</option>
            <option value="16384">16384</option>
            <option value="32768">32768</option>
            <option value="65536">65536</option>
          </select>
        </div>

        <label class="control-label" for="gainRange">Gain (dB) (higher = more gain)</label>
        <div class="control-row">
          <input id="gainRange" type="range" min="0" max="60" step="1" />
          <input id="gainInput" type="number" min="0" max="60" step="1" />
        </div>

        <label class="control-label" for="thresholdRange">Detector (dB)</label>
        <div class="control-row">
          <input id="thresholdRange" type="range" min="-120" max="0" step="1" />
          <input id="thresholdInput" type="number" min="-120" max="0" step="1" />
        </div>

        <label class="control-label">DSP</label>
        <div class="toggle-row">
          <label class="toggle">
            <input id="agcToggle" type="checkbox" />
            <span>AGC</span>
          </label>
          <label class="toggle">
            <input id="dcToggle" type="checkbox" />
            <span>DC Block</span>
          </label>
          <label class="toggle">
            <input id="iqToggle" type="checkbox" />
            <span>IQ Balance</span>
          </label>
        </div>

        <label class="control-label">Display</label>
        <div class="control-row">
          <select id="avgSelect">
            <option value="0">Averaging Off</option>
            <option value="0.4">Averaging Fast</option>
            <option value="0.2">Averaging Medium</option>
            <option value="0.1">Averaging Slow</option>
          </select>
        </div>
        <div class="toggle-row">
          <label class="toggle">
            <input id="maxHoldToggle" type="checkbox" />
            <span>Max Hold</span>
          </label>
          <button id="maxHoldReset" type="button" class="preset-btn">Reset Max</button>
          <label class="toggle">
            <input id="gpuToggle" type="checkbox" />
            <span>GPU FFT</span>
          </label>
        </div>
      </div>
    </section>
    <section class="panel spectrum-panel">
      <canvas id="spectrum"></canvas>
    </section>
    <section class="panel waterfall-panel">
      <canvas id="waterfall"></canvas>
    </section>
    <section class="panel timeline-panel">
      <div class="panel-header">
        <div>Event Timeline</div>
        <div class="panel-subtitle" id="timelineRange">Waiting for events...</div>
      </div>
      <canvas id="timeline"></canvas>
    </section>
  </main>
  <aside class="drawer" id="eventDrawer" aria-hidden="true">
    <div class="drawer-header">
      <div>Event Detail</div>
      <button class="drawer-close" id="drawerClose" type="button">Close</button>
    </div>
    <div class="drawer-body">
      <div class="detail-grid">
        <div class="detail-label">Center</div>
        <div id="detailCenter">-</div>
        <div class="detail-label">Bandwidth</div>
        <div id="detailBw">-</div>
        <div class="detail-label">Start</div>
        <div id="detailStart">-</div>
        <div class="detail-label">End</div>
        <div id="detailEnd">-</div>
        <div class="detail-label">SNR</div>
        <div id="detailSnr">-</div>
        <div class="detail-label">Duration</div>
        <div id="detailDur">-</div>
      </div>
      <div class="detail-section-title">Latest Spectrogram Slice</div>
      <canvas id="detailSpectrogram"></canvas>
      <div class="detail-section-title">Recorded Clips (placeholder)</div>
      <div class="clips-empty">No clips recorded yet.</div>
    </div>
  </aside>
  <footer>
    <div id="status">Connecting...</div>
  </footer>
  <script src="app.js"></script>
</body>
</html>