fix(ook): fix output panel layout, persist frames, wire global status bar

- Fix double-scroll by switching ookOutputPanel to flex layout
- Keep decoded frames visible after stopping (persist for review)
- Wire global Clear/CSV/JSON status bar buttons to OOK functions
- Hide default output pane in OOK mode (uses own panel)
- Add command display showing the active rtl_433 command
- Add JSON export and auto-scroll support
- Fix 0x prefix stripping in OOK hex decoder
- Fix PWM encoding hint text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
thatsatechnique
2026-03-04 11:51:39 -08:00
parent 0c3ccac21c
commit f771100a4c
5 changed files with 86 additions and 16 deletions

3
.gitignore vendored
View File

@@ -64,3 +64,6 @@ data/subghz/captures/
.env .env
.env.* .env.*
!.env.example !.env.example
# Local utility scripts
reset-sdr.*

View File

@@ -17,6 +17,7 @@ var OokMode = (function () {
frameCount: 0, frameCount: 0,
bitOrder: 'msb', // 'msb' | 'lsb' bitOrder: 'msb', // 'msb' | 'lsb'
filterQuery: '', // active hex/ascii filter filterQuery: '', // active hex/ascii filter
command: '', // the rtl_433 command being run
}; };
// ---- Initialization ---- // ---- Initialization ----
@@ -95,6 +96,7 @@ var OokMode = (function () {
updateUI(true); updateUI(true);
connectSSE(); connectSSE();
clearOutput(); clearOutput();
showCommand(data.command || '');
} else { } else {
alert('Error: ' + (data.message || 'Unknown error')); alert('Error: ' + (data.message || 'Unknown error'));
} }
@@ -248,8 +250,10 @@ var OokMode = (function () {
} }
panel.appendChild(div); panel.appendChild(div);
if (typeof autoScroll === 'undefined' || autoScroll) {
panel.scrollTop = panel.scrollHeight; panel.scrollTop = panel.scrollHeight;
} }
}
// ---- Bit order toggle ---- // ---- Bit order toggle ----
@@ -284,6 +288,12 @@ var OokMode = (function () {
if (countEl) countEl.textContent = '0 frames'; if (countEl) countEl.textContent = '0 frames';
var barEl = document.getElementById('ookStatusBarFrames'); var barEl = document.getElementById('ookStatusBarFrames');
if (barEl) barEl.textContent = '0 frames'; if (barEl) barEl.textContent = '0 frames';
// Hide output panel if not currently running (no frames to show)
if (!state.running) {
var outputPanel = document.getElementById('ookOutputPanel');
if (outputPanel) outputPanel.style.display = 'none';
}
} }
function exportLog() { function exportLog() {
@@ -308,6 +318,47 @@ var OokMode = (function () {
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} }
function exportJSON() {
if (state.frames.length === 0) { alert('No frames to export'); return; }
var out = state.frames.map(function (msg) {
var interp = interpretBits(msg.bits, state.bitOrder);
return {
timestamp: msg.timestamp,
bit_count: msg.bit_count,
rssi: msg.rssi || null,
hex: interp.hex,
ascii: interp.ascii,
inverted: msg.inverted,
bits: msg.bits,
};
});
var blob = new Blob([JSON.stringify(out, null, 2)], { type: 'application/json' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'ook_frames.json';
a.click();
URL.revokeObjectURL(url);
}
// ---- Command display ----
function showCommand(cmd) {
state.command = cmd;
var display = document.getElementById('ookCommandDisplay');
var text = document.getElementById('ookCommandText');
if (display && text && cmd) {
text.textContent = cmd;
display.style.display = 'block';
}
}
function copyCommand() {
if (state.command && navigator.clipboard) {
navigator.clipboard.writeText(state.command);
}
}
// ---- Modulation selector ---- // ---- Modulation selector ----
function setEncoding(enc) { function setEncoding(enc) {
@@ -328,7 +379,7 @@ var OokMode = (function () {
// Update timing hint // Update timing hint
var hints = { var hints = {
pwm: 'Short pulse = 0, long pulse = 1. Most common for ISM OOK.', pwm: 'Short pulse = 1, long pulse = 0. Most common for ISM OOK.',
ppm: 'Short gap = 0, long gap = 1. Pulse position encoding.', ppm: 'Short gap = 0, long gap = 1. Pulse position encoding.',
manchester: 'Rising edge = 1, falling edge = 0. Self-clocking.', manchester: 'Rising edge = 1, falling edge = 0. Self-clocking.',
}; };
@@ -428,8 +479,12 @@ var OokMode = (function () {
if (indicator) indicator.style.background = running ? '#00ff88' : 'var(--text-dim)'; if (indicator) indicator.style.background = running ? '#00ff88' : 'var(--text-dim)';
if (statusText) statusText.textContent = running ? 'Listening' : 'Standby'; if (statusText) statusText.textContent = running ? 'Listening' : 'Standby';
// Keep output panel visible if there are frames to review (even after stopping)
var outputPanel = document.getElementById('ookOutputPanel'); var outputPanel = document.getElementById('ookOutputPanel');
if (outputPanel) outputPanel.style.display = running ? 'block' : 'none'; if (outputPanel) {
var showPanel = running || state.frames.length > 0;
outputPanel.style.display = showPanel ? 'flex' : 'none';
}
} }
// ---- Public API ---- // ---- Public API ----
@@ -447,5 +502,7 @@ var OokMode = (function () {
filterFrames: filterFrames, filterFrames: filterFrames,
clearOutput: clearOutput, clearOutput: clearOutput,
exportLog: exportLog, exportLog: exportLog,
exportJSON: exportJSON,
copyCommand: copyCommand,
}; };
})(); })();

View File

@@ -3292,11 +3292,11 @@
</div> </div>
<!-- OOK Decoder Output Panel --> <!-- OOK Decoder Output Panel -->
<div id="ookOutputPanel" style="display: none; margin-bottom: 12px;"> <div id="ookOutputPanel" style="display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 10px;">
<div style="background: #0a0a0a; border: 1px solid #1a2e1a; border-radius: 6px; padding: 8px 10px;"> <div style="background: #0a0a0a; border: 1px solid #1a2e1a; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; height: 100%; min-height: 0;">
<!-- Toolbar row 1: bit order + actions --> <!-- Toolbar row 1: bit order -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px;">
<span>Decoded Frames</span> <span>Decoded Frames <span id="ookStatusBarFrames" style="color: var(--text-dim);">0 frames</span></span>
<div style="display: flex; gap: 6px; align-items: center;"> <div style="display: flex; gap: 6px; align-items: center;">
<span style="color: var(--text-dim); font-size: 10px;">Bit order:</span> <span style="color: var(--text-dim); font-size: 10px;">Bit order:</span>
<button class="btn btn-sm btn-ghost" id="ookBitMSB" <button class="btn btn-sm btn-ghost" id="ookBitMSB"
@@ -3308,8 +3308,6 @@
title="Auto-detect best bit order from printable character count"> title="Auto-detect best bit order from printable character count">
Suggest <span id="ookSuggestLabel" style="font-size:9px; margin-left:2px;"></span> Suggest <span id="ookSuggestLabel" style="font-size:9px; margin-left:2px;"></span>
</button> </button>
<button class="btn btn-sm btn-ghost" onclick="OokMode.clearOutput()">Clear</button>
<button class="btn btn-sm btn-ghost" onclick="OokMode.exportLog()">CSV</button>
</div> </div>
</div> </div>
<!-- Toolbar row 2: pattern filter --> <!-- Toolbar row 2: pattern filter -->
@@ -3319,10 +3317,7 @@
oninput="OokMode.filterFrames(this.value)" oninput="OokMode.filterFrames(this.value)"
style="width: 100%; background: #111; border: 1px solid #222; border-radius: 3px; color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; padding: 3px 6px; box-sizing: border-box;"> style="width: 100%; background: #111; border: 1px solid #222; border-radius: 3px; color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; padding: 3px 6px; box-sizing: border-box;">
</div> </div>
<div id="ookOutput" style="max-height: 400px; overflow-y: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);"></div> <div id="ookOutput" style="flex: 1; min-height: 0; overflow-y: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);"></div>
</div>
<div style="margin-top: 4px; font-size: 10px; color: #555; text-align: right;">
<span id="ookStatusBarFrames">0 frames</span>
</div> </div>
</div> </div>
@@ -4591,7 +4586,7 @@
// Hide output console for modes with their own visualizations // Hide output console for modes with their own visualizations
const outputEl = document.getElementById('output'); const outputEl = document.getElementById('output');
const statusBar = document.querySelector('.status-bar'); const statusBar = document.querySelector('.status-bar');
if (outputEl) outputEl.style.display = (mode === 'satellite' || mode === 'sstv' || mode === 'weathersat' || mode === 'sstv_general' || mode === 'wefax' || mode === 'aprs' || mode === 'wifi' || mode === 'bluetooth' || mode === 'tscm' || mode === 'spystations' || mode === 'meshtastic' || mode === 'websdr' || mode === 'subghz' || mode === 'spaceweather' || mode === 'bt_locate' || mode === 'waterfall' || mode === 'morse' || mode === 'meteor' || mode === 'system') ? 'none' : 'block'; if (outputEl) outputEl.style.display = (mode === 'satellite' || mode === 'sstv' || mode === 'weathersat' || mode === 'sstv_general' || mode === 'wefax' || mode === 'aprs' || mode === 'wifi' || mode === 'bluetooth' || mode === 'tscm' || mode === 'spystations' || mode === 'meshtastic' || mode === 'websdr' || mode === 'subghz' || mode === 'spaceweather' || mode === 'bt_locate' || mode === 'waterfall' || mode === 'morse' || mode === 'meteor' || mode === 'system' || mode === 'ook') ? 'none' : 'block';
if (statusBar) statusBar.style.display = (mode === 'satellite' || mode === 'websdr' || mode === 'subghz' || mode === 'spaceweather' || mode === 'waterfall' || mode === 'morse' || mode === 'meteor' || mode === 'system') ? 'none' : 'flex'; if (statusBar) statusBar.style.display = (mode === 'satellite' || mode === 'websdr' || mode === 'subghz' || mode === 'spaceweather' || mode === 'waterfall' || mode === 'morse' || mode === 'meteor' || mode === 'system') ? 'none' : 'flex';
// Restore sidebar when leaving Meshtastic mode (user may have collapsed it) // Restore sidebar when leaving Meshtastic mode (user may have collapsed it)
@@ -5691,6 +5686,7 @@
let allMessages = []; let allMessages = [];
function exportCSV() { function exportCSV() {
if (currentMode === 'ook') { OokMode.exportLog(); return; }
if (allMessages.length === 0) { if (allMessages.length === 0) {
alert('No messages to export'); alert('No messages to export');
return; return;
@@ -5712,6 +5708,7 @@
} }
function exportJSON() { function exportJSON() {
if (currentMode === 'ook') { OokMode.exportJSON(); return; }
if (allMessages.length === 0) { if (allMessages.length === 0) {
alert('No messages to export'); alert('No messages to export');
return; return;
@@ -6897,6 +6894,7 @@
} }
function clearMessages() { function clearMessages() {
if (currentMode === 'ook') { OokMode.clearOutput(); return; }
document.getElementById('output').innerHTML = ` document.getElementById('output').innerHTML = `
<div class="placeholder" style="color: #888; text-align: center; padding: 50px;"> <div class="placeholder" style="color: #888; text-align: center; padding: 50px;">
Messages cleared. ${isRunning || isSensorRunning ? 'Waiting for new messages...' : 'Start decoding to receive messages.'} Messages cleared. ${isRunning || isSensorRunning ? 'Waiting for new messages...' : 'Start decoding to receive messages.'}

View File

@@ -59,7 +59,7 @@
</div> </div>
<input type="hidden" id="ookEncoding" value="pwm"> <input type="hidden" id="ookEncoding" value="pwm">
<p id="ookEncodingHint" class="info-text" style="font-size: 10px; color: var(--text-dim); margin-top: 4px;"> <p id="ookEncodingHint" class="info-text" style="font-size: 10px; color: var(--text-dim); margin-top: 4px;">
Short pulse = 0, long pulse = 1. Most common for ISM OOK. Short pulse = 1, long pulse = 0. Most common for ISM OOK.
</p> </p>
</div> </div>
</div> </div>
@@ -140,6 +140,14 @@
Uses rtl_433 with a custom flex decoder. Requires rtl_433 installed. Uses rtl_433 with a custom flex decoder. Requires rtl_433 installed.
Works on any OOK/ASK signal in the SDR's frequency range. Works on any OOK/ASK signal in the SDR's frequency range.
</p> </p>
<div id="ookCommandDisplay" style="display: none; margin-top: 8px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<span style="font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px;">Active Command</span>
<button class="btn btn-sm btn-ghost" onclick="OokMode.copyCommand()" title="Copy to clipboard"
style="font-size: 9px; padding: 1px 6px;">Copy</button>
</div>
<pre id="ookCommandText" style="margin: 0; padding: 6px 8px; background: #0a0a0a; border: 1px solid #1a2e1a; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: pre-wrap; word-break: break-all; line-height: 1.5;"></pre>
</div>
</div> </div>
<button class="run-btn" id="ookStartBtn" onclick="OokMode.start()">Start Decoder</button> <button class="run-btn" id="ookStartBtn" onclick="OokMode.start()">Start Decoder</button>

View File

@@ -45,7 +45,11 @@ def decode_ook_frame(hex_data: str) -> dict[str, Any] | None:
``byte_count``, and ``bit_count``, or ``None`` on parse failure. ``byte_count``, and ``bit_count``, or ``None`` on parse failure.
""" """
try: try:
raw = bytes.fromhex(hex_data.replace(' ', '')) cleaned = hex_data.replace(' ', '')
# rtl_433 flex decoder prefixes hex with '0x' — strip it
if cleaned.startswith(('0x', '0X')):
cleaned = cleaned[2:]
raw = bytes.fromhex(cleaned)
except ValueError: except ValueError:
return None return None