mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 22:59:59 -07:00
7c3ec9e920
Add .gitignore entry for data/subghz/captures/ to prevent large IQ recording files from being committed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2747 lines
107 KiB
JavaScript
2747 lines
107 KiB
JavaScript
/**
|
|
* SubGHz Transceiver Mode
|
|
* HackRF One SubGHz signal capture, decode, replay, and spectrum analysis
|
|
*/
|
|
|
|
const SubGhz = (function() {
|
|
let eventSource = null;
|
|
let statusTimer = null;
|
|
let statusPollTimer = null;
|
|
let rxStartTime = null;
|
|
let sweepCanvas = null;
|
|
let sweepCtx = null;
|
|
let sweepData = [];
|
|
let pendingTxCaptureId = null;
|
|
let pendingTxCaptureMeta = null;
|
|
let pendingTxBursts = [];
|
|
let txTimelineDragState = null;
|
|
let rxScopeCanvas = null;
|
|
let rxScopeCtx = null;
|
|
let rxScopeData = [];
|
|
let rxScopeResizeObserver = null;
|
|
let rxWaterfallCanvas = null;
|
|
let rxWaterfallCtx = null;
|
|
let rxWaterfallPalette = null;
|
|
let rxWaterfallResizeObserver = null;
|
|
let rxWaterfallPaused = false;
|
|
let rxWaterfallFloor = 20;
|
|
let rxWaterfallRange = 180;
|
|
let decodeScopeCanvas = null;
|
|
let decodeScopeCtx = null;
|
|
let decodeScopeData = [];
|
|
let decodeScopeResizeObserver = null;
|
|
let decodeWaterfallCanvas = null;
|
|
let decodeWaterfallCtx = null;
|
|
let decodeWaterfallPalette = null;
|
|
let decodeWaterfallResizeObserver = null;
|
|
|
|
// Dashboard state
|
|
let activePanel = null; // null = hub, 'rx'|'sweep'|'tx'|'saved'
|
|
let signalCount = 0;
|
|
let captureCount = 0;
|
|
let consoleEntries = [];
|
|
let consoleCollapsed = false;
|
|
let currentPhase = null; // 'tuning'|'listening'|'decoding'|null
|
|
let currentMode = 'idle'; // tracks backend mode for timer/strip
|
|
let lastRawLine = '';
|
|
let lastRawLineTs = 0;
|
|
let lastBurstLineTs = 0;
|
|
let burstBadgeTimer = null;
|
|
let lastRxHintTs = 0;
|
|
let captureSelectMode = false;
|
|
let selectedCaptureIds = new Set();
|
|
let latestCaptures = [];
|
|
let lastTxCaptureId = null;
|
|
let lastTxRequest = null;
|
|
let txModalIntent = 'tx';
|
|
|
|
// HackRF detection
|
|
let hackrfDetected = false;
|
|
let rtl433Detected = false;
|
|
let sweepDetected = false;
|
|
|
|
// Interactive sweep state
|
|
const SWEEP_PAD = { top: 20, right: 20, bottom: 30, left: 50 };
|
|
const SWEEP_POWER_MIN = -100;
|
|
const SWEEP_POWER_MAX = 0;
|
|
|
|
let sweepHoverFreq = null;
|
|
let sweepHoverPower = null;
|
|
let sweepSelectedFreq = null;
|
|
let sweepPeaks = [];
|
|
let sweepPeakHold = [];
|
|
let sweepInteractionBound = false;
|
|
let sweepResizeObserver = null;
|
|
let sweepTooltipEl = null;
|
|
let sweepCtxMenuEl = null;
|
|
let sweepActionBarEl = null;
|
|
let sweepDismissHandler = null;
|
|
|
|
/**
|
|
* Initialize the SubGHz mode
|
|
*/
|
|
function init() {
|
|
loadCaptures();
|
|
startStream();
|
|
startStatusPolling();
|
|
syncTriggerControls();
|
|
|
|
// Check HackRF availability and restore panel state
|
|
fetch('/subghz/status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
updateDeviceStatus(data);
|
|
updateStatusUI(data);
|
|
|
|
const mode = data.mode || 'idle';
|
|
if (mode === 'decode') {
|
|
// Legacy decode mode may still be running via API, but this UI
|
|
// intentionally focuses on RAW capture/replay/sweep.
|
|
showHub();
|
|
showConsole();
|
|
startStatusTimer();
|
|
addConsoleEntry('Decode mode is disabled in this UI layout.', 'warn');
|
|
} else if (mode === 'rx') {
|
|
showPanel('rx');
|
|
updateRxDisplay(getParams());
|
|
initRxScope();
|
|
initRxWaterfall();
|
|
syncWaterfallControls();
|
|
showConsole();
|
|
startStatusTimer();
|
|
} else if (mode === 'sweep') {
|
|
showPanel('sweep');
|
|
initSweepCanvas();
|
|
showConsole();
|
|
} else if (mode === 'tx') {
|
|
showPanel('tx');
|
|
showConsole();
|
|
startStatusTimer();
|
|
} else {
|
|
showHub();
|
|
}
|
|
})
|
|
.catch(() => showHub());
|
|
}
|
|
|
|
function syncTriggerControls() {
|
|
const enabled = !!document.getElementById('subghzTriggerEnabled')?.checked;
|
|
const preEl = document.getElementById('subghzTriggerPreMs');
|
|
const postEl = document.getElementById('subghzTriggerPostMs');
|
|
if (preEl) preEl.disabled = !enabled;
|
|
if (postEl) postEl.disabled = !enabled;
|
|
}
|
|
|
|
function startStatusPolling() {
|
|
if (statusPollTimer) clearInterval(statusPollTimer);
|
|
const refresh = () => {
|
|
fetch('/subghz/status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
updateDeviceStatus(data);
|
|
updateStatusUI(data);
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
refresh();
|
|
statusPollTimer = setInterval(refresh, 3000);
|
|
}
|
|
|
|
// ------ DEVICE DETECTION ------
|
|
|
|
function updateDeviceStatus(data) {
|
|
const hackrfAvailable = !!data.hackrf_available;
|
|
const hackrfInfoAvailable = data.hackrf_info_available !== false;
|
|
const hackrfDetectionPaused = data.hackrf_detection_paused === true;
|
|
const hackrfConnectedRaw = data.hackrf_connected;
|
|
const hackrfConnected = hackrfConnectedRaw === true;
|
|
const hackrfKnownDisconnected = hackrfConnectedRaw === false;
|
|
const hackrfDetectUnknown = hackrfAvailable && !hackrfConnected && !hackrfKnownDisconnected;
|
|
hackrfDetected = hackrfConnected;
|
|
rtl433Detected = !!data.rtl433_available;
|
|
sweepDetected = !!data.sweep_available;
|
|
|
|
// Sidebar device indicator
|
|
const dot = document.getElementById('subghzDeviceDot');
|
|
const label = document.getElementById('subghzDeviceLabel');
|
|
if (dot) {
|
|
dot.className = 'subghz-device-dot';
|
|
if (hackrfDetectUnknown) {
|
|
dot.classList.add('unknown');
|
|
} else {
|
|
dot.classList.add(hackrfConnected ? 'connected' : 'disconnected');
|
|
}
|
|
}
|
|
if (label) {
|
|
if (hackrfConnected) {
|
|
label.textContent = 'HackRF Connected';
|
|
} else if (!hackrfAvailable) {
|
|
label.textContent = 'HackRF Tools Missing';
|
|
} else if (hackrfDetectUnknown && hackrfDetectionPaused) {
|
|
label.textContent = 'HackRF Status Paused (active stream)';
|
|
} else if (hackrfDetectUnknown && !hackrfInfoAvailable) {
|
|
label.textContent = 'HackRF Detection Unavailable';
|
|
} else if (hackrfDetectUnknown) {
|
|
label.textContent = 'HackRF Status Unknown';
|
|
} else {
|
|
label.textContent = 'HackRF Not Detected';
|
|
}
|
|
label.classList.toggle('error', !hackrfConnected && hackrfKnownDisconnected);
|
|
}
|
|
|
|
// Tool badges
|
|
setToolBadge('subghzToolHackrf', hackrfAvailable);
|
|
setToolBadge('subghzToolSweep', sweepDetected);
|
|
|
|
// Stats strip device badge
|
|
const stripDot = document.getElementById('subghzStripDeviceDot');
|
|
if (stripDot) {
|
|
stripDot.className = 'subghz-strip-device-dot';
|
|
if (hackrfDetectUnknown) {
|
|
stripDot.classList.add('unknown');
|
|
} else {
|
|
stripDot.classList.add(hackrfConnected ? 'connected' : 'disconnected');
|
|
}
|
|
}
|
|
}
|
|
|
|
function setToolBadge(id, available) {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
el.classList.toggle('available', available);
|
|
el.classList.toggle('missing', !available);
|
|
}
|
|
|
|
/**
|
|
* Set frequency from preset button
|
|
*/
|
|
function setFreq(mhz) {
|
|
const el = document.getElementById('subghzFrequency');
|
|
if (el) el.value = mhz;
|
|
}
|
|
|
|
/**
|
|
* Switch between RAW receive / sweep sidebar tabs.
|
|
* Only toggles sidebar tab content visibility — does NOT open visuals panels.
|
|
*/
|
|
function switchTab(tab) {
|
|
document.querySelectorAll('.subghz-tab').forEach(t => {
|
|
t.classList.toggle('active', t.dataset.tab === tab);
|
|
});
|
|
const tabRx = document.getElementById('subghzTabRx');
|
|
const tabSweep = document.getElementById('subghzTabSweep');
|
|
if (tabRx) tabRx.classList.toggle('active', tab === 'rx');
|
|
if (tabSweep) tabSweep.classList.toggle('active', tab === 'sweep');
|
|
}
|
|
|
|
/**
|
|
* Get common parameters from inputs
|
|
*/
|
|
function getParams() {
|
|
const freqMhz = parseFloat(document.getElementById('subghzFrequency')?.value || '433.92');
|
|
const serial = (document.getElementById('subghzDeviceSerial')?.value || '').trim();
|
|
const params = {
|
|
frequency_hz: Math.round(freqMhz * 1000000),
|
|
lna_gain: parseInt(document.getElementById('subghzLnaGain')?.value || '24'),
|
|
vga_gain: parseInt(document.getElementById('subghzVgaGain')?.value || '20'),
|
|
sample_rate: parseInt(document.getElementById('subghzSampleRate')?.value || '2000000'),
|
|
};
|
|
const triggerEnabled = !!document.getElementById('subghzTriggerEnabled')?.checked;
|
|
params.trigger_enabled = triggerEnabled;
|
|
if (triggerEnabled) {
|
|
params.trigger_pre_ms = parseInt(document.getElementById('subghzTriggerPreMs')?.value || '350');
|
|
params.trigger_post_ms = parseInt(document.getElementById('subghzTriggerPostMs')?.value || '700');
|
|
}
|
|
if (serial) params.device_serial = serial;
|
|
return params;
|
|
}
|
|
|
|
// ------ COORDINATE HELPERS ------
|
|
|
|
function sweepPixelToFreqPower(canvasX, canvasY) {
|
|
if (!sweepCanvas || sweepData.length < 2) return { freq: 0, power: 0, inChart: false };
|
|
const w = sweepCanvas.width;
|
|
const h = sweepCanvas.height;
|
|
const chartW = w - SWEEP_PAD.left - SWEEP_PAD.right;
|
|
const chartH = h - SWEEP_PAD.top - SWEEP_PAD.bottom;
|
|
const inChart = canvasX >= SWEEP_PAD.left && canvasX <= w - SWEEP_PAD.right &&
|
|
canvasY >= SWEEP_PAD.top && canvasY <= h - SWEEP_PAD.bottom;
|
|
const ratio = Math.max(0, Math.min(1, (canvasX - SWEEP_PAD.left) / chartW));
|
|
const freqMin = sweepData[0].freq;
|
|
const freqMax = sweepData[sweepData.length - 1].freq;
|
|
const freq = freqMin + ratio * (freqMax - freqMin);
|
|
const powerRatio = Math.max(0, Math.min(1, (h - SWEEP_PAD.bottom - canvasY) / chartH));
|
|
const power = SWEEP_POWER_MIN + powerRatio * (SWEEP_POWER_MAX - SWEEP_POWER_MIN);
|
|
return { freq, power, inChart };
|
|
}
|
|
|
|
function sweepFreqToPixelX(freqMhz) {
|
|
if (!sweepCanvas || sweepData.length < 2) return 0;
|
|
const chartW = sweepCanvas.width - SWEEP_PAD.left - SWEEP_PAD.right;
|
|
const freqMin = sweepData[0].freq;
|
|
const freqMax = sweepData[sweepData.length - 1].freq;
|
|
const ratio = (freqMhz - freqMin) / (freqMax - freqMin);
|
|
return SWEEP_PAD.left + ratio * chartW;
|
|
}
|
|
|
|
function interpolatePower(freqMhz) {
|
|
if (sweepData.length === 0) return SWEEP_POWER_MIN;
|
|
if (sweepData.length === 1) return sweepData[0].power;
|
|
let lo = 0, hi = sweepData.length - 1;
|
|
if (freqMhz <= sweepData[lo].freq) return sweepData[lo].power;
|
|
if (freqMhz >= sweepData[hi].freq) return sweepData[hi].power;
|
|
while (hi - lo > 1) {
|
|
const mid = (lo + hi) >> 1;
|
|
if (sweepData[mid].freq <= freqMhz) lo = mid;
|
|
else hi = mid;
|
|
}
|
|
const t = (freqMhz - sweepData[lo].freq) / (sweepData[hi].freq - sweepData[lo].freq);
|
|
return sweepData[lo].power + t * (sweepData[hi].power - sweepData[lo].power);
|
|
}
|
|
|
|
// ------ RX SCOPE ------
|
|
|
|
function initRxScope() {
|
|
rxScopeCanvas = document.getElementById('subghzRxScope');
|
|
if (!rxScopeCanvas) return;
|
|
rxScopeCtx = rxScopeCanvas.getContext('2d');
|
|
resizeRxScope();
|
|
|
|
if (!rxScopeResizeObserver && rxScopeCanvas.parentElement) {
|
|
rxScopeResizeObserver = new ResizeObserver(() => {
|
|
resizeRxScope();
|
|
drawRxScope();
|
|
});
|
|
rxScopeResizeObserver.observe(rxScopeCanvas.parentElement);
|
|
}
|
|
|
|
drawRxScope();
|
|
}
|
|
|
|
function initDecodeScope() {
|
|
decodeScopeCanvas = document.getElementById('subghzDecodeScope');
|
|
if (!decodeScopeCanvas) return;
|
|
decodeScopeCtx = decodeScopeCanvas.getContext('2d');
|
|
resizeDecodeScope();
|
|
|
|
if (!decodeScopeResizeObserver && decodeScopeCanvas.parentElement) {
|
|
decodeScopeResizeObserver = new ResizeObserver(() => {
|
|
resizeDecodeScope();
|
|
drawDecodeScope();
|
|
});
|
|
decodeScopeResizeObserver.observe(decodeScopeCanvas.parentElement);
|
|
}
|
|
|
|
drawDecodeScope();
|
|
}
|
|
|
|
function initRxWaterfall() {
|
|
rxWaterfallCanvas = document.getElementById('subghzRxWaterfall');
|
|
if (!rxWaterfallCanvas) return;
|
|
rxWaterfallCtx = rxWaterfallCanvas.getContext('2d');
|
|
rxWaterfallPalette = rxWaterfallPalette || buildWaterfallPalette();
|
|
resizeRxWaterfall();
|
|
clearWaterfall(rxWaterfallCtx, rxWaterfallCanvas);
|
|
syncWaterfallControls();
|
|
|
|
if (!rxWaterfallResizeObserver && rxWaterfallCanvas.parentElement) {
|
|
rxWaterfallResizeObserver = new ResizeObserver(() => {
|
|
resizeRxWaterfall();
|
|
clearWaterfall(rxWaterfallCtx, rxWaterfallCanvas);
|
|
});
|
|
rxWaterfallResizeObserver.observe(rxWaterfallCanvas.parentElement);
|
|
}
|
|
}
|
|
|
|
function initDecodeWaterfall() {
|
|
decodeWaterfallCanvas = document.getElementById('subghzDecodeWaterfall');
|
|
if (!decodeWaterfallCanvas) return;
|
|
decodeWaterfallCtx = decodeWaterfallCanvas.getContext('2d');
|
|
decodeWaterfallPalette = decodeWaterfallPalette || buildWaterfallPalette();
|
|
resizeDecodeWaterfall();
|
|
clearWaterfall(decodeWaterfallCtx, decodeWaterfallCanvas);
|
|
|
|
if (!decodeWaterfallResizeObserver && decodeWaterfallCanvas.parentElement) {
|
|
decodeWaterfallResizeObserver = new ResizeObserver(() => {
|
|
resizeDecodeWaterfall();
|
|
clearWaterfall(decodeWaterfallCtx, decodeWaterfallCanvas);
|
|
});
|
|
decodeWaterfallResizeObserver.observe(decodeWaterfallCanvas.parentElement);
|
|
}
|
|
}
|
|
|
|
function resizeRxScope() {
|
|
if (!rxScopeCanvas || !rxScopeCanvas.parentElement) return;
|
|
const rect = rxScopeCanvas.parentElement.getBoundingClientRect();
|
|
rxScopeCanvas.width = Math.max(10, rect.width);
|
|
rxScopeCanvas.height = Math.max(10, rect.height);
|
|
}
|
|
|
|
function resizeDecodeScope() {
|
|
if (!decodeScopeCanvas || !decodeScopeCanvas.parentElement) return;
|
|
const rect = decodeScopeCanvas.parentElement.getBoundingClientRect();
|
|
decodeScopeCanvas.width = Math.max(10, rect.width);
|
|
decodeScopeCanvas.height = Math.max(10, rect.height);
|
|
}
|
|
|
|
function resizeRxWaterfall() {
|
|
if (!rxWaterfallCanvas || !rxWaterfallCanvas.parentElement) return;
|
|
const rect = rxWaterfallCanvas.parentElement.getBoundingClientRect();
|
|
rxWaterfallCanvas.width = Math.max(10, rect.width);
|
|
rxWaterfallCanvas.height = Math.max(10, rect.height);
|
|
}
|
|
|
|
function resizeDecodeWaterfall() {
|
|
if (!decodeWaterfallCanvas || !decodeWaterfallCanvas.parentElement) return;
|
|
const rect = decodeWaterfallCanvas.parentElement.getBoundingClientRect();
|
|
decodeWaterfallCanvas.width = Math.max(10, rect.width);
|
|
decodeWaterfallCanvas.height = Math.max(10, rect.height);
|
|
}
|
|
|
|
function updateRxLevel(level) {
|
|
updateLevel('subghzRxLevel', level);
|
|
}
|
|
|
|
function updateDecodeLevel(level) {
|
|
updateLevel('subghzDecodeLevel', level);
|
|
}
|
|
|
|
function updateRxWaveform(samples) {
|
|
if (!Array.isArray(samples)) return;
|
|
if (!rxScopeCanvas) initRxScope();
|
|
rxScopeData = samples;
|
|
drawRxScope();
|
|
}
|
|
|
|
function updateDecodeWaveform(samples) {
|
|
if (!Array.isArray(samples)) return;
|
|
if (!decodeScopeCanvas) initDecodeScope();
|
|
decodeScopeData = samples;
|
|
drawDecodeScope();
|
|
}
|
|
|
|
function updateRxSpectrum(bins) {
|
|
if (!Array.isArray(bins) || !bins.length) return;
|
|
if (rxWaterfallPaused) return;
|
|
if (!rxWaterfallCanvas) initRxWaterfall();
|
|
drawWaterfallRow(rxWaterfallCtx, rxWaterfallCanvas, rxWaterfallPalette, bins, rxWaterfallFloor, rxWaterfallRange);
|
|
}
|
|
|
|
function updateDecodeSpectrum(bins) {
|
|
if (!Array.isArray(bins) || !bins.length) return;
|
|
if (!decodeWaterfallCanvas) initDecodeWaterfall();
|
|
drawWaterfallRow(decodeWaterfallCtx, decodeWaterfallCanvas, decodeWaterfallPalette, bins, rxWaterfallFloor, rxWaterfallRange);
|
|
}
|
|
|
|
function drawRxScope() {
|
|
drawScope(rxScopeCtx, rxScopeCanvas, rxScopeData);
|
|
}
|
|
|
|
function drawDecodeScope() {
|
|
drawScope(decodeScopeCtx, decodeScopeCanvas, decodeScopeData);
|
|
}
|
|
|
|
function buildWaterfallPalette() {
|
|
const stops = [
|
|
{ v: 0, c: [7, 11, 18] },
|
|
{ v: 64, c: [11, 42, 111] },
|
|
{ v: 128, c: [0, 212, 255] },
|
|
{ v: 192, c: [255, 170, 0] },
|
|
{ v: 255, c: [255, 255, 255] },
|
|
];
|
|
const palette = new Array(256);
|
|
for (let i = 0; i < stops.length - 1; i++) {
|
|
const a = stops[i];
|
|
const b = stops[i + 1];
|
|
const span = b.v - a.v;
|
|
for (let v = a.v; v <= b.v; v++) {
|
|
const t = span === 0 ? 0 : (v - a.v) / span;
|
|
const r = Math.round(a.c[0] + (b.c[0] - a.c[0]) * t);
|
|
const g = Math.round(a.c[1] + (b.c[1] - a.c[1]) * t);
|
|
const bch = Math.round(a.c[2] + (b.c[2] - a.c[2]) * t);
|
|
palette[v] = [r, g, bch];
|
|
}
|
|
}
|
|
return palette;
|
|
}
|
|
|
|
function drawScope(ctx, canvas, data) {
|
|
if (!ctx || !canvas) return;
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
ctx.clearRect(0, 0, w, h);
|
|
ctx.fillStyle = '#0d1117';
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
|
|
ctx.lineWidth = 1;
|
|
for (let i = 1; i < 4; i++) {
|
|
const y = (h / 4) * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(w, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, h / 2);
|
|
ctx.lineTo(w, h / 2);
|
|
ctx.stroke();
|
|
|
|
if (!data || !data.length) return;
|
|
|
|
let peak = 0;
|
|
for (let i = 0; i < data.length; i++) {
|
|
const abs = Math.abs(Number(data[i]) || 0);
|
|
if (abs > peak) peak = abs;
|
|
}
|
|
// Auto-scale low-amplitude noise/signal so activity is visible.
|
|
const gain = peak > 0 ? Math.min(12, 0.92 / peak) : 1;
|
|
|
|
ctx.strokeStyle = '#00d4ff';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.beginPath();
|
|
const n = data.length;
|
|
if (n === 1) {
|
|
const v = Math.max(-1, Math.min(1, (Number(data[0]) || 0) * gain));
|
|
const y = (0.5 - (v / 2)) * h;
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(w, y);
|
|
ctx.stroke();
|
|
return;
|
|
}
|
|
for (let i = 0; i < n; i++) {
|
|
const x = (i / (n - 1)) * w;
|
|
const v = Math.max(-1, Math.min(1, (Number(data[i]) || 0) * gain));
|
|
const y = (0.5 - (v / 2)) * h;
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
function clearWaterfall(ctx, canvas) {
|
|
if (!ctx || !canvas) return;
|
|
ctx.fillStyle = '#0d1117';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function drawWaterfallRow(ctx, canvas, palette, bins, floor, range) {
|
|
if (!ctx || !canvas) return;
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
if (h < 2 || w < 2) return;
|
|
|
|
// Shift image down by 1px
|
|
ctx.drawImage(canvas, 0, 0, w, h - 1, 0, 1, w, h - 1);
|
|
|
|
const row = ctx.createImageData(w, 1);
|
|
const data = row.data;
|
|
const paletteRef = palette || buildWaterfallPalette();
|
|
for (let x = 0; x < w; x++) {
|
|
const idx = Math.floor((x / (w - 1)) * (bins.length - 1));
|
|
const raw = Math.max(0, Math.min(255, bins[idx] || 0));
|
|
const rangeVal = Math.max(16, range || 180);
|
|
const normalized = Math.max(0, Math.min(1, (raw - (floor || 0)) / rangeVal));
|
|
const val = Math.round(normalized * 255);
|
|
const c = paletteRef[val] || [0, 0, 0];
|
|
const offset = x * 4;
|
|
data[offset] = c[0];
|
|
data[offset + 1] = c[1];
|
|
data[offset + 2] = c[2];
|
|
data[offset + 3] = 255;
|
|
}
|
|
ctx.putImageData(row, 0, 0);
|
|
}
|
|
|
|
function updateLevel(id, level) {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
const clamped = Math.max(0, Math.min(100, Number(level) || 0));
|
|
// Boost low-level values so weak-but-real activity is visible.
|
|
const boosted = clamped <= 0 ? 0 : Math.min(100, Math.round(Math.sqrt(clamped / 100) * 100));
|
|
el.style.width = boosted + '%';
|
|
}
|
|
|
|
function syncWaterfallControls() {
|
|
const floorEl = document.getElementById('subghzWfFloor');
|
|
const rangeEl = document.getElementById('subghzWfRange');
|
|
const floorVal = document.getElementById('subghzWfFloorVal');
|
|
const rangeVal = document.getElementById('subghzWfRangeVal');
|
|
const pauseBtn = document.getElementById('subghzWfPauseBtn');
|
|
|
|
if (floorEl) floorEl.value = rxWaterfallFloor;
|
|
if (rangeEl) rangeEl.value = rxWaterfallRange;
|
|
if (floorVal) floorVal.textContent = String(rxWaterfallFloor);
|
|
if (rangeVal) rangeVal.textContent = String(rxWaterfallRange);
|
|
if (pauseBtn) {
|
|
pauseBtn.textContent = rxWaterfallPaused ? 'RESUME' : 'PAUSE';
|
|
pauseBtn.classList.toggle('paused', rxWaterfallPaused);
|
|
}
|
|
}
|
|
|
|
function setWaterfallFloor(value) {
|
|
const next = Math.max(0, Math.min(200, parseInt(value, 10) || 0));
|
|
rxWaterfallFloor = next;
|
|
syncWaterfallControls();
|
|
}
|
|
|
|
function setWaterfallRange(value) {
|
|
const next = Math.max(16, Math.min(255, parseInt(value, 10) || 180));
|
|
rxWaterfallRange = next;
|
|
syncWaterfallControls();
|
|
}
|
|
|
|
function toggleWaterfall() {
|
|
rxWaterfallPaused = !rxWaterfallPaused;
|
|
syncWaterfallControls();
|
|
}
|
|
|
|
function updateRxStats(stats) {
|
|
const sizeEl = document.getElementById('subghzRxFileSize');
|
|
const rateEl = document.getElementById('subghzRxRate');
|
|
if (sizeEl) sizeEl.textContent = formatBytes(stats.file_size || 0);
|
|
if (rateEl) rateEl.textContent = (stats.rate_kb ? stats.rate_kb.toFixed(1) : '0') + ' KB/s';
|
|
}
|
|
|
|
function resetRxVisuals() {
|
|
rxScopeData = [];
|
|
updateRxLevel(0);
|
|
drawRxScope();
|
|
clearWaterfall(rxWaterfallCtx, rxWaterfallCanvas);
|
|
updateRxStats({ file_size: 0, rate_kb: 0 });
|
|
updateRxHint('', 0, '');
|
|
}
|
|
|
|
function resetDecodeVisuals() {
|
|
decodeScopeData = [];
|
|
updateDecodeLevel(0);
|
|
drawDecodeScope();
|
|
clearWaterfall(decodeWaterfallCtx, decodeWaterfallCanvas);
|
|
}
|
|
|
|
// ------ STATUS ------
|
|
|
|
function updateStatusUI(data) {
|
|
const dot = document.getElementById('subghzStatusDot');
|
|
const text = document.getElementById('subghzStatusText');
|
|
const timer = document.getElementById('subghzStatusTimer');
|
|
const mode = data.mode || 'idle';
|
|
currentMode = mode;
|
|
|
|
if (dot) {
|
|
dot.className = 'subghz-status-dot';
|
|
if (mode !== 'idle') dot.classList.add(mode);
|
|
}
|
|
|
|
const labels = { idle: 'Idle', rx: 'Capturing', decode: 'Decoding', tx: 'Transmitting', sweep: 'Sweeping' };
|
|
if (text) text.textContent = labels[mode] || mode;
|
|
|
|
if (timer && data.elapsed_seconds) {
|
|
timer.textContent = formatDuration(data.elapsed_seconds);
|
|
} else if (timer) {
|
|
timer.textContent = '';
|
|
}
|
|
|
|
// Toggle sidebar buttons
|
|
toggleButtons(mode);
|
|
|
|
// Update stats strip
|
|
updateStatsStrip(mode);
|
|
|
|
// RX recording indicator
|
|
const rec = document.getElementById('subghzRxRecording');
|
|
if (rec) rec.style.display = (mode === 'rx') ? 'flex' : 'none';
|
|
|
|
if (mode === 'idle') {
|
|
if (burstBadgeTimer) {
|
|
clearTimeout(burstBadgeTimer);
|
|
burstBadgeTimer = null;
|
|
}
|
|
setBurstIndicator('idle', 'NO BURST');
|
|
setRxBurstPill('idle', 'IDLE');
|
|
updateRxHint('', 0, '');
|
|
setBurstCanvasHighlight('rx', false);
|
|
setBurstCanvasHighlight('decode', false);
|
|
}
|
|
|
|
if (activePanel === 'tx') {
|
|
updateTxPanelState(mode === 'tx');
|
|
}
|
|
}
|
|
|
|
function toggleButtons(mode) {
|
|
const setEnabled = (id, enabled) => {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
el.disabled = !enabled;
|
|
el.classList.toggle('disabled', !enabled);
|
|
};
|
|
|
|
const enableMap = [
|
|
['subghzRxStartBtn', mode === 'idle'],
|
|
['subghzRxStopBtn', mode === 'rx'],
|
|
['subghzRxStartBtnPanel', mode === 'idle'],
|
|
['subghzRxStopBtnPanel', mode === 'rx'],
|
|
['subghzSweepStartBtn', mode === 'idle'],
|
|
['subghzSweepStopBtn', mode === 'sweep'],
|
|
['subghzSweepStartBtnPanel', mode === 'idle'],
|
|
['subghzSweepStopBtnPanel', mode === 'sweep'],
|
|
];
|
|
|
|
for (const [id, enabled] of enableMap) {
|
|
setEnabled(id, enabled);
|
|
}
|
|
}
|
|
|
|
function formatDuration(seconds) {
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
return m > 0 ? `${m}m ${s}s` : `${s}s`;
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
let val = Math.max(0, Number(bytes) || 0);
|
|
let idx = 0;
|
|
while (val >= 1024 && idx < sizes.length - 1) {
|
|
val /= 1024;
|
|
idx += 1;
|
|
}
|
|
const fixed = idx === 0 ? 0 : 1;
|
|
return `${val.toFixed(fixed)} ${sizes[idx]}`;
|
|
}
|
|
|
|
function startStatusTimer() {
|
|
rxStartTime = Date.now();
|
|
if (statusTimer) clearInterval(statusTimer);
|
|
statusTimer = setInterval(() => {
|
|
const elapsed = (Date.now() - rxStartTime) / 1000;
|
|
const formatted = formatDuration(elapsed);
|
|
|
|
// Update sidebar timer
|
|
const timer = document.getElementById('subghzStatusTimer');
|
|
if (timer) timer.textContent = formatted;
|
|
|
|
// Update stats strip timer
|
|
const stripTimer = document.getElementById('subghzStripTimer');
|
|
if (stripTimer) stripTimer.textContent = formatted;
|
|
|
|
// Update TX elapsed if TX panel is active
|
|
if (currentMode === 'tx') {
|
|
const txElapsed = document.getElementById('subghzTxElapsed');
|
|
if (txElapsed) txElapsed.textContent = formatted;
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function stopStatusTimer() {
|
|
if (statusTimer) {
|
|
clearInterval(statusTimer);
|
|
statusTimer = null;
|
|
}
|
|
rxStartTime = null;
|
|
const timer = document.getElementById('subghzStatusTimer');
|
|
if (timer) timer.textContent = '';
|
|
const stripTimer = document.getElementById('subghzStripTimer');
|
|
if (stripTimer) stripTimer.textContent = '';
|
|
}
|
|
|
|
// ------ RECEIVE ------
|
|
|
|
function startRx() {
|
|
const params = getParams();
|
|
fetch('/subghz/receive/start', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(params),
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'started') {
|
|
updateStatusUI({ mode: 'rx' });
|
|
startStatusTimer();
|
|
showPanel('rx');
|
|
updateRxDisplay(params);
|
|
initRxScope();
|
|
initRxWaterfall();
|
|
syncWaterfallControls();
|
|
resetRxVisuals();
|
|
showConsole();
|
|
addConsoleEntry('RX capture started at ' + (params.frequency_hz / 1e6).toFixed(3) + ' MHz', 'info');
|
|
if (params.trigger_enabled) {
|
|
const pre = Number(params.trigger_pre_ms || 0);
|
|
const post = Number(params.trigger_post_ms || 0);
|
|
addConsoleEntry(
|
|
`Smart trigger armed (pre ${pre}ms / post ${post}ms)`,
|
|
'info'
|
|
);
|
|
}
|
|
updatePhaseIndicator('tuning');
|
|
setTimeout(() => updatePhaseIndicator('listening'), 500);
|
|
} else {
|
|
addConsoleEntry(data.message || 'Failed to start capture', 'error');
|
|
alert(data.message || 'Failed to start capture');
|
|
}
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function stopRx() {
|
|
fetch('/subghz/receive/stop', { method: 'POST' })
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
updateStatusUI({ mode: 'idle' });
|
|
stopStatusTimer();
|
|
resetRxVisuals();
|
|
addConsoleEntry('Capture stopped', 'warn');
|
|
updatePhaseIndicator(null);
|
|
loadCaptures();
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
// ------ DECODE ------
|
|
|
|
function startDecode() {
|
|
const params = getParams();
|
|
clearDecodeOutput();
|
|
fetch('/subghz/decode/start', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(params),
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'started') {
|
|
updateStatusUI({ mode: 'decode' });
|
|
showPanel('decode');
|
|
showConsole();
|
|
initDecodeScope();
|
|
initDecodeWaterfall();
|
|
resetDecodeVisuals();
|
|
addConsoleEntry('Decode started at ' + (params.frequency_hz / 1e6).toFixed(3) + ' MHz', 'info');
|
|
addConsoleEntry('[decode] Profile: ' + (params.decode_profile || 'weather'), 'info');
|
|
if (data.sample_rate && Number(data.sample_rate) !== Number(params.sample_rate)) {
|
|
addConsoleEntry(
|
|
'[decode] Sample rate adjusted to ' + (data.sample_rate / 1000).toFixed(0) + ' kHz for stability',
|
|
'info'
|
|
);
|
|
}
|
|
updatePhaseIndicator('tuning');
|
|
setTimeout(() => updatePhaseIndicator('listening'), 800);
|
|
} else {
|
|
addConsoleEntry(data.message || 'Failed to start decode', 'error');
|
|
alert(data.message || 'Failed to start decode');
|
|
}
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function stopDecode() {
|
|
fetch('/subghz/decode/stop', { method: 'POST' })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
updateStatusUI({ mode: 'idle' });
|
|
addConsoleEntry('Decode stopped', 'warn');
|
|
resetDecodeVisuals();
|
|
updatePhaseIndicator(null);
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function clearDecodeOutput() {
|
|
const el = document.getElementById('subghzDecodeOutput');
|
|
if (el) el.innerHTML = '<div class="subghz-empty">Waiting for signals...</div>';
|
|
lastRawLine = '';
|
|
lastRawLineTs = 0;
|
|
lastBurstLineTs = 0;
|
|
}
|
|
|
|
function appendDecodeEntry(data) {
|
|
const el = document.getElementById('subghzDecodeOutput');
|
|
if (!el) return;
|
|
|
|
// Remove empty placeholder
|
|
const empty = el.querySelector('.subghz-empty');
|
|
if (empty) empty.remove();
|
|
|
|
const entry = document.createElement('div');
|
|
entry.className = 'subghz-decode-entry';
|
|
const model = data.model || 'Unknown';
|
|
const isRaw = model.toLowerCase() === 'raw';
|
|
if (isRaw) {
|
|
const rawText = String(data.text || '').trim();
|
|
const now = Date.now();
|
|
if (rawText && rawText === lastRawLine && (now - lastRawLineTs) < 2500) {
|
|
return;
|
|
}
|
|
lastRawLine = rawText;
|
|
lastRawLineTs = now;
|
|
}
|
|
if (isRaw) {
|
|
entry.classList.add('is-raw');
|
|
}
|
|
|
|
let html = `<span class="subghz-decode-model">${escapeHtml(model)}</span>`;
|
|
if (isRaw && typeof data.text === 'string') {
|
|
html += `<span class="subghz-decode-rawtext">: ${escapeHtml(data.text)}</span>`;
|
|
} else {
|
|
const skipKeys = ['type', 'model', 'time', 'mic'];
|
|
for (const [key, value] of Object.entries(data)) {
|
|
if (skipKeys.includes(key)) continue;
|
|
html += `<span class="subghz-decode-field"><strong>${escapeHtml(key)}:</strong> ${escapeHtml(String(value))}</span> `;
|
|
}
|
|
}
|
|
|
|
entry.innerHTML = html;
|
|
el.appendChild(entry);
|
|
el.scrollTop = el.scrollHeight;
|
|
|
|
while (el.children.length > 200) {
|
|
el.removeChild(el.firstChild);
|
|
}
|
|
|
|
// Dashboard updates
|
|
if (!isRaw) {
|
|
signalCount++;
|
|
updateStatsStrip('decode');
|
|
addConsoleEntry('Signal: ' + model, 'success');
|
|
}
|
|
updatePhaseIndicator('decoding');
|
|
}
|
|
|
|
function setBurstCanvasHighlight(mode, active) {
|
|
const targets = mode === 'decode'
|
|
? ['subghzDecodeScope', 'subghzDecodeWaterfall']
|
|
: ['subghzRxScope', 'subghzRxWaterfall'];
|
|
for (const id of targets) {
|
|
const canvas = document.getElementById(id);
|
|
const host = canvas?.parentElement;
|
|
if (host) host.classList.toggle('burst-active', !!active);
|
|
}
|
|
}
|
|
|
|
function setBurstIndicator(state, text) {
|
|
const badge = document.getElementById('subghzBurstIndicator');
|
|
const label = document.getElementById('subghzBurstText');
|
|
if (!badge || !label) return;
|
|
badge.classList.remove('active', 'recent');
|
|
if (state === 'active') badge.classList.add('active');
|
|
if (state === 'recent') badge.classList.add('recent');
|
|
label.textContent = text || 'NO BURST';
|
|
}
|
|
|
|
function setRxBurstPill(state, text) {
|
|
const pill = document.getElementById('subghzRxBurstPill');
|
|
if (!pill) return;
|
|
pill.classList.remove('active', 'recent');
|
|
if (state === 'active') pill.classList.add('active');
|
|
if (state === 'recent') pill.classList.add('recent');
|
|
pill.textContent = text || 'IDLE';
|
|
}
|
|
|
|
function updateRxHint(hint, confidence, protocolHint) {
|
|
const textEl = document.getElementById('subghzRxHintText');
|
|
const confEl = document.getElementById('subghzRxHintConfidence');
|
|
if (textEl) {
|
|
if (hint) {
|
|
textEl.textContent = protocolHint
|
|
? `${hint} - ${protocolHint}`
|
|
: hint;
|
|
} else {
|
|
textEl.textContent = 'No modulation hint yet';
|
|
}
|
|
}
|
|
if (confEl) {
|
|
if (typeof confidence === 'number' && confidence > 0) {
|
|
confEl.textContent = `${Math.round(confidence * 100)}%`;
|
|
} else {
|
|
confEl.textContent = '--';
|
|
}
|
|
}
|
|
}
|
|
|
|
function clearBurstIndicatorLater(delayMs) {
|
|
if (burstBadgeTimer) clearTimeout(burstBadgeTimer);
|
|
burstBadgeTimer = setTimeout(() => {
|
|
setBurstIndicator('idle', 'NO BURST');
|
|
setRxBurstPill('idle', 'IDLE');
|
|
setBurstCanvasHighlight('rx', false);
|
|
setBurstCanvasHighlight('decode', false);
|
|
}, delayMs);
|
|
}
|
|
|
|
function handleRxBurst(data) {
|
|
if (!data) return;
|
|
const mode = data.mode === 'decode' ? 'decode' : 'rx';
|
|
|
|
if (data.event === 'start') {
|
|
const startOffset = Math.max(0, Number(data.start_offset_s || 0));
|
|
setBurstIndicator('active', `LIVE ${mode.toUpperCase()} +${startOffset.toFixed(2)}s`);
|
|
if (mode === 'rx') setRxBurstPill('active', 'BURST');
|
|
setBurstCanvasHighlight(mode, true);
|
|
if (burstBadgeTimer) {
|
|
clearTimeout(burstBadgeTimer);
|
|
burstBadgeTimer = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (data.event !== 'end') return;
|
|
const now = Date.now();
|
|
if ((now - lastBurstLineTs) < 250) return;
|
|
lastBurstLineTs = now;
|
|
|
|
const durationMs = Math.max(0, parseInt(data.duration_ms || 0, 10) || 0);
|
|
const peakLevel = Math.max(0, Math.min(100, parseInt(data.peak_level || 0, 10) || 0));
|
|
const startOffset = Math.max(0, Number(data.start_offset_s || 0));
|
|
const modHint = typeof data.modulation_hint === 'string' ? data.modulation_hint.trim() : '';
|
|
const fp = typeof data.fingerprint === 'string' ? data.fingerprint.trim() : '';
|
|
const extras = [
|
|
modHint ? modHint : '',
|
|
fp ? `fp ${fp.slice(0, 8)}` : '',
|
|
].filter(Boolean).join(' • ');
|
|
const burstMsg = `RF burst ${durationMs} ms @ +${startOffset.toFixed(2)}s (peak ${peakLevel}%)${extras ? ' - ' + extras : ''}`;
|
|
|
|
setBurstCanvasHighlight(mode, false);
|
|
setBurstIndicator('recent', `${durationMs}ms - ${peakLevel}%`);
|
|
if (mode === 'rx') setRxBurstPill('recent', `${durationMs}ms`);
|
|
clearBurstIndicatorLater(2200);
|
|
|
|
addConsoleEntry(`[${mode}] ${burstMsg}`, 'success');
|
|
|
|
if (mode === 'decode') {
|
|
appendDecodeEntry({
|
|
model: 'RF Burst',
|
|
duration_ms: durationMs,
|
|
peak_level: `${peakLevel}%`,
|
|
offset_s: startOffset.toFixed(2),
|
|
});
|
|
}
|
|
}
|
|
|
|
// ------ TRANSMIT ------
|
|
|
|
function estimateCaptureDurationSeconds(capture) {
|
|
if (!capture) return 0;
|
|
const direct = Number(capture.duration_seconds || 0);
|
|
if (direct > 0) return direct;
|
|
const sr = Number(capture.sample_rate || 0);
|
|
const size = Number(capture.size_bytes || 0);
|
|
if (sr > 0 && size > 0) return size / (sr * 2);
|
|
return 0;
|
|
}
|
|
|
|
function syncTxSegmentSelection(changedField) {
|
|
const startEl = document.getElementById('subghzTxSegmentStart');
|
|
const endEl = document.getElementById('subghzTxSegmentEnd');
|
|
const enabledEl = document.getElementById('subghzTxSegmentEnabled');
|
|
const summaryEl = document.getElementById('subghzTxSegmentSummary');
|
|
const totalEl = document.getElementById('subghzTxModalDuration');
|
|
|
|
const total = estimateCaptureDurationSeconds(pendingTxCaptureMeta);
|
|
const segmentEnabled = !!enabledEl?.checked && total > 0;
|
|
|
|
if (startEl) startEl.disabled = !segmentEnabled;
|
|
if (endEl) endEl.disabled = !segmentEnabled;
|
|
|
|
if (!segmentEnabled) {
|
|
if (summaryEl) summaryEl.textContent = `Full capture (${total.toFixed(3)} s)`;
|
|
return;
|
|
}
|
|
|
|
let start = Math.max(0, Number(startEl?.value || 0));
|
|
let end = Math.max(0, Number(endEl?.value || total));
|
|
if (changedField === 'start' && end <= start) end = Math.min(total, start + 0.05);
|
|
if (changedField === 'end' && end <= start) start = Math.max(0, end - 0.05);
|
|
start = Math.max(0, Math.min(total, start));
|
|
end = Math.max(start + 0.01, Math.min(total, end));
|
|
|
|
if (startEl) startEl.value = start.toFixed(3);
|
|
if (endEl) endEl.value = end.toFixed(3);
|
|
if (totalEl) totalEl.textContent = `${total.toFixed(3)} s`;
|
|
if (summaryEl) summaryEl.textContent = `Segment ${start.toFixed(3)}s - ${end.toFixed(3)}s (${(end - start).toFixed(3)} s)`;
|
|
}
|
|
|
|
function applyTxBurstSegment(startSeconds, durationSeconds, paddingSeconds) {
|
|
const total = estimateCaptureDurationSeconds(pendingTxCaptureMeta);
|
|
if (total <= 0) return;
|
|
const pad = Math.max(0, Number(paddingSeconds || 0));
|
|
const start = Math.max(0, Number(startSeconds || 0) - pad);
|
|
const end = Math.min(total, Number(startSeconds || 0) + Number(durationSeconds || 0) + pad);
|
|
|
|
const enabledEl = document.getElementById('subghzTxSegmentEnabled');
|
|
const startEl = document.getElementById('subghzTxSegmentStart');
|
|
const endEl = document.getElementById('subghzTxSegmentEnd');
|
|
|
|
if (enabledEl) enabledEl.checked = true;
|
|
if (startEl) startEl.value = start.toFixed(3);
|
|
if (endEl) endEl.value = end.toFixed(3);
|
|
syncTxSegmentSelection('end');
|
|
}
|
|
|
|
function setTxTimelineRangeText(text) {
|
|
const rangeEl = document.getElementById('subghzTxBurstRange');
|
|
if (rangeEl) rangeEl.textContent = text;
|
|
}
|
|
|
|
function bindTxTimelineEditor(timeline, totalSeconds) {
|
|
if (!timeline || totalSeconds <= 0) return;
|
|
const selection = timeline.querySelector('.subghz-tx-burst-selection');
|
|
if (!selection) return;
|
|
|
|
timeline.onmousedown = (event) => {
|
|
if (event.button !== 0) return;
|
|
if (event.target?.classList?.contains('subghz-tx-burst-marker')) return;
|
|
const rect = timeline.getBoundingClientRect();
|
|
const startPx = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
|
|
txTimelineDragState = { rect, startPx, currentPx: startPx };
|
|
timeline.classList.add('dragging');
|
|
selection.style.display = '';
|
|
selection.style.left = `${startPx}px`;
|
|
selection.style.width = '1px';
|
|
setTxTimelineRangeText('Drag to define TX segment');
|
|
event.preventDefault();
|
|
};
|
|
|
|
const onMove = (event) => {
|
|
if (!txTimelineDragState) return;
|
|
const { rect, startPx } = txTimelineDragState;
|
|
const currentPx = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
|
|
txTimelineDragState.currentPx = currentPx;
|
|
const left = Math.min(startPx, currentPx);
|
|
const width = Math.max(1, Math.abs(currentPx - startPx));
|
|
selection.style.left = `${left}px`;
|
|
selection.style.width = `${width}px`;
|
|
|
|
const startSec = (left / rect.width) * totalSeconds;
|
|
const endSec = ((left + width) / rect.width) * totalSeconds;
|
|
setTxTimelineRangeText(
|
|
`Selected ${startSec.toFixed(3)}s - ${endSec.toFixed(3)}s (${(endSec - startSec).toFixed(3)}s)`
|
|
);
|
|
};
|
|
|
|
const onUp = () => {
|
|
if (!txTimelineDragState) return;
|
|
const { rect, startPx, currentPx } = txTimelineDragState;
|
|
txTimelineDragState = null;
|
|
timeline.classList.remove('dragging');
|
|
|
|
const left = Math.min(startPx, currentPx);
|
|
const right = Math.max(startPx, currentPx);
|
|
const startSec = (left / rect.width) * totalSeconds;
|
|
const endSec = (right / rect.width) * totalSeconds;
|
|
const minSpanSeconds = Math.max(0.01, totalSeconds * 0.0025);
|
|
if ((endSec - startSec) >= minSpanSeconds) {
|
|
applyTxBurstSegment(startSec, endSec - startSec, 0.0);
|
|
setTxTimelineRangeText(
|
|
`Segment ${startSec.toFixed(3)}s - ${endSec.toFixed(3)}s (${(endSec - startSec).toFixed(3)}s)`
|
|
);
|
|
} else {
|
|
selection.style.display = 'none';
|
|
setTxTimelineRangeText('Drag on timeline to select TX segment');
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousemove', onMove);
|
|
document.addEventListener('mouseup', onUp);
|
|
timeline.onmouseleave = () => {};
|
|
timeline.dataset.editorBound = '1';
|
|
timeline._txEditorCleanup = () => {
|
|
document.removeEventListener('mousemove', onMove);
|
|
document.removeEventListener('mouseup', onUp);
|
|
};
|
|
}
|
|
|
|
function renderTxBurstAssist(capture) {
|
|
const section = document.getElementById('subghzTxBurstAssist');
|
|
const timeline = document.getElementById('subghzTxBurstTimeline');
|
|
const list = document.getElementById('subghzTxBurstList');
|
|
if (!section || !timeline || !list) return;
|
|
if (typeof timeline._txEditorCleanup === 'function') {
|
|
timeline._txEditorCleanup();
|
|
timeline._txEditorCleanup = null;
|
|
}
|
|
|
|
pendingTxBursts = Array.isArray(capture?.bursts)
|
|
? capture.bursts
|
|
.map(b => ({
|
|
start_seconds: Math.max(0, Number(b.start_seconds || 0)),
|
|
duration_seconds: Math.max(0, Number(b.duration_seconds || 0)),
|
|
peak_level: Math.max(0, Math.min(100, Number(b.peak_level || 0))),
|
|
modulation_hint: typeof b.modulation_hint === 'string' ? b.modulation_hint : '',
|
|
modulation_confidence: Math.max(0, Math.min(1, Number(b.modulation_confidence || 0))),
|
|
fingerprint: typeof b.fingerprint === 'string' ? b.fingerprint : '',
|
|
}))
|
|
.filter(b => b.duration_seconds > 0)
|
|
.sort((a, b) => a.start_seconds - b.start_seconds)
|
|
: [];
|
|
|
|
timeline.innerHTML = '';
|
|
list.innerHTML = '';
|
|
timeline.classList.remove('dragging');
|
|
const selection = document.createElement('div');
|
|
selection.className = 'subghz-tx-burst-selection';
|
|
timeline.appendChild(selection);
|
|
const total = estimateCaptureDurationSeconds(capture);
|
|
setTxTimelineRangeText('Drag on timeline to select TX segment');
|
|
|
|
if (!pendingTxBursts.length || total <= 0) {
|
|
section.style.display = '';
|
|
const empty = document.createElement('div');
|
|
empty.className = 'subghz-tx-burst-empty';
|
|
empty.textContent = 'No burst markers in this capture yet. Record a fresh RAW capture to auto-mark burst timings.';
|
|
list.appendChild(empty);
|
|
bindTxTimelineEditor(timeline, Math.max(0, total));
|
|
return;
|
|
}
|
|
|
|
section.style.display = '';
|
|
const showBursts = pendingTxBursts.slice(0, 60);
|
|
for (let i = 0; i < showBursts.length; i++) {
|
|
const burst = showBursts[i];
|
|
const leftPct = Math.max(0, Math.min(100, (burst.start_seconds / total) * 100));
|
|
const widthPct = Math.max(0.35, Math.min(100, (burst.duration_seconds / total) * 100));
|
|
|
|
const marker = document.createElement('button');
|
|
marker.type = 'button';
|
|
marker.className = 'subghz-tx-burst-marker';
|
|
marker.style.left = `${leftPct}%`;
|
|
marker.style.width = `${widthPct}%`;
|
|
marker.title = `Burst ${i + 1}: +${burst.start_seconds.toFixed(3)}s for ${burst.duration_seconds.toFixed(3)}s`;
|
|
marker.addEventListener('click', () => {
|
|
applyTxBurstSegment(burst.start_seconds, burst.duration_seconds, 0.06);
|
|
});
|
|
timeline.appendChild(marker);
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'subghz-tx-burst-item';
|
|
const text = document.createElement('span');
|
|
const burstParts = [
|
|
`#${i + 1}`,
|
|
`+${burst.start_seconds.toFixed(3)}s`,
|
|
`${burst.duration_seconds.toFixed(3)}s`,
|
|
`peak ${burst.peak_level}%`,
|
|
];
|
|
if (burst.modulation_hint) {
|
|
burstParts.push(`${burst.modulation_hint} ${Math.round(burst.modulation_confidence * 100)}%`);
|
|
}
|
|
if (burst.fingerprint) {
|
|
burstParts.push(`fp ${burst.fingerprint.slice(0, 8)}`);
|
|
}
|
|
text.textContent = burstParts.join(' ');
|
|
const useBtn = document.createElement('button');
|
|
useBtn.type = 'button';
|
|
useBtn.textContent = 'Use';
|
|
useBtn.addEventListener('click', () => {
|
|
applyTxBurstSegment(burst.start_seconds, burst.duration_seconds, 0.06);
|
|
});
|
|
row.appendChild(text);
|
|
row.appendChild(useBtn);
|
|
list.appendChild(row);
|
|
}
|
|
bindTxTimelineEditor(timeline, total);
|
|
}
|
|
|
|
function cleanupTxModalState(closeOverlay = true, clearCapture = true) {
|
|
if (clearCapture) {
|
|
pendingTxCaptureId = null;
|
|
pendingTxCaptureMeta = null;
|
|
}
|
|
pendingTxBursts = [];
|
|
txTimelineDragState = null;
|
|
txModalIntent = 'tx';
|
|
const timeline = document.getElementById('subghzTxBurstTimeline');
|
|
if (timeline && typeof timeline._txEditorCleanup === 'function') {
|
|
timeline._txEditorCleanup();
|
|
timeline._txEditorCleanup = null;
|
|
}
|
|
if (closeOverlay) {
|
|
const overlay = document.getElementById('subghzTxModalOverlay');
|
|
if (overlay) overlay.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
function pickStrongestBurstSegment(totalDuration, paddingSeconds = 0.06) {
|
|
if (!Array.isArray(pendingTxBursts) || pendingTxBursts.length === 0 || totalDuration <= 0) return null;
|
|
const strongest = pendingTxBursts
|
|
.slice()
|
|
.sort((a, b) => {
|
|
const peakDiff = Number(b.peak_level || 0) - Number(a.peak_level || 0);
|
|
if (peakDiff !== 0) return peakDiff;
|
|
return Number(b.duration_seconds || 0) - Number(a.duration_seconds || 0);
|
|
})[0];
|
|
const startRaw = Number(strongest?.start_seconds || 0);
|
|
const durRaw = Number(strongest?.duration_seconds || 0);
|
|
if (durRaw <= 0) return null;
|
|
const start = Math.max(0, startRaw - paddingSeconds);
|
|
const end = Math.min(totalDuration, startRaw + durRaw + paddingSeconds);
|
|
if (end <= start) return null;
|
|
return {
|
|
start_seconds: Number(start.toFixed(3)),
|
|
duration_seconds: Number((end - start).toFixed(3)),
|
|
};
|
|
}
|
|
|
|
function populateTxModalFromCapture(capture) {
|
|
if (!capture) return;
|
|
pendingTxCaptureMeta = capture;
|
|
const freqMhz = (Number(capture.frequency_hz || 0) / 1000000).toFixed(3);
|
|
const freqEl = document.getElementById('subghzTxModalFreq');
|
|
if (freqEl) freqEl.textContent = freqMhz + ' MHz';
|
|
const total = estimateCaptureDurationSeconds(capture);
|
|
const durationEl = document.getElementById('subghzTxModalDuration');
|
|
if (durationEl) durationEl.textContent = `${total.toFixed(3)} s`;
|
|
const enabledEl = document.getElementById('subghzTxSegmentEnabled');
|
|
const startEl = document.getElementById('subghzTxSegmentStart');
|
|
const endEl = document.getElementById('subghzTxSegmentEnd');
|
|
if (enabledEl) enabledEl.checked = false;
|
|
if (startEl) {
|
|
startEl.value = '0.000';
|
|
startEl.min = '0';
|
|
startEl.max = total.toFixed(3);
|
|
startEl.step = '0.01';
|
|
}
|
|
if (endEl) {
|
|
endEl.value = total.toFixed(3);
|
|
endEl.min = '0';
|
|
endEl.max = total.toFixed(3);
|
|
endEl.step = '0.01';
|
|
}
|
|
syncTxSegmentSelection();
|
|
renderTxBurstAssist(capture);
|
|
|
|
if (txModalIntent === 'trim') {
|
|
if (enabledEl) enabledEl.checked = true;
|
|
const auto = pickStrongestBurstSegment(total, 0.06);
|
|
if (auto) {
|
|
applyTxBurstSegment(auto.start_seconds, auto.duration_seconds, 0);
|
|
setTxTimelineRangeText(
|
|
`Trim target ${auto.start_seconds.toFixed(3)}s - ${(auto.start_seconds + auto.duration_seconds).toFixed(3)}s`
|
|
);
|
|
} else {
|
|
syncTxSegmentSelection();
|
|
setTxTimelineRangeText('Select a segment, then click Trim + Save');
|
|
}
|
|
}
|
|
}
|
|
|
|
function getModalTxSegment(options = {}) {
|
|
const allowAutoBurst = options.allowAutoBurst === true;
|
|
const requireSelection = options.requireSelection === true;
|
|
const totalDuration = estimateCaptureDurationSeconds(pendingTxCaptureMeta);
|
|
if (totalDuration <= 0) {
|
|
return { error: 'Capture duration unavailable' };
|
|
}
|
|
|
|
const segmentEnabled = !!document.getElementById('subghzTxSegmentEnabled')?.checked;
|
|
if (segmentEnabled) {
|
|
const startVal = Number(document.getElementById('subghzTxSegmentStart')?.value || 0);
|
|
const endVal = Number(document.getElementById('subghzTxSegmentEnd')?.value || 0);
|
|
const startSeconds = Math.max(0, Math.min(totalDuration, startVal));
|
|
const endSeconds = Math.max(0, Math.min(totalDuration, endVal));
|
|
const durationSeconds = endSeconds - startSeconds;
|
|
if (durationSeconds <= 0) {
|
|
return { error: 'Segment end must be greater than start' };
|
|
}
|
|
return {
|
|
start_seconds: Number(startSeconds.toFixed(3)),
|
|
duration_seconds: Number(durationSeconds.toFixed(3)),
|
|
source: 'manual',
|
|
};
|
|
}
|
|
|
|
if (allowAutoBurst) {
|
|
const auto = pickStrongestBurstSegment(totalDuration, 0.06);
|
|
if (auto) {
|
|
return { ...auto, source: 'auto-burst' };
|
|
}
|
|
}
|
|
|
|
if (requireSelection) {
|
|
return { error: 'Select a segment on the timeline first' };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function buildTxRequest(captureId, segment) {
|
|
const txGain = parseInt(document.getElementById('subghzTxGain')?.value || '20', 10);
|
|
const maxDuration = parseInt(document.getElementById('subghzTxMaxDuration')?.value || '10', 10);
|
|
const serial = (document.getElementById('subghzDeviceSerial')?.value || '').trim();
|
|
const body = {
|
|
capture_id: captureId,
|
|
tx_gain: txGain,
|
|
max_duration: maxDuration,
|
|
};
|
|
if (segment && Number(segment.duration_seconds || 0) > 0) {
|
|
body.start_seconds = Number(segment.start_seconds.toFixed(3));
|
|
body.duration_seconds = Number(segment.duration_seconds.toFixed(3));
|
|
}
|
|
if (serial) body.device_serial = serial;
|
|
return body;
|
|
}
|
|
|
|
function transmitWithBody(body, logMessage, logLevel) {
|
|
const txGain = Number(body.tx_gain || 0);
|
|
showPanel('tx');
|
|
updateTxPanelState(true);
|
|
showConsole();
|
|
addConsoleEntry(logMessage || 'Preparing transmission...', logLevel || 'warn');
|
|
|
|
fetch('/subghz/transmit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'transmitting') {
|
|
lastTxCaptureId = body.capture_id;
|
|
const txSegment = data.segment && typeof data.segment === 'object'
|
|
? {
|
|
start_seconds: Number(data.segment.start_seconds || 0),
|
|
duration_seconds: Number(data.segment.duration_seconds || 0),
|
|
}
|
|
: (typeof body.start_seconds === 'number' && typeof body.duration_seconds === 'number'
|
|
? { start_seconds: body.start_seconds, duration_seconds: body.duration_seconds }
|
|
: null);
|
|
lastTxRequest = { capture_id: body.capture_id };
|
|
if (txSegment && txSegment.duration_seconds > 0) {
|
|
lastTxRequest.start_seconds = Number(txSegment.start_seconds.toFixed(3));
|
|
lastTxRequest.duration_seconds = Number(txSegment.duration_seconds.toFixed(3));
|
|
}
|
|
|
|
updateStatusUI({ mode: 'tx' });
|
|
updateTxPanelState(true);
|
|
startStatusTimer();
|
|
addConsoleEntry('Transmitting on ' + ((data.frequency_hz || 0) / 1e6).toFixed(3) + ' MHz', 'warn');
|
|
if (txSegment && txSegment.duration_seconds > 0) {
|
|
addConsoleEntry(
|
|
`TX segment ${txSegment.start_seconds.toFixed(3)}s + ${txSegment.duration_seconds.toFixed(3)}s`,
|
|
'info'
|
|
);
|
|
}
|
|
|
|
const freqDisplay = document.getElementById('subghzTxFreqDisplay');
|
|
const gainDisplay = document.getElementById('subghzTxGainDisplay');
|
|
if (freqDisplay && data.frequency_hz) freqDisplay.textContent = (data.frequency_hz / 1e6).toFixed(3) + ' MHz';
|
|
if (gainDisplay) gainDisplay.textContent = txGain + ' dB';
|
|
} else {
|
|
updateTxPanelState(false);
|
|
addConsoleEntry(data.message || 'TX failed', 'error');
|
|
alert(data.message || 'TX failed');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
updateTxPanelState(false);
|
|
alert('TX error: ' + err.message);
|
|
});
|
|
}
|
|
|
|
function showTxConfirm(captureId, intent) {
|
|
txModalIntent = intent === 'trim' ? 'trim' : 'tx';
|
|
pendingTxCaptureId = captureId;
|
|
pendingTxCaptureMeta = null;
|
|
pendingTxBursts = [];
|
|
const burstAssist = document.getElementById('subghzTxBurstAssist');
|
|
if (burstAssist) burstAssist.style.display = 'none';
|
|
|
|
const overlay = document.getElementById('subghzTxModalOverlay');
|
|
if (overlay) overlay.classList.add('active');
|
|
|
|
fetch(`/subghz/captures/${encodeURIComponent(captureId)}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.capture) {
|
|
populateTxModalFromCapture(data.capture);
|
|
} else {
|
|
throw new Error('Capture not found');
|
|
}
|
|
})
|
|
.catch(() => {
|
|
const durationEl = document.getElementById('subghzTxModalDuration');
|
|
if (durationEl) durationEl.textContent = '--';
|
|
const summaryEl = document.getElementById('subghzTxSegmentSummary');
|
|
if (summaryEl) summaryEl.textContent = 'Segment controls unavailable';
|
|
const burstAssistEl = document.getElementById('subghzTxBurstAssist');
|
|
if (burstAssistEl) burstAssistEl.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function showTrimCapture(captureId) {
|
|
showTxConfirm(captureId, 'trim');
|
|
}
|
|
|
|
function cancelTx() {
|
|
cleanupTxModalState(true, true);
|
|
}
|
|
|
|
function confirmTx() {
|
|
if (!pendingTxCaptureId) return;
|
|
const segment = getModalTxSegment({ allowAutoBurst: false, requireSelection: false });
|
|
if (segment && segment.error) {
|
|
alert(segment.error);
|
|
return;
|
|
}
|
|
const body = buildTxRequest(pendingTxCaptureId, segment);
|
|
cleanupTxModalState(true, true);
|
|
transmitWithBody(body, 'Preparing transmission...', 'warn');
|
|
}
|
|
|
|
function trimCaptureSelection() {
|
|
if (!pendingTxCaptureId) return;
|
|
const segment = getModalTxSegment({ allowAutoBurst: true, requireSelection: true });
|
|
if (!segment || segment.error) {
|
|
alert(segment?.error || 'Select a segment before trimming');
|
|
return;
|
|
}
|
|
|
|
const trimBtn = document.getElementById('subghzTxTrimBtn');
|
|
const originalText = trimBtn?.textContent || 'Trim + Save';
|
|
if (trimBtn) {
|
|
trimBtn.disabled = true;
|
|
trimBtn.textContent = 'Trimming...';
|
|
}
|
|
|
|
fetch(`/subghz/captures/${encodeURIComponent(pendingTxCaptureId)}/trim`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
start_seconds: segment.start_seconds,
|
|
duration_seconds: segment.duration_seconds,
|
|
}),
|
|
})
|
|
.then(async r => ({ ok: r.ok, data: await r.json() }))
|
|
.then(({ ok, data }) => {
|
|
if (!ok || data.status === 'error') {
|
|
throw new Error(data.message || 'Trim failed');
|
|
}
|
|
if (!data.capture) {
|
|
throw new Error('Trim completed but capture metadata missing');
|
|
}
|
|
|
|
pendingTxCaptureId = data.capture.id;
|
|
txModalIntent = 'tx';
|
|
populateTxModalFromCapture(data.capture);
|
|
loadCaptures();
|
|
|
|
addConsoleEntry(
|
|
`Trimmed capture saved (${segment.duration_seconds.toFixed(3)}s).`,
|
|
'success'
|
|
);
|
|
})
|
|
.catch(err => {
|
|
alert('Trim failed: ' + err.message);
|
|
})
|
|
.finally(() => {
|
|
if (trimBtn) {
|
|
trimBtn.disabled = false;
|
|
trimBtn.textContent = originalText;
|
|
}
|
|
});
|
|
}
|
|
|
|
function stopTx() {
|
|
fetch('/subghz/transmit/stop', { method: 'POST' })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
finalizeTxUi('Transmission stopped');
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function finalizeTxUi(message) {
|
|
updateStatusUI({ mode: 'idle' });
|
|
updateTxPanelState(false);
|
|
stopStatusTimer();
|
|
if (message) addConsoleEntry(message, 'info');
|
|
updatePhaseIndicator(null);
|
|
loadCaptures();
|
|
}
|
|
|
|
function updateTxPanelState(transmitting) {
|
|
const txDisplay = document.getElementById('subghzTxDisplay');
|
|
const label = document.getElementById('subghzTxStateLabel');
|
|
const stopBtn = document.getElementById('subghzTxStopBtn');
|
|
const chooseBtn = document.getElementById('subghzTxChooseCaptureBtn');
|
|
const replayBtn = document.getElementById('subghzTxReplayLastBtn');
|
|
if (txDisplay) {
|
|
txDisplay.classList.toggle('transmitting', !!transmitting);
|
|
txDisplay.classList.toggle('idle', !transmitting);
|
|
}
|
|
if (label) label.textContent = transmitting ? 'TRANSMITTING' : 'READY';
|
|
if (stopBtn) {
|
|
stopBtn.style.display = transmitting ? '' : 'none';
|
|
stopBtn.disabled = !transmitting;
|
|
}
|
|
if (chooseBtn) {
|
|
chooseBtn.style.display = transmitting ? 'none' : '';
|
|
chooseBtn.disabled = !!transmitting;
|
|
}
|
|
if (replayBtn) {
|
|
const canReplay = !!(lastTxRequest && lastTxRequest.capture_id);
|
|
replayBtn.style.display = (!transmitting && canReplay) ? '' : 'none';
|
|
replayBtn.disabled = transmitting || !canReplay;
|
|
}
|
|
}
|
|
|
|
function replayLastTx() {
|
|
if (!lastTxRequest || !lastTxRequest.capture_id) {
|
|
addConsoleEntry('No previous transmission capture selected yet.', 'warn');
|
|
return;
|
|
}
|
|
const body = buildTxRequest(lastTxRequest.capture_id, (
|
|
typeof lastTxRequest.start_seconds === 'number' &&
|
|
typeof lastTxRequest.duration_seconds === 'number'
|
|
) ? {
|
|
start_seconds: lastTxRequest.start_seconds,
|
|
duration_seconds: lastTxRequest.duration_seconds,
|
|
} : null);
|
|
transmitWithBody(body, 'Replaying last selected segment...', 'info');
|
|
}
|
|
|
|
// ------ SWEEP ------
|
|
|
|
function startSweep() {
|
|
const startMhz = parseFloat(document.getElementById('subghzSweepStart')?.value || '300');
|
|
const endMhz = parseFloat(document.getElementById('subghzSweepEnd')?.value || '928');
|
|
const serial = (document.getElementById('subghzDeviceSerial')?.value || '').trim();
|
|
|
|
sweepData = [];
|
|
showPanel('sweep');
|
|
initSweepCanvas();
|
|
|
|
const body = {
|
|
freq_start_mhz: startMhz,
|
|
freq_end_mhz: endMhz,
|
|
};
|
|
if (serial) body.device_serial = serial;
|
|
|
|
fetch('/subghz/sweep/start', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'started') {
|
|
updateStatusUI({ mode: 'sweep' });
|
|
showConsole();
|
|
addConsoleEntry('Sweep ' + startMhz + ' - ' + endMhz + ' MHz', 'info');
|
|
updatePhaseIndicator('tuning');
|
|
setTimeout(() => updatePhaseIndicator('listening'), 300);
|
|
} else {
|
|
addConsoleEntry(data.message || 'Failed to start sweep', 'error');
|
|
alert(data.message || 'Failed to start sweep');
|
|
}
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function stopSweep() {
|
|
fetch('/subghz/sweep/stop', { method: 'POST' })
|
|
.then(r => r.json())
|
|
.then(() => {
|
|
updateStatusUI({ mode: 'idle' });
|
|
addConsoleEntry('Sweep stopped', 'warn');
|
|
updatePhaseIndicator(null);
|
|
})
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function initSweepCanvas() {
|
|
sweepCanvas = document.getElementById('subghzSweepCanvas');
|
|
if (!sweepCanvas) return;
|
|
sweepCtx = sweepCanvas.getContext('2d');
|
|
resizeSweepCanvas();
|
|
bindSweepInteraction();
|
|
|
|
if (!sweepResizeObserver && sweepCanvas.parentElement) {
|
|
sweepResizeObserver = new ResizeObserver(() => {
|
|
resizeSweepCanvas();
|
|
drawSweepChart();
|
|
});
|
|
sweepResizeObserver.observe(sweepCanvas.parentElement);
|
|
}
|
|
}
|
|
|
|
function resizeSweepCanvas() {
|
|
if (!sweepCanvas || !sweepCanvas.parentElement) return;
|
|
const rect = sweepCanvas.parentElement.getBoundingClientRect();
|
|
sweepCanvas.width = rect.width - 24;
|
|
sweepCanvas.height = rect.height - 24;
|
|
}
|
|
|
|
function updateSweepChart(points) {
|
|
for (const pt of points) {
|
|
const idx = sweepData.findIndex(d => Math.abs(d.freq - pt.freq) < 0.01);
|
|
if (idx >= 0) {
|
|
sweepData[idx].power = pt.power;
|
|
} else {
|
|
sweepData.push(pt);
|
|
}
|
|
}
|
|
sweepData.sort((a, b) => a.freq - b.freq);
|
|
|
|
detectPeaks();
|
|
drawSweepChart();
|
|
}
|
|
|
|
function detectPeaks() {
|
|
if (sweepData.length < 5) { sweepPeaks = []; return; }
|
|
const now = Date.now();
|
|
const candidates = [];
|
|
|
|
for (let i = 2; i < sweepData.length - 2; i++) {
|
|
const p = sweepData[i].power;
|
|
if (p > sweepData[i - 1].power && p > sweepData[i + 1].power &&
|
|
p > sweepData[i - 2].power && p > sweepData[i + 2].power) {
|
|
let leftMin = p, rightMin = p;
|
|
for (let j = 1; j <= 20 && i - j >= 0; j++) leftMin = Math.min(leftMin, sweepData[i - j].power);
|
|
for (let j = 1; j <= 20 && i + j < sweepData.length; j++) rightMin = Math.min(rightMin, sweepData[i + j].power);
|
|
const prominence = p - Math.max(leftMin, rightMin);
|
|
if (prominence >= 10) {
|
|
candidates.push({ freq: sweepData[i].freq, power: p, prominence });
|
|
}
|
|
}
|
|
}
|
|
|
|
candidates.sort((a, b) => b.power - a.power);
|
|
sweepPeaks = candidates.slice(0, 10);
|
|
|
|
for (const peak of sweepPeaks) {
|
|
const existing = sweepPeakHold.find(h => Math.abs(h.freq - peak.freq) < 0.5);
|
|
if (existing) {
|
|
if (peak.power >= existing.power) {
|
|
existing.power = peak.power;
|
|
existing.ts = now;
|
|
}
|
|
} else {
|
|
sweepPeakHold.push({ freq: peak.freq, power: peak.power, ts: now });
|
|
}
|
|
}
|
|
|
|
sweepPeakHold = sweepPeakHold.filter(h => now - h.ts < 5000);
|
|
updatePeakList();
|
|
}
|
|
|
|
function drawSweepChart() {
|
|
if (!sweepCtx || !sweepCanvas || sweepData.length < 2) return;
|
|
|
|
const ctx = sweepCtx;
|
|
const w = sweepCanvas.width;
|
|
const h = sweepCanvas.height;
|
|
const pad = SWEEP_PAD;
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
ctx.fillStyle = '#0d1117';
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
const freqMin = sweepData[0].freq;
|
|
const freqMax = sweepData[sweepData.length - 1].freq;
|
|
const powerMin = SWEEP_POWER_MIN;
|
|
const powerMax = SWEEP_POWER_MAX;
|
|
|
|
const chartW = w - pad.left - pad.right;
|
|
const chartH = h - pad.top - pad.bottom;
|
|
|
|
const freqToX = f => pad.left + ((f - freqMin) / (freqMax - freqMin)) * chartW;
|
|
const powerToY = p => pad.top + chartH - ((p - powerMin) / (powerMax - powerMin)) * chartH;
|
|
|
|
// Grid
|
|
ctx.strokeStyle = '#1a1f2e';
|
|
ctx.lineWidth = 1;
|
|
ctx.font = '10px JetBrains Mono, monospace';
|
|
ctx.fillStyle = '#666';
|
|
|
|
for (let db = powerMin; db <= powerMax; db += 20) {
|
|
const y = powerToY(db);
|
|
ctx.beginPath();
|
|
ctx.moveTo(pad.left, y);
|
|
ctx.lineTo(w - pad.right, y);
|
|
ctx.stroke();
|
|
ctx.fillText(db + ' dB', 4, y + 3);
|
|
}
|
|
|
|
const freqRange = freqMax - freqMin;
|
|
const freqStep = freqRange > 500 ? 100 : freqRange > 200 ? 50 : freqRange > 50 ? 10 : 5;
|
|
for (let f = Math.ceil(freqMin / freqStep) * freqStep; f <= freqMax; f += freqStep) {
|
|
const x = freqToX(f);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, pad.top);
|
|
ctx.lineTo(x, h - pad.bottom);
|
|
ctx.stroke();
|
|
ctx.fillText(f + '', x - 10, h - 8);
|
|
}
|
|
|
|
// Spectrum line
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = '#00d4ff';
|
|
ctx.lineWidth = 1.5;
|
|
|
|
for (let i = 0; i < sweepData.length; i++) {
|
|
const x = freqToX(sweepData[i].freq);
|
|
const y = powerToY(sweepData[i].power);
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
}
|
|
ctx.stroke();
|
|
|
|
// Fill under curve
|
|
ctx.lineTo(freqToX(freqMax), powerToY(powerMin));
|
|
ctx.lineTo(freqToX(freqMin), powerToY(powerMin));
|
|
ctx.closePath();
|
|
ctx.fillStyle = 'rgba(0, 212, 255, 0.05)';
|
|
ctx.fill();
|
|
|
|
// Peak hold dashes
|
|
const now = Date.now();
|
|
ctx.strokeStyle = 'rgba(255, 170, 0, 0.4)';
|
|
ctx.lineWidth = 2;
|
|
for (const hold of sweepPeakHold) {
|
|
const age = (now - hold.ts) / 5000;
|
|
ctx.globalAlpha = 1 - age;
|
|
const x = freqToX(hold.freq);
|
|
const y = powerToY(hold.power);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x - 6, y);
|
|
ctx.lineTo(x + 6, y);
|
|
ctx.stroke();
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
|
|
// Peak markers
|
|
for (const peak of sweepPeaks) {
|
|
const x = freqToX(peak.freq);
|
|
const y = powerToY(peak.power);
|
|
ctx.fillStyle = '#ffaa00';
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y - 8);
|
|
ctx.lineTo(x - 4, y - 2);
|
|
ctx.lineTo(x + 4, y - 2);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.font = '9px JetBrains Mono, monospace';
|
|
ctx.fillStyle = 'rgba(255, 170, 0, 0.8)';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(peak.freq.toFixed(1), x, y - 10);
|
|
}
|
|
ctx.textAlign = 'start';
|
|
|
|
// Active frequency marker
|
|
const activeFreq = parseFloat(document.getElementById('subghzFrequency')?.value);
|
|
if (activeFreq && activeFreq >= freqMin && activeFreq <= freqMax) {
|
|
const x = freqToX(activeFreq);
|
|
ctx.save();
|
|
ctx.setLineDash([6, 4]);
|
|
ctx.strokeStyle = 'rgba(0, 255, 136, 0.6)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, pad.top);
|
|
ctx.lineTo(x, h - pad.bottom);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
|
|
// Selected frequency marker
|
|
if (sweepSelectedFreq !== null && sweepSelectedFreq >= freqMin && sweepSelectedFreq <= freqMax) {
|
|
const x = freqToX(sweepSelectedFreq);
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, pad.top);
|
|
ctx.lineTo(x, h - pad.bottom);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Hover cursor line
|
|
if (sweepHoverFreq !== null && sweepHoverFreq >= freqMin && sweepHoverFreq <= freqMax) {
|
|
const x = freqToX(sweepHoverFreq);
|
|
ctx.save();
|
|
ctx.setLineDash([3, 3]);
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, pad.top);
|
|
ctx.lineTo(x, h - pad.bottom);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
}
|
|
|
|
// ------ SWEEP INTERACTION ------
|
|
|
|
function bindSweepInteraction() {
|
|
if (sweepInteractionBound || !sweepCanvas) return;
|
|
sweepInteractionBound = true;
|
|
sweepCanvas.style.cursor = 'crosshair';
|
|
|
|
if (!sweepTooltipEl) {
|
|
sweepTooltipEl = document.createElement('div');
|
|
sweepTooltipEl.className = 'subghz-sweep-tooltip';
|
|
document.body.appendChild(sweepTooltipEl);
|
|
}
|
|
|
|
if (!sweepCtxMenuEl) {
|
|
sweepCtxMenuEl = document.createElement('div');
|
|
sweepCtxMenuEl.className = 'subghz-sweep-ctx-menu';
|
|
document.body.appendChild(sweepCtxMenuEl);
|
|
}
|
|
|
|
sweepDismissHandler = (e) => {
|
|
if (sweepCtxMenuEl && !sweepCtxMenuEl.contains(e.target)) {
|
|
sweepCtxMenuEl.style.display = 'none';
|
|
}
|
|
if (sweepActionBarEl && !sweepActionBarEl.contains(e.target) && e.target !== sweepCanvas) {
|
|
sweepActionBarEl.classList.remove('visible');
|
|
}
|
|
};
|
|
document.addEventListener('click', sweepDismissHandler);
|
|
|
|
function mouseToCanvas(e) {
|
|
const rect = sweepCanvas.getBoundingClientRect();
|
|
const scaleX = sweepCanvas.width / rect.width;
|
|
const scaleY = sweepCanvas.height / rect.height;
|
|
return {
|
|
x: (e.clientX - rect.left) * scaleX,
|
|
y: (e.clientY - rect.top) * scaleY,
|
|
};
|
|
}
|
|
|
|
sweepCanvas.addEventListener('mousemove', (e) => {
|
|
const { x, y } = mouseToCanvas(e);
|
|
const info = sweepPixelToFreqPower(x, y);
|
|
if (!info.inChart || sweepData.length < 2) {
|
|
sweepHoverFreq = null;
|
|
sweepHoverPower = null;
|
|
if (sweepTooltipEl) sweepTooltipEl.style.display = 'none';
|
|
drawSweepChart();
|
|
return;
|
|
}
|
|
sweepHoverFreq = info.freq;
|
|
sweepHoverPower = interpolatePower(info.freq);
|
|
if (sweepTooltipEl) {
|
|
sweepTooltipEl.innerHTML =
|
|
'<span class="tip-freq">' + sweepHoverFreq.toFixed(3) + ' MHz</span>' +
|
|
' · ' +
|
|
'<span class="tip-power">' + sweepHoverPower.toFixed(1) + ' dB</span>';
|
|
sweepTooltipEl.style.left = (e.clientX + 14) + 'px';
|
|
sweepTooltipEl.style.top = (e.clientY - 30) + 'px';
|
|
sweepTooltipEl.style.display = 'block';
|
|
}
|
|
drawSweepChart();
|
|
});
|
|
|
|
sweepCanvas.addEventListener('mouseleave', () => {
|
|
sweepHoverFreq = null;
|
|
sweepHoverPower = null;
|
|
if (sweepTooltipEl) sweepTooltipEl.style.display = 'none';
|
|
drawSweepChart();
|
|
});
|
|
|
|
sweepCanvas.addEventListener('click', (e) => {
|
|
const { x, y } = mouseToCanvas(e);
|
|
const info = sweepPixelToFreqPower(x, y);
|
|
if (!info.inChart || sweepData.length < 2) return;
|
|
sweepSelectedFreq = info.freq;
|
|
tuneFromSweep(info.freq);
|
|
showSweepActionBar(e.clientX, e.clientY, info.freq);
|
|
drawSweepChart();
|
|
});
|
|
|
|
sweepCanvas.addEventListener('contextmenu', (e) => {
|
|
e.preventDefault();
|
|
const { x, y } = mouseToCanvas(e);
|
|
const info = sweepPixelToFreqPower(x, y);
|
|
if (!info.inChart || sweepData.length < 2) return;
|
|
const freq = info.freq;
|
|
const freqStr = freq.toFixed(3);
|
|
|
|
sweepCtxMenuEl.innerHTML =
|
|
'<div class="subghz-ctx-header">' + freqStr + ' MHz</div>' +
|
|
'<div class="subghz-ctx-item" data-action="tune"><span class="ctx-icon">▶</span>Tune Here</div>' +
|
|
'<div class="subghz-ctx-item" data-action="capture"><span class="ctx-icon">●</span>Open RAW at ' + freqStr + ' MHz</div>';
|
|
|
|
sweepCtxMenuEl.style.left = e.clientX + 'px';
|
|
sweepCtxMenuEl.style.top = e.clientY + 'px';
|
|
sweepCtxMenuEl.style.display = 'block';
|
|
|
|
sweepCtxMenuEl.querySelectorAll('.subghz-ctx-item').forEach(item => {
|
|
item.onclick = () => {
|
|
sweepCtxMenuEl.style.display = 'none';
|
|
const action = item.dataset.action;
|
|
if (action === 'tune') tuneFromSweep(freq);
|
|
else if (action === 'capture') tuneAndCapture(freq);
|
|
};
|
|
});
|
|
});
|
|
}
|
|
|
|
// ------ SWEEP ACTIONS ------
|
|
|
|
function tuneFromSweep(freqMhz) {
|
|
const el = document.getElementById('subghzFrequency');
|
|
if (el) el.value = freqMhz.toFixed(3);
|
|
sweepSelectedFreq = freqMhz;
|
|
drawSweepChart();
|
|
}
|
|
|
|
function tuneAndCapture(freqMhz) {
|
|
tuneFromSweep(freqMhz);
|
|
stopSweep();
|
|
hideSweepActionBar();
|
|
setTimeout(() => {
|
|
showPanel('rx');
|
|
updateRxDisplay(getParams());
|
|
showConsole();
|
|
addConsoleEntry('Tuned to ' + freqMhz.toFixed(3) + ' MHz. Press Start to capture RAW.', 'info');
|
|
}, 300);
|
|
}
|
|
|
|
// ------ FLOATING ACTION BAR ------
|
|
|
|
function showSweepActionBar(clientX, clientY, freqMhz) {
|
|
if (!sweepActionBarEl) {
|
|
sweepActionBarEl = document.createElement('div');
|
|
sweepActionBarEl.className = 'subghz-sweep-action-bar';
|
|
document.body.appendChild(sweepActionBarEl);
|
|
}
|
|
|
|
sweepActionBarEl.innerHTML =
|
|
'<button class="subghz-action-btn tune">Tune</button>' +
|
|
'<button class="subghz-action-btn capture">Open RAW</button>';
|
|
|
|
sweepActionBarEl.querySelector('.tune').onclick = (e) => {
|
|
e.stopPropagation();
|
|
tuneFromSweep(freqMhz);
|
|
hideSweepActionBar();
|
|
};
|
|
sweepActionBarEl.querySelector('.capture').onclick = (e) => {
|
|
e.stopPropagation();
|
|
tuneAndCapture(freqMhz);
|
|
};
|
|
|
|
sweepActionBarEl.style.left = (clientX + 10) + 'px';
|
|
sweepActionBarEl.style.top = (clientY + 14) + 'px';
|
|
sweepActionBarEl.classList.remove('visible');
|
|
void sweepActionBarEl.offsetHeight;
|
|
sweepActionBarEl.classList.add('visible');
|
|
}
|
|
|
|
function hideSweepActionBar() {
|
|
if (sweepActionBarEl) sweepActionBarEl.classList.remove('visible');
|
|
}
|
|
|
|
// ------ PEAK LIST ------
|
|
|
|
function updatePeakList() {
|
|
// Update sidebar, sweep panel, and any other peak lists
|
|
const lists = [
|
|
document.getElementById('subghzPeakList'),
|
|
document.getElementById('subghzSweepPeakList'),
|
|
];
|
|
for (const list of lists) {
|
|
if (!list) continue;
|
|
list.innerHTML = '';
|
|
for (const peak of sweepPeaks) {
|
|
const item = document.createElement('div');
|
|
item.className = 'subghz-peak-item';
|
|
item.innerHTML =
|
|
'<span class="peak-freq">' + peak.freq.toFixed(3) + ' MHz</span>' +
|
|
'<span class="peak-power">' + peak.power.toFixed(1) + ' dB</span>';
|
|
item.onclick = () => tuneFromSweep(peak.freq);
|
|
list.appendChild(item);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ------ CAPTURES LIBRARY ------
|
|
|
|
function loadCaptures() {
|
|
fetch('/subghz/captures')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const captures = data.captures || [];
|
|
latestCaptures = captures;
|
|
const validIds = new Set(captures.map(c => c.id));
|
|
selectedCaptureIds = new Set([...selectedCaptureIds].filter(id => validIds.has(id)));
|
|
captureCount = captures.length;
|
|
updateStatsStrip();
|
|
updateSavedSelectionUi();
|
|
renderCaptures(captures);
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function burstCountForCapture(cap) {
|
|
return Array.isArray(cap?.bursts) ? cap.bursts.length : 0;
|
|
}
|
|
|
|
function updateSavedSelectionUi() {
|
|
const selectBtn = document.getElementById('subghzSavedSelectBtn');
|
|
const selectAllBtn = document.getElementById('subghzSavedSelectAllBtn');
|
|
const deleteBtn = document.getElementById('subghzSavedDeleteSelectedBtn');
|
|
const countEl = document.getElementById('subghzSavedSelectionCount');
|
|
if (selectBtn) selectBtn.textContent = captureSelectMode ? 'Done' : 'Select';
|
|
if (selectAllBtn) selectAllBtn.style.display = captureSelectMode ? '' : 'none';
|
|
if (deleteBtn) {
|
|
deleteBtn.style.display = captureSelectMode ? '' : 'none';
|
|
deleteBtn.disabled = selectedCaptureIds.size === 0;
|
|
}
|
|
if (countEl) {
|
|
countEl.style.display = captureSelectMode ? '' : 'none';
|
|
countEl.textContent = `${selectedCaptureIds.size} selected`;
|
|
}
|
|
}
|
|
|
|
function renderCaptures(captures) {
|
|
// Render to both the visuals panel and the sidebar
|
|
const targets = [
|
|
{
|
|
list: document.getElementById('subghzCapturesList'),
|
|
empty: document.getElementById('subghzCapturesEmpty'),
|
|
selectable: true,
|
|
},
|
|
{
|
|
list: document.getElementById('subghzSidebarCaptures'),
|
|
empty: document.getElementById('subghzSidebarCapturesEmpty'),
|
|
selectable: false,
|
|
},
|
|
];
|
|
|
|
for (const { list, empty, selectable } of targets) {
|
|
if (!list) continue;
|
|
|
|
// Clear existing cards
|
|
list.querySelectorAll('.subghz-capture-card').forEach(c => c.remove());
|
|
|
|
if (captures.length === 0) {
|
|
if (empty) empty.style.display = '';
|
|
continue;
|
|
}
|
|
|
|
if (empty) empty.style.display = 'none';
|
|
|
|
for (const cap of captures) {
|
|
const freqMhz = (cap.frequency_hz / 1000000).toFixed(3);
|
|
const sizeKb = (cap.size_bytes / 1024).toFixed(1);
|
|
const ts = cap.timestamp ? new Date(cap.timestamp).toLocaleString() : '';
|
|
const dur = cap.duration_seconds ? cap.duration_seconds.toFixed(1) + 's' : '';
|
|
const burstCount = burstCountForCapture(cap);
|
|
const selected = selectedCaptureIds.has(cap.id);
|
|
const modulationHint = typeof cap.modulation_hint === 'string' ? cap.modulation_hint : '';
|
|
const modulationConfidence = Number(cap.modulation_confidence || 0);
|
|
const protocolHint = typeof cap.protocol_hint === 'string' ? cap.protocol_hint : '';
|
|
const dominantFingerprint = typeof cap.dominant_fingerprint === 'string' ? cap.dominant_fingerprint : '';
|
|
const fingerprintGroup = typeof cap.fingerprint_group === 'string' ? cap.fingerprint_group : '';
|
|
const fingerprintGroupSize = Number(cap.fingerprint_group_size || 0);
|
|
const labelSource = typeof cap.label_source === 'string' ? cap.label_source : '';
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'subghz-capture-card';
|
|
if (burstCount > 0) card.classList.add('has-bursts');
|
|
if (selectable && captureSelectMode) card.classList.add('select-mode');
|
|
if (selectable && selected) card.classList.add('selected');
|
|
|
|
let actionsHtml = '';
|
|
if (selectable && captureSelectMode) {
|
|
actionsHtml = `
|
|
<div class="subghz-capture-actions select-mode">
|
|
<button class="select-btn ${selected ? 'selected' : ''}" onclick="SubGhz.toggleCaptureSelection('${escapeHtml(cap.id)}', event)">
|
|
${selected ? 'Selected' : 'Select'}
|
|
</button>
|
|
</div>
|
|
`;
|
|
} else {
|
|
actionsHtml = `
|
|
<div class="subghz-capture-actions">
|
|
<button class="replay-btn" onclick="SubGhz.showTxConfirm('${escapeHtml(cap.id)}')">Replay</button>
|
|
<button class="trim-btn" onclick="SubGhz.showTrimCapture('${escapeHtml(cap.id)}')">Trim</button>
|
|
<button onclick="SubGhz.renameCapture('${escapeHtml(cap.id)}')">Rename</button>
|
|
<button onclick="SubGhz.downloadCapture('${escapeHtml(cap.id)}')">Download</button>
|
|
<button class="delete-btn" onclick="SubGhz.deleteCapture('${escapeHtml(cap.id)}')">Delete</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
card.innerHTML = `
|
|
<div class="subghz-capture-header">
|
|
<span class="subghz-capture-freq">${escapeHtml(freqMhz)} MHz</span>
|
|
<div class="subghz-capture-header-right">
|
|
${burstCount > 0 ? `<span class="subghz-capture-burst-badge">${burstCount} burst${burstCount === 1 ? '' : 's'}</span>` : ''}
|
|
<span class="subghz-capture-time">${escapeHtml(ts)}</span>
|
|
</div>
|
|
</div>
|
|
${burstCount > 0 ? `
|
|
<div class="subghz-capture-burst-line">
|
|
<span class="subghz-capture-burst-flag">BURSTS DETECTED</span>
|
|
<span class="subghz-capture-burst-count">${burstCount}</span>
|
|
</div>
|
|
` : ''}
|
|
${(cap.label || modulationHint || dominantFingerprint) ? `
|
|
<div class="subghz-capture-tag-row">
|
|
${cap.label && labelSource === 'auto' ? `<span class="subghz-capture-tag auto">AUTO LABEL</span>` : ''}
|
|
${modulationHint ? `<span class="subghz-capture-tag hint">${escapeHtml(modulationHint)} ${modulationConfidence > 0 ? Math.round(modulationConfidence * 100) + '%' : ''}</span>` : ''}
|
|
${fingerprintGroup ? `<span class="subghz-capture-tag fingerprint">${escapeHtml(fingerprintGroup)}${fingerprintGroupSize > 1 ? ' x' + fingerprintGroupSize : ''}</span>` : ''}
|
|
</div>
|
|
` : ''}
|
|
${cap.label ? `<div class="subghz-capture-label">${escapeHtml(cap.label)}</div>` : ''}
|
|
${protocolHint ? `<div class="subghz-capture-label">${escapeHtml(protocolHint)}</div>` : ''}
|
|
${dominantFingerprint ? `<div class="subghz-capture-label">Fingerprint: ${escapeHtml(dominantFingerprint)}</div>` : ''}
|
|
<div class="subghz-capture-meta">
|
|
<span>${escapeHtml(dur)}</span>
|
|
<span>${escapeHtml(sizeKb)} KB</span>
|
|
<span>${escapeHtml(String(cap.sample_rate / 1000))} kHz</span>
|
|
</div>
|
|
${actionsHtml}
|
|
`;
|
|
if (selectable && captureSelectMode) {
|
|
card.addEventListener('click', (event) => toggleCaptureSelection(cap.id, event));
|
|
}
|
|
list.appendChild(card);
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleCaptureSelectMode(forceValue) {
|
|
captureSelectMode = typeof forceValue === 'boolean' ? forceValue : !captureSelectMode;
|
|
if (!captureSelectMode) selectedCaptureIds.clear();
|
|
updateSavedSelectionUi();
|
|
renderCaptures(latestCaptures);
|
|
}
|
|
|
|
function selectAllCaptures() {
|
|
if (!captureSelectMode) return;
|
|
const allIds = latestCaptures.map(c => c.id);
|
|
if (selectedCaptureIds.size >= allIds.length) {
|
|
selectedCaptureIds.clear();
|
|
} else {
|
|
selectedCaptureIds = new Set(allIds);
|
|
}
|
|
updateSavedSelectionUi();
|
|
renderCaptures(latestCaptures);
|
|
}
|
|
|
|
function toggleCaptureSelection(id, event) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
if (!captureSelectMode) return;
|
|
if (selectedCaptureIds.has(id)) selectedCaptureIds.delete(id);
|
|
else selectedCaptureIds.add(id);
|
|
updateSavedSelectionUi();
|
|
renderCaptures(latestCaptures);
|
|
}
|
|
|
|
function deleteSelectedCaptures() {
|
|
if (!captureSelectMode || selectedCaptureIds.size === 0) return;
|
|
const ids = [...selectedCaptureIds];
|
|
if (!confirm(`Delete ${ids.length} selected capture${ids.length === 1 ? '' : 's'}?`)) return;
|
|
|
|
Promise.all(
|
|
ids.map(id => fetch(`/subghz/captures/${encodeURIComponent(id)}`, { method: 'DELETE' }))
|
|
)
|
|
.then(() => {
|
|
selectedCaptureIds.clear();
|
|
captureSelectMode = false;
|
|
updateSavedSelectionUi();
|
|
loadCaptures();
|
|
})
|
|
.catch(err => alert('Error deleting captures: ' + err.message));
|
|
}
|
|
|
|
function deleteCapture(id) {
|
|
if (!confirm('Delete this capture?')) return;
|
|
fetch(`/subghz/captures/${encodeURIComponent(id)}`, { method: 'DELETE' })
|
|
.then(r => r.json())
|
|
.then(() => loadCaptures())
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function renameCapture(id) {
|
|
const label = prompt('Enter label for this capture:');
|
|
if (label === null) return;
|
|
fetch(`/subghz/captures/${encodeURIComponent(id)}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ label: label }),
|
|
})
|
|
.then(r => r.json())
|
|
.then(() => loadCaptures())
|
|
.catch(err => alert('Error: ' + err.message));
|
|
}
|
|
|
|
function downloadCapture(id) {
|
|
window.open(`/subghz/captures/${encodeURIComponent(id)}/download`, '_blank');
|
|
}
|
|
|
|
// ------ SSE STREAM ------
|
|
|
|
function startStream() {
|
|
if (eventSource) {
|
|
eventSource.close();
|
|
}
|
|
|
|
eventSource = new EventSource('/subghz/stream');
|
|
|
|
eventSource.onmessage = function(e) {
|
|
try {
|
|
const data = JSON.parse(e.data);
|
|
handleEvent(data);
|
|
} catch (err) {
|
|
// Ignore parse errors (keepalives etc.)
|
|
}
|
|
};
|
|
|
|
eventSource.onerror = function() {
|
|
setTimeout(() => {
|
|
if (document.getElementById('subghzMode')?.classList.contains('active')) {
|
|
startStream();
|
|
}
|
|
}, 3000);
|
|
};
|
|
}
|
|
|
|
function handleEvent(data) {
|
|
const type = data.type;
|
|
|
|
if (type === 'status') {
|
|
updateStatusUI(data);
|
|
if (data.status === 'started') {
|
|
if (data.mode === 'rx') startStatusTimer();
|
|
if (data.mode === 'decode') {
|
|
showConsole();
|
|
}
|
|
if (data.mode === 'sweep') {
|
|
if (activePanel !== 'sweep') showPanel('sweep');
|
|
}
|
|
} else if (data.status === 'stopped' || data.status === 'decode_stopped' || data.status === 'sweep_stopped') {
|
|
stopStatusTimer();
|
|
resetRxVisuals();
|
|
resetDecodeVisuals();
|
|
addConsoleEntry('Operation stopped', 'warn');
|
|
updatePhaseIndicator(null);
|
|
if (data.mode === 'idle') loadCaptures();
|
|
}
|
|
} else if (type === 'decode') {
|
|
appendDecodeEntry(data);
|
|
} else if (type === 'decode_raw') {
|
|
appendDecodeEntry({ model: 'Raw', text: data.text });
|
|
} else if (type === 'rx_level') {
|
|
updateRxLevel(data.level);
|
|
} else if (type === 'rx_waveform') {
|
|
updateRxWaveform(data.samples);
|
|
} else if (type === 'rx_spectrum') {
|
|
updateRxSpectrum(data.bins);
|
|
} else if (type === 'rx_stats') {
|
|
updateRxStats(data);
|
|
} else if (type === 'rx_hint') {
|
|
const confidence = Number(data.confidence || 0);
|
|
updateRxHint(data.modulation_hint || '', confidence, data.protocol_hint || '');
|
|
const now = Date.now();
|
|
if ((now - lastRxHintTs) > 4000 && data.modulation_hint) {
|
|
lastRxHintTs = now;
|
|
addConsoleEntry(
|
|
`[rx] Hint: ${data.modulation_hint} (${Math.round(confidence * 100)}%)` +
|
|
(data.protocol_hint ? ` - ${data.protocol_hint}` : ''),
|
|
'info'
|
|
);
|
|
}
|
|
} else if (type === 'decode_level') {
|
|
updateDecodeLevel(data.level);
|
|
} else if (type === 'decode_waveform') {
|
|
updateDecodeWaveform(data.samples);
|
|
} else if (type === 'decode_spectrum') {
|
|
updateDecodeSpectrum(data.bins);
|
|
} else if (type === 'rx_burst') {
|
|
handleRxBurst(data);
|
|
} else if (type === 'sweep') {
|
|
if (data.points) {
|
|
updateSweepChart(data.points);
|
|
updatePhaseIndicator('decoding');
|
|
}
|
|
} else if (type === 'tx_status') {
|
|
if (data.status === 'transmitting') {
|
|
updateStatusUI({ mode: 'tx' });
|
|
if (activePanel !== 'tx') showPanel('tx');
|
|
updateTxPanelState(true);
|
|
startStatusTimer();
|
|
addConsoleEntry('Transmission started', 'warn');
|
|
} else if (data.status === 'tx_complete' || data.status === 'tx_stopped') {
|
|
if (currentMode === 'tx' || activePanel === 'tx') {
|
|
finalizeTxUi('Transmission ended');
|
|
} else {
|
|
updateStatusUI({ mode: 'idle' });
|
|
stopStatusTimer();
|
|
loadCaptures();
|
|
}
|
|
}
|
|
} else if (type === 'info') {
|
|
// rtl_433 stderr info lines
|
|
if (data.text) addConsoleEntry(data.text, 'info');
|
|
} else if (type === 'error') {
|
|
addConsoleEntry(data.message || 'Error', 'error');
|
|
updatePhaseIndicator('error');
|
|
alert(data.message || 'SubGHz error');
|
|
}
|
|
}
|
|
|
|
// ------ UTILITIES ------
|
|
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
/**
|
|
* Clean up when switching away from SubGHz mode
|
|
*/
|
|
function destroy() {
|
|
if (eventSource) {
|
|
eventSource.close();
|
|
eventSource = null;
|
|
}
|
|
if (statusPollTimer) {
|
|
clearInterval(statusPollTimer);
|
|
statusPollTimer = null;
|
|
}
|
|
if (burstBadgeTimer) {
|
|
clearTimeout(burstBadgeTimer);
|
|
burstBadgeTimer = null;
|
|
}
|
|
const txTimeline = document.getElementById('subghzTxBurstTimeline');
|
|
if (txTimeline && typeof txTimeline._txEditorCleanup === 'function') {
|
|
txTimeline._txEditorCleanup();
|
|
txTimeline._txEditorCleanup = null;
|
|
}
|
|
txTimelineDragState = null;
|
|
stopStatusTimer();
|
|
setBurstIndicator('idle', 'NO BURST');
|
|
setRxBurstPill('idle', 'IDLE');
|
|
setBurstCanvasHighlight('rx', false);
|
|
setBurstCanvasHighlight('decode', false);
|
|
|
|
// Clean up interactive sweep elements
|
|
if (sweepTooltipEl) { sweepTooltipEl.remove(); sweepTooltipEl = null; }
|
|
if (sweepCtxMenuEl) { sweepCtxMenuEl.remove(); sweepCtxMenuEl = null; }
|
|
if (sweepActionBarEl) { sweepActionBarEl.remove(); sweepActionBarEl = null; }
|
|
if (sweepDismissHandler) {
|
|
document.removeEventListener('click', sweepDismissHandler);
|
|
sweepDismissHandler = null;
|
|
}
|
|
if (sweepResizeObserver) {
|
|
sweepResizeObserver.disconnect();
|
|
sweepResizeObserver = null;
|
|
}
|
|
sweepInteractionBound = false;
|
|
sweepHoverFreq = null;
|
|
sweepSelectedFreq = null;
|
|
sweepPeaks = [];
|
|
sweepPeakHold = [];
|
|
|
|
if (rxScopeResizeObserver) {
|
|
rxScopeResizeObserver.disconnect();
|
|
rxScopeResizeObserver = null;
|
|
}
|
|
if (rxWaterfallResizeObserver) {
|
|
rxWaterfallResizeObserver.disconnect();
|
|
rxWaterfallResizeObserver = null;
|
|
}
|
|
rxScopeCanvas = null;
|
|
rxScopeCtx = null;
|
|
rxScopeData = [];
|
|
rxWaterfallCanvas = null;
|
|
rxWaterfallCtx = null;
|
|
rxWaterfallPalette = null;
|
|
rxWaterfallPaused = false;
|
|
if (decodeScopeResizeObserver) {
|
|
decodeScopeResizeObserver.disconnect();
|
|
decodeScopeResizeObserver = null;
|
|
}
|
|
if (decodeWaterfallResizeObserver) {
|
|
decodeWaterfallResizeObserver.disconnect();
|
|
decodeWaterfallResizeObserver = null;
|
|
}
|
|
decodeScopeCanvas = null;
|
|
decodeScopeCtx = null;
|
|
decodeScopeData = [];
|
|
decodeWaterfallCanvas = null;
|
|
decodeWaterfallCtx = null;
|
|
decodeWaterfallPalette = null;
|
|
|
|
// Reset dashboard state
|
|
activePanel = null;
|
|
signalCount = 0;
|
|
captureCount = 0;
|
|
consoleEntries = [];
|
|
consoleCollapsed = false;
|
|
currentPhase = null;
|
|
currentMode = 'idle';
|
|
lastRawLine = '';
|
|
lastRawLineTs = 0;
|
|
lastBurstLineTs = 0;
|
|
lastRxHintTs = 0;
|
|
pendingTxBursts = [];
|
|
captureSelectMode = false;
|
|
selectedCaptureIds = new Set();
|
|
latestCaptures = [];
|
|
lastTxCaptureId = null;
|
|
lastTxRequest = null;
|
|
txModalIntent = 'tx';
|
|
}
|
|
|
|
// ------ DASHBOARD: HUB & PANELS ------
|
|
|
|
function showHub() {
|
|
activePanel = null;
|
|
const hub = document.getElementById('subghzActionHub');
|
|
if (hub) hub.style.display = '';
|
|
const panels = ['Rx', 'Sweep', 'Tx', 'Saved'];
|
|
panels.forEach(p => {
|
|
const el = document.getElementById('subghzPanel' + p);
|
|
if (el) el.style.display = 'none';
|
|
});
|
|
updateStatsStrip('idle');
|
|
updateStatusUI({ mode: currentMode });
|
|
}
|
|
|
|
function showPanel(panel) {
|
|
activePanel = panel;
|
|
const hub = document.getElementById('subghzActionHub');
|
|
if (hub) hub.style.display = 'none';
|
|
const panelMap = { rx: 'Rx', sweep: 'Sweep', tx: 'Tx', saved: 'Saved' };
|
|
Object.values(panelMap).forEach(p => {
|
|
const el = document.getElementById('subghzPanel' + p);
|
|
if (el) el.style.display = 'none';
|
|
});
|
|
const target = document.getElementById('subghzPanel' + (panelMap[panel] || ''));
|
|
if (target) target.style.display = '';
|
|
if (panel === 'rx') {
|
|
initRxScope();
|
|
initRxWaterfall();
|
|
syncWaterfallControls();
|
|
} else if (panel === 'saved') {
|
|
updateSavedSelectionUi();
|
|
loadCaptures();
|
|
} else if (panel === 'tx') {
|
|
updateTxPanelState(currentMode === 'tx');
|
|
}
|
|
updateStatsStrip();
|
|
updateStatusUI({ mode: currentMode });
|
|
}
|
|
|
|
function hubAction(action) {
|
|
if (action === 'rx') {
|
|
showPanel('rx');
|
|
updateRxDisplay(getParams());
|
|
showConsole();
|
|
addConsoleEntry('RAW panel ready. Press Start when you want to capture.', 'info');
|
|
} else if (action === 'txselect') {
|
|
showPanel('saved');
|
|
loadCaptures();
|
|
} else if (action === 'sweep') {
|
|
startSweep();
|
|
} else if (action === 'saved') {
|
|
showPanel('saved');
|
|
loadCaptures();
|
|
}
|
|
}
|
|
|
|
function backToHub() {
|
|
// Stop any running operation
|
|
if (currentMode !== 'idle') {
|
|
if (currentMode === 'rx') stopRx();
|
|
else if (currentMode === 'sweep') stopSweep();
|
|
else if (currentMode === 'tx') stopTx();
|
|
}
|
|
showHub();
|
|
const consoleEl = document.getElementById('subghzConsole');
|
|
if (consoleEl) consoleEl.style.display = 'none';
|
|
updatePhaseIndicator(null);
|
|
}
|
|
|
|
function stopActive() {
|
|
if (currentMode === 'rx') stopRx();
|
|
else if (currentMode === 'sweep') stopSweep();
|
|
else if (currentMode === 'tx') stopTx();
|
|
}
|
|
|
|
// ------ DASHBOARD: STATS STRIP ------
|
|
|
|
function updateStatsStrip(mode) {
|
|
const stripDot = document.getElementById('subghzStripDot');
|
|
const stripStatus = document.getElementById('subghzStripStatus');
|
|
const stripFreq = document.getElementById('subghzStripFreq');
|
|
const stripMode = document.getElementById('subghzStripMode');
|
|
const stripSignals = document.getElementById('subghzStripSignals');
|
|
const stripCaptures = document.getElementById('subghzStripCaptures');
|
|
|
|
if (!mode) mode = currentMode || 'idle';
|
|
|
|
if (stripDot) {
|
|
stripDot.className = 'subghz-strip-dot';
|
|
if (mode !== 'idle' && mode !== 'saved') {
|
|
stripDot.classList.add(mode, 'active');
|
|
}
|
|
}
|
|
|
|
const labels = { idle: 'Idle', rx: 'Capturing', decode: 'Decoding', tx: 'Transmitting', sweep: 'Sweeping', saved: 'Library' };
|
|
if (stripStatus) stripStatus.textContent = labels[mode] || mode;
|
|
|
|
const freqEl = document.getElementById('subghzFrequency');
|
|
if (stripFreq && freqEl) {
|
|
stripFreq.textContent = freqEl.value || '--';
|
|
}
|
|
|
|
const modeLabels = { idle: '--', decode: 'READ', rx: 'RAW', sweep: 'SWEEP', tx: 'TX', saved: 'SAVED' };
|
|
if (stripMode) stripMode.textContent = modeLabels[mode] || '--';
|
|
|
|
if (stripSignals) stripSignals.textContent = signalCount;
|
|
if (stripCaptures) stripCaptures.textContent = captureCount;
|
|
}
|
|
|
|
// ------ DASHBOARD: RX DISPLAY ------
|
|
|
|
function updateRxDisplay(params) {
|
|
const freqEl = document.getElementById('subghzRxFreq');
|
|
const lnaEl = document.getElementById('subghzRxLna');
|
|
const vgaEl = document.getElementById('subghzRxVga');
|
|
const srEl = document.getElementById('subghzRxSampleRate');
|
|
|
|
if (freqEl) freqEl.textContent = (params.frequency_hz / 1e6).toFixed(3) + ' MHz';
|
|
if (lnaEl) lnaEl.textContent = params.lna_gain + ' dB';
|
|
if (vgaEl) vgaEl.textContent = params.vga_gain + ' dB';
|
|
if (srEl) srEl.textContent = (params.sample_rate / 1000) + ' kHz';
|
|
}
|
|
|
|
// ------ DASHBOARD: CONSOLE ------
|
|
|
|
function addConsoleEntry(msg, level) {
|
|
level = level || '';
|
|
const now = new Date();
|
|
const ts = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
consoleEntries.push({ ts, msg, level });
|
|
if (consoleEntries.length > 100) consoleEntries.shift();
|
|
|
|
const log = document.getElementById('subghzConsoleLog');
|
|
if (!log) return;
|
|
|
|
const entry = document.createElement('div');
|
|
entry.className = 'subghz-log-entry';
|
|
entry.innerHTML = '<span class="subghz-log-ts">' + escapeHtml(ts) + '</span>' +
|
|
'<span class="subghz-log-msg ' + escapeHtml(level) + '">' + escapeHtml(msg) + '</span>';
|
|
log.appendChild(entry);
|
|
log.scrollTop = log.scrollHeight;
|
|
|
|
while (log.children.length > 100) {
|
|
log.removeChild(log.firstChild);
|
|
}
|
|
}
|
|
|
|
function showConsole() {
|
|
const consoleEl = document.getElementById('subghzConsole');
|
|
if (consoleEl) consoleEl.style.display = '';
|
|
}
|
|
|
|
function toggleConsole() {
|
|
consoleCollapsed = !consoleCollapsed;
|
|
const body = document.getElementById('subghzConsoleBody');
|
|
const btn = document.getElementById('subghzConsoleToggleBtn');
|
|
if (body) body.classList.toggle('collapsed', consoleCollapsed);
|
|
if (btn) btn.classList.toggle('collapsed', consoleCollapsed);
|
|
}
|
|
|
|
function clearConsole() {
|
|
consoleEntries = [];
|
|
const log = document.getElementById('subghzConsoleLog');
|
|
if (log) log.innerHTML = '';
|
|
}
|
|
|
|
function updatePhaseIndicator(phase) {
|
|
currentPhase = phase;
|
|
const steps = ['tuning', 'listening', 'decoding'];
|
|
const phaseEls = {
|
|
tuning: document.getElementById('subghzPhaseTuning'),
|
|
listening: document.getElementById('subghzPhaseListening'),
|
|
decoding: document.getElementById('subghzPhaseDecoding'),
|
|
};
|
|
|
|
if (!phase) {
|
|
Object.values(phaseEls).forEach(el => {
|
|
if (el) el.className = 'subghz-phase-step';
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (phase === 'error') {
|
|
Object.values(phaseEls).forEach(el => {
|
|
if (el) {
|
|
el.className = 'subghz-phase-step';
|
|
el.classList.add('error');
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
const activeIdx = steps.indexOf(phase);
|
|
steps.forEach((step, idx) => {
|
|
const el = phaseEls[step];
|
|
if (!el) return;
|
|
el.className = 'subghz-phase-step';
|
|
if (idx < activeIdx) el.classList.add('completed');
|
|
else if (idx === activeIdx) el.classList.add('active');
|
|
});
|
|
}
|
|
|
|
// ------ PUBLIC API ------
|
|
return {
|
|
init,
|
|
destroy,
|
|
setFreq,
|
|
syncTriggerControls,
|
|
switchTab,
|
|
startRx,
|
|
stopRx,
|
|
startDecode,
|
|
stopDecode,
|
|
startSweep,
|
|
stopSweep,
|
|
showTxConfirm,
|
|
showTrimCapture,
|
|
cancelTx,
|
|
syncTxSegmentSelection,
|
|
confirmTx,
|
|
trimCaptureSelection,
|
|
stopTx,
|
|
replayLastTx,
|
|
loadCaptures,
|
|
toggleCaptureSelectMode,
|
|
selectAllCaptures,
|
|
deleteSelectedCaptures,
|
|
toggleCaptureSelection,
|
|
deleteCapture,
|
|
renameCapture,
|
|
downloadCapture,
|
|
tuneFromSweep,
|
|
tuneAndCapture,
|
|
// Dashboard
|
|
showHub,
|
|
showPanel,
|
|
hubAction,
|
|
backToHub,
|
|
stopActive,
|
|
toggleConsole,
|
|
clearConsole,
|
|
// Waterfall controls
|
|
toggleWaterfall,
|
|
setWaterfallFloor,
|
|
setWaterfallRange,
|
|
};
|
|
})();
|