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

97
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">
@ -794,11 +796,12 @@
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 tmuxInterval;
let autoScroll = true; let autoScroll = true;
let lastTmuxLength = 0; let lastTmuxLength = 0;
// Socket.IO connection for real-time updates
const socket = io();
// Helper to show status for a specific element // Helper to show status for a specific element
function showStatus(id, message, type = 'success') { function showStatus(id, message, type = 'success') {
const el = document.getElementById(id); const el = document.getElementById(id);
@ -847,11 +850,32 @@
stopBtn.disabled = true; stopBtn.disabled = true;
isStreaming = false; isStreaming = false;
isPlotPaused = false; isPlotPaused = false;
tmuxTerminal.textContent = ''; // Clear terminal when stopped tmuxTerminal.textContent = '';
break; break;
} }
} }
// Socket.IO event handlers (FIXED)
socket.on('connect', function() {
console.log('WebSocket connected');
});
socket.on('disconnect', function() {
console.log('WebSocket disconnected');
setTimeout(function() {
window.location.reload();
}, 5000);
});
socket.on('plot_update', function(data) {
// Update plot with base64 image data
plotImg.src = 'data:image/png;base64,' + data.image;
});
socket.on('connect_error', function(error) {
console.error('WebSocket error:', error);
});
// Stream control functions // Stream control functions
async function startStream() { async function startStream() {
try { try {
@ -922,12 +946,10 @@
const data = await response.json(); const data = await response.json();
if (data.output && data.output.length > 0) { if (data.output && data.output.length > 0) {
// Only update if new content is available
const currentOutput = data.output.join('\n'); const currentOutput = data.output.join('\n');
if (currentOutput.length !== tmuxTerminal.textContent.length) { if (currentOutput.length !== tmuxTerminal.textContent.length) {
tmuxTerminal.textContent = currentOutput; tmuxTerminal.textContent = currentOutput;
// Auto-scroll to bottom if enabled
if (autoScroll) { if (autoScroll) {
tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight; tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight;
} }
@ -938,13 +960,12 @@
} }
} }
// ---------------- 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);
@ -956,7 +977,6 @@
}); });
}); });
// 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())
@ -966,7 +986,6 @@
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;
// ensure toggles are off and inputs disabled initially
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);
@ -999,13 +1018,11 @@
gainUpdateBtn.disabled = false; gainUpdateBtn.disabled = false;
if (data && data.status === 'success') { if (data && data.status === 'success') {
showStatus('gainStatusMessage', data.message || 'Gains updated', 'success'); showStatus('gainStatusMessage', data.message || 'Gains updated', 'success');
// reset toggles
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;
}); });
// reload gains from server to reflect current state
loadGains(); loadGains();
} else { } else {
showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error'); showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error');
@ -1023,7 +1040,7 @@
showStatus('gainStatusMessage','Gains reloaded','success'); showStatus('gainStatusMessage','Gains reloaded','success');
}); });
// ---------------- Params Form ---------------- // Params Form
const paramForm = document.getElementById('paramForm'); const paramForm = document.getElementById('paramForm');
paramForm.addEventListener('submit', function(e){ paramForm.addEventListener('submit', function(e){
e.preventDefault(); e.preventDefault();
@ -1047,26 +1064,9 @@
}); });
}); });
// ---------------- Plot refresh ---------------- // 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() { document.getElementById('refreshPlotBtn').addEventListener('click', function() {
refreshPlot(); plotImg.src = '/plot?_ts=' + Date.now();
}); });
// TMUX controls // TMUX controls
@ -1087,11 +1087,12 @@
// Check stream state every 2 seconds // Check stream state every 2 seconds
setInterval(checkStreamState, 2000); setInterval(checkStreamState, 2000);
// initial load // Start TMUX output refresh
setInterval(fetchTmuxOutput, 1000);
// Initial load
loadGains(); loadGains();
checkStreamState(); checkStreamState();
startAutoRefresh();
startTmuxRefresh();
})(); })();
</script> </script>
</body> </body>