<!DOCTYPE html>
<html>
<!--<META http-equiv="refresh" content="60">-->
<head>
<title>DIY Radiation Monitor</title>
<script src="jQuery.min.js"></script>
</head>
<body background="./static/chalk.jpg">
<center>
<h1>DIY Radiation Monitor</h1>
<hr>
<table width="750" border="0" cellpadding="1">
<tr>
<td align="center">
<b><font size="5">
<text id="date"></text> <text id="time"></text>
</font></b>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td width="50%" align="center">
<b><font size="5">
Current Reading
</font></b>
<br><br>
<b><font size="4">
Counts per minute: <text id="cpm"></text><br>
Counts per second: <text id="cps"></text><br>
uSv per hour: <text id="uSvPerHr"></text>
</font></b>
</td>
<td width="50%" align="center" valign="center">
<b><font size="5">
Device Status
</font></b>
<br><br>
<b><font size="4">
Mode: <text id="mode"></text><br>
Status: <text id="status"></text>
</font></b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td align="center">
<img id="1-day-cpm">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td align="center">
<img id="1-day-uSv">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td align="center">
<img id="4-week-cpm">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td align="center">
<img id="4-week-uSv">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td align="center">
<img id="1-year-cpm">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td align="center">
<img id="1-year-uSv">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1", cellpadding="10">
<tr>
<td>
<b>NOTES:</b>
<li>For more information visit <a href="http://www.eugenemakerspace.com" target="_new"><i>www.eugenemakerspace.com</i></a>
<li>Project plans and notes available at <a href="http://github.com/fractalxaos/Radmon" target="_new"><i>GitHub.com</i></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<script>
function getRadmon() {
$.ajaxSetup({cache:false, url: "dynamic/radmonData.js",
success: function(result){
jStr = result.slice(1,-2);
dataObj = JSON.parse(jStr);
//data = dataObj.radmon;
parseRadmon(dataObj);
}
});
$.ajax();
}
function getGraphs() {
document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png";
document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png";
document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png";
document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png";
document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png";
document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png";
}
function parseRadmon(dataItem) {
var timeStamp
var date;
var time;
var sTmp;
timeStamp = dataItem.time;
if (timeStamp != "") {
date = timeStamp.split(" ")[0];
time = timeStamp.split(" ")[1];
$("#date").text(date);
$("#time").text(time);
} else {
$("#date").text("");
$("#time").text("");
}
$("#cps").text(dataItem.CPS);
$("#cpm").text(dataItem.CPM);
$("#uSvPerHr").text(dataItem.uSvPerHr);
sTmp = (dataItem.Mode).toLowerCase();
$("#mode").text(sTmp);
$("#status").text(dataItem.status);
if (dataItem.status == "online") {
document.getElementById("status").style.color = "green";
}
else {
document.getElementById("status").style.color = "red";
}
}
$(document).ready(function() {
getRadmon();
getGraphs();
setInterval(getRadmon, 1000);
setInterval(getGraphs, 60000);
});
</script>
</body>
</html>