Willamette Valley Mesh - Git Server
Browse code

minor revisions

Gandolf authored on 07/09/2021 23:35:12
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ cd714b4
... ... 
@@ -231,6 +231,7 @@ function main() {
231 231 
     initializeDateSelector();
232 232 
     getNodeData();
233 233 
     getNodeCharts();
234 
+    setInterval(getNodeData, 10000);
234 235 
 }
235 236
236 237 
 function getNodeData() {
... ... 
@@ -292,23 +293,19 @@ function displayData(dataItem) {
292 293 
     statusElmt.innerHTML = "Online";
293 294 
     statusElmt.style.color = "green";
294 295
295 
-    chartUpdateInterval = dataItem.chartUpdateInterval;
296 
-    dataRequestInterval = dataItem.dataRequestInterval;
296 
+    chartUpdateInterval =  dataItem.chartUpdateInterval;
297 297 
     periodElmt.innerHTML = chartUpdateInterval / 60;
298 
-    setInterval(getNodeData, 1000 * dataRequestInterval);
299 298 
     setInterval(getNodeCharts, 1000 * chartUpdateInterval);
300 299 
 }
301 300
302 301 
 function displayOfflineStatus() {
302 
+    var localTimeZone;
303 303 
     var d = new Date();
304 
-    localTimeZone = d.getTimezoneOffset() / 60;
305 
-    dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
306 
-                          d.getFullYear();
307 
-    timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
308 
-                         "  <small>(GMT+" + localTimeZone + ")</small>";
309 
-    periodElmt.innerHTML = "?";
304 
+
310 305 
     statusElmt.innerHTML = "offline";
311 306 
     statusElmt.style.color = "red";
307 
+
308 
+    periodElmt.innerHTML = "?";
312 309 
 }
313 310
314 311 
 function initializeDateSelector() {
Browse code

minor revision

Gandolf authored on 07/06/2021 21:24:13
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ c8990e8
1 1 
old mode 100644
2 2 
new mode 100755
... ... 
@@ -125,8 +125,9 @@ Charts update every: <span id="period"></span> minutes
125 125 
  onclick="setChartPeriod(2)">4 weeks</span></li>
126 126 
 <li class="selectorElement"><span class="selectorElement"
127 127 
  onclick="setChartPeriod(3)">12 months</span></li>
128 
-<li class="selectorElement"><span class="selectorElement"
129 
- onclick="setChartPeriod(0)">Custom…</span></li>
128 
+<li id="customSelector" class="selectorElement" style="visibility:hidden;">
129 
+<span  class="selectorElement"
130 
+ onclick="setChartPeriod(0)">Custom...</span></li>
130 131 
 </ul>
131 132 
 </span>
132 133
... ... 
@@ -177,10 +178,10 @@ www.arednmesh.org</a>.</li>
177 178 
 <br>
178 179
179 180 
 <script>
180 
-
181 
+"use strict";
181 182 
 /* Global constants */
182 183
183 
-var nodeDataUrl = "dynamic/nodeOnline.js";
184 
+var nodeDataUrl = "dynamic/arednsigData.js";
184 185
185 186 
 /* Global DOM objects */
186 187
... ... 
@@ -199,6 +200,7 @@ var customChartsContainer = document.getElementById("customChartsContainer");
199 200 
 var stockChartsContainer = document.getElementById("stockChartsContainer");
200 201 
 var fmDateSelector = document.getElementById("fmDateSelector");
201 202 
 var errorMsg = document.getElementById("errorMsg");
203 
+var customSelector = document.getElementById("customSelector");
202 204
203 205 
 /* Global objects */
204 206
... ... 
@@ -207,9 +209,12 @@ var httpRequest = new XMLHttpRequest();
207 209 
 /* Global variables */
208 210
209 211 
 var chartPeriod = 1;
210 
-var chartRefreshRate = 0; // chart refresh rate in minutes
212 
+var chartUpdateInterval; // chart refresh rate in seconds
213 
+var dataRequestInterval; // data request interval in seconds
211 214
212 215 
 function main() {
216 
+    httpRequest.timeout = 3000;
217 
+
213 218 
     /* Register call back function to process http requests */
214 219 
     httpRequest.onreadystatechange = function() {
215 220 
         if (httpRequest.readyState == 4 && httpRequest.status == 200) {
... ... 
@@ -229,8 +234,7 @@ function main() {
229 234 
 }
230 235
231 236 
 function getNodeData() {
232 
-    httpRequest.open("GET", nodeDataUrl, true);
233 
-    httpRequest.timeout = 3000;
237 
+    httpRequest.open("POST", nodeDataUrl, true);
234 238 
     httpRequest.send();
235 239 
 }
236 240
... ... 
@@ -242,7 +246,7 @@ function setChartPeriod(n) {
242 246 
     } else {
243 247 
         customChartsContainer.style.display = "none";
244 248 
         stockChartsContainer.style.display = "block";
245 
-    getNodeCharts();
249 
+        getNodeCharts();
246 250 
     }
247 251 
 }
248 252
... ... 
@@ -267,7 +271,13 @@ function getNodeCharts() {
267 271
268 272 
 function displayData(dataItem) {
269 273 
     var timeStamp, date, time, hourminute;
270 
-    var localDateObj,localTimeZone;
274 
+    var localDate,localTimeZone;
275 
+
276 
+    // Custom charts can only be generated by the local server, i.e,
277 
+    // with access to rrdtool database.
278 
+    if (dataItem.serverMode == "primary") {
279 
+        customSelector.style.visibility = "visible";
280 
+    }
271 281
272 282 
     timeStamp = dataItem.date;
273 283 
     date = timeStamp.split(" ")[0];
... ... 
@@ -282,10 +292,11 @@ function displayData(dataItem) {
282 292 
     statusElmt.innerHTML = "Online";
283 293 
     statusElmt.style.color = "green";
284 294
285 
-    chartRefreshRate = dataItem.period;
286 
-    periodElmt.innerHTML = chartRefreshRate / 60;
287 
-    setInterval(getNodeData, 1000 * chartRefreshRate);
288 
-    setInterval(getNodeCharts, 1000 * chartRefreshRate);
295 
+    chartUpdateInterval = dataItem.chartUpdateInterval;
296 
+    dataRequestInterval = dataItem.dataRequestInterval;
297 
+    periodElmt.innerHTML = chartUpdateInterval / 60;
298 
+    setInterval(getNodeData, 1000 * dataRequestInterval);
299 
+    setInterval(getNodeCharts, 1000 * chartUpdateInterval);
289 300 
 }
290 301
291 302 
 function displayOfflineStatus() {
Browse code

reorg_20202027

Gandolf authored on 10/27/2020 20:25:34
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ fe97b8b
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,323 @@
1 
+<!DOCTYPE html>
2 
+<!-- Courtesy ruler for editing this file
3 
+12345678901234567890123456789012345678901234567890123456789012345678901234567890
4 
+-->
5 
+<html>
6 
+<head>
7 
+<title>AREDN Node - Signal Status</title>
8 
+<meta charset="UTF-8">
9 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
10 
+<style>
11 
+body {
12 
+    background-image: url("static/chalk.jpg");
13 
+}
14 
+h2 {
15 
+    font: bold 24px arial, sans-serif;
16 
+}
17 
+h3 {
18 
+    font: bold 18px arial, sans-serif;
19 
+}
20 
+h4 {
21 
+    font: bold 16px arial, sans-serif;
22 
+}
23 
+.mainContainer {
24 
+    width: 750px;
25 
+    text-align: center;
26 
+    margin: auto;
27 
+    /*border: 1px solid black;*/
28 
+}
29 
+.datetime {
30 
+    font: bold 22px arial, sans-serif;
31 
+    padding: 0px;
32 
+}
33 
+.rowContainer {
34 
+    display: table;
35 
+    width: 100%;
36 
+}
37 
+.currentDataCell {
38 
+    width: 50%;
39 
+    padding: 10px;
40 
+    font: bold 20px arial, sans-serif;
41 
+    text-align: center;
42 
+    display: table-cell;
43 
+    vertical-align: middle;
44 
+}
45 
+.dataItems {
46 
+    padding: 2px;
47 
+    text-align: left;
48 
+    line-height: 130%;
49 
+    display: inline-block;
50 
+    vertical-align: middle;
51 
+}
52 
+.chartContainer {
53 
+    padding: 2px;
54 
+}
55 
+img.chart {
56 
+    width:100%;
57 
+}
58 
+.notes {
59 
+    font: 17px arial, sans-serif;
60 
+    text-align: left;
61 
+    padding: 10px;
62 
+}
63 
+span.chartSelector {
64 
+    margin: auto;
65 
+}
66 
+ul.selectorElement {
67 
+    list-style-type: none;
68 
+    margin: 10px;
69 
+    padding: 0;
70 
+    overflow: hidden;
71 
+    background-color: #bbb;
72 
+    text-align: center;
73 
+}
74 
+li.selectorElement {
75 
+    display: inline-block;
76 
+    font: bold 18px arial, sans-serif;
77 
+    color: black;
78 
+}
79 
+span.selectorElement:hover {
80 
+    background-color: #333;
81 
+    cursor: pointer;
82 
+    color: white;
83 
+}
84 
+span.selectorElement {
85 
+    display: inline-block;
86 
+    padding: 8px 12px;
87 
+}
88 
+#iframe_a {
89 
+    border:none;
90 
+    width:100%;
91 
+    height:450px;
92 
+}
93 
+</style>
94 
+</head>
95 
+
96 
+<body onload="main()">
97 
+
98 
+<div class="mainContainer">
99 
+<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
100 
+  style="text-decoration:none" target="_new">
101 
+AREDN<sup>&#174;</sup> Node Signal</a></h2>
102 
+<h3>Last Updated</h3>
103 
+<div class="datetime">
104 
+<span id="date"></span>
105 
+&nbsp;&nbsp;
106 
+<span id="time"></span>
107 
+</div>
108 
+
109 
+<div class="rowContainer">
110 
+<div class="currentDataCell">
111 
+<div class="dataItems" style="text-align: center;">
112 
+Status: <span id="status"></span><br>
113 
+Charts update every: <span id="period"></span> minutes
114 
+</div>
115 
+
116 
+</div>
117 
+</div>
118 
+
119 
+<span class="chartSelectors">
120 
+<ul class="selectorElement">
121 
+<li class="selectorElement">Select charts:</li>
122 
+<li class="selectorElement"><span class="selectorElement"
123 
+ onclick="setChartPeriod(1)">24 hours</span></li>
124 
+<li class="selectorElement"><span class="selectorElement"
125 
+ onclick="setChartPeriod(2)">4 weeks</span></li>
126 
+<li class="selectorElement"><span class="selectorElement"
127 
+ onclick="setChartPeriod(3)">12 months</span></li>
128 
+<li class="selectorElement"><span class="selectorElement"
129 
+ onclick="setChartPeriod(0)">Custom…</span></li>
130 
+</ul>
131 
+</span>
132 
+
133 
+<div class="rowContainer" id="customChartsContainer" style="display:none;">
134 
+<div class="currentDataCell">
135 
+<form id="fmDateSelector" action="arednsig.php" method="post"
136 
+ target="iframe_a">
137 
+<label for="beginDate">Begin Date: </label>
138 
+<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" />
139 
+<label for="endDate">End Date: </label>
140 
+<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" />
141 
+<br><br>
142 
+<input type="button" onclick="getCustomCharts()" value="Get Charts">
143 
+</form>
144 
+<span id="errorMsg"></span><br>
145 
+<iframe id="iframe_a" name="iframe_a"></iframe>
146 
+</div>
147 
+</div>
148 
+
149 
+<br>
150 
+
151 
+<div class="rowContainer" id="stockChartsContainer">
152 
+<div class="chartContainer">
153 
+<img class="chart" id="signalChart">
154 
+</div>
155 
+<div class="chartContainer">
156 
+<img class="chart" id="snrChart">
157 
+</div>
158 
+</div>
159 
+
160 
+<div class="notes">
161 
+<b>NOTES:</b>
162 
+<ul>
163 
+<li>Aredn Node Signal software available at
164 
+<a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
165 
+ target="_new">
166 
+<i>Github.com</i></a>.</li>
167 
+<li>Project sponsored by
168 
+<a href="https://willamettevalleymesh.net" TARGET="_NEW">
169 
+<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li>
170 
+<li>For more information about the amateur radio emergency
171 
+ data network (AREDN) see official web site at
172 
+ <a href="http://www.arednmesh.org" target="_blank">
173 
+www.arednmesh.org</a>.</li>
174 
+</ul>
175 
+</div>
176 
+</div>
177 
+<br>
178 
+
179 
+<script>
180 
+
181 
+/* Global constants */
182 
+
183 
+var nodeDataUrl = "dynamic/nodeOnline.js";
184 
+
185 
+/* Global DOM objects */
186 
+
187 
+// Chart elements
188 
+var signalChart = document.getElementById("signalChart");
189 
+var snrChart = document.getElementById("snrChart");
190 
+
191 
+// Text elements
192 
+var dateElmt = document.getElementById("date");
193 
+var timeElmt = document.getElementById("time");
194 
+var statusElmt = document.getElementById("status");
195 
+var periodElmt = document.getElementById("period");
196 
+
197 
+// Document elements
198 
+var customChartsContainer = document.getElementById("customChartsContainer");
199 
+var stockChartsContainer = document.getElementById("stockChartsContainer");
200 
+var fmDateSelector = document.getElementById("fmDateSelector");
201 
+var errorMsg = document.getElementById("errorMsg");
202 
+
203 
+/* Global objects */
204 
+
205 
+var httpRequest = new XMLHttpRequest();
206 
+
207 
+/* Global variables */
208 
+
209 
+var chartPeriod = 1;
210 
+var chartRefreshRate = 0; // chart refresh rate in minutes
211 
+
212 
+function main() {
213 
+    /* Register call back function to process http requests */
214 
+    httpRequest.onreadystatechange = function() {
215 
+        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
216 
+            var dataArray = JSON.parse(httpRequest.responseText);
217 
+            displayData(dataArray[0]);
218 
+        } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
219 
+            displayOfflineStatus();
220 
+        }
221 
+    };
222 
+    httpRequest.ontimeout = function(e) {
223 
+        displayOfflineStatus();
224 
+    };
225 
+
226 
+    initializeDateSelector();
227 
+    getNodeData();
228 
+    getNodeCharts();
229 
+}
230 
+
231 
+function getNodeData() {
232 
+    httpRequest.open("GET", nodeDataUrl, true);
233 
+    httpRequest.timeout = 3000;
234 
+    httpRequest.send();
235 
+}
236 
+
237 
+function setChartPeriod(n) {
238 
+    chartPeriod = n;
239 
+    if (n == 0) {
240 
+        customChartsContainer.style.display = "block";
241 
+        stockChartsContainer.style.display = "none";
242 
+    } else {
243 
+        customChartsContainer.style.display = "none";
244 
+        stockChartsContainer.style.display = "block";
245 
+    getNodeCharts();
246 
+    }
247 
+}
248 
+
249 
+function getNodeCharts() {
250 
+    var d = new Date;
251 
+    var pfx;
252 
+
253 
+    switch(chartPeriod) {
254 
+        case 1:
255 
+            pfx = "24hr_";
256 
+            break;
257 
+        case 2:
258 
+            pfx = "4wk_";
259 
+            break;
260 
+       case 3:
261 
+            pfx = "12m_";
262 
+            break;
263 
+    }
264 
+    signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime();
265 
+    snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime();
266 
+}
267 
+
268 
+function displayData(dataItem) {
269 
+    var timeStamp, date, time, hourminute;
270 
+    var localDateObj,localTimeZone;
271 
+
272 
+    timeStamp = dataItem.date;
273 
+    date = timeStamp.split(" ")[0];
274 
+    time = timeStamp.split(" ")[1];
275 
+    hourminute = time.split(":")[0] + ":" + time.split(":")[1];
276 
+    localDate = new Date();
277 
+    localTimeZone = localDate.getTimezoneOffset() / 60;
278 
+    dateElmt.innerHTML = date;
279 
+    timeElmt.innerHTML = hourminute +
280 
+                         "  <small>(GMT+" + localTimeZone + ")</small>";
281 
+
282 
+    statusElmt.innerHTML = "Online";
283 
+    statusElmt.style.color = "green";
284 
+
285 
+    chartRefreshRate = dataItem.period;
286 
+    periodElmt.innerHTML = chartRefreshRate / 60;
287 
+    setInterval(getNodeData, 1000 * chartRefreshRate);
288 
+    setInterval(getNodeCharts, 1000 * chartRefreshRate);
289 
+}
290 
+
291 
+function displayOfflineStatus() {
292 
+    var d = new Date();
293 
+    localTimeZone = d.getTimezoneOffset() / 60;
294 
+    dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
295 
+                          d.getFullYear();
296 
+    timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
297 
+                         "  <small>(GMT+" + localTimeZone + ")</small>";
298 
+    periodElmt.innerHTML = "?";
299 
+    statusElmt.innerHTML = "offline";
300 
+    statusElmt.style.color = "red";
301 
+}
302 
+
303 
+function initializeDateSelector() {
304 
+    var d = new Date();
305 
+
306 
+    var dEnd = new Date(d.getFullYear(),
307 
+               d.getMonth(), d.getDate() - 0);
308 
+
309 
+    var dBegin = new Date(d.getFullYear(),
310 
+               d.getMonth(), d.getDate() - 1);
311 
+
312 
+    document.getElementById("beginDate").valueAsDate = dBegin;
313 
+    document.getElementById("endDate").valueAsDate = dEnd;
314 
+}
315 
+
316 
+function getCustomCharts() {
317 
+    fmDateSelector.submit();
318 
+}
319 
+</script>
320 
+
321 
+</body>
322 
+</html>
323 
+
Browse code

support for Aredn FW v3.20.3.0

gandolf authored on 03/31/2020 17:37:45
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ 90ee4fe
1 1 
deleted file mode 100644
... ... 
@@ -1,323 +0,0 @@
1 
-<!DOCTYPE html>
2 
-<!-- Courtesy ruler for editing this file
3 
-12345678901234567890123456789012345678901234567890123456789012345678901234567890
4 
-<html>
5 
-<head>
6 
-<title>Node Signal</title>
7 
-<meta charset="UTF-8">
8 
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
9 
-<style>
10 
-body {
11 
-    background-image: url("static/chalk.jpg");
12 
-}
13 
-h2 {
14 
-    font: bold 24px arial, sans-serif;
15 
-}
16 
-h3 {
17 
-    font: bold 18px arial, sans-serif;
18 
-}
19 
-h4 {
20 
-    font: bold 16px arial, sans-serif;
21 
-}
22 
-.mainContainer {
23 
-    width: 750px;
24 
-    text-align: center;
25 
-    margin: auto;
26 
-    /*border: 1px solid black;*/
27 
-}
28 
-.datetime {
29 
-    font: bold 22px arial, sans-serif;
30 
-    padding: 0px;
31 
-}
32 
-.rowContainer {
33 
-    display: table;
34 
-    width: 100%;
35 
-}
36 
-.currentDataCell {
37 
-    width: 50%;
38 
-    padding: 10px;
39 
-    font: bold 20px arial, sans-serif;
40 
-    text-align: center;
41 
-    display: table-cell;
42 
-    vertical-align: middle;
43 
-}
44 
-.dataItems {
45 
-    padding: 2px;
46 
-    text-align: left;
47 
-    line-height: 130%;
48 
-    display: inline-block;
49 
-    vertical-align: middle;
50 
-}
51 
-.chartContainer {
52 
-    padding: 2px;
53 
-}
54 
-img.chart {
55 
-    width:100%;
56 
-}
57 
-.notes {
58 
-    font: 17px arial, sans-serif;
59 
-    text-align: left;
60 
-    padding: 10px;
61 
-}
62 
-span.chartSelector {
63 
-    margin: auto;
64 
-}
65 
-ul.selectorElement {
66 
-    list-style-type: none;
67 
-    margin: 10px;
68 
-    padding: 0;
69 
-    overflow: hidden;
70 
-    background-color: #bbb;
71 
-    text-align: center;
72 
-}
73 
-li.selectorElement {
74 
-    display: inline-block;
75 
-    font: bold 18px arial, sans-serif;
76 
-    color: black;
77 
-}
78 
-span.selectorElement:hover {
79 
-    background-color: #333;
80 
-    cursor: pointer;
81 
-    color: white;
82 
-}
83 
-span.selectorElement {
84 
-    display: inline-block;
85 
-    padding: 8px 12px;
86 
-}
87 
-#iframe_a {
88 
-    border:none;
89 
-    width:100%;
90 
-    height:450px;
91 
-}
92 
-</style>
93 
-</head>
94 
-
95 
-<body onload="main()">
96 
-
97 
-<div class="mainContainer">
98 
-<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
99 
-  style="text-decoration:none" target="_new">
100 
-KA7JLO AREDN<sup>&#174;</sup> Node Signal</a></h2>
101 
-<h3>Last Updated</h3>
102 
-<div class="datetime">
103 
-<span id="date"></span>
104 
-&nbsp;&nbsp;
105 
-<span id="time"></span>
106 
-</div>
107 
-
108 
-<div class="rowContainer">
109 
-<div class="currentDataCell">
110 
-<div class="dataItems" style="text-align: center;">
111 
-Status: <span id="status"></span><br>
112 
-Data updates every: <span id="period"></span> minutes
113 
-</div>
114 
-
115 
-</div>
116 
-</div>
117 
-
118 
-<span class="chartSelectors">
119 
-<ul class="selectorElement">
120 
-<li class="selectorElement">Select charts:</li>
121 
-<li class="selectorElement"><span class="selectorElement"
122 
- onclick="setChartPeriod(1)">24 hours</span></li>
123 
-<li class="selectorElement"><span class="selectorElement"
124 
- onclick="setChartPeriod(2)">4 weeks</span></li>
125 
-<li class="selectorElement"><span class="selectorElement"
126 
- onclick="setChartPeriod(3)">12 months</span></li>
127 
-<li class="selectorElement"><span class="selectorElement"
128 
- onclick="setChartPeriod(0)">Custom…</span></li>
129 
-</ul>
130 
-</span>
131 
-
132 
-<div class="rowContainer" id="customChartsContainer" style="display:none;">
133 
-<div class="currentDataCell">
134 
-<form id="fmDateSelector" action="arednsig.php" method="post"
135 
- target="iframe_a">
136 
-<label for="beginDate">Begin Date: </label>
137 
-<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" />
138 
-<label for="endDate">End Date: </label>
139 
-<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" />
140 
-<br><br>
141 
-<input type="button" onclick="getCustomCharts()" value="Get Charts">
142 
-</form>
143 
-<span id="errorMsg"></span><br>
144 
-<iframe id="iframe_a" name="iframe_a"></iframe>
145 
-</div>
146 
-</div>
147 
-
148 
-<br>
149 
-
150 
-<div class="rowContainer" id="stockChartsContainer">
151 
-<div class="chartContainer">
152 
-<img class="chart" id="signalChart">
153 
-</div>
154 
-<div class="chartContainer">
155 
-<img class="chart" id="snrChart">
156 
-</div>
157 
-</div>
158 
-
159 
-<div class="notes">
160 
-<b>NOTES:</b>
161 
-<ul>
162 
-<li>Aredn Node Signal software available at
163 
-<a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
164 
- target="_new">
165 
-<i>Github.com</i></a>.</li>
166 
-<li>Project sponsored by
167 
-<a href="https://willamettevalleymesh.net" TARGET="_NEW">
168 
-<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li>
169 
-<li>For more information about the amateur radio emergency
170 
- data network (AREDN) see official web site at
171 
- <a href="http://www.arednmesh.org" target="_blank">
172 
-www.arednmesh.org</a>.</li>
173 
-</ul>
174 
-</div>
175 
-</div>
176 
-<br>
177 
-
178 
-<script>
179 
-
180 
-/* Global constants */
181 
-
182 
-var nodeDataUrl = "dynamic/nodeOnline.js";
183 
-
184 
-/* Global DOM objects */
185 
-
186 
-// Chart elements
187 
-var signalChart = document.getElementById("signalChart");
188 
-var snrChart = document.getElementById("snrChart");
189 
-
190 
-// Text elements
191 
-var dateElmt = document.getElementById("date");
192 
-var timeElmt = document.getElementById("time");
193 
-var statusElmt = document.getElementById("status");
194 
-var periodElmt = document.getElementById("period");
195 
-
196 
-// Document elements
197 
-var customChartsContainer = document.getElementById("customChartsContainer");
198 
-var stockChartsContainer = document.getElementById("stockChartsContainer");
199 
-var fmDateSelector = document.getElementById("fmDateSelector");
200 
-var errorMsg = document.getElementById("errorMsg");
201 
-
202 
-/* Global objects */
203 
-
204 
-var httpRequest = new XMLHttpRequest();
205 
-
206 
-/* Global variables */
207 
-
208 
-var chartPeriod = 1;
209 
-var chartRefreshRate = 0; // chart refresh rate in minutes
210 
-
211 
-function main() {
212 
-    /* Register call back function to process http requests */
213 
-    httpRequest.onreadystatechange = function() {
214 
-        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
215 
-            var dataArray = JSON.parse(httpRequest.responseText);
216 
-            displayData(dataArray[0]);
217 
-        } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
218 
-            displayOfflineStatus();
219 
-        }
220 
-    };
221 
-    httpRequest.ontimeout = function(e) {
222 
-        displayOfflineStatus();
223 
-    };
224 
-
225 
-    initializeDateSelector();
226 
-    getNodeData();
227 
-    getNodeCharts();
228 
-}
229 
-
230 
-function getNodeData() {
231 
-    httpRequest.open("GET", nodeDataUrl, true);
232 
-    httpRequest.timeout = 3000;
233 
-    httpRequest.send();
234 
-}
235 
-
236 
-function setChartPeriod(n) {
237 
-    chartPeriod = n;
238 
-    if (n == 0) {
239 
-        customChartsContainer.style.display = "block";
240 
-        stockChartsContainer.style.display = "none";
241 
-    } else {
242 
-        customChartsContainer.style.display = "none";
243 
-        stockChartsContainer.style.display = "block";
244 
-    getNodeCharts();
245 
-    }
246 
-}
247 
-
248 
-function getNodeCharts() {
249 
-    var d = new Date;
250 
-    var pfx;
251 
-
252 
-    switch(chartPeriod) {
253 
-        case 1:
254 
-            pfx = "24hr_";
255 
-            break;
256 
-        case 2:
257 
-            pfx = "4wk_";
258 
-            break;
259 
-       case 3:
260 
-            pfx = "12m_";
261 
-            break;
262 
-    }
263 
-    signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime();
264 
-    snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime();
265 
-}
266 
-
267 
-function displayData(dataItem) {
268 
-    var timeStamp, date, time, hourminute;
269 
-    var localDateObj,localTimeZone;
270 
-
271 
-    timeStamp = dataItem.date;
272 
-    date = timeStamp.split(" ")[0];
273 
-    time = timeStamp.split(" ")[1];
274 
-    hourminute = time.split(":")[0] + ":" + time.split(":")[1];
275 
-    localDate = new Date();
276 
-    localTimeZone = localDate.getTimezoneOffset() / 60;
277 
-    dateElmt.innerHTML = date;
278 
-    timeElmt.innerHTML = hourminute +
279 
-                         "  <small>(GMT+" + localTimeZone + ")</small>";
280 
-
281 
-    statusElmt.innerHTML = "Online";
282 
-    statusElmt.style.color = "green";
283 
-
284 
-    chartRefreshRate = dataItem.period;
285 
-    periodElmt.innerHTML = chartRefreshRate;
286 
-    setInterval(getNodeData, 60000 * chartRefreshRate);
287 
-    setInterval(getNodeCharts, 60000 * chartRefreshRate);
288 
-}
289 
-
290 
-function displayOfflineStatus() {
291 
-    var d = new Date();
292 
-    localTimeZone = d.getTimezoneOffset() / 60;
293 
-    dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
294 
-                          d.getFullYear();
295 
-    timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
296 
-                         "  <small>(GMT+" + localTimeZone + ")</small>";
297 
-    periodElmt.innerHTML = "?";
298 
-    statusElmt.innerHTML = "offline";
299 
-    statusElmt.style.color = "red";
300 
-}
301 
-
302 
-function initializeDateSelector() {
303 
-    var d = new Date();
304 
-
305 
-    var dEnd = new Date(d.getFullYear(),
306 
-               d.getMonth(), d.getDate() - 0);
307 
-
308 
-    var dBegin = new Date(d.getFullYear(),
309 
-               d.getMonth(), d.getDate() - 1);
310 
-
311 
-    document.getElementById("beginDate").valueAsDate = dBegin;
312 
-    document.getElementById("endDate").valueAsDate = dEnd;
313 
-}
314 
-
315 
-function getCustomCharts() {
316 
-    fmDateSelector.submit();
317 
-}
318 
-</script>
319 
-
320 
-</body>
321 
-</html>
322 
-
Browse code

add TM

gandolf authored on 01/23/2020 19:41:30
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ d517294
... ... 
@@ -98,7 +98,7 @@ span.selectorElement {
98 98 
 <div class="mainContainer">
99 99 
 <h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
100 100 
   style="text-decoration:none" target="_new">
101 
-KA7JLO Aredn Node Signal</a></h2>
101 
+KA7JLO AREDN<sup>&#174;</sup> Node Signal</a></h2>
102 102 
 <h3>Last Updated</h3>
103 103 
 <div class="datetime">
104 104 
 <span id="date"></span>
Browse code

bug fixes

gandolf authored on 01/23/2020 07:00:12
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ f4ce332
... ... 
@@ -96,7 +96,7 @@ span.selectorElement {
96 96 
 <body onload="main()">
97 97
98 98 
 <div class="mainContainer">
99 
-<h2><a href="https://github.com/fractalxaos/arednsig"
99 
+<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
100 100 
   style="text-decoration:none" target="_new">
101 101 
 KA7JLO Aredn Node Signal</a></h2>
102 102 
 <h3>Last Updated</h3>
... ... 
@@ -161,7 +161,8 @@ Data updates every: <span id="period"></span> minutes
161 161 
 <b>NOTES:</b>
162 162 
 <ul>
163 163 
 <li>Aredn Node Signal software available at
164 
-<a href="https://github.com/fractalxaos/arednsig" target="_new">
164 
+<a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
165 
+ target="_new">
165 166 
 <i>Github.com</i></a>.</li>
166 167 
 <li>Project sponsored by
167 168 
 <a href="https://willamettevalleymesh.net" TARGET="_NEW">
Browse code

bug fixes

gandolf authored on 01/22/2020 06:04:13
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ c68b1ca
... ... 
@@ -96,7 +96,7 @@ span.selectorElement {
96 96 
 <body onload="main()">
97 97
98 98 
 <div class="mainContainer">
99 
-<h2><a href="https://github.com/fractalxaos/arednstat"
99 
+<h2><a href="https://github.com/fractalxaos/arednsig"
100 100 
   style="text-decoration:none" target="_new">
101 101 
 KA7JLO Aredn Node Signal</a></h2>
102 102 
 <h3>Last Updated</h3>
... ... 
@@ -161,7 +161,7 @@ Data updates every: <span id="period"></span> minutes
161 161 
 <b>NOTES:</b>
162 162 
 <ul>
163 163 
 <li>Aredn Node Signal software available at
164 
-<a href="https://github.com/fractalxaos/radmon" target="_new">
164 
+<a href="https://github.com/fractalxaos/arednsig" target="_new">
165 165 
 <i>Github.com</i></a>.</li>
166 166 
 <li>Project sponsored by
167 167 
 <a href="https://willamettevalleymesh.net" TARGET="_NEW">
Browse code

revisions

gandolf authored on 01/19/2020 00:06:31
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ 46b6e7b
... ... 
@@ -60,10 +60,10 @@ img.chart {
60 60 
     text-align: left;
61 61 
     padding: 10px;
62 62 
 }
63 
-span.navContainer {
63 
+span.chartSelector {
64 64 
     margin: auto;
65 65 
 }
66 
-ul.navElement {
66 
+ul.selectorElement {
67 67 
     list-style-type: none;
68 68 
     margin: 10px;
69 69 
     padding: 0;
... ... 
@@ -71,17 +71,17 @@ ul.navElement {
71 71 
     background-color: #bbb;
72 72 
     text-align: center;
73 73 
 }
74 
-li.navElement {
74 
+li.selectorElement {
75 75 
     display: inline-block;
76 76 
     font: bold 18px arial, sans-serif;
77 77 
     color: black;
78 78 
 }
79 
-span.navElement:hover {
79 
+span.selectorElement:hover {
80 80 
     background-color: #333;
81 81 
     cursor: pointer;
82 82 
     color: white;
83 83 
 }
84 
-span.navElement {
84 
+span.selectorElement {
85 85 
     display: inline-block;
86 86 
     padding: 8px 12px;
87 87 
 }
... ... 
@@ -96,9 +96,8 @@ span.navElement {
96 96 
 <body onload="main()">
97 97
98 98 
 <div class="mainContainer">
99 
-
100 99 
 <h2><a href="https://github.com/fractalxaos/arednstat"
101 
-style="text-decoration:none" target="_new">
100 
+  style="text-decoration:none" target="_new">
102 101 
 KA7JLO Aredn Node Signal</a></h2>
103 102 
 <h3>Last Updated</h3>
104 103 
 <div class="datetime">
... ... 
@@ -109,28 +108,25 @@ KA7JLO Aredn Node Signal</a></h2>
109 108
110 109 
 <div class="rowContainer">
111 110 
 <div class="currentDataCell">
112 
-<div class="dataItems" style="text-align: right;">
113 
-Status:<br>
114 
-Page updates every:
115 
-</div>
116 
-<div class="dataItems">
117 
-<span id="status"></span><br>
118 
-<span id="period"></span> minutes
111 
+<div class="dataItems" style="text-align: center;">
112 
+Status: <span id="status"></span><br>
113 
+Data updates every: <span id="period"></span> minutes
119 114 
 </div>
115 
+
120 116 
 </div>
121 117 
 </div>
122 118
123 
-<span class="navContainer">
124 
-<ul class="navElement">
125 
-<li class="navElement">Select charts:</li>
126 
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(1)">
127 
-24 hours</span></li>
128 
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(2)">
129 
-4 weeks</span></li>
130 
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(3)">
131 
-12 months</span></li>
132 
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(0)">
133 
-Custom...</span></li>
119 
+<span class="chartSelectors">
120 
+<ul class="selectorElement">
121 
+<li class="selectorElement">Select charts:</li>
122 
+<li class="selectorElement"><span class="selectorElement"
123 
+ onclick="setChartPeriod(1)">24 hours</span></li>
124 
+<li class="selectorElement"><span class="selectorElement"
125 
+ onclick="setChartPeriod(2)">4 weeks</span></li>
126 
+<li class="selectorElement"><span class="selectorElement"
127 
+ onclick="setChartPeriod(3)">12 months</span></li>
128 
+<li class="selectorElement"><span class="selectorElement"
129 
+ onclick="setChartPeriod(0)">Custom…</span></li>
134 130 
 </ul>
135 131 
 </span>
136 132
... ... 
@@ -200,10 +196,7 @@ var periodElmt = document.getElementById("period");
200 196 
 // Document elements
201 197 
 var customChartsContainer = document.getElementById("customChartsContainer");
202 198 
 var stockChartsContainer = document.getElementById("stockChartsContainer");
203 
-var chartContainer = document.getElementsByClassName("chartContainer");
204 199 
 var fmDateSelector = document.getElementById("fmDateSelector");
205 
-var beginDate = document.getElementById("beginDate");
206 
-var endDate = document.getElementById("endDate");
207 200 
 var errorMsg = document.getElementById("errorMsg");
208 201
209 202 
 /* Global objects */
... ... 
@@ -213,7 +206,7 @@ var httpRequest = new XMLHttpRequest();
213 206 
 /* Global variables */
214 207
215 208 
 var chartPeriod = 1;
216 
-var chartRefreshRate = 10; // chart refresh rate in minutes
209 
+var chartRefreshRate = 0; // chart refresh rate in minutes
217 210
218 211 
 function main() {
219 212 
     /* Register call back function to process http requests */
... ... 
@@ -315,14 +308,8 @@ function initializeDateSelector() {
315 308 
     var dBegin = new Date(d.getFullYear(),
316 309 
                d.getMonth(), d.getDate() - 1);
317 310
318 
-    var strBegin = dBegin.getFullYear() + "-" + (dBegin.getMonth() + 1) +
319 
-                   "-" + dBegin.getDate();
320 
-    var strEnd = dEnd.getFullYear() + "-" + (dEnd.getMonth() + 1) +
321 
-                 "-" + dEnd.getDate();
322 
-
323 
-    beginDate.valueAsDate = dBegin;
324 
-    endDate.valueAsDate = dEnd;
325 
-    //errorMsg.innerHTML = strBegin + " thru " + strEnd;
311 
+    document.getElementById("beginDate").valueAsDate = dBegin;
312 
+    document.getElementById("endDate").valueAsDate = dEnd;
326 313 
 }
327 314
328 315 
 function getCustomCharts() {
Browse code

custom charts added

gandolf authored on 01/17/2020 00:20:38
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ 1df3484
... ... 
@@ -24,6 +24,7 @@ h4 {
24 24 
     width: 750px;
25 25 
     text-align: center;
26 26 
     margin: auto;
27 
+    /*border: 1px solid black;*/
27 28 
 }
28 29 
 .datetime {
29 30 
     font: bold 22px arial, sans-serif;
... ... 
@@ -40,7 +41,6 @@ h4 {
40 41 
     text-align: center;
41 42 
     display: table-cell;
42 43 
     vertical-align: middle;
43 
-    /*border: 1px solid black;*/
44 44 
 }
45 45 
 .dataItems {
46 46 
     padding: 2px;
... ... 
@@ -60,10 +60,10 @@ img.chart {
60 60 
     text-align: left;
61 61 
     padding: 10px;
62 62 
 }
63 
-span.chartNav {
63 
+span.navContainer {
64 64 
     margin: auto;
65 65 
 }
66 
-ul.chartNav {
66 
+ul.navElement {
67 67 
     list-style-type: none;
68 68 
     margin: 10px;
69 69 
     padding: 0;
... ... 
@@ -71,20 +71,25 @@ ul.chartNav {
71 71 
     background-color: #bbb;
72 72 
     text-align: center;
73 73 
 }
74 
-li.chartNav {
74 
+li.navElement {
75 75 
     display: inline-block;
76 76 
     font: bold 18px arial, sans-serif;
77 77 
     color: black;
78 78 
 }
79 
-text.chartNav:hover {
79 
+span.navElement:hover {
80 80 
     background-color: #333;
81 81 
     cursor: pointer;
82 82 
     color: white;
83 83 
 }
84 
-text.chartNav {
84 
+span.navElement {
85 85 
     display: inline-block;
86 86 
     padding: 8px 12px;
87 87 
 }
88 
+#iframe_a {
89 
+    border:none;
90 
+    width:100%;
91 
+    height:450px;
92 
+}
88 93 
 </style>
89 94 
 </head>
90 95
... ... 
@@ -97,9 +102,9 @@ style="text-decoration:none" target="_new">
97 102 
 KA7JLO Aredn Node Signal</a></h2>
98 103 
 <h3>Last Updated</h3>
99 104 
 <div class="datetime">
100 
-<text id="date"></text>
105 
+<span id="date"></span>
101 106 
 &nbsp;&nbsp;
102 
-<text id="time"></text>
107 
+<span id="time"></span>
103 108 
 </div>
104 109
105 110 
 <div class="rowContainer">
... ... 
@@ -109,43 +114,51 @@ Status:<br>
109 114 
 Page updates every:
110 115 
 </div>
111 116 
 <div class="dataItems">
112 
-<text id="status"></text><br>
113 
-<text id="period"></text> minutes
117 
+<span id="status"></span><br>
118 
+<span id="period"></span> minutes
114 119 
 </div>
115 120 
 </div>
116 121 
 </div>
117 122
118 
-<span class="chartNav">
119 
-<ul class="chartNav">
120 
-<li class="chartNav">Select charts:</li>
121 
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)">
122 
-24 hours</text></li>
123 
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)">
124 
-4 weeks</text></li>
125 
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)">
126 
-12 months</text></li>
123 
+<span class="navContainer">
124 
+<ul class="navElement">
125 
+<li class="navElement">Select charts:</li>
126 
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(1)">
127 
+24 hours</span></li>
128 
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(2)">
129 
+4 weeks</span></li>
130 
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(3)">
131 
+12 months</span></li>
132 
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(0)">
133 
+Custom...</span></li>
127 134 
 </ul>
128 135 
 </span>
129 
-<br>
130 136
131 
-<div class="chartContainer">
132 
-<img class="chart" id="snrChart">
137 
+<div class="rowContainer" id="customChartsContainer" style="display:none;">
138 
+<div class="currentDataCell">
139 
+<form id="fmDateSelector" action="arednsig.php" method="post"
140 
+ target="iframe_a">
141 
+<label for="beginDate">Begin Date: </label>
142 
+<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" />
143 
+<label for="endDate">End Date: </label>
144 
+<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" />
145 
+<br><br>
146 
+<input type="button" onclick="getCustomCharts()" value="Get Charts">
147 
+</form>
148 
+<span id="errorMsg"></span><br>
149 
+<iframe id="iframe_a" name="iframe_a"></iframe>
133 150 
 </div>
134 
-
135 
-<div class="chartContainer">
136 
-<img class="chart" id="signalChart">
137 151 
 </div>
138 152
139 
-<div class="chartContainer">
140 
-<img class="chart" id="noiseChart">
141 
-</div>
153 
+<br>
142 154
155 
+<div class="rowContainer" id="stockChartsContainer">
143 156 
 <div class="chartContainer">
144 
-<img class="chart" id="rxrateChart">
157 
+<img class="chart" id="signalChart">
145 158 
 </div>
146 
-
147 159 
 <div class="chartContainer">
148 
-<img class="chart" id="txrateChart">
160 
+<img class="chart" id="snrChart">
161 
+</div>
149 162 
 </div>
150 163
151 164 
 <div class="notes">
... ... 
@@ -175,25 +188,32 @@ var nodeDataUrl = "dynamic/nodeOnline.js";
175 188 
 /* Global DOM objects */
176 189
177 190 
 // Chart elements
178 
-var snrChart = document.getElementById("snrChart");
179 191 
 var signalChart = document.getElementById("signalChart");
180 
-var noiseChart = document.getElementById("noiseChart");
181 
-var rxrateChart = document.getElementById("rxrateChart");
182 
-var txrateChart = document.getElementById("txrateChart");
192 
+var snrChart = document.getElementById("snrChart");
183 193
184 194 
 // Text elements
185 195 
 var dateElmt = document.getElementById("date");
186 196 
 var timeElmt = document.getElementById("time");
187 197 
 var statusElmt = document.getElementById("status");
188 198 
 var periodElmt = document.getElementById("period");
199 
+
200 
+// Document elements
201 
+var customChartsContainer = document.getElementById("customChartsContainer");
202 
+var stockChartsContainer = document.getElementById("stockChartsContainer");
203 
+var chartContainer = document.getElementsByClassName("chartContainer");
204 
+var fmDateSelector = document.getElementById("fmDateSelector");
205 
+var beginDate = document.getElementById("beginDate");
206 
+var endDate = document.getElementById("endDate");
207 
+var errorMsg = document.getElementById("errorMsg");
208 
+
189 209 
 /* Global objects */
190 210
191 211 
 var httpRequest = new XMLHttpRequest();
192 212
193 213 
 /* Global variables */
194 214
195 
-var graphPeriod;
196 
-var graphRefreshRate = 10; // chart refresh rate in minutes
215 
+var chartPeriod = 1;
216 
+var chartRefreshRate = 10; // chart refresh rate in minutes
197 217
198 218 
 function main() {
199 219 
     /* Register call back function to process http requests */
... ... 
@@ -209,9 +229,9 @@ function main() {
209 229 
         displayOfflineStatus();
210 230 
     };
211 231
232 
+    initializeDateSelector();
212 233 
     getNodeData();
213 
-    graphPeriod = 1;
214 
-    getNodeGraphs();
234 
+    getNodeCharts();
215 235 
 }
216 236
217 237 
 function getNodeData() {
... ... 
@@ -221,15 +241,22 @@ function getNodeData() {
221 241 
 }
222 242
223 243 
 function setChartPeriod(n) {
224 
-    graphPeriod = n;
225 
-    getNodeGraphs();
244 
+    chartPeriod = n;
245 
+    if (n == 0) {
246 
+        customChartsContainer.style.display = "block";
247 
+        stockChartsContainer.style.display = "none";
248 
+    } else {
249 
+        customChartsContainer.style.display = "none";
250 
+        stockChartsContainer.style.display = "block";
251 
+    getNodeCharts();
252 
+    }
226 253 
 }
227 254
228 
-function getNodeGraphs() {
255 
+function getNodeCharts() {
229 256 
     var d = new Date;
230 257 
     var pfx;
231 258
232 
-    switch(graphPeriod) {
259 
+    switch(chartPeriod) {
233 260 
         case 1:
234 261 
             pfx = "24hr_";
235 262 
             break;
... ... 
@@ -241,10 +268,7 @@ function getNodeGraphs() {
241 268 
             break;
242 269 
     }
243 270 
     signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime();
244 
-    noiseChart.src = "dynamic/" + pfx + "noise.png?ver=" + d.getTime();
245 271 
     snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime();
246 
-    rxrateChart.src = "dynamic/" + pfx + "rx_rate.png?ver=" + d.getTime();
247 
-    txrateChart.src = "dynamic/" + pfx + "tx_rate.png?ver=" + d.getTime();
248 272 
 }
249 273
250 274 
 function displayData(dataItem) {
... ... 
@@ -259,29 +283,51 @@ function displayData(dataItem) {
259 283 
     localTimeZone = localDate.getTimezoneOffset() / 60;
260 284 
     dateElmt.innerHTML = date;
261 285 
     timeElmt.innerHTML = hourminute +
262 
-        "  <small>(GMT+" + localTimeZone + ")</small>";
286 
+                         "  <small>(GMT+" + localTimeZone + ")</small>";
263 287
264 288 
     statusElmt.innerHTML = "Online";
265 289 
     statusElmt.style.color = "green";
266 290
267 
-    graphRefreshRate = dataItem.period;
268 
-    periodElmt.innerHTML = graphRefreshRate;
269 
-    setInterval(getNodeData, 60000 * graphRefreshRate);
270 
-    setInterval(getNodeGraphs, 60000 * graphRefreshRate);
291 
+    chartRefreshRate = dataItem.period;
292 
+    periodElmt.innerHTML = chartRefreshRate;
293 
+    setInterval(getNodeData, 60000 * chartRefreshRate);
294 
+    setInterval(getNodeCharts, 60000 * chartRefreshRate);
271 295 
 }
272 296
273 297 
 function displayOfflineStatus() {
274 298 
     var d = new Date();
275 299 
     localTimeZone = d.getTimezoneOffset() / 60;
276 300 
     dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
277 
-                       d.getFullYear();
301 
+                          d.getFullYear();
278 302 
     timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
279 
-                       "  <small>(GMT+" + localTimeZone + ")</small>";
303 
+                         "  <small>(GMT+" + localTimeZone + ")</small>";
280 304 
     periodElmt.innerHTML = "?";
281 305 
     statusElmt.innerHTML = "offline";
282 306 
     statusElmt.style.color = "red";
283 307 
 }
284 308
309 
+function initializeDateSelector() {
310 
+    var d = new Date();
311 
+
312 
+    var dEnd = new Date(d.getFullYear(),
313 
+               d.getMonth(), d.getDate() - 0);
314 
+
315 
+    var dBegin = new Date(d.getFullYear(),
316 
+               d.getMonth(), d.getDate() - 1);
317 
+
318 
+    var strBegin = dBegin.getFullYear() + "-" + (dBegin.getMonth() + 1) +
319 
+                   "-" + dBegin.getDate();
320 
+    var strEnd = dEnd.getFullYear() + "-" + (dEnd.getMonth() + 1) +
321 
+                 "-" + dEnd.getDate();
322 
+
323 
+    beginDate.valueAsDate = dBegin;
324 
+    endDate.valueAsDate = dEnd;
325 
+    //errorMsg.innerHTML = strBegin + " thru " + strEnd;
326 
+}
327 
+
328 
+function getCustomCharts() {
329 
+    fmDateSelector.submit();
330 
+}
285 331 
 </script>
286 332
287 333 
 </body>
Browse code

initial release

gandolf authored on 01/13/2020 03:50:38
Showing 1 changed files
arednsig/html/arednsig.html
History View file @ 4338905
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,289 @@
1 
+<!DOCTYPE html>
2 
+<!-- Courtesy ruler for editing this file
3 
+12345678901234567890123456789012345678901234567890123456789012345678901234567890
4 
+-->
5 
+<html>
6 
+<head>
7 
+<title>Node Signal</title>
8 
+<meta charset="UTF-8">
9 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
10 
+<style>
11 
+body {
12 
+    background-image: url("static/chalk.jpg");
13 
+}
14 
+h2 {
15 
+    font: bold 24px arial, sans-serif;
16 
+}
17 
+h3 {
18 
+    font: bold 18px arial, sans-serif;
19 
+}
20 
+h4 {
21 
+    font: bold 16px arial, sans-serif;
22 
+}
23 
+.mainContainer {
24 
+    width: 750px;
25 
+    text-align: center;
26 
+    margin: auto;
27 
+}
28 
+.datetime {
29 
+    font: bold 22px arial, sans-serif;
30 
+    padding: 0px;
31 
+}
32 
+.rowContainer {
33 
+    display: table;
34 
+    width: 100%;
35 
+}
36 
+.currentDataCell {
37 
+    width: 50%;
38 
+    padding: 10px;
39 
+    font: bold 20px arial, sans-serif;
40 
+    text-align: center;
41 
+    display: table-cell;
42 
+    vertical-align: middle;
43 
+    /*border: 1px solid black;*/
44 
+}
45 
+.dataItems {
46 
+    padding: 2px;
47 
+    text-align: left;
48 
+    line-height: 130%;
49 
+    display: inline-block;
50 
+    vertical-align: middle;
51 
+}
52 
+.chartContainer {
53 
+    padding: 2px;
54 
+}
55 
+img.chart {
56 
+    width:100%;
57 
+}
58 
+.notes {
59 
+    font: 17px arial, sans-serif;
60 
+    text-align: left;
61 
+    padding: 10px;
62 
+}
63 
+span.chartNav {
64 
+    margin: auto;
65 
+}
66 
+ul.chartNav {
67 
+    list-style-type: none;
68 
+    margin: 10px;
69 
+    padding: 0;
70 
+    overflow: hidden;
71 
+    background-color: #bbb;
72 
+    text-align: center;
73 
+}
74 
+li.chartNav {
75 
+    display: inline-block;
76 
+    font: bold 18px arial, sans-serif;
77 
+    color: black;
78 
+}
79 
+text.chartNav:hover {
80 
+    background-color: #333;
81 
+    cursor: pointer;
82 
+    color: white;
83 
+}
84 
+text.chartNav {
85 
+    display: inline-block;
86 
+    padding: 8px 12px;
87 
+}
88 
+</style>
89 
+</head>
90 
+
91 
+<body onload="main()">
92 
+
93 
+<div class="mainContainer">
94 
+
95 
+<h2><a href="https://github.com/fractalxaos/arednstat"
96 
+style="text-decoration:none" target="_new">
97 
+KA7JLO Aredn Node Signal</a></h2>
98 
+<h3>Last Updated</h3>
99 
+<div class="datetime">
100 
+<text id="date"></text>
101 
+&nbsp;&nbsp;
102 
+<text id="time"></text>
103 
+</div>
104 
+
105 
+<div class="rowContainer">
106 
+<div class="currentDataCell">
107 
+<div class="dataItems" style="text-align: right;">
108 
+Status:<br>
109 
+Page updates every:
110 
+</div>
111 
+<div class="dataItems">
112 
+<text id="status"></text><br>
113 
+<text id="period"></text> minutes
114 
+</div>
115 
+</div>
116 
+</div>
117 
+
118 
+<span class="chartNav">
119 
+<ul class="chartNav">
120 
+<li class="chartNav">Select charts:</li>
121 
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)">
122 
+24 hours</text></li>
123 
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)">
124 
+4 weeks</text></li>
125 
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)">
126 
+12 months</text></li>
127 
+</ul>
128 
+</span>
129 
+<br>
130 
+
131 
+<div class="chartContainer">
132 
+<img class="chart" id="snrChart">
133 
+</div>
134 
+
135 
+<div class="chartContainer">
136 
+<img class="chart" id="signalChart">
137 
+</div>
138 
+
139 
+<div class="chartContainer">
140 
+<img class="chart" id="noiseChart">
141 
+</div>
142 
+
143 
+<div class="chartContainer">
144 
+<img class="chart" id="rxrateChart">
145 
+</div>
146 
+
147 
+<div class="chartContainer">
148 
+<img class="chart" id="txrateChart">
149 
+</div>
150 
+
151 
+<div class="notes">
152 
+<b>NOTES:</b>
153 
+<ul>
154 
+<li>Aredn Node Signal software available at
155 
+<a href="https://github.com/fractalxaos/radmon" target="_new">
156 
+<i>Github.com</i></a>.</li>
157 
+<li>Project sponsored by
158 
+<a href="https://willamettevalleymesh.net" TARGET="_NEW">
159 
+<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li>
160 
+<li>For more information about the amateur radio emergency
161 
+ data network (AREDN) see official web site at
162 
+ <a href="http://www.arednmesh.org" target="_blank">
163 
+www.arednmesh.org</a>.</li>
164 
+</ul>
165 
+</div>
166 
+</div>
167 
+<br>
168 
+
169 
+<script>
170 
+
171 
+/* Global constants */
172 
+
173 
+var nodeDataUrl = "dynamic/nodeOnline.js";
174 
+
175 
+/* Global DOM objects */
176 
+
177 
+// Chart elements
178 
+var snrChart = document.getElementById("snrChart");
179 
+var signalChart = document.getElementById("signalChart");
180 
+var noiseChart = document.getElementById("noiseChart");
181 
+var rxrateChart = document.getElementById("rxrateChart");
182 
+var txrateChart = document.getElementById("txrateChart");
183 
+
184 
+// Text elements
185 
+var dateElmt = document.getElementById("date");
186 
+var timeElmt = document.getElementById("time");
187 
+var statusElmt = document.getElementById("status");
188 
+var periodElmt = document.getElementById("period");
189 
+/* Global objects */
190 
+
191 
+var httpRequest = new XMLHttpRequest();
192 
+
193 
+/* Global variables */
194 
+
195 
+var graphPeriod;
196 
+var graphRefreshRate = 10; // chart refresh rate in minutes
197 
+
198 
+function main() {
199 
+    /* Register call back function to process http requests */
200 
+    httpRequest.onreadystatechange = function() {
201 
+        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
202 
+            var dataArray = JSON.parse(httpRequest.responseText);
203 
+            displayData(dataArray[0]);
204 
+        } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
205 
+            displayOfflineStatus();
206 
+        }
207 
+    };
208 
+    httpRequest.ontimeout = function(e) {
209 
+        displayOfflineStatus();
210 
+    };
211 
+
212 
+    getNodeData();
213 
+    graphPeriod = 1;
214 
+    getNodeGraphs();
215 
+}
216 
+
217 
+function getNodeData() {
218 
+    httpRequest.open("GET", nodeDataUrl, true);
219 
+    httpRequest.timeout = 3000;
220 
+    httpRequest.send();
221 
+}
222 
+
223 
+function setChartPeriod(n) {
224 
+    graphPeriod = n;
225 
+    getNodeGraphs();
226 
+}
227 
+
228 
+function getNodeGraphs() {
229 
+    var d = new Date;
230 
+    var pfx;
231 
+
232 
+    switch(graphPeriod) {
233 
+        case 1:
234 
+            pfx = "24hr_";
235 
+            break;
236 
+        case 2:
237 
+            pfx = "4wk_";
238 
+            break;
239 
+       case 3:
240 
+            pfx = "12m_";
241 
+            break;
242 
+    }
243 
+    signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime();
244 
+    noiseChart.src = "dynamic/" + pfx + "noise.png?ver=" + d.getTime();
245 
+    snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime();
246 
+    rxrateChart.src = "dynamic/" + pfx + "rx_rate.png?ver=" + d.getTime();
247 
+    txrateChart.src = "dynamic/" + pfx + "tx_rate.png?ver=" + d.getTime();
248 
+}
249 
+
250 
+function displayData(dataItem) {
251 
+    var timeStamp, date, time, hourminute;
252 
+    var localDateObj,localTimeZone;
253 
+
254 
+    timeStamp = dataItem.date;
255 
+    date = timeStamp.split(" ")[0];
256 
+    time = timeStamp.split(" ")[1];
257 
+    hourminute = time.split(":")[0] + ":" + time.split(":")[1];
258 
+    localDate = new Date();
259 
+    localTimeZone = localDate.getTimezoneOffset() / 60;
260 
+    dateElmt.innerHTML = date;
261 
+    timeElmt.innerHTML = hourminute +
262 
+        "  <small>(GMT+" + localTimeZone + ")</small>";
263 
+
264 
+    statusElmt.innerHTML = "Online";
265 
+    statusElmt.style.color = "green";
266 
+
267 
+    graphRefreshRate = dataItem.period;
268 
+    periodElmt.innerHTML = graphRefreshRate;
269 
+    setInterval(getNodeData, 60000 * graphRefreshRate);
270 
+    setInterval(getNodeGraphs, 60000 * graphRefreshRate);
271 
+}
272 
+
273 
+function displayOfflineStatus() {
274 
+    var d = new Date();
275 
+    localTimeZone = d.getTimezoneOffset() / 60;
276 
+    dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
277 
+                       d.getFullYear();
278 
+    timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
279 
+                       "  <small>(GMT+" + localTimeZone + ")</small>";
280 
+    periodElmt.innerHTML = "?";
281 
+    statusElmt.innerHTML = "offline";
282 
+    statusElmt.style.color = "red";
283 
+}
284 
+
285 
+</script>
286 
+
287 
+</body>
288 
+</html>
289 
+