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>
92145152
 <h4>Located in Albany, Oregon</h4>
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
 
92145152
   function getRadmon() {
     $.ajaxSetup({
       cache:false, url: "dynamic/radmonData.js", success:
         function(result){
           var sData, dataObj;
           sData = result.slice(1,-1);
           dataObj = JSON.parse(sData);
b528647b
           parseRadmon(dataObj);
       }
92145152
     });
     $.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, date, time, hourminute;
 
     timeStamp = dataItem.date;
     date = timeStamp.split(" ")[0];
     time = timeStamp.split(" ")[1];
     hourminute = time.split(":")[0] + ":" + time.split(":")[1];
     $("#date").text(date);
     $("#time").text(hourminute + " (PDT)");
       
     $("#cps").text(dataItem.CPS);
     $("#cpm").text(dataItem.CPM);
     $("#uSvPerHr").text(dataItem.uSvPerHr);
     $("#mode").text(dataItem.Mode);
 
     $("#status").text(dataItem.status);
     if (dataItem.status == "online") {
       document.getElementById("status").style.color = "green";
     }
     else {
       document.getElementById("status").style.color = "red";
b528647b
     }
92145152
   }
b528647b
 
92145152
   $(document).ready(
     function() {
b528647b
       getRadmon();
       getGraphs();
66d7b126
       setInterval(getRadmon, 10000);
b528647b
       setInterval(getGraphs, 60000);
92145152
     }
   );
 
 </script>
b528647b
 
 </body>
 </html>