Update gain_viz/templates/index.html
This commit is contained in:
parent
ee27d5cc7c
commit
b904947483
|
|
@ -390,7 +390,7 @@
|
|||
.plot-area {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 16px; /* Reduced padding */
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -400,7 +400,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px; /* Reduced margin */
|
||||
margin-bottom: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -430,7 +430,7 @@
|
|||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 4px; /* Minimal padding */
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
|
@ -448,12 +448,13 @@
|
|||
border-radius: 8px;
|
||||
display: block;
|
||||
background: #f8fafc;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
/* TMUX Terminal - COMPACT */
|
||||
.tmux-container {
|
||||
height: 150px; /* Further reduced */
|
||||
margin-top: 8px; /* Minimal margin */
|
||||
height: 150px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -463,19 +464,19 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 10px; /* Minimal padding */
|
||||
padding: 4px 10px;
|
||||
background: var(--terminal-bg);
|
||||
color: var(--terminal-text);
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
font-size: 0.8rem; /* Smaller font */
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tmux-controls {
|
||||
display: flex;
|
||||
gap: 4px; /* Minimal gap */
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tmux-btn {
|
||||
|
|
@ -483,9 +484,9 @@
|
|||
border: none;
|
||||
color: var(--terminal-text);
|
||||
cursor: pointer;
|
||||
padding: 2px 4px; /* Minimal padding */
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem; /* Smaller font */
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.tmux-btn:hover {
|
||||
|
|
@ -497,18 +498,18 @@
|
|||
background: var(--terminal-bg);
|
||||
color: var(--terminal-text);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem; /* Smaller font */
|
||||
padding: 6px; /* Minimal padding */
|
||||
font-size: 0.75rem;
|
||||
padding: 6px;
|
||||
overflow-y: auto;
|
||||
border-bottom-left-radius: var(--radius);
|
||||
border-bottom-right-radius: var(--radius);
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.2; /* Tighter line height */
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tmux-terminal::-webkit-scrollbar {
|
||||
width: 4px; /* Thinner scrollbar */
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.tmux-terminal::-webkit-scrollbar-track {
|
||||
|
|
@ -615,6 +616,7 @@
|
|||
background: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -788,17 +790,18 @@
|
|||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
(function(){
|
||||
const plotImg = document.getElementById('plotImage');
|
||||
const tmuxTerminal = document.getElementById('tmuxTerminal');
|
||||
let isPlotPaused = false;
|
||||
let isStreaming = false;
|
||||
let refreshInterval;
|
||||
let tmuxInterval;
|
||||
let autoScroll = true;
|
||||
let lastTmuxLength = 0;
|
||||
|
||||
// Socket.IO connection for real-time updates
|
||||
const socket = io();
|
||||
|
||||
// Helper to show status for a specific element
|
||||
function showStatus(id, message, type = 'success') {
|
||||
const el = document.getElementById(id);
|
||||
|
|
@ -847,11 +850,32 @@
|
|||
stopBtn.disabled = true;
|
||||
isStreaming = false;
|
||||
isPlotPaused = false;
|
||||
tmuxTerminal.textContent = ''; // Clear terminal when stopped
|
||||
tmuxTerminal.textContent = '';
|
||||
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
|
||||
async function startStream() {
|
||||
try {
|
||||
|
|
@ -922,12 +946,10 @@
|
|||
const data = await response.json();
|
||||
|
||||
if (data.output && data.output.length > 0) {
|
||||
// Only update if new content is available
|
||||
const currentOutput = data.output.join('\n');
|
||||
if (currentOutput.length !== tmuxTerminal.textContent.length) {
|
||||
tmuxTerminal.textContent = currentOutput;
|
||||
|
||||
// Auto-scroll to bottom if enabled
|
||||
if (autoScroll) {
|
||||
tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight;
|
||||
}
|
||||
|
|
@ -938,13 +960,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
// ---------------- Gain Form ----------------
|
||||
// Gain Form
|
||||
const gainForm = document.getElementById('gainForm');
|
||||
const toggles = document.querySelectorAll('.gain-toggle');
|
||||
const gainUpdateBtn = document.getElementById('gainUpdateBtn');
|
||||
const gainRefreshBtn = document.getElementById('gainRefreshBtn');
|
||||
|
||||
// enable/disable inputs depending on toggle
|
||||
toggles.forEach(t => {
|
||||
const inputId = t.dataset.input;
|
||||
const inputEl = document.getElementById(inputId);
|
||||
|
|
@ -956,7 +977,6 @@
|
|||
});
|
||||
});
|
||||
|
||||
// load existing gain values from server and populate inputs
|
||||
function loadGains(){
|
||||
fetch('/get_gains')
|
||||
.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.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;
|
||||
// ensure toggles are off and inputs disabled initially
|
||||
toggles.forEach(t => {
|
||||
t.checked = false;
|
||||
const input = document.getElementById(t.dataset.input);
|
||||
|
|
@ -999,13 +1018,11 @@
|
|||
gainUpdateBtn.disabled = false;
|
||||
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');
|
||||
|
|
@ -1023,7 +1040,7 @@
|
|||
showStatus('gainStatusMessage','Gains reloaded','success');
|
||||
});
|
||||
|
||||
// ---------------- Params Form ----------------
|
||||
// Params Form
|
||||
const paramForm = document.getElementById('paramForm');
|
||||
paramForm.addEventListener('submit', function(e){
|
||||
e.preventDefault();
|
||||
|
|
@ -1047,26 +1064,9 @@
|
|||
});
|
||||
});
|
||||
|
||||
// ---------------- 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
|
||||
// Plot refresh
|
||||
document.getElementById('refreshPlotBtn').addEventListener('click', function() {
|
||||
refreshPlot();
|
||||
plotImg.src = '/plot?_ts=' + Date.now();
|
||||
});
|
||||
|
||||
// TMUX controls
|
||||
|
|
@ -1087,12 +1087,13 @@
|
|||
// Check stream state every 2 seconds
|
||||
setInterval(checkStreamState, 2000);
|
||||
|
||||
// initial load
|
||||
// Start TMUX output refresh
|
||||
setInterval(fetchTmuxOutput, 1000);
|
||||
|
||||
// Initial load
|
||||
loadGains();
|
||||
checkStreamState();
|
||||
startAutoRefresh();
|
||||
startTmuxRefresh();
|
||||
})();
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user