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-09-25 11:08:48 -04:00
parent c78fde0af5
commit 666ae6ab5e
1 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
gain_viz/templates/index.html
View File

@ -250,6 +250,32 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
} }
param-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.param-group {
display: flex;
flex-direction: column;
}
.param-group label {
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.param-group input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.param-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
</style> </style>
</head> </head>
<body> <body>
@ -331,6 +357,37 @@
<div id="statusMessage" class="status"></div> <div id="statusMessage" class="status"></div>
</div> </div>
<h2 class="section-title">Spectrogram Parameters</h2>
<div class="param-grid" id="paramContainer">
<div class="param-group">
<label for="center_freq">Center Frequency (Hz)</label>
<input type="number" id="center_freq" name="center_freq" value="2450000000" step="1000000">
</div>
<div class="param-group">
<label for="sample_rate">Sample Rate (Hz)</label>
<input type="number" id="sample_rate" name="sample_rate" value="20000000" step="1000000">
</div>
<div class="param-group">
<label for="fft_size">FFT Size</label>
<input type="number" id="fft_size" name="fft_size" value="1024" step="128">
</div>
<div class="param-group">
<label for="window_type">Window Type</label>
<select id="window_type" name="window_type">
<option value="hamming">Hamming</option>
<option value="hann">Hann</option>
<option value="blackman">Blackman</option>
<option value="rectangular">Rectangular</option>
</select>
</div>
</div>
<div class="button-group">
<button type="submit" id="updateBtn">Update Parameters</button>
</div>
<div id="statusMessage" class="status"></div>
</div>
<div class="plot-container"> <div class="plot-container">
<h3 class="plot-title">Spectrum Analysis</h3> <h3 class="plot-title">Spectrum Analysis</h3>
<img id="plotImage" src="/plot" alt="Spectrum Analysis Plot"> <img id="plotImage" src="/plot" alt="Spectrum Analysis Plot">
@ -430,6 +487,52 @@
}, 3000); }, 3000);
} }
} }
// Add parameter form handling
const paramForm = document.getElementById('paramContainer');
const updateBtn = document.getElementById('updateBtn');
updateBtn.addEventListener('click', function(e) {
e.preventDefault();
const formData = new FormData();
let hasUpdates = false;
// Collect all parameters
const inputs = paramForm.querySelectorAll('input, select');
inputs.forEach(input => {
if (input.type === 'checkbox') {
if (input.checked) {
formData.append(input.name, input.value);
hasUpdates = true;
}
} else {
formData.append(input.name, input.value);
hasUpdates = true;
}
});
if (!hasUpdates) {
showStatus('Please update at least one parameter', 'error');
return;
}
fetch('/update_params', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => {
if (data.status === "success") {
showStatus(data.message, 'success');
} else {
showStatus("Error updating parameters", 'error');
}
})
.catch(err => {
console.error(err);
showStatus("Server error", 'error');
});
});
// Auto-refresh plot every 10ms // Auto-refresh plot every 10ms
setInterval(() => { setInterval(() => {