111 lines
4.3 KiB
HTML
111 lines
4.3 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>
|
|
<div class="info">
|
|
<h2>Information</h2>
|
|
<div id="oddities">There are a few oddities with the data here. You will notice a spike at the highest energy channel. This captures all energies at 2822 KeV and above, making it the widest channel.<br><br>During rain, you will see a gradual increase in radiation.<br><br>The gamma spectrometer is down the street from a location that performs RT (Radiographic Testing) on their oil/gas equipment, so on many weeknights, you will see spikes in the real time radiation levels.<br><br>The radiation units appear to be uRem, even though I have the Radiacode set to uSv.</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>
|