html/radmon.html
b528647b
 <!DOCTYPE html>
342713a1
 <!-- Courtesy ruler for editing this file
 12345678901234567890123456789012345678901234567890123456789012345678901234567890
 -->
b528647b
 <html>
 <head>
149a7da4
 <title>DIY Radiation</title>
342713a1
 <meta charset="UTF-8">
950c9e59
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
149a7da4
 <style>
 body {
     background-image: url("static/chalk.jpg");
 }
df59b77a
 h2 {
28772125
     font: bold 24px arial, sans-serif;
149a7da4
 }
df59b77a
 h4 {
28772125
     font: bold 16px arial, sans-serif;
149a7da4
 }
df59b77a
 .mainContainer {
98c8ae93
     width: 750px;
df59b77a
     text-align: center;
     margin: auto;
149a7da4
 }
df59b77a
 .datetime {
28772125
     font: bold 22px arial, sans-serif;
     padding: 20px;
df59b77a
 }
 .rowContainer {
     display: table;
28772125
     width: 100%;
df59b77a
 }
 .currentDataCell {
28772125
     width: 50%;
18691b9a
     padding: 10px;
28772125
     font: bold 20px arial, sans-serif;
342713a1
     text-align: center;
df59b77a
     display: table-cell;
     vertical-align: middle;
 }
 .dataItems {
     padding: 2px;
     text-align: left;
28772125
     line-height: 130%;
df59b77a
     display: inline-block;
18691b9a
     vertical-align: middle;
df59b77a
 }
 .chartContainer {
     padding: 2px;
149a7da4
 }
 img.chart {
     width:100%;
 }
28772125
 .notes {
     font: 17px arial, sans-serif;
df59b77a
     text-align: left;
     padding: 10px;
 }
98c8ae93
 span.chartNav {
     margin: auto;
 }
 ul.chartNav {
     list-style-type: none;
     margin: 10px;
     padding: 0;
     overflow: hidden;
     background-color: #bbb;
     text-align: center;
 }
 li.chartNav {
     display: inline-block;
     font: bold 18px arial, sans-serif;
     color: black;
 }
 text.chartNav:hover {
     background-color: #333;
     cursor: pointer;
     color: white;
 }
 text.chartNav {
     display: inline-block;
     padding: 8px 12px;
 }
149a7da4
 </style>
b528647b
 </head>
 
df59b77a
 <body onload="main()">
 
 <div class="mainContainer">
28772125
 
1050ddd1
 <h2><a href="https://github.com/fractalxaos/radmon" 
 style="text-decoration:none" target="_new">
 DIY Radiation Monitor</a></h2>
28772125
 <h4>Albany, Oregon</h4>
149a7da4
 
df59b77a
 <div class="datetime">
149a7da4
 <text id="date"></text>
 &nbsp;&nbsp;
 <text id="time"></text>
 </div>
 
df59b77a
 <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">
1050ddd1
 Status:<br>
df59b77a
 Mode:
 </div>
 <div class="dataItems">
 <text id="status"></text><br>
 <text id="mode"></text>
 </div>
149a7da4
 </div>
df59b77a
 </div>
 
98c8ae93
 <span class="chartNav">
 <ul class="chartNav">
 <li class="chartNav">Select charts:</li>
950c9e59
 <li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)">
1050ddd1
 24 hours</text></li>
950c9e59
 <li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)">
1050ddd1
 4 weeks</text></li>
950c9e59
 <li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)">
1050ddd1
 12 months</text></li>
98c8ae93
 </ul>
 </span>
28772125
 <br>
149a7da4
 
df59b77a
 <div class="chartContainer">
98c8ae93
 <img class="chart" id="cpmChart">
149a7da4
 </div>
 
df59b77a
 <div class="chartContainer">
98c8ae93
 <img class="chart" id="uSvChart">
149a7da4
 </div>
 
28772125
 <div class="notes">
149a7da4
 <b>NOTES:</b>
 <ul>
df59b77a
 <li>DIY Radiation Monitor project plans and software available at
1050ddd1
 <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">
df59b77a
 <i>Eugene Maker Space</i></a>, Eugene, Oregon.</li>
