| b528647b |
<!DOCTYPE html>
|
| 342713a1 |
<!-- Courtesy ruler for editing this file
12345678901234567890123456789012345678901234567890123456789012345678901234567890
-->
|
| b528647b |
<html>
<head>
|
| 149a7da4 |
<title>DIY Radiation</title>
|
| 342713a1 |
<meta charset="UTF-8">
|
| 950c9e59 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 149a7da4 |
<style>
body {
background-image: url("static/chalk.jpg");
}
|
| df59b77a |
h2 {
|
| 28772125 |
font: bold 24px arial, sans-serif;
|
| 149a7da4 |
}
|
| df59b77a |
h4 {
|
| 28772125 |
font: bold 16px arial, sans-serif;
|
| 149a7da4 |
}
|
| df59b77a |
.mainContainer {
|
| 98c8ae93 |
width: 750px;
|
| df59b77a |
text-align: center;
margin: auto;
|
| 149a7da4 |
}
|
| df59b77a |
.datetime {
|
| 28772125 |
font: bold 22px arial, sans-serif;
padding: 20px;
|
| df59b77a |
}
.rowContainer {
display: table;
|
| 28772125 |
width: 100%;
|
| df59b77a |
}
.currentDataCell {
|
| 28772125 |
width: 50%;
|
| 18691b9a |
padding: 10px;
|
| 28772125 |
font: bold 20px arial, sans-serif;
|
| 342713a1 |
text-align: center;
|
| df59b77a |
display: table-cell;
vertical-align: middle;
}
.dataItems {
padding: 2px;
text-align: left;
|
| 28772125 |
line-height: 130%;
|
| df59b77a |
display: inline-block;
|
| 18691b9a |
vertical-align: middle;
|
| df59b77a |
}
.chartContainer {
padding: 2px;
|
| 149a7da4 |
}
img.chart {
width:100%;
}
|
| 28772125 |
.notes {
font: 17px arial, sans-serif;
|
| df59b77a |
text-align: left;
padding: 10px;
}
|
| e7812e8c |
span.chartSelectors {
|
| 98c8ae93 |
margin: auto;
}
|
| e7812e8c |
ul.selectorElement {
|
| 98c8ae93 |
list-style-type: none;
margin: 10px;
padding: 0;
overflow: hidden;
background-color: #bbb;
text-align: center;
}
|
| e7812e8c |
li.selectorElement {
|
| 98c8ae93 |
display: inline-block;
font: bold 18px arial, sans-serif;
color: black;
}
|
| e7812e8c |
span.selectorElement:hover {
|
| 98c8ae93 |
background-color: #333;
cursor: pointer;
color: white;
}
|
| e7812e8c |
span.selectorElement {
|
| 98c8ae93 |
display: inline-block;
padding: 8px 12px;
}
|
| e7812e8c |
#iframe_a {
border:none;
width:100%;
height:450px;
}
|
| 149a7da4 |
</style>
|
| b528647b |
</head>
|
| df59b77a |
<body onload="main()">
<div class="mainContainer">
|
| 28772125 |
|
| 1050ddd1 |
<h2><a href="https://github.com/fractalxaos/radmon"
style="text-decoration:none" target="_new">
DIY Radiation Monitor</a></h2>
|
| 28772125 |
<h4>Albany, Oregon</h4>
|
| 149a7da4 |
|
| df59b77a |
<div class="datetime">
|
| e7812e8c |
<span id="date"></span>
|
| 149a7da4 |
|
| e7812e8c |
<span id="time"></span>
|
| 149a7da4 |
</div>
|
| df59b77a |
<div class="rowContainer">
<div class="currentDataCell">
|
| 149a7da4 |
<ins>Current Reading</ins><br><br>
|
| df59b77a |
<div class="dataItems">
Counts per minute:<br>
Counts per second:<br>
uSv per hour:
</div>
<div class="dataItems">
|
| e7812e8c |
<span id="cpm"></span><br>
<span id="cps"></span><br>
<span id="uSvPerHr"></span>
|
| df59b77a |
</div>
|
| 149a7da4 |
</div>
|
| df59b77a |
<div class="currentDataCell">
<ins>Radiation Monitor</ins><br><br>
<div class="dataItems">
|
| 1050ddd1 |
Status:<br>
|
| df59b77a |
Mode:
</div>
<div class="dataItems">
|
| e7812e8c |
<span id="status"></span><br>
<span id="mode"></span>
|
| df59b77a |
</div>
|
| 149a7da4 |
</div>
|
| df59b77a |
</div>
|
| e7812e8c |
<span class="chartSelectors">
<ul class="selectorElement">
<li class="selectorElement">Select charts:</li>
<li class="selectorElement"><span class="selectorElement"
onclick="setChartPeriod(1)">
24 hours</span></li>
<li class="selectorElement"><span class="selectorElement"
onclick="setChartPeriod(2)">
4 weeks</span></li>
<li class="selectorElement"><span class="selectorElement"
onclick="setChartPeriod(3)">12 months</span></li>
<li id="customSelector" class="selectorElement" style="visibility:hidden;">
<span class="selectorElement"
onclick="setChartPeriod(0)">Custom...</span></li>
|
| 98c8ae93 |
</ul>
</span>
|
| e7812e8c |
<div class="rowContainer" id="customChartsContainer" style="display:none;">
<div class="currentDataCell">
<form id="fmDateSelector" action="radmon.php" method="post"
target="iframe_a">
<label for="beginDate">Begin Date: </label>
<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" />
<label for="endDate">End Date: </label>
<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" />
<br><br>
<input type="button" onclick="getCustomCharts()" value="Get Charts">
</form>
<span id="errorMsg"></span><br>
<iframe id="iframe_a" name="iframe_a"></iframe>
</div>
</div>
|
| 28772125 |
<br>
|
| 149a7da4 |
|
| e7812e8c |
<div class="rowContainer" id="stockChartsContainer">
|
| df59b77a |
<div class="chartContainer">
|
| 98c8ae93 |
<img class="chart" id="cpmChart">
|
| 149a7da4 |
</div>
|
| df59b77a |
<div class="chartContainer">
|
| 98c8ae93 |
<img class="chart" id="uSvChart">
|
| 149a7da4 |
</div>
|
| e7812e8c |
</div>
|
| 149a7da4 |
|
| 28772125 |
<div class="notes">
|
| 149a7da4 |
<b>NOTES:</b>
<ul>
|
| df59b77a |
<li>DIY Radiation Monitor project plans and software available at
|
| 1050ddd1 |
<a href="https://github.com/fractalxaos/radmon" target="_new">
<i>Github.com</i></a>.</li>
<li>Project sponsored by
<a href="http://www.eugenemakerspace.com" TARGET="_NEW">
|
| df59b77a |
<i>Eugene Maker Space</i></a>, Eugene, Oregon.</li>
|
| 1050ddd1 |
<li>For more information about the effects of radiation on the human body
see <a href="https://xkcd.com/radiation/" target="_blank">
|
| 28772125 |
Radiation Dose Chart</a> by Randall Monroe.</li>
|
| 149a7da4 |
</ul>
</div>
</div>
<br>
|
| df59b77a |
|
| 149a7da4 |
<script>
|
| e7812e8c |
"use strick";
|
| 207514f1 |
/* Global constants */
|
| e7812e8c |
var radmonDataUrl = "dynamic/radmonData.js";
|
| df59b77a |
|
| 207514f1 |
/* Global DOM objects */
// Chart elements
|
| 974ef7a0 |
var cpmChart_g = document.getElementById("cpmChart");
var uSvChart_g = document.getElementById("uSvChart");
|
| e7812e8c |
// Document elements
|
| 974ef7a0 |
var date_e = document.getElementById("date");
var time_e = document.getElementById("time");
var cpm_e = document.getElementById("cpm");
var cps_e = document.getElementById("cps");
var uSvPerHr_e = document.getElementById("uSvPerHr");
var mode_e = document.getElementById("mode");
var status_e = document.getElementById("status");
|
| e7812e8c |
// Custom charts document elements
var customChartsContainer = document.getElementById("customChartsContainer");
var stockChartsContainer = document.getElementById("stockChartsContainer");
var fmDateSelector = document.getElementById("fmDateSelector");
var errorMsg = document.getElementById("errorMsg");
var customSelector = document.getElementById("customSelector");
|
| 207514f1 |
/* Global objects */
var httpRequest = new XMLHttpRequest();
/* Global variables */
|
| e7812e8c |
var chartPeriod = 1;
|
| 207514f1 |
|
| df59b77a |
function main() {
|
| e7812e8c |
httpRequest.timeout = 3000;
|
| 950c9e59 |
/* Register call back function to process http requests */
|
| df59b77a |
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var dataArray = JSON.parse(httpRequest.responseText);
displayData(dataArray[0]);
|
| 207514f1 |
} else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
displayOfflineStatus();
|
| 213b91d2 |
}
|
| df59b77a |
};
|
| 0bfe4f11 |
httpRequest.ontimeout = function(e) {
displayOfflineStatus();
};
|
| e7812e8c |
initializeDateSelector();
|
| 950c9e59 |
getRadmonData();
|
| e7812e8c |
getRadmonCharts();
setInterval(getRadmonData, 2000);
setInterval(getRadmoncharts, 300000);
|
| 950c9e59 |
}
function getRadmonData() {
|
| e7812e8c |
httpRequest.open("POST", radmonDataUrl, true);
|
| df59b77a |
httpRequest.send();
}
|
| 950c9e59 |
function setChartPeriod(n) {
|
| e7812e8c |
/* Show custom charts if custom charts selected, otherwise show
stock charts. */
chartPeriod = n;
if (n == 0) {
customChartsContainer.style.display = "block";
stockChartsContainer.style.display = "none";
} else {
customChartsContainer.style.display = "none";
stockChartsContainer.style.display = "block";
getRadmonCharts();
}
|
| 98c8ae93 |
}
|
| e7812e8c |
function getRadmonCharts() {
|
| df59b77a |
var d = new Date;
|
| 950c9e59 |
var pfx;
|
| 974ef7a0 |
|
| e7812e8c |
switch(chartPeriod) {
|
| 98c8ae93 |
case 1:
|
| 950c9e59 |
pfx = "24hr_";
|
| 98c8ae93 |
break;
case 2:
|
| 950c9e59 |
pfx = "4wk_";
|
| 98c8ae93 |
break;
case 3:
|
| 950c9e59 |
pfx = "12m_";
|
| 98c8ae93 |
break;
}
|
| 950c9e59 |
cpmChart_g.src = "dynamic/" + pfx + "cpm.png?ver=" + d.getTime();
uSvChart_g.src = "dynamic/" + pfx + "svperhr.png?ver=" + d.getTime();
|
| df59b77a |
}
function displayData(dataItem) {
|
| 974ef7a0 |
var timeStamp, date, time, hourminute;
var localDateObj,localTimeZone;
|
| 92145152 |
|
| e7812e8c |
// Custom charts can only be generated by the local server, i.e,
// with access to rrdtool database.
if (dataItem.serverMode == "primary") {
customSelector.style.visibility = "visible";
}
|
| 92145152 |
timeStamp = dataItem.date;
date = timeStamp.split(" ")[0];
time = timeStamp.split(" ")[1];
hourminute = time.split(":")[0] + ":" + time.split(":")[1];
|
| 28772125 |
localDateObj = new Date();
localTimeZone = localDateObj.getTimezoneOffset() / 60;
|
| df59b77a |
|
| 974ef7a0 |
date_e.innerHTML = date;
|
| 1050ddd1 |
time_e.innerHTML = hourminute +
|
| e7812e8c |
" <small>(UTC-" + localTimeZone + ")</small>";
|
| 974ef7a0 |
cpm_e.innerHTML = dataItem.CPM;
cps_e.innerHTML = dataItem.CPS;
uSvPerHr_e.innerHTML = dataItem.uSvPerHr;
|
| e7812e8c |
mode_e.innerHTML = dataItem.mode;
|
| 974ef7a0 |
status_e.innerHTML = dataItem.status;
if (dataItem.status == "online") {
status_e.style.color = "green";
|
| 28772125 |
} else {
|
| 0bfe4f11 |
displayOffLineStatus();
|
| 92145152 |
}
|
| df59b77a |
}
|
| 92145152 |
|
| 0bfe4f11 |
function displayOfflineStatus() {
|
| 207514f1 |
var d = new Date();
localTimeZone = d.getTimezoneOffset() / 60;
date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
|
| e7812e8c |
time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + " <small>(UTC-" +
|
| 207514f1 |
localTimeZone + ")</small>";
cpm_e.innerHTML = "";
cps_e.innerHTML = "";
uSvPerHr_e.innerHTML = "";
|
| 0bfe4f11 |
mode_e.innerHTML = " ";
|
| 207514f1 |
status_e.innerHTML = "offline";
status_e.style.color = "red";
}
|
| e7812e8c |
function initializeDateSelector() {
var d = new Date();
var dEnd = new Date(d.getFullYear(),
d.getMonth(), d.getDate() - 0);
var dBegin = new Date(d.getFullYear(),
d.getMonth(), d.getDate() - 1);
document.getElementById("beginDate").valueAsDate = dBegin;
document.getElementById("endDate").valueAsDate = dEnd;
}
function getCustomCharts() {
fmDateSelector.submit();
}
|
| 92145152 |
</script>
|
| b528647b |
</body>
</html>
|