Willamette Valley Mesh - Git Server
Browse code

reorg_20202027

Gandolf authored on 10/27/2020 20:25:34
Showing 1 changed files
arednsig/aredn_fw_3_20_3_0/html/arednsig.html
History View file @ fe97b8b
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 version for FW v3.20

Gandolf authored on 10/03/2020 23:02:19
Showing 1 changed files
arednsig/aredn_fw_3_20_3_0/html/arednsig.html
History View file @ 11c3de6
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>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 
+    /*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 
+KA7JLO 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 
+Data updates 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;
287 
+    setInterval(getNodeData, 60000 * chartRefreshRate);
288 
+    setInterval(getNodeCharts, 60000 * 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

remove old versions

Gandolf authored on 10/03/2020 23:00:21
Showing 1 changed files
arednsig/aredn_fw_3_20_3_0/html/arednsig.html
History View file @ 6d1202b
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

support for Aredn firmware version 3.20.3.0

gandolf authored on 03/31/2020 18:07:19
Showing 1 changed files
arednsig/aredn_fw_3_20_3_0/html/arednsig.html
History View file @ 7abcd97
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>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 
+    /*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 
+KA7JLO 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 
+Data updates 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;
287 
+    setInterval(getNodeData, 60000 * chartRefreshRate);
288 
+    setInterval(getNodeCharts, 60000 * 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

fix version numbers

gandolf authored on 03/31/2020 18:04:12
Showing 1 changed files
arednsig/aredn_fw_3_20_3_0/html/arednsig.html
History View file @ 30aea67
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

support for Aredn FW v3.19.3.0

gandolf authored on 03/31/2020 17:38:41
Showing 1 changed files
arednsig/aredn_fw_3_20_3_0/html/arednsig.html
History View file @ e500c96
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>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 
+    /*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 
+KA7JLO 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 
+Data updates 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;
287 
+    setInterval(getNodeData, 60000 * chartRefreshRate);
288 
+    setInterval(getNodeCharts, 60000 * 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 
+