html/radmon.html
b528647b
 <!DOCTYPE html>
 <html>
 <head>
149a7da4
 <title>DIY Radiation</title>
 <style>
 body {
     background-image: url("static/chalk.jpg");
 }
df59b77a
 h2 {
     font: 24px arial, sans-serif;
     font-weight: bold;
149a7da4
 }
df59b77a
 h4 {
     font: 16px arial, sans-serif;
     font-weight: bold;
149a7da4
 }
df59b77a
 .mainContainer {
     width: 800px;
     text-align: center;
     margin: auto;
149a7da4
 }
df59b77a
 .datetime {
     font: 19px arial, sans-serif;
     font-weight: bold;
     color: black;
     padding: 10px;
 }
 .rowContainer {
     display: table;
     border-spacing: 1px;
 }
 .currentDataCell {
     height: 175px;
     width: 396px;
     font: 19px arial, sans-serif;
     font-weight: bold;
     color: black;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
 }
 .dataItems {
     padding: 2px;
     text-align: left;
     display: inline-block;
     vertical-align: top;
 }
 .chartContainer {
     margin: 1px;
     padding: 2px;
149a7da4
 }
 img.chart {
     width:100%;
 }
df59b77a
 .footer {
     font: 17px times new roman, sans-serif;
     color: black;
     text-align: left;
     margin: 1px;
     padding: 10px;
 }
149a7da4
 </style>
b528647b
 </head>
 
df59b77a
 <body onload="main()">
 
 <div class="mainContainer">
149a7da4
 <h2>DIY Radiation Monitor</h2>
92145152
 <h4>Located in Albany, Oregon</h4>
149a7da4
 
df59b77a
 <div class="datetime">
149a7da4
 <text id="date"></text>
 &nbsp;&nbsp;
 <text id="time"></text>
 </div>
 
df59b77a
 <hr>
 
 <div class="rowContainer">
 <div class="currentDataCell">
149a7da4
 <ins>Current Reading</ins><br><br>
df59b77a
 <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>
149a7da4
 </div>
 
df59b77a
 <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>
149a7da4
 </div>
df59b77a
 </div>
 
 <hr>
149a7da4
 
df59b77a
 <div class="chartContainer">
149a7da4
 <img class="chart" id="1-day-cpm">
 </div>
 
df59b77a
 <div class="chartContainer">
149a7da4
 <img class="chart" id="1-day-uSv">
 </div>
 
df59b77a
 <div class="chartContainer">
149a7da4
 <img class="chart" id="4-week-cpm">
 </div>
 
df59b77a
 <div class="chartContainer">
149a7da4
 <img class="chart" id="4-week-uSv">
 </div>
 
df59b77a
 <div class="chartContainer">
149a7da4
 <img class="chart" id="1-year-cpm">
 </div>
 
df59b77a
 <div class="chartContainer">
149a7da4
 <img class="chart" id="1-year-uSv">
 </div>
 
df59b77a
 <div class="footer">
149a7da4
 <b>NOTES:</b>
 <ul>
df59b77a
 <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>
149a7da4
 </ul>
 </div>
 </div>
 <br>
df59b77a
 
149a7da4
 <script>
b528647b
 
df59b77a
 /* 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]);
213b91d2
         }
df59b77a
     };
     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) {
92145152
     var timeStamp, date, time, hourminute;
 
     timeStamp = dataItem.date;
     date = timeStamp.split(" ")[0];
     time = timeStamp.split(" ")[1];
     hourminute = time.split(":")[0] + ":" + time.split(":")[1];
df59b77a
     
     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;    
92145152
     if (dataItem.status == "online") {
df59b77a
         document.getElementById("status").style.color = "green";
92145152
     }
     else {
df59b77a
         document.getElementById("status").style.color = "red";
92145152
     }
df59b77a
 }
92145152
 
 </script>
b528647b
 
 </body>
 </html>