<!DOCTYPE html> <!-- Courtesy ruler for editing this file 12345678901234567890123456789012345678901234567890123456789012345678901234567890 --> <html> <head> <title>DIY Radiation</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-image: url("static/chalk.jpg"); } h2 { font: bold 24px arial, sans-serif; } h4 { font: bold 16px arial, sans-serif; } .mainContainer { width: 750px; text-align: center; margin: auto; } .datetime { font: bold 22px arial, sans-serif; padding: 20px; } .rowContainer { display: table; width: 100%; } .currentDataCell { width: 50%; padding: 10px; font: bold 20px arial, sans-serif; text-align: center; display: table-cell; vertical-align: middle; } .dataItems { padding: 2px; text-align: left; line-height: 130%; display: inline-block; vertical-align: middle; } .chartContainer { padding: 2px; } img.chart { width:100%; } .notes { font: 17px arial, sans-serif; text-align: left; padding: 10px; } span.chartSelectors { margin: auto; } ul.selectorElement { list-style-type: none; margin: 10px; padding: 0; overflow: hidden; background-color: #bbb; text-align: center; } li.selectorElement { display: inline-block; font: bold 18px arial, sans-serif; color: black; } span.selectorElement:hover { background-color: #333; cursor: pointer; color: white; } span.selectorElement { display: inline-block; padding: 8px 12px; } #iframe_a { border:none; width:100%; height:450px; } </style> </head> <body onload="main()"> <div class="mainContainer"> <h2><a href="https://github.com/fractalxaos/radmon" style="text-decoration:none" target="_new"> DIY Radiation Monitor</a></h2> <h4>Albany, Oregon</h4> <div class="datetime"> <span id="date"></span> <span id="time"></span> </div> <div class="rowContainer"> <div class="currentDataCell"> <ins>Current Reading</ins><br><br> <div class="dataItems"> Counts per minute:<br> Counts per second:<br> uSv per hour: </div> <div class="dataItems"> <span id="cpm"></span><br> <span id="cps"></span><br> <span id="uSvPerHr"></span> </div> </div> <div class="currentDataCell"> <ins>Radiation Monitor</ins><br><br> <div class="dataItems"> Status:<br> Mode: </div> <div class="dataItems"> <span id="status"></span><br> <span id="mode"></span> </div> </div> </div> <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> </ul> </span> <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> <br> <div class="rowContainer" id="stockChartsContainer"> <div class="chartContainer"> <img class="chart" id="cpmChart"> </div> <div class="chartContainer"> <img class="chart" id="uSvChart"> </div> </div> <div class="notes"> <b>NOTES:</b> <ul> <li>DIY Radiation Monitor project plans and software available at <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"> <i>Eugene Maker Space</i></a>, Eugene, Oregon.</li> <li>For more information about the effects of radiation on the human body see <a href="https://xkcd.com/radiation/" target="_blank"> Radiation Dose Chart</a> by Randall Monroe.</li> </ul> </div> </div> <br> <script> "use strick"; /* Global constants */ var radmonDataUrl = "dynamic/radmonData.js"; /* Global DOM objects */ // Chart elements var cpmChart_g = document.getElementById("cpmChart"); var uSvChart_g = document.getElementById("uSvChart"); // Document elements 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"); // 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"); /* Global objects */ var httpRequest = new XMLHttpRequest(); /* Global variables */ var chartPeriod = 1; function main() { httpRequest.timeout = 3000; /* Register call back function to process http requests */ httpRequest.onreadystatechange = function() { if (httpRequest.readyState == 4 && httpRequest.status == 200) { var dataArray = JSON.parse(httpRequest.responseText); displayData(dataArray[0]); } else if (httpRequest.readyState == 4 && httpRequest.status == 404) { displayOfflineStatus(); } }; httpRequest.ontimeout = function(e) { displayOfflineStatus(); }; initializeDateSelector(); getRadmonData(); getRadmonCharts(); setInterval(getRadmonData, 2000); setInterval(getRadmoncharts, 300000); } function getRadmonData() { httpRequest.open("POST", radmonDataUrl, true); httpRequest.send(); } function setChartPeriod(n) { /* 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(); } } function getRadmonCharts() { var d = new Date; var pfx; switch(chartPeriod) { case 1: pfx = "24hr_"; break; case 2: pfx = "4wk_"; break; case 3: pfx = "12m_"; break; } cpmChart_g.src = "dynamic/" + pfx + "cpm.png?ver=" + d.getTime(); uSvChart_g.src = "dynamic/" + pfx + "svperhr.png?ver=" + d.getTime(); } function displayData(dataItem) { var timeStamp, date, time, hourminute; var localDateObj,localTimeZone; // 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"; } timeStamp = dataItem.date; date = timeStamp.split(" ")[0]; time = timeStamp.split(" ")[1]; hourminute = time.split(":")[0] + ":" + time.split(":")[1]; localDateObj = new Date(); localTimeZone = localDateObj.getTimezoneOffset() / 60; date_e.innerHTML = date; time_e.innerHTML = hourminute + " <small>(UTC-" + localTimeZone + ")</small>"; cpm_e.innerHTML = dataItem.CPM; cps_e.innerHTML = dataItem.CPS; uSvPerHr_e.innerHTML = dataItem.uSvPerHr; mode_e.innerHTML = dataItem.mode; status_e.innerHTML = dataItem.status; if (dataItem.status == "online") { status_e.style.color = "green"; } else { displayOffLineStatus(); } } function displayOfflineStatus() { var d = new Date(); localTimeZone = d.getTimezoneOffset() / 60; date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear(); time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + " <small>(UTC-" + localTimeZone + ")</small>"; cpm_e.innerHTML = ""; cps_e.innerHTML = ""; uSvPerHr_e.innerHTML = ""; mode_e.innerHTML = " "; status_e.innerHTML = "offline"; status_e.style.color = "red"; } 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(); } </script> </body> </html>