<!DOCTYPE html> <html> <head> <title>DIY Radiation</title> <style> body { background-image: url("static/chalk.jpg"); } h2 { font: 24px arial, sans-serif; font-weight: bold; } h4 { font: 16px arial, sans-serif; font-weight: bold; } .mainContainer { width: 800px; text-align: center; margin: auto; //border: 1px solid; } .datetime { font: 19px arial, sans-serif; font-weight: bold; color: black; padding: 10px; } .rowContainer { display: table; border-spacing: 1px; //border: 1px solid; } .currentDataCell { height: 175px; width: 396px; font: 19px arial, sans-serif; font-weight: bold; color: black; text-align: center; display: table-cell; vertical-align: middle; //border: 1px solid; } .dataItems { padding: 2px; text-align: left; display: inline-block; vertical-align: top; } .chartContainer { margin: 1px; padding: 2px; //border: 1px solid; } img.chart { width:100%; } .footer { font: 17px times new roman, sans-serif; color: black; text-align: left; margin: 1px; padding: 10px; } </style> </head> <body onload="main()"> <div class="mainContainer"> <h2>DIY Radiation Monitor</h2> <h4>Located in Albany, Oregon</h4> <div class="datetime"> <text id="date"></text> <text id="time"></text> </div> <hr> <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"> <text id="cpm"></text><br> <text id="cps"></text><br> <text id="uSvPerHr"></text> </div> </div> <div class="currentDataCell"> <ins>Radiation Monitor</ins><br><br> <div class="dataItems"> Device:<br> Mode: </div> <div class="dataItems"> <text id="status"></text><br> <text id="mode"></text> </div> </div> </div> <hr> <div class="chartContainer"> <img class="chart" id="1-day-cpm"> </div> <div class="chartContainer"> <img class="chart" id="1-day-uSv"> </div> <div class="chartContainer"> <img class="chart" id="4-week-cpm"> </div> <div class="chartContainer"> <img class="chart" id="4-week-uSv"> </div> <div class="chartContainer"> <img class="chart" id="1-year-cpm"> </div> <div class="chartContainer"> <img class="chart" id="1-year-uSv"> </div> <div class="footer"> <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> </ul> </div> </div> <br> <script> /* Globals */ var radmonDataUrl = "dynamic/radmonData.js"; var httpRequest = new XMLHttpRequest(); function main() { getRadmonData(); getRadmonGraphs(); setInterval(getRadmonData, 10000); setInterval(getRadmonGraphs, 60000); } function getRadmonData() { httpRequest.onreadystatechange = function() { if (httpRequest.readyState == 4 && httpRequest.status == 200) { var dataArray = JSON.parse(httpRequest.responseText); displayData(dataArray[0]); } }; httpRequest.open("GET", radmonDataUrl, true); httpRequest.send(); } function getRadmonGraphs() { var d = new Date; document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png?ver=" + d.getTime(); document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png?ver=" + d.getTime(); document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png?ver=" + d.getTime(); document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png?ver=" + d.getTime(); document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png?ver=" + d.getTime(); document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png?ver=" + d.getTime(); } function displayData(dataItem) { var timeStamp, date, time, hourminute; timeStamp = dataItem.date; date = timeStamp.split(" ")[0]; time = timeStamp.split(" ")[1]; hourminute = time.split(":")[0] + ":" + time.split(":")[1]; document.getElementById("date").innerHTML = date; document.getElementById("time").innerHTML = hourminute + " (PDT)"; document.getElementById("cpm").innerHTML = dataItem.CPM; document.getElementById("cps").innerHTML = dataItem.CPS; document.getElementById("uSvPerHr").innerHTML = dataItem.uSvPerHr; document.getElementById("mode").innerHTML = dataItem.Mode; document.getElementById("status").innerHTML = dataItem.status; if (dataItem.status == "online") { document.getElementById("status").style.color = "green"; } else { document.getElementById("status").style.color = "red"; } } </script> </body> </html>