arednsig/html/arednsig.html
11c3de66
 <!DOCTYPE html>
 <!-- Courtesy ruler for editing this file
 12345678901234567890123456789012345678901234567890123456789012345678901234567890
 -->
 <html>
 <head>
fe97b8b6
 <title>AREDN Node - Signal Status</title>
11c3de66
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
 body {
     background-image: url("static/chalk.jpg");
 }
 h2 {
     font: bold 24px arial, sans-serif;
 }
 h3 {
     font: bold 18px arial, sans-serif;
 }
 h4 {
     font: bold 16px arial, sans-serif;
 }
 .mainContainer {
     width: 750px;
     text-align: center;
     margin: auto;
     /*border: 1px solid black;*/
 }
 .datetime {
     font: bold 22px arial, sans-serif;
     padding: 0px;
 }
 .rowContainer {
     display: table;
     width: 100%;
 }
 .currentDataCell {
     width: 50%;
     padding: 10px;
     font: bold 20px arial, sans-serif;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
 }
 .dataItems {
     padding: 2px;
     text-align: left;
     line-height: 130%;
     display: inline-block;
     vertical-align: middle;
 }
 .chartContainer {
     padding: 2px;
 }
 img.chart {
     width:100%;
 }
 .notes {
     font: 17px arial, sans-serif;
     text-align: left;
     padding: 10px;
 }
 span.chartSelector {
     margin: auto;
 }
 ul.selectorElement {
     list-style-type: none;
     margin: 10px;
     padding: 0;
     overflow: hidden;
     background-color: #bbb;
     text-align: center;
 }
 li.selectorElement {
     display: inline-block;
     font: bold 18px arial, sans-serif;
     color: black;
 }
 span.selectorElement:hover {
     background-color: #333;
     cursor: pointer;
     color: white;
 }
 span.selectorElement {
     display: inline-block;
     padding: 8px 12px;
 }
 #iframe_a {
     border:none;
     width:100%;
     height:450px;
 }
 </style>
 </head>
 
 <body onload="main()">
 
 <div class="mainContainer">
 <h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig" 
   style="text-decoration:none" target="_new">
fe97b8b6
 AREDN<sup>&#174;</sup> Node Signal</a></h2>
11c3de66
 <h3>Last Updated</h3>
 <div class="datetime">
 <span id="date"></span>
 &nbsp;&nbsp;
 <span id="time"></span>
 </div>
 
 <div class="rowContainer">
 <div class="currentDataCell">
 <div class="dataItems" style="text-align: center;">
 Status: <span id="status"></span><br>
fe97b8b6
 Charts update every: <span id="period"></span> minutes
11c3de66
 </div>
 
 </div>
 </div>
 
 <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 class="selectorElement"><span class="selectorElement"
  onclick="setChartPeriod(0)">Custom…</span></li>
 </ul>
 </span>
 
 <div class="rowContainer" id="customChartsContainer" style="display:none;">
 <div class="currentDataCell">
 <form id="fmDateSelector" action="arednsig.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>
 
 <br>
 
 <div class="rowContainer" id="stockChartsContainer">
 <div class="chartContainer">
 <img class="chart" id="signalChart">
 </div>
 <div class="chartContainer">
 <img class="chart" id="snrChart">
 </div>
 </div>
 
 <div class="notes">
 <b>NOTES:</b>
 <ul>
 <li>Aredn Node Signal software available at
 <a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
  target="_new">
 <i>Github.com</i></a>.</li>
 <li>Project sponsored by 
 <a href="https://willamettevalleymesh.net" TARGET="_NEW">
 <i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li>
 <li>For more information about the amateur radio emergency
  data network (AREDN) see official web site at
  <a href="http://www.arednmesh.org" target="_blank">
 www.arednmesh.org</a>.</li>
 </ul>
 </div>
 </div>
 <br>
 
 <script>
 
 /* Global constants */
 
 var nodeDataUrl = "dynamic/nodeOnline.js";
 
 /* Global DOM objects */
 
 // Chart elements
 var signalChart = document.getElementById("signalChart");
 var snrChart = document.getElementById("snrChart");
 
 // Text elements
 var dateElmt = document.getElementById("date");    
 var timeElmt = document.getElementById("time"); 
 var statusElmt = document.getElementById("status");
 var periodElmt = document.getElementById("period");
 
 // Document elements
 var customChartsContainer = document.getElementById("customChartsContainer");
 var stockChartsContainer = document.getElementById("stockChartsContainer");
 var fmDateSelector = document.getElementById("fmDateSelector");
 var errorMsg = document.getElementById("errorMsg");
 
 /* Global objects */
 
 var httpRequest = new XMLHttpRequest();
 
 /* Global variables */
 
 var chartPeriod = 1;
 var chartRefreshRate = 0; // chart refresh rate in minutes
 
 function main() {
     /* Register call back function to process http requests */
     httpRequest.onreadystatechange = function() {
         if (httpRequest.readyState == 4 && httpRequest.status == 200) {
             var dataArray = JSON.parse(httpRequest.responseText);
             displayData(dataArray[0]);
         } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
             displayOfflineStatus();
         }
     };
     httpRequest.ontimeout = function(e) {
         displayOfflineStatus();
     };
 
     initializeDateSelector();
     getNodeData();
     getNodeCharts();
 }
 
 function getNodeData() {
     httpRequest.open("GET", nodeDataUrl, true);
     httpRequest.timeout = 3000;
     httpRequest.send();
 }
 
 function setChartPeriod(n) {
     chartPeriod = n;
     if (n == 0) {
         customChartsContainer.style.display = "block";
         stockChartsContainer.style.display = "none";
     } else {
         customChartsContainer.style.display = "none";
         stockChartsContainer.style.display = "block";
     getNodeCharts();   
     }
 }
 
 function getNodeCharts() {
     var d = new Date;
     var pfx;
 
     switch(chartPeriod) {
         case 1:
             pfx = "24hr_";
             break;
         case 2:
             pfx = "4wk_";
             break;
        case 3:
             pfx = "12m_";
             break;
     }
     signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime();
     snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime();
 }
 
 function displayData(dataItem) {
     var timeStamp, date, time, hourminute;
     var localDateObj,localTimeZone;
 
     timeStamp = dataItem.date;
     date = timeStamp.split(" ")[0];
     time = timeStamp.split(" ")[1];
     hourminute = time.split(":")[0] + ":" + time.split(":")[1];
     localDate = new Date();
     localTimeZone = localDate.getTimezoneOffset() / 60;
     dateElmt.innerHTML = date;    
     timeElmt.innerHTML = hourminute +
                          "  <small>(GMT+" + localTimeZone + ")</small>";    
      
     statusElmt.innerHTML = "Online";
     statusElmt.style.color = "green";
 
     chartRefreshRate = dataItem.period;
fe97b8b6
     periodElmt.innerHTML = chartRefreshRate / 60;
     setInterval(getNodeData, 1000 * chartRefreshRate);
     setInterval(getNodeCharts, 1000 * chartRefreshRate);
11c3de66
 }
 
 function displayOfflineStatus() {
     var d = new Date();
     localTimeZone = d.getTimezoneOffset() / 60;
     dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
                           d.getFullYear();    
     timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
                          "  <small>(GMT+" + localTimeZone + ")</small>";
     periodElmt.innerHTML = "?";    
     statusElmt.innerHTML = "offline";    
     statusElmt.style.color = "red";
 }
 
 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();
 }
 </script>
 
 </body>
 </html>