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,311 +790,310 @@
|
|||
</footer>
|
||||
</div>
|
||||
|
||||
<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;
|
||||
<script>
|
||||
(function(){
|
||||
const plotImg = document.getElementById('plotImage');
|
||||
const tmuxTerminal = document.getElementById('tmuxTerminal');
|
||||
let isPlotPaused = false;
|
||||
let isStreaming = false;
|
||||
let autoScroll = true;
|
||||
let lastTmuxLength = 0;
|
||||
|
||||
// Helper to show status for a specific element
|
||||
function showStatus(id, message, type = 'success') {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.textContent = message;
|
||||
el.className = 'status ' + (type === 'success' ? 'success' : 'error');
|
||||
el.style.display = 'block';
|
||||
if (type === 'success') setTimeout(()=>{ el.style.display = 'none'; }, 3000);
|
||||
// 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);
|
||||
if (!el) return;
|
||||
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
|
||||
function updateStreamStatus(state) {
|
||||
const statusEl = document.getElementById('streamStatus');
|
||||
const startBtn = document.getElementById('startBtn');
|
||||
const pauseBtn = document.getElementById('pauseBtn');
|
||||
const stopBtn = document.getElementById('stopBtn');
|
||||
// Socket.IO event handlers (FIXED)
|
||||
socket.on('connect', function() {
|
||||
console.log('WebSocket connected');
|
||||
});
|
||||
|
||||
statusEl.className = 'stream-status';
|
||||
socket.on('disconnect', function() {
|
||||
console.log('WebSocket disconnected');
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
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 = ''; // Clear terminal when stopped
|
||||
break;
|
||||
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 {
|
||||
const response = await fetch('/start_stream', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
updateStreamStatus('running');
|
||||
showStatus('gainStatusMessage', 'Streaming started', 'success');
|
||||
} else {
|
||||
showStatus('gainStatusMessage', data.message, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Start stream error:', err);
|
||||
showStatus('gainStatusMessage', 'Error starting stream', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Stream control functions
|
||||
async function startStream() {
|
||||
try {
|
||||
const response = await fetch('/start_stream', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
async function stopStream() {
|
||||
try {
|
||||
const response = await fetch('/stop_stream', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
updateStreamStatus('running');
|
||||
showStatus('gainStatusMessage', 'Streaming started', 'success');
|
||||
} else {
|
||||
showStatus('gainStatusMessage', data.message, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Start stream error:', err);
|
||||
showStatus('gainStatusMessage', 'Error starting stream', 'error');
|
||||
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 stopStream() {
|
||||
try {
|
||||
const response = await fetch('/stop_stream', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
async function pauseStream() {
|
||||
try {
|
||||
const response = await fetch('/pause_stream', { method: 'POST' });
|
||||
const data = await response.json();
|
||||
|
||||
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();
|
||||
if (data.status === 'success') {
|
||||
updateStreamStatus(data.state);
|
||||
} catch (err) {
|
||||
console.error('Error checking stream state:', err);
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch TMUX output
|
||||
async function fetchTmuxOutput() {
|
||||
try {
|
||||
const response = await fetch('/tmux_output');
|
||||
const data = await response.json();
|
||||
// Check stream state periodically
|
||||
async function checkStreamState() {
|
||||
try {
|
||||
const response = await fetch('/get_stream_state');
|
||||
const data = await response.json();
|
||||
updateStreamStatus(data.state);
|
||||
} catch (err) {
|
||||
console.error('Error checking stream state:', err);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
// Fetch TMUX output
|
||||
async function fetchTmuxOutput() {
|
||||
try {
|
||||
const response = await fetch('/tmux_output');
|
||||
const data = await response.json();
|
||||
|
||||
// Auto-scroll to bottom if enabled
|
||||
if (autoScroll) {
|
||||
tmuxTerminal.scrollTop = tmuxTerminal.scrollHeight;
|
||||
}
|
||||
if (data.output && data.output.length > 0) {
|
||||
const currentOutput = data.output.join('\n');
|
||||
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 ----------------
|
||||
const gainForm = document.getElementById('gainForm');
|
||||
const toggles = document.querySelectorAll('.gain-toggle');
|
||||
const gainUpdateBtn = document.getElementById('gainUpdateBtn');
|
||||
const gainRefreshBtn = document.getElementById('gainRefreshBtn');
|
||||
// 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);
|
||||
t.addEventListener('change', () => {
|
||||
if (inputEl) {
|
||||
inputEl.disabled = !t.checked;
|
||||
if (t.checked) inputEl.focus();
|
||||
}
|
||||
});
|
||||
toggles.forEach(t => {
|
||||
const inputId = t.dataset.input;
|
||||
const inputEl = document.getElementById(inputId);
|
||||
t.addEventListener('change', () => {
|
||||
if (inputEl) {
|
||||
inputEl.disabled = !t.checked;
|
||||
if (t.checked) inputEl.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// load existing gain values from server and populate inputs
|
||||
function loadGains(){
|
||||
fetch('/get_gains')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (!data) return;
|
||||
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.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
|
||||
function loadGains(){
|
||||
fetch('/get_gains')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (!data) return;
|
||||
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.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;
|
||||
toggles.forEach(t => {
|
||||
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 => {
|
||||
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;
|
||||
loadGains();
|
||||
} else {
|
||||
showStatus('gainStatusMessage', data.message || 'Error updating gains', 'error');
|
||||
}
|
||||
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');
|
||||
// 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');
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
gainUpdateBtn.disabled = false;
|
||||
console.error(err);
|
||||
showStatus('gainStatusMessage', 'Server error', 'error');
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
gainRefreshBtn.addEventListener('click', function(){
|
||||
loadGains();
|
||||
checkStreamState();
|
||||
startAutoRefresh();
|
||||
startTmuxRefresh();
|
||||
})();
|
||||
</script>
|
||||
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
|
||||
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>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user