html/radmon.html
b528647b
 <!DOCTYPE html>
 <html>
 <head>
149a7da4
 <title>DIY Radiation</title>
 <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%;
     font: bold 20px arial, sans-serif;
df59b77a
     text-align: center;
     display: table-cell;
     vertical-align: middle;
 }
 .dataItems {
     padding: 2px;
     text-align: left;
28772125
     line-height: 130%;
df59b77a
     display: inline-block;
     vertical-align: top;
 }
 .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>
1050ddd1
 <li class="chartNav"><text class="chartNav" onclick="show_charts(1)">
 24 hours</text></li>
 <li class="chartNav"><text class="chartNav" onclick="show_charts(2)">
 4 weeks</text></li>
 <li class="chartNav"><text class="chartNav" onclick="show_charts(3)">
 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
 
df59b77a
 /* Globals */
1050ddd1
 var radmonDataUrl = "dynamic/radmonOutputData.js";
df59b77a
 var httpRequest = new XMLHttpRequest();
98c8ae93
 var graphPeriod;
df59b77a
 
974ef7a0
 /* Chart elements */
 var cpmChart_g = document.getElementById("cpmChart");
 var uSvChart_g = document.getElementById("uSvChart");
 
 /* Text 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");    
 
df59b77a
 function main() {
     getRadmonData();
98c8ae93
     show_charts(1);
1050ddd1
     setInterval(getRadmonData, 5000);
df59b77a
 }
 
 function getRadmonData() {
     httpRequest.onreadystatechange = function() {
         if (httpRequest.readyState == 4 && httpRequest.status == 200) {
             var dataArray = JSON.parse(httpRequest.responseText);
             displayData(dataArray[0]);
213b91d2
         }
df59b77a
     };
a7ac5e03
     httpRequest.open("POST", radmonDataUrl, true);
df59b77a
     httpRequest.send();
 }
 
98c8ae93
 function show_charts(n) {
     graphPeriod = n;
     getRadmonGraphs();   
cc0b13e1
     setInterval(getRadmonGraphs, 300000);
98c8ae93
 }
 
df59b77a
 function getRadmonGraphs() {
     var d = new Date;
974ef7a0
 
98c8ae93
     switch(graphPeriod) {
         case 1:
58737d5f
             cpmChart_g.src = "dynamic/24hr_cpm.png?ver=" + d.getTime();
             uSvChart_g.src = "dynamic/24hr_svperhr.png?ver=" + d.getTime();
98c8ae93
             break;
         case 2:
58737d5f
             cpmChart_g.src = "dynamic/4wk_cpm.png?ver=" + d.getTime();
             uSvChart_g.src = "dynamic/4wk_svperhr.png?ver=" + d.getTime();
98c8ae93
             break;
        case 3:
58737d5f
             cpmChart_g.src = "dynamic/12m_cpm.png?ver=" + d.getTime();
             uSvChart_g.src = "dynamic/12m_svperhr.png?ver=" + d.getTime();
98c8ae93
             break;
     }
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 {
974ef7a0
        status_e.style.color = "red";
92145152
     }
df59b77a
 }
92145152
 
 </script>
b528647b
 
 </body>
 </html>