<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="frame"> <h2>DIY Radiation Monitor</h2> <h4>Located in Albany, Oregon</h4> <hr> <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> function getRadmon() { $.ajaxSetup({ cache:false, url: "dynamic/radmonData.js", success: function(result){ var sData, dataObj; sData = result.slice(1,-1); dataObj = JSON.parse(sData); 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, 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"; } } $(document).ready( function() { getRadmon(); getGraphs(); setInterval(getRadmon, 10000); setInterval(getGraphs, 60000); } ); </script> </body> </html>