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>®</sup> Node Signal</a></h2> |
|
101 |
-<h3>Last Updated</h3> |
|
102 |
-<div class="datetime"> |
|
103 |
-<span id="date"></span> |
|
104 |
- |
|
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 |
- |
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>®</sup> Node Signal</a></h2> |
|
102 |
+<h3>Last Updated</h3> |
|
103 |
+<div class="datetime"> |
|
104 |
+<span id="date"></span> |
|
105 |
+ |
|
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 |
+ |
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>®</sup> Node Signal</a></h2> |
|
101 |
-<h3>Last Updated</h3> |
|
102 |
-<div class="datetime"> |
|
103 |
-<span id="date"></span> |
|
104 |
- |
|
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 |
- |
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>®</sup> Node Signal</a></h2> |
|
102 |
+<h3>Last Updated</h3> |
|
103 |
+<div class="datetime"> |
|
104 |
+<span id="date"></span> |
|
105 |
+ |
|
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 |
+ |
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>®</sup> Node Signal</a></h2> |
|
101 |
-<h3>Last Updated</h3> |
|
102 |
-<div class="datetime"> |
|
103 |
-<span id="date"></span> |
|
104 |
- |
|
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 |
- |
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>®</sup> Node Signal</a></h2> |
|
102 |
+<h3>Last Updated</h3> |
|
103 |
+<div class="datetime"> |
|
104 |
+<span id="date"></span> |
|
105 |
+ |
|
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 |
+ |