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;
 }
e7812e8c
 span.chartSelectors {
98c8ae93
     margin: auto;
 }
e7812e8c
 ul.selectorElement {
98c8ae93
     list-style-type: none;
     margin: 10px;
     padding: 0;
     overflow: hidden;
     background-color: #bbb;
     text-align: center;
 }
e7812e8c
 li.selectorElement {
98c8ae93
     display: inline-block;
     font: bold 18px arial, sans-serif;
     color: black;
 }
e7812e8c
 span.selectorElement:hover {
98c8ae93
     background-color: #333;
     cursor: pointer;
     color: white;
 }
e7812e8c
 span.selectorElement {
98c8ae93
     display: inline-block;
     padding: 8px 12px;
 }
e7812e8c
 #iframe_a {
     border:none;
     width:100%;
     height:450px;
 }
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">
e7812e8c
 <span id="date"></span>
149a7da4
 &nbsp;&nbsp;
e7812e8c
 <span id="time"></span>
149a7da4
 </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">
e7812e8c
 <span id="cpm"></span><br>
 <span id="cps"></span><br>
 <span id="uSvPerHr"></span>
df59b77a
 </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">
e7812e8c
 <span id="status"></span><br>
 <span id="mode"></span>
df59b77a
 </div>
149a7da4
 </div>
df59b77a
 </div>
 
e7812e8c
 <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>
98c8ae93
 </ul>
 </span>
e7812e8c
 
 <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>
 
28772125
 <br>
149a7da4
 
e7812e8c
 
 
 <div class="rowContainer" id="stockChartsContainer">
df59b77a
 <div class="chartContainer">
98c8ae93
 <img class="chart" id="cpmChart">
149a7da4
 </div>
df59b77a
 <div class="chartContainer">
98c8ae93
 <img class="chart" id="uSvChart">
149a7da4
 </div>
e7812e8c
 </div>
149a7da4
 
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>
e7812e8c
 "use strick";
207514f1
 /* Global constants */
 
e7812e8c
 var radmonDataUrl = "dynamic/radmonData.js";
df59b77a
 
207514f1
 /* Global DOM objects */
 
 // Chart elements
974ef7a0
 var cpmChart_g = document.getElementById("cpmChart");
 var uSvChart_g = document.getElementById("uSvChart");
 
e7812e8c
 // Document 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");    
 
e7812e8c
 // 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");
 
 
207514f1
 /* Global objects */
 
 var httpRequest = new XMLHttpRequest();
 
 /* Global variables */
 
e7812e8c
 var chartPeriod = 1;
207514f1
 
df59b77a
 function main() {
e7812e8c
     httpRequest.timeout = 3000;
 
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();
     };
e7812e8c
     
     initializeDateSelector();
950c9e59
     getRadmonData();
e7812e8c
     getRadmonCharts();
     setInterval(getRadmonData, 2000);
     setInterval(getRadmoncharts, 300000);
950c9e59
 }
 
 function getRadmonData() {
e7812e8c
     httpRequest.open("POST", radmonDataUrl, true);
df59b77a
     httpRequest.send();
 }
 
950c9e59
 function setChartPeriod(n) {
e7812e8c
     /* 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();   
     }
98c8ae93
 }
 
e7812e8c
 function getRadmonCharts() {
df59b77a
     var d = new Date;
950c9e59
     var pfx;
974ef7a0
 
e7812e8c
     switch(chartPeriod) {
98c8ae93
         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
 
e7812e8c
     // 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";
     }
 
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 +
e7812e8c
         "  <small>(UTC-" + localTimeZone + ")</small>";    
974ef7a0
     cpm_e.innerHTML = dataItem.CPM;    
     cps_e.innerHTML = dataItem.CPS;    
     uSvPerHr_e.innerHTML = dataItem.uSvPerHr;    
e7812e8c
     mode_e.innerHTML = dataItem.mode;    
974ef7a0
 
     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();    
e7812e8c
     time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + "  <small>(UTC-" + 
207514f1
                        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";
 }
 
e7812e8c
 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();
 }
92145152
 </script>
b528647b
 
 </body>
 </html>