diff --git a/static/css/modes/sstv-general.css b/static/css/modes/sstv-general.css index 9e2949d..9ebad84 100644 --- a/static/css/modes/sstv-general.css +++ b/static/css/modes/sstv-general.css @@ -389,6 +389,82 @@ margin-bottom: 12px; } +/* ============================================ + SIGNAL MONITOR + ============================================ */ +.sstv-general-signal-monitor { + width: 100%; + max-width: 320px; + padding: 16px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 8px; +} + +.sstv-general-signal-monitor-header { + display: flex; + align-items: center; + gap: 8px; + font-family: var(--font-mono); + font-size: 10px; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 14px; +} + +.sstv-general-signal-monitor-header svg { + color: var(--accent-cyan); +} + +.sstv-general-signal-level-row { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} + +.sstv-general-signal-level-label { + font-family: var(--font-mono); + font-size: 9px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.5px; + flex-shrink: 0; +} + +.sstv-general-signal-bar-track { + flex: 1; + height: 6px; + background: var(--bg-primary); + border-radius: 3px; + overflow: hidden; +} + +.sstv-general-signal-bar-fill { + height: 100%; + border-radius: 3px; + transition: width 0.3s ease, background 0.3s ease; + background: var(--text-dim); +} + +.sstv-general-signal-level-value { + font-family: var(--font-mono); + font-size: 11px; + font-weight: 600; + color: var(--text-primary); + min-width: 24px; + text-align: right; +} + +.sstv-general-signal-status-text { + font-family: var(--font-mono); + font-size: 10px; + color: var(--text-dim); + text-align: center; +} + /* ============================================ IMAGE MODAL ============================================ */ diff --git a/static/css/modes/sstv.css b/static/css/modes/sstv.css index 6af1ac9..588a25b 100644 --- a/static/css/modes/sstv.css +++ b/static/css/modes/sstv.css @@ -736,6 +736,82 @@ animation: pulse 0.5s infinite; } +/* ============================================ + SIGNAL MONITOR + ============================================ */ +.sstv-signal-monitor { + width: 100%; + max-width: 320px; + padding: 16px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 8px; +} + +.sstv-signal-monitor-header { + display: flex; + align-items: center; + gap: 8px; + font-family: var(--font-mono); + font-size: 10px; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 14px; +} + +.sstv-signal-monitor-header svg { + color: var(--accent-cyan); +} + +.sstv-signal-level-row { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} + +.sstv-signal-level-label { + font-family: var(--font-mono); + font-size: 9px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.5px; + flex-shrink: 0; +} + +.sstv-signal-bar-track { + flex: 1; + height: 6px; + background: var(--bg-primary); + border-radius: 3px; + overflow: hidden; +} + +.sstv-signal-bar-fill { + height: 100%; + border-radius: 3px; + transition: width 0.3s ease, background 0.3s ease; + background: var(--text-dim); +} + +.sstv-signal-level-value { + font-family: var(--font-mono); + font-size: 11px; + font-weight: 600; + color: var(--text-primary); + min-width: 24px; + text-align: right; +} + +.sstv-signal-status-text { + font-family: var(--font-mono); + font-size: 10px; + color: var(--text-dim); + text-align: center; +} + /* ============================================ IMAGE MODAL ============================================ */ diff --git a/static/js/modes/sstv-general.js b/static/js/modes/sstv-general.js index 020ee18..444ef0a 100644 --- a/static/js/modes/sstv-general.js +++ b/static/js/modes/sstv-general.js @@ -247,9 +247,71 @@ const SSTVGeneral = (function() { updateStatusUI('listening', 'Listening...'); } else if (data.status === 'detecting') { updateStatusUI('listening', data.message || 'Listening...'); + if (data.signal_level !== undefined) { + renderSignalMonitor(data); + } } } + /** + * Render signal monitor in live area during detecting mode + */ + function renderSignalMonitor(data) { + const container = document.getElementById('sstvGeneralLiveContent'); + if (!container) return; + + const level = data.signal_level || 0; + const tone = data.sstv_tone; + + let barColor, statusText; + if (tone === 'leader') { + barColor = 'var(--accent-green)'; + statusText = 'SSTV leader tone detected'; + } else if (tone === 'sync') { + barColor = 'var(--accent-cyan)'; + statusText = 'SSTV sync pulse detected'; + } else if (tone === 'noise') { + barColor = 'var(--text-dim)'; + statusText = 'Audio signal present'; + } else if (level > 10) { + barColor = 'var(--text-dim)'; + statusText = 'Audio signal present'; + } else { + barColor = 'var(--text-dim)'; + statusText = 'No signal'; + } + + let monitor = container.querySelector('.sstv-general-signal-monitor'); + if (!monitor) { + container.innerHTML = ` +