Willamette Valley Mesh - Git Server
html/radmon.html
b528647b 
 <!DOCTYPE html>
 <html>
 <head>
149a7da4 
 <title>DIY Radiation</title>
 <script src="jQuery.min.js"></script>
 <style>
 body {
     background-image: url("static/chalk.jpg");
 }
 #frame {
     width:800px;
     text-align:center;
     margin:auto;
 }
 #datetime {
     text-align:center;
     display:inline-block;
     margin:1px;
     font-size:21px;
     color:black;
     width:700px;
     padding:10px;
 }
 div.currentdata {
     font-size:20px;
     display:inline-block;
     margin:1px;
     text-align:center;
     color:black;
     width:342px;
     padding:10px;
     border-style:solid;
     border-width:1px;	 
 }
 div.chartitem {
     display:inline-block;
     text-align:left;
     margin:1px;
     width: 730px;
     padding:2px;
     border-style:solid;
     border-width:1px;	 
 }
 img.chart {
     width:100%;
 }
 </style>
b528647b 
 </head>
149a7da4 
 <body>
 <div id="frame">
 <h2>DIY Radiation Monitor</h2>
b528647b 
 <hr>
149a7da4 
 <b>
 
 <div id="datetime">
 <text id="date"></text>
 &nbsp;&nbsp;
 <text id="time"></text>
 </div>
 
 <div class="currentdata">
 <ins>Current Reading</ins><br><br>
 Counts per minute: <text id="cpm"></text><br>
 Counts per second: <text id="cps"></text><br>
 uSv per hour: <text id="uSvPerHr"></text>
 </div>
 
 <div class="currentdata">
 <ins>Status</ins><br><br>
 Mode: <text id="mode"></text><br>
 Device: <text id="status"></text><br>
 &nbsp;     
 </div>
 
 <div class="chartitem">
 <img class="chart" id="1-day-cpm">
 </div>
 
 <div class="chartitem">
 <img class="chart" id="1-day-uSv">
 </div>
 
 <div class="chartitem">
 <img class="chart" id="4-week-cpm">
 </div>
 
 <div class="chartitem">
 <img class="chart" id="4-week-uSv">
 </div>
 
 <div class="chartitem">
 <img class="chart" id="1-year-cpm">
 </div>
 
 <div class="chartitem">
 <img class="chart" id="1-year-uSv">
 </div>
 
 <div class="chartitem">
 <b>NOTES:</b>
 <ul>
 <li>For more information visit <a href="http://www.eugenemakerspace.com" target="_new"><i>www.eugenemakerspace.com</i></a>
 <li>Project plans and notes available at <a href="http://github.com/fractalxaos/Radmon" target="_new"><i>GitHub.com</i></a>
 </ul>
 </div>
 </div>
 <br>
 <script>
b528647b 
 
     function getRadmon() {
       $.ajaxSetup({cache:false, url: "dynamic/radmonData.js",
         success: function(result){
           jStr = result.slice(1,-2);
           dataObj = JSON.parse(jStr);
           //data = dataObj.radmon;
           parseRadmon(dataObj);
         }
       });
       $.ajax();
     }
 
     function getGraphs() {
       document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png";
       document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png";
       document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png";
       document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png";
       document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png";
       document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png";
     }
 
     function parseRadmon(dataItem) {
       var timeStamp
       var date;
       var time;
66d7b126 
       var hourminute;
b528647b
66d7b126 
       timeStamp = dataItem.date;
149a7da4 
       date = timeStamp.split(" ")[0];
       time = timeStamp.split(" ")[1];
       hourminute = time.split(":")[0] + ":" + time.split(":")[1];
       $("#date").text(date);
       $("#time").text(hourminute + " (PDT)");
b528647b 
       
       $("#cps").text(dataItem.CPS);
       $("#cpm").text(dataItem.CPM);
       $("#uSvPerHr").text(dataItem.uSvPerHr);
 
       sTmp = (dataItem.Mode).toLowerCase();
       $("#mode").text(sTmp);
 
       $("#status").text(dataItem.status);
       if (dataItem.status == "online") {
         document.getElementById("status").style.color = "green";
       }
       else {
         document.getElementById("status").style.color = "red";
       }
     }
 
     $(document).ready(function() {
       getRadmon();
       getGraphs();
66d7b126 
       setInterval(getRadmon, 10000);
b528647b 
       setInterval(getGraphs, 60000);
     });
 
   </script>
 </body>
 </html>