1050ddd1
 <li>For more information about the effects of radiation on the human body
 see <a href="https://xkcd.com/radiation/" target="_blank">
28772125
 Radiation Dose Chart</a> by Randall Monroe.</li>
149a7da4
 </ul>
 </div>
 </div>
 <br>
df59b77a
 
149a7da4
 <script>
b528647b
 
207514f1
 /* Global constants */
 
1050ddd1
 var radmonDataUrl = "dynamic/radmonOutputData.js";
df59b77a
 
207514f1
 /* Global DOM objects */
 
 // Chart elements
974ef7a0
 var cpmChart_g = document.getElementById("cpmChart");
 var uSvChart_g = document.getElementById("uSvChart");
 
207514f1
 // Text elements
974ef7a0
 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");    
 
207514f1
 /* Global objects */
 
 var httpRequest = new XMLHttpRequest();
 
 /* Global variables */
 
 var graphPeriod;
 
 
df59b77a
 function main() {
950c9e59
     /* Register call back function to process http requests */
df59b77a
     httpRequest.onreadystatechange = function() {
         if (httpRequest.readyState == 4 && httpRequest.status == 200) {
             var dataArray = JSON.parse(httpRequest.responseText);
             displayData(dataArray[0]);
207514f1
         } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
             displayOfflineStatus();
213b91d2
         }
df59b77a
     };
0bfe4f11
     httpRequest.ontimeout = function(e) {
         displayOfflineStatus();
     };
950c9e59
 
     getRadmonData();
207514f1
     graphPeriod = 1;
950c9e59
     getRadmonGraphs();
     setInterval(getRadmonData, 5000);
     setInterval(getRadmonGraphs, 300000);
 }
 
 function getRadmonData() {
18691b9a
     httpRequest.open("GET", radmonDataUrl, true);
0bfe4f11
     httpRequest.timeout = 3000;
df59b77a
     httpRequest.send();
 }
 
950c9e59
 function setChartPeriod(n) {
98c8ae93
     graphPeriod = n;
     getRadmonGraphs();   
 }
 
df59b77a
 function getRadmonGraphs() {
     var d = new Date;
950c9e59
     var pfx;
974ef7a0
 
98c8ae93
     switch(graphPeriod) {
         case 1:
950c9e59
             pfx = "24hr_";
98c8ae93
             break;
         case 2:
950c9e59
             pfx = "4wk_";
98c8ae93
             break;
        case 3:
950c9e59
             pfx = "12m_";
98c8ae93
             break;
     }
950c9e59
     cpmChart_g.src = "dynamic/" + pfx + "cpm.png?ver=" + d.getTime();
     uSvChart_g.src = "dynamic/" + pfx + "svperhr.png?ver=" + d.getTime();
df59b77a
 }
 
 function displayData(dataItem) {
974ef7a0
     var timeStamp, date, time, hourminute;
     var localDateObj,localTimeZone;
92145152
 
     timeStamp = dataItem.date;
     date = timeStamp.split(" ")[0];
     time = timeStamp.split(" ")[1];
     hourminute = time.split(":")[0] + ":" + time.split(":")[1];
28772125
     localDateObj = new Date();
     localTimeZone = localDateObj.getTimezoneOffset() / 60;
df59b77a
     
974ef7a0
     date_e.innerHTML = date;    
1050ddd1
     time_e.innerHTML = hourminute +
         "  <small>(GMT+" + localTimeZone + ")</small>";    
974ef7a0
     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";
28772125
     } else {
0bfe4f11
        displayOffLineStatus();
92145152
     }
df59b77a
 }
92145152
 
0bfe4f11
 function displayOfflineStatus() {
207514f1
     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>(GMT+" + 
                        localTimeZone + ")</small>";
     cpm_e.innerHTML = "";    
     cps_e.innerHTML = "";    
     uSvPerHr_e.innerHTML = "";    
0bfe4f11
     mode_e.innerHTML = "&nbsp";    
207514f1
     status_e.innerHTML = "offline";    
     status_e.style.color = "red";
 }
 
92145152
 </script>
b528647b
 
 </body>
 </html>