gael/gain-viz
1
0
Fork 0
Code Issues Pull Requests Workflows Packages Projects Releases Wiki Activity

Update gain_viz/templates/index.html

Browse Source
This commit is contained in:
G gael 2025-12-17 22:43:00 -05:00
parent ee27d5cc7c
commit b904947483
1 changed files with 292 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

569
gain_viz/templates/index.html
View File

@ -390,7 +390,7 @@
.plot-area { .plot-area {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
padding: 16px; /* Reduced padding */ padding: 16px;
background: #f8fafc; background: #f8fafc;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -400,7 +400,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12px; /* Reduced margin */ margin-bottom: 12px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -430,7 +430,7 @@
background: #fff; background: #fff;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 4px; /* Minimal padding */ padding: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -448,12 +448,13 @@
border-radius: 8px; border-radius: 8px;
display: block; display: block;
background: #f8fafc; background: #f8fafc;
image-rendering: -webkit-optimize-contrast;
} }
/* TMUX Terminal - COMPACT */ /* TMUX Terminal - COMPACT */
.tmux-container { .tmux-container {
height: 150px; /* Further reduced */ height: 150px;
margin-top: 8px; /* Minimal margin */ margin-top: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
@ -463,19 +464,19 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 4px 10px; /* Minimal padding */ padding: 4px 10px;
background: var(--terminal-bg); background: var(--terminal-bg);
color: var(--terminal-text); color: var(--terminal-text);
border-top-left-radius: var(--radius); border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius); border-top-right-radius: var(--radius);
font-size: 0.8rem; /* Smaller font */ font-size: 0.8rem;
font-weight: 500; font-weight: 500;
flex-shrink: 0; flex-shrink: 0;
} }
.tmux-controls { .tmux-controls {
display: flex; display: flex;
gap: 4px; /* Minimal gap */ gap: 4px;
} }
.tmux-btn { .tmux-btn {
@ -483,9 +484,9 @@
border: none; border: none;
color: var(--terminal-text); color: var(--terminal-text);
cursor: pointer; cursor: pointer;
padding: 2px 4px; /* Minimal padding */ padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
font-size: 0.7rem; /* Smaller font */ font-size: 0.7rem;
} }
.tmux-btn:hover { .tmux-btn:hover {
@ -497,18 +498,18 @@
background: var(--terminal-bg); background: var(--terminal-bg);
color: var(--terminal-text); color: var(--terminal-text);
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 0.75rem; /* Smaller font */ font-size: 0.75rem;
padding: 6px; /* Minimal padding */ padding: 6px;
overflow-y: auto; overflow-y: auto;
border-bottom-left-radius: var(--radius); border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius); border-bottom-right-radius: var(--radius);
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.2; /* Tighter line height */ line-height: 1.2;
} }
.tmux-terminal::-webkit-scrollbar { .tmux-terminal::-webkit-scrollbar {
width: 4px; /* Thinner scrollbar */ width: 4px;
} }
.tmux-terminal::-webkit-scrollbar-track { .tmux-terminal::-webkit-scrollbar-track {
@ -615,6 +616,7 @@
background: #94a3b8; background: #94a3b8;
} }
</style> </style>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -788,311 +790,310 @@
</footer> </footer>
</div> </div>
<script> <script>
(function(){ (function(){
const plotImg = document.getElementById('plotImage'); const plotImg = document.getElementById('plotImage');
const tmuxTerminal = document.getElementById('tmuxTerminal'); const tmuxTerminal = document.getElementById('tmuxTerminal');
let isPlotPaused = false; let isPlotPaused = false;
let isStreaming = false; let isStreaming = false;
let refreshInterval; let autoScroll = true;
let tmuxInterval; let lastTmuxLength = 0;
let autoScroll = true;
let lastTmuxLength = 0;
// Helper to show status for a specific element // Socket.IO connection for real-time updates
function showStatus(id, message, type = 'success') { const socket = io();
const el = document.getElementById(id);
if (!el) return; // Helper to show status for a specific element
el.textContent = message; function showStatus(id, message, type = 'success') {
el.className = 'status ' + (type === 'success' ? 'success' : 'error'); const el = document.getElementById(id);
el.style.display = 'block'; if (!el) return;
if (type === 'success') setTimeout(()=>{ el.style.display = 'none'; }, 3000); el.textContent = message;
el.className = 'status ' + (type === 'success' ? 'success' : 'error');
el.style.display = 'block';
if (type === 'success') setTimeout(()=>{ el.style.display = 'none'; }, 3000);
}
// Update stream status display
function updateStreamStatus(state) {
const statusEl = document.getElementById('streamStatus');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
statusEl.className = 'stream-status';
switch(state) {
case 'running':
statusEl.classList.add('status-running');
statusEl.innerHTML = '<span>●</span> Streaming';
startBtn.disabled = true;
pauseBtn.disabled = false;
stopBtn.disabled = false;
pauseBtn.innerHTML = '<span>⏸️</span> Pause';
isStreaming = true;
isPlotPaused = false;
break;
case 'paused':
statusEl.classList.add('status-paused');
statusEl.innerHTML = '<span>●</span> Paused';
startBtn.disabled = true;
pauseBtn.disabled = false;
stopBtn.disabled = false;
pauseBtn.innerHTML = '<span>▶️</span> Resume';
isStreaming = true;
isPlotPaused = true;
break;
case 'stopped':
statusEl.classList.add('status-stopped');
statusEl.innerHTML = '<span>●</span> Stopped';
startBtn.disabled = false;
pauseBtn.disabled = true;
stopBtn.disabled = true;
isStreaming = false;
isPlotPaused = false;
tmuxTerminal.textContent = '';
break;
} }
}
// Update stream status display // Socket.IO event handlers (FIXED)
function updateStreamStatus(state) { socket.on('connect', function() {
const statusEl = document.getElementById('streamStatus'); console.log('WebSocket connected');
const startBtn = document.getElementById('startBtn'); });
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
statusEl.className = 'stream-status'; socket.on('disconnect', function() {
console.log('WebSocket disconnected');
setTimeout(function() {
window.location.reload();
}, 5000);
});
switch(state) { socket.on('plot_update', function(data) {
case 'running': // Update plot with base64 image data
statusEl.classList.add('status-running'); plotImg.src = 'data:image/png;base64,' + data.image;
statusEl.innerHTML = '<span>●</span> Streaming'; });
startBtn.disabled = true;
pauseBtn.disabled = false; socket.on('connect_error', function(error) {
stopBtn.disabled = false; console.error('WebSocket error:', error);
pauseBtn.innerHTML = '<span>⏸️</span> Pause'; });
isStreaming = true;
isPlotPaused = false; // Stream control functions
break; async function startStream() {
case 'paused': try {
statusEl.classList.add('status-paused'); const response = await fetch('/start_stream', { method: 'POST' });
statusEl.innerHTML = '<span>●</span> Paused'; const data = await response.json();
startBtn.disabled = true;
pauseBtn.disabled = false; if (data.status === 'success') {
stopBtn.disabled = false; updateStreamStatus('running');
pauseBtn.innerHTML = '<span>▶️</span> Resume'; showStatus('gainStatusMessage', 'Streaming started', 'success');
isStreaming = true; } else {
isPlotPaused = true; showStatus('gainStatusMessage', data.message, 'error');
break;
case 'stopped':
statusEl.classList.add('status-stopped');
statusEl.innerHTML = '<span>●</span> Stopped';
startBtn.disabled = false;
pauseBtn.disabled = true;
stopBtn.disabled = true;
isStreaming = false;
isPlotPaused = false;
tmuxTerminal.textContent = ''; // Clear terminal when stopped
break;
} }
} catch (err) {
console.error('Start stream error:', err);
showStatus('gainStatusMessage', 'Error starting stream', 'error');
} }
}
// Stream control functions async function stopStream() {
async function startStream() { try {
try { const response = await fetch('/stop_stream', { method: 'POST' });
const response = await fetch('/start_stream', { method: 'POST' }); const data = await response.json();
const data = await response.json();
if (data.status === 'success') { if (data.status === 'success') {
updateStreamStatus('running'); updateStreamStatus('stopped');
showStatus('gainStatusMessage', 'Streaming started', 'success'); showStatus('gainStatusMessage', 'Streaming stopped', 'success');
} else { } else {
showStatus('gainStatusMessage', data.message, 'error'); showStatus('gainStatusMessage', data.message, 'error');
}
} catch (err) {
console.error('Start stream error:', err);
showStatus('gainStatusMessage', 'Error starting stream', 'error');
} }
} catch (err) {
console.error('Stop stream error:', err);
showStatus('gainStatusMessage', 'Error stopping stream', 'error');
} }
}
async function stopStream() { async function pauseStream() {
try { try {
const response = await fetch('/stop_stream', { method: 'POST' }); const response = await fetch('/pause_stream', { method: 'POST' });
const data = await response.json(); const data = await response.json();
if (data.status === 'success') { if (data.status === 'success') {
updateStreamStatus('stopped');
showStatus('gainStatusMessage', 'Streaming stopped', 'success');
} else {
showStatus('gainStatusMessage', data.message, 'error');
}
} catch (err) {
console.error('Stop stream error:', err);
showStatus('gainStatusMessage', 'Error stopping stream', 'error');
}
}
async function pauseStream() {
try {
const response = await fetch('/pause_stream', { method: 'POST' });
const data = await response.json();
if (data.status === 'success') {
updateStreamStatus(data.state);
showStatus('gainStatusMessage', `Streaming ${data.state}`, 'success');
} else {
showStatus('gainStatusMessage', data.message, 'error');
}
} catch (err) {
console.error('Pause stream error:', err);
showStatus('gainStatusMessage', 'Error pausing stream', 'error');
}
}
// Check stream state periodically
async function checkStreamState() {
try {
const response = await fetch('/get_stream_state');
const data = await response.json();
updateStreamStatus(data.state); updateStreamStatus(data.state);
} catch (err) { showStatus('gainStatusMessage', `Streaming ${data.state}`, 'success');
console.error('Error checking stream state:', err); } else {
showStatus('gainStatusMessage', data.message, 'error');
} }
} catch (err) {
console.error('Pause stream error:', err);
showStatus('gainStatusMessage', 'Error pausing stream', 'error');
} }
}
// Fetch TMUX output // Check stream state periodically
async function fetchTmuxOutput() { async function checkStreamState() {
try { try {
const response = await fetch('/tmux_output'); const response = await fetch('/get_stream_state');
const data = await response.json(); const data = await response.json();
updateStreamStatus(data.state);
} catch (err) {
console.error('Error checking stream state:', err);
}
}
if (data.output && data.output.length > 0) { // Fetch TMUX output
// Only update if new content is available async function fetchTmuxOutput() {
const currentOutput = data.output.join('\n'); try {
if (currentOutput.length !== tmuxTerminal.textContent.length) { const response = await fetch('/tmux_output');
tmuxTerminal.textContent = currentOutput; const data = await response.json();
// Auto-scroll to bottom if enabled if (data.output && data.output.length > 0) {
if (autoScroll) { const currentOutput = data.output.join('\n');
tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight; if (currentOutput.length !== tmuxTerminal.textContent.length) {
} tmuxTerminal.textContent = currentOutput;
if (autoScroll) {
tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight;
} }
} }
} catch (err) {
console.error('Error fetching TMUX output:', err);
} }
} catch (err) {
console.error('Error fetching TMUX output:', err);
} }
}
// ---------------- Gain Form ---------------- // Gain Form
const gainForm = document.getElementById('gainForm'); const gainForm = document.getElementById('gainForm');
const toggles = document.querySelectorAll('.gain-toggle'); const toggles = document.querySelectorAll('.gain-toggle');
const gainUpdateBtn = document.getElementById('gainUpdateBtn'); const gainUpdateBtn = document.getElementById('gainUpdateBtn');
const gainRefreshBtn = document.getElementById('gainRefreshBtn'); const gainRefreshBtn = document.getElementById('gainRefreshBtn');
// enable/disable inputs depending on toggle toggles.forEach(t => {
toggles.forEach(t => { const inputId = t.dataset.input;
const inputId = t.dataset.input; const inputEl = document.getElementById(inputId);
const inputEl = document.getElementById(inputId); t.addEventListener('change', () => {
t.addEventListener('change', () => { if (inputEl) {
if (inputEl) { inputEl.disabled = !t.checked;
inputEl.disabled = !t.checked; if (t.checked) inputEl.focus();
if (t.checked) inputEl.focus(); }
}
});
}); });
});
// load existing gain values from server and populate inputs function loadGains(){
function loadGains(){ fetch('/get_gains')
fetch('/get_gains') .then(r => r.json())
.then(r => r.json()) .then(data => {
.then(data => { if (!data) return;
if (!data) return; if (data.usrp_tx_gain !== undefined) document.getElementById('usrp_tx_gain').value = data.usrp_tx_gain;
if (data.usrp_tx_gain !== undefined) document.getElementById('usrp_tx_gain').value = data.usrp_tx_gain; if (data.usrp_rx_gain !== undefined) document.getElementById('usrp_rx_gain').value = data.usrp_rx_gain;
if (data.usrp_rx_gain !== undefined) document.getElementById('usrp_rx_gain').value = data.usrp_rx_gain; if (data.scm_tx_gain !== undefined) document.getElementById('scm_tx_gain').value = data.scm_tx_gain;
if (data.scm_tx_gain !== undefined) document.getElementById('scm_tx_gain').value = data.scm_tx_gain; if (data.scm_rx_gain !== undefined) document.getElementById('scm_rx_gain').value = data.scm_rx_gain;
if (data.scm_rx_gain !== undefined) document.getElementById('scm_rx_gain').value = data.scm_rx_gain; toggles.forEach(t => {
// ensure toggles are off and inputs disabled initially t.checked = false;
const input = document.getElementById(t.dataset.input);
if (input) input.disabled = true;
});
})
.catch(err => console.error('loadGains error', err));
}
gainForm.addEventListener('submit', function(e){
e.preventDefault();
const formData = new FormData();
let has = false;
toggles.forEach(t => {
if (t.checked) {
const inputId = t.dataset.input;
const val = document.getElementById(inputId).value;
formData.append(inputId, val);
has = true;
}
});
if (!has) {
showStatus('gainStatusMessage', 'Please enable at least one gain to update', 'error');
return;
}
gainUpdateBtn.disabled = true;
fetch('/update_gains', { method:'POST', body: formData })
.then(r => r.json())
.then(data => {
gainUpdateBtn.disabled = false;
if (data && data.status === 'success') {
showStatus('gainStatusMessage', data.message || 'Gains updated', 'success');
toggles.forEach(t => { toggles.forEach(t => {
t.checked = false; t.checked = false;
const input = document.getElementById(t.dataset.input); const input = document.getElementById(t.dataset.input);
if (input) input.disabled = true; if (input) input.disabled = true;
}); });
}) loadGains();
.catch(err => console.error('loadGains error', err)); } else {
} showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error');
gainForm.addEventListener('submit', function(e){
e.preventDefault();
const formData = new FormData();
let has = false;
toggles.forEach(t => {
if (t.checked) {
const inputId = t.dataset.input;
const val = document.getElementById(inputId).value;
formData.append(inputId, val);
has = true;
}
});
if (!has) {
showStatus('gainStatusMessage', 'Please enable at least one gain to update', 'error');
return;
} }
gainUpdateBtn.disabled = true; })
fetch('/update_gains', { method:'POST', body: formData }) .catch(err => {
.then(r => r.json()) gainUpdateBtn.disabled = false;
.then(data => { console.error(err);
gainUpdateBtn.disabled = false; showStatus('gainStatusMessage', 'Server error', 'error');
if (data && data.status === 'success') {
showStatus('gainStatusMessage', data.message || 'Gains updated', 'success');
// reset toggles
toggles.forEach(t => {
t.checked = false;
const input = document.getElementById(t.dataset.input);
if (input) input.disabled = true;
});
// reload gains from server to reflect current state
loadGains();
} else {
showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error');
}
})
.catch(err => {
gainUpdateBtn.disabled = false;
console.error(err);
showStatus('gainStatusMessage', 'Server error', 'error');
});
}); });
});
gainRefreshBtn.addEventListener('click', function(){ gainRefreshBtn.addEventListener('click', function(){
loadGains();
showStatus('gainStatusMessage','Gains reloaded','success');
});
// ---------------- Params Form ----------------
const paramForm = document.getElementById('paramForm');
paramForm.addEventListener('submit', function(e){
e.preventDefault();
const btn = document.getElementById('paramUpdateBtn');
const formData = new FormData(paramForm);
btn.disabled = true;
fetch('/update_params', { method:'POST', body: formData })
.then(r => r.json())
.then(data => {
btn.disabled = false;
if (data && data.status === 'success') {
showStatus('paramStatusMessage', data.message || 'Parameters updated', 'success');
} else {
showStatus('paramStatusMessage', data.message || 'Error updating parameters', 'error');
}
})
.catch(err => {
btn.disabled = false;
console.error(err);
showStatus('paramStatusMessage','Server error','error');
});
});
// ---------------- Plot refresh ----------------
function refreshPlot(){
if (!isStreaming || isPlotPaused) return;
// use cache-buster to avoid cached/partial file
plotImg.src = '/plot?_ts=' + Date.now();
}
// Start auto refresh only when streaming
function startAutoRefresh() {
refreshInterval = setInterval(refreshPlot, 500);
}
// Start TMUX output refresh
function startTmuxRefresh() {
tmuxInterval = setInterval(fetchTmuxOutput, 1000); // Update every second
}
// Manual refresh button
document.getElementById('refreshPlotBtn').addEventListener('click', function() {
refreshPlot();
});
// TMUX controls
document.getElementById('clearTmuxBtn').addEventListener('click', function() {
tmuxTerminal.textContent = '';
});
document.getElementById('autoScrollTmuxBtn').addEventListener('click', function() {
autoScroll = !autoScroll;
this.textContent = `Auto Scroll: ${autoScroll ? 'ON' : 'OFF'}`;
});
// Stream control buttons
document.getElementById('startBtn').addEventListener('click', startStream);
document.getElementById('stopBtn').addEventListener('click', stopStream);
document.getElementById('pauseBtn').addEventListener('click', pauseStream);
// Check stream state every 2 seconds
setInterval(checkStreamState, 2000);
// initial load
loadGains(); loadGains();
checkStreamState(); showStatus('gainStatusMessage','Gains reloaded','success');
startAutoRefresh(); });
startTmuxRefresh();
})(); // Params Form
</script> const paramForm = document.getElementById('paramForm');
paramForm.addEventListener('submit', function(e){
e.preventDefault();
const btn = document.getElementById('paramUpdateBtn');
const formData = new FormData(paramForm);
btn.disabled = true;
fetch('/update_params', { method:'POST', body: formData })
.then(r => r.json())
.then(data => {
btn.disabled = false;
if (data && data.status === 'success') {
showStatus('paramStatusMessage', data.message || 'Parameters updated', 'success');
} else {
showStatus('paramStatusMessage', data.message || 'Error updating parameters', 'error');
}
})
.catch(err => {
btn.disabled = false;
console.error(err);
showStatus('paramStatusMessage','Server error','error');
});
});
// Plot refresh
document.getElementById('refreshPlotBtn').addEventListener('click', function() {
plotImg.src = '/plot?_ts=' + Date.now();
});
// TMUX controls
document.getElementById('clearTmuxBtn').addEventListener('click', function() {
tmuxTerminal.textContent = '';
});
document.getElementById('autoScrollTmuxBtn').addEventListener('click', function() {
autoScroll = !autoScroll;
this.textContent = `Auto Scroll: ${autoScroll ? 'ON' : 'OFF'}`;
});
// Stream control buttons
document.getElementById('startBtn').addEventListener('click', startStream);
document.getElementById('stopBtn').addEventListener('click', stopStream);
document.getElementById('pauseBtn').addEventListener('click', pauseStream);
// Check stream state every 2 seconds
setInterval(checkStreamState, 2000);
// Start TMUX output refresh
setInterval(fetchTmuxOutput, 1000);
// Initial load
loadGains();
checkStreamState();
})();
</script>
</body> </body>
</html> </html>