Add shared waterfall UI across SDR modes

This commit is contained in:
Smittix
2026-02-07 19:18:57 +00:00
committed by Mitch Ross
parent 091ca79a66
commit be61782962
2 changed files with 56 additions and 117 deletions
@@ -64,105 +64,4 @@
</div>
</div>
<!-- Waterfall Controls -->
<div class="section">
<h3>Waterfall</h3>
<div class="form-group" style="margin-bottom: 6px;">
<label style="font-size: 10px;">Start (MHz)</label>
<input type="number" id="waterfallStartFreq" value="88" step="0.1" style="width: 100%; padding: 5px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-size: 11px;">
</div>
<div class="form-group" style="margin-bottom: 6px;">
<label style="font-size: 10px;">End (MHz)</label>
<input type="number" id="waterfallEndFreq" value="108" step="0.1" style="width: 100%; padding: 5px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-size: 11px;">
</div>
<div class="form-group" style="margin-bottom: 6px;">
<label style="font-size: 10px;">Bin Size</label>
<select id="waterfallBinSize" style="width: 100%; padding: 5px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-size: 11px;">
<option value="5000">5 kHz</option>
<option value="10000" selected>10 kHz</option>
<option value="25000">25 kHz</option>
<option value="100000">100 kHz</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label style="font-size: 10px;">Gain</label>
<input type="number" id="waterfallGain" value="40" min="0" max="50" style="width: 100%; padding: 5px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-size: 11px;">
</div>
<button class="run-btn" id="startWaterfallBtn" onclick="startWaterfall()" style="width: 100%; padding: 8px;">Start Waterfall</button>
<button class="stop-btn" id="stopWaterfallBtn" onclick="stopWaterfall()" style="display: none; width: 100%; padding: 8px; margin-top: 4px;">Stop Waterfall</button>
</div>
<!-- Antenna Guide -->
<div class="section">
<h3>Antenna Guide</h3>
<div style="font-size: 11px; color: var(--text-dim); line-height: 1.5;">
<p style="margin-bottom: 8px; color: var(--accent-cyan); font-weight: 600;">
Wideband listening &mdash; antenna choice depends on your target frequency
</p>
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; margin-bottom: 10px;">
<strong style="color: var(--accent-cyan); font-size: 12px;">Stock Telescopic Antenna</strong>
<ul style="margin: 6px 0 0 14px; padding: 0;">
<li><strong style="color: var(--text-primary);">Best range:</strong> 800 MHz&ndash;1.2 GHz (tuned near 1 GHz)</li>
<li><strong style="color: var(--text-primary);">Usable for:</strong> Airband, trunked radio, cell bands</li>
<li><strong style="color: var(--text-primary);">Poor below:</strong> ~400 MHz (too short for VHF/lower UHF)</li>
</ul>
</div>
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; margin-bottom: 10px;">
<strong style="color: #00ff88; font-size: 12px;">Discone (Best All-rounder &mdash; ~$30-50)</strong>
<ul style="margin: 6px 0 0 14px; padding: 0;">
<li><strong style="color: var(--text-primary);">Coverage:</strong> ~25 MHz to 1.3 GHz continuous</li>
<li><strong style="color: var(--text-primary);">Gain:</strong> ~2 dBi (modest but consistent across bands)</li>
<li><strong style="color: var(--text-primary);">Polarization:</strong> Vertical omnidirectional</li>
<li><strong style="color: var(--text-primary);">Placement:</strong> Outdoors, as high as possible</li>
</ul>
<p style="margin-top: 6px; color: var(--text-dim); font-style: italic;">
Ideal for scanning &mdash; covers VHF, UHF, airband, marine, public safety, and more in one antenna.
</p>
</div>
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; margin-bottom: 10px;">
<strong style="color: var(--accent-cyan); font-size: 12px;">Tuned Antenna (Best for One Band)</strong>
<ul style="margin: 6px 0 0 14px; padding: 0;">
<li><strong style="color: var(--text-primary);">Formula:</strong> Element length (cm) = 7500 / frequency (MHz)</li>
<li><strong style="color: var(--text-primary);">Example:</strong> 155 MHz police &rarr; 48.4 cm per element dipole</li>
<li><strong style="color: var(--text-primary);">Example:</strong> 460 MHz UHF &rarr; 16.3 cm per element dipole</li>
<li><strong style="color: var(--text-primary);">Higher gain:</strong> ~3&ndash;5 dBi better than discone on target freq</li>
</ul>
</div>
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px;">
<strong style="color: var(--accent-cyan); font-size: 12px;">Quick Reference</strong>
<table style="width: 100%; margin-top: 6px; font-size: 10px; border-collapse: collapse;">
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 3px 4px; color: var(--text-dim);">RTL-SDR range</td>
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">24&ndash;1766 MHz</td>
</tr>
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 3px 4px; color: var(--text-dim);">VHF low band</td>
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">30&ndash;88 MHz</td>
</tr>
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 3px 4px; color: var(--text-dim);">VHF high band</td>
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">136&ndash;174 MHz</td>
</tr>
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 3px 4px; color: var(--text-dim);">UHF band</td>
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">400&ndash;520 MHz</td>
</tr>
<tr style="border-bottom: 1px solid var(--border-color);">
<td style="padding: 3px 4px; color: var(--text-dim);">Airband (AM)</td>
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">118&ndash;137 MHz</td>
</tr>
<tr>
<td style="padding: 3px 4px; color: var(--text-dim);">&lambda;/4 formula</td>
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">7500 / MHz cm</td>
</tr>
</table>
</div>
</div>
</div>
</div>