106 lines
3.7 KiB
HTML
106 lines
3.7 KiB
HTML
<h1>Radiacode Monitor</h1>
|
|
|
|
<div class="chart-container">
|
|
<h2>24-Hour Gamma Spectrum</h2>
|
|
<div id="spectrumChart"></div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h2>Dose Rate (Last 24h)</h2>
|
|
<div id="rateChart"></div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h2>Count Rate (Last 24h)</h2>
|
|
<div id="countChart"></div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h2>24-Hour Spectrogram Waterfall</h2>
|
|
<div id="waterfallChart"></div>
|
|
</div>
|
|
<div class="download">
|
|
<h2>Raw Data</h2>
|
|
<div id="link"><a href=/live_spectrum.json>Download</a></div>
|
|
|
|
</div>
|
|
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
|
|
<script>
|
|
async function fetchAndRender() {
|
|
// Fetch the aggregated JSON file served by Apache
|
|
const response = await fetch('/live_spectrum.json');
|
|
const data = await response.json();
|
|
|
|
// 1. Render Current Spectrum
|
|
const xKeV = data.accumulated_spectrum.kev;
|
|
const yCounts = data.accumulated_spectrum.count;
|
|
|
|
Plotly.newPlot('spectrumChart', [{
|
|
x: xKeV,
|
|
y: yCounts,
|
|
type: 'scatter',
|
|
mode: 'lines',
|
|
line: { color: '#00ffcc' }
|
|
}], {
|
|
title: 'Energy Spectrum',
|
|
xaxis: { title: 'Energy (keV)' },
|
|
yaxis: { title: 'Counts', type: 'log' },
|
|
paper_bgcolor: '#1e1e1e', plot_bgcolor: '#1e1e1e', font: { color: '#fff' }
|
|
});
|
|
|
|
// 2. Render Dose and Count Rates
|
|
const rateTimes = data.rates_history.time;
|
|
const doseRates = data.rates_history.dose_rate;
|
|
const countRates = data.rates_history.count_rate;
|
|
|
|
Plotly.newPlot('rateChart', [{
|
|
x: rateTimes,
|
|
y: doseRates,
|
|
type: 'scatter',
|
|
name: 'Dose Rate (Sv/h)',
|
|
line: { color: '#ff5555' }
|
|
}], {
|
|
title: 'Real-time Radiation Levels',
|
|
xaxis: { title: 'Time', rangeslider: {} },
|
|
yaxis: { title: 'Dose Rate' },
|
|
paper_bgcolor: '#1e1e1e', plot_bgcolor: '#1e1e1e', font: { color: '#fff' }
|
|
});
|
|
|
|
Plotly.newPlot('countChart', [{
|
|
x: rateTimes,
|
|
y: countRates,
|
|
type: 'scatter',
|
|
name: 'Count Rate (counts/s)',
|
|
line: { color: '#ff5555' }
|
|
}], {
|
|
title: 'Real-time Radiation Levels',
|
|
xaxis: { title: 'Time', rangeslider: {} },
|
|
yaxis: { title: 'Count Rate' },
|
|
paper_bgcolor: '#1e1e1e', plot_bgcolor: '#1e1e1e', font: { color: '#fff' }
|
|
});
|
|
|
|
// 3. Render 24h Spectrogram Waterfall (Heatmap)
|
|
const times = data.spectrogram_history.time;
|
|
const zValues = data.spectrogram_history.counts;
|
|
const xChannels = data.accumulated_spectrum.kev;
|
|
|
|
Plotly.newPlot('waterfallChart', [{
|
|
x: xChannels,
|
|
y: times,
|
|
z: zValues,
|
|
type: 'heatmap',
|
|
colorscale: 'Viridis'
|
|
}], {
|
|
title: '24-Hour Spectrogram (5 minute intervals)',
|
|
xaxis: { title: 'Energy (keV)' },
|
|
yaxis: { title: 'Time', autorange: 'reverse' },
|
|
paper_bgcolor: '#1e1e1e', plot_bgcolor: '#1e1e1e', font: { color: '#fff' }
|
|
});
|
|
}
|
|
|
|
|
|
// Run on load and refresh every 60 seconds
|
|
fetchAndRender();
|
|
setInterval(fetchAndRender, 60000);
|
|
</script>
|