b528647b |
<!DOCTYPE html>
<html>
<head>
|
149a7da4 |
<title>DIY Radiation</title>
<script src="jQuery.min.js"></script>
<style>
body {
background-image: url("static/chalk.jpg");
}
#frame {
width:800px;
text-align:center;
margin:auto;
}
#datetime {
text-align:center;
display:inline-block;
margin:1px;
font-size:21px;
color:black;
width:700px;
padding:10px;
}
div.currentdata {
font-size:20px;
display:inline-block;
margin:1px;
text-align:center;
color:black;
width:342px;
padding:10px;
border-style:solid;
border-width:1px;
}
div.chartitem {
display:inline-block;
text-align:left;
margin:1px;
width: 730px;
padding:2px;
border-style:solid;
border-width:1px;
}
img.chart {
width:100%;
}
</style>
|
b528647b |
</head>
|
149a7da4 |
<body>
<div id="frame">
<h2>DIY Radiation Monitor</h2>
|
92145152 |
<h4>Located in Albany, Oregon</h4>
|
b528647b |
<hr>
|
149a7da4 |
<b>
<div id="datetime">
<text id="date"></text>
<text id="time"></text>
</div>
<div class="currentdata">
<ins>Current Reading</ins><br><br>
Counts per minute: <text id="cpm"></text><br>
Counts per second: <text id="cps"></text><br>
uSv per hour: <text id="uSvPerHr"></text>
</div>
<div class="currentdata">
<ins>Status</ins><br><br>
Mode: <text id="mode"></text><br>
Device: <text id="status"></text><br>
</div>
<div class="chartitem">
<img class="chart" id="1-day-cpm">
</div>
<div class="chartitem">
<img class="chart" id="1-day-uSv">
</div>
<div class="chartitem">
<img class="chart" id="4-week-cpm">
</div>
<div class="chartitem">
<img class="chart" id="4-week-uSv">
</div>
<div class="chartitem">
<img class="chart" id="1-year-cpm">
</div>
<div class="chartitem">
<img class="chart" id="1-year-uSv">
</div>
<div class="chartitem">
<b>NOTES:</b>
<ul>
<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>
</ul>
</div>
</div>
<br>
<script>
|
b528647b |
|
92145152 |
function getRadmon() {
$.ajaxSetup({
cache:false, url: "dynamic/radmonData.js", success:
function(result){
var sData, dataObj;
sData = result.slice(1,-1);
dataObj = JSON.parse(sData);
|
b528647b |
parseRadmon(dataObj);
|
213b91d2 |
}
|
92145152 |
});
$.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, date, time, hourminute;
timeStamp = dataItem.date;
date = timeStamp.split(" ")[0];
time = timeStamp.split(" ")[1];
hourminute = time.split(":")[0] + ":" + time.split(":")[1];
$("#date").text(date);
$("#time").text(hourminute + " (PDT)");
$("#cps").text(dataItem.CPS);
$("#cpm").text(dataItem.CPM);
$("#uSvPerHr").text(dataItem.uSvPerHr);
$("#mode").text(dataItem.Mode);
$("#status").text(dataItem.status);
if (dataItem.status == "online") {
document.getElementById("status").style.color = "green";
}
else {
document.getElementById("status").style.color = "red";
|
b528647b |
}
|
92145152 |
}
|
b528647b |
|
92145152 |
$(document).ready(
function() {
|
b528647b |
getRadmon();
getGraphs();
|
66d7b126 |
setInterval(getRadmon, 10000);
|
b528647b |
setInterval(getGraphs, 60000);
|
92145152 |
}
);
</script>
|
b528647b |
</body>
</html>
|