1 | 1 |
old mode 100644 |
2 | 2 |
new mode 100755 |
... | ... |
@@ -56,10 +56,10 @@ img.chart { |
56 | 56 |
text-align: left; |
57 | 57 |
padding: 10px; |
58 | 58 |
} |
59 |
-span.chartNav { |
|
59 |
+span.chartSelectors { |
|
60 | 60 |
margin: auto; |
61 | 61 |
} |
62 |
-ul.chartNav { |
|
62 |
+ul.selectorElement { |
|
63 | 63 |
list-style-type: none; |
64 | 64 |
margin: 10px; |
65 | 65 |
padding: 0; |
... | ... |
@@ -67,20 +67,25 @@ ul.chartNav { |
67 | 67 |
background-color: #bbb; |
68 | 68 |
text-align: center; |
69 | 69 |
} |
70 |
-li.chartNav { |
|
70 |
+li.selectorElement { |
|
71 | 71 |
display: inline-block; |
72 | 72 |
font: bold 18px arial, sans-serif; |
73 | 73 |
color: black; |
74 | 74 |
} |
75 |
-text.chartNav:hover { |
|
75 |
+span.selectorElement:hover { |
|
76 | 76 |
background-color: #333; |
77 | 77 |
cursor: pointer; |
78 | 78 |
color: white; |
79 | 79 |
} |
80 |
-text.chartNav { |
|
80 |
+span.selectorElement { |
|
81 | 81 |
display: inline-block; |
82 | 82 |
padding: 8px 12px; |
83 | 83 |
} |
84 |
+#iframe_a { |
|
85 |
+ border:none; |
|
86 |
+ width:100%; |
|
87 |
+ height:450px; |
|
88 |
+} |
|
84 | 89 |
</style> |
85 | 90 |
</head> |
86 | 91 |
|
... | ... |
@@ -94,9 +99,9 @@ DIY Radiation Monitor</a></h2> |
94 | 99 |
<h4>Albany, Oregon</h4> |
95 | 100 |
|
96 | 101 |
<div class="datetime"> |
97 |
-<text id="date"></text> |
|
102 |
+<span id="date"></span> |
|
98 | 103 |
|
99 |
-<text id="time"></text> |
|
104 |
+<span id="time"></span> |
|
100 | 105 |
</div> |
101 | 106 |
|
102 | 107 |
<div class="rowContainer"> |
... | ... |
@@ -108,9 +113,9 @@ Counts per second:<br> |
108 | 113 |
uSv per hour: |
109 | 114 |
</div> |
110 | 115 |
<div class="dataItems"> |
111 |
-<text id="cpm"></text><br> |
|
112 |
-<text id="cps"></text><br> |
|
113 |
-<text id="uSvPerHr"></text> |
|
116 |
+<span id="cpm"></span><br> |
|
117 |
+<span id="cps"></span><br> |
|
118 |
+<span id="uSvPerHr"></span> |
|
114 | 119 |
</div> |
115 | 120 |
</div> |
116 | 121 |
|
... | ... |
@@ -121,32 +126,57 @@ Status:<br> |
121 | 126 |
Mode: |
122 | 127 |
</div> |
123 | 128 |
<div class="dataItems"> |
124 |
-<text id="status"></text><br> |
|
125 |
-<text id="mode"></text> |
|
129 |
+<span id="status"></span><br> |
|
130 |
+<span id="mode"></span> |
|
126 | 131 |
</div> |
127 | 132 |
</div> |
128 | 133 |
</div> |
129 | 134 |
|
130 |
-<span class="chartNav"> |
|
131 |
-<ul class="chartNav"> |
|
132 |
-<li class="chartNav">Select charts:</li> |
|
133 |
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)"> |
|
134 |
-24 hours</text></li> |
|
135 |
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)"> |
|
136 |
-4 weeks</text></li> |
|
137 |
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)"> |
|
138 |
-12 months</text></li> |
|
135 |
+<span class="chartSelectors"> |
|
136 |
+<ul class="selectorElement"> |
|
137 |
+<li class="selectorElement">Select charts:</li> |
|
138 |
+<li class="selectorElement"><span class="selectorElement" |
|
139 |
+ onclick="setChartPeriod(1)"> |
|
140 |
+24 hours</span></li> |
|
141 |
+<li class="selectorElement"><span class="selectorElement" |
|
142 |
+ onclick="setChartPeriod(2)"> |
|
143 |
+4 weeks</span></li> |
|
144 |
+<li class="selectorElement"><span class="selectorElement" |
|
145 |
+ onclick="setChartPeriod(3)">12 months</span></li> |
|
146 |
+<li id="customSelector" class="selectorElement" style="visibility:hidden;"> |
|
147 |
+<span class="selectorElement" |
|
148 |
+ onclick="setChartPeriod(0)">Custom...</span></li> |
|
139 | 149 |
</ul> |
140 | 150 |
</span> |
151 |
+ |
|
152 |
+<div class="rowContainer" id="customChartsContainer" style="display:none;"> |
|
153 |
+<div class="currentDataCell"> |
|
154 |
+<form id="fmDateSelector" action="radmon.php" method="post" |
|
155 |
+ target="iframe_a"> |
|
156 |
+<label for="beginDate">Begin Date: </label> |
|
157 |
+<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" /> |
|
158 |
+<label for="endDate">End Date: </label> |
|
159 |
+<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" /> |
|
160 |
+<br><br> |
|
161 |
+<input type="button" onclick="getCustomCharts()" value="Get Charts"> |
|
162 |
+</form> |
|
163 |
+<span id="errorMsg"></span><br> |
|
164 |
+<iframe id="iframe_a" name="iframe_a"></iframe> |
|
165 |
+</div> |
|
166 |
+</div> |
|
167 |
+ |
|
141 | 168 |
<br> |
142 | 169 |
|
170 |
+ |
|
171 |
+ |
|
172 |
+<div class="rowContainer" id="stockChartsContainer"> |
|
143 | 173 |
<div class="chartContainer"> |
144 | 174 |
<img class="chart" id="cpmChart"> |
145 | 175 |
</div> |
146 |
- |
|
147 | 176 |
<div class="chartContainer"> |
148 | 177 |
<img class="chart" id="uSvChart"> |
149 | 178 |
</div> |
179 |
+</div> |
|
150 | 180 |
|
151 | 181 |
<div class="notes"> |
152 | 182 |
<b>NOTES:</b> |
... | ... |
@@ -166,10 +196,10 @@ Radiation Dose Chart</a> by Randall Monroe.</li> |
166 | 196 |
<br> |
167 | 197 |
|
168 | 198 |
<script> |
169 |
- |
|
199 |
+"use strick"; |
|
170 | 200 |
/* Global constants */ |
171 | 201 |
|
172 |
-var radmonDataUrl = "dynamic/radmonOutputData.js"; |
|
202 |
+var radmonDataUrl = "dynamic/radmonData.js"; |
|
173 | 203 |
|
174 | 204 |
/* Global DOM objects */ |
175 | 205 |
|
... | ... |
@@ -177,7 +207,7 @@ var radmonDataUrl = "dynamic/radmonOutputData.js"; |
177 | 207 |
var cpmChart_g = document.getElementById("cpmChart"); |
178 | 208 |
var uSvChart_g = document.getElementById("uSvChart"); |
179 | 209 |
|
180 |
-// Text elements |
|
210 |
+// Document elements |
|
181 | 211 |
var date_e = document.getElementById("date"); |
182 | 212 |
var time_e = document.getElementById("time"); |
183 | 213 |
var cpm_e = document.getElementById("cpm"); |
... | ... |
@@ -186,16 +216,25 @@ var uSvPerHr_e = document.getElementById("uSvPerHr"); |
186 | 216 |
var mode_e = document.getElementById("mode"); |
187 | 217 |
var status_e = document.getElementById("status"); |
188 | 218 |
|
219 |
+// Custom charts document elements |
|
220 |
+var customChartsContainer = document.getElementById("customChartsContainer"); |
|
221 |
+var stockChartsContainer = document.getElementById("stockChartsContainer"); |
|
222 |
+var fmDateSelector = document.getElementById("fmDateSelector"); |
|
223 |
+var errorMsg = document.getElementById("errorMsg"); |
|
224 |
+var customSelector = document.getElementById("customSelector"); |
|
225 |
+ |
|
226 |
+ |
|
189 | 227 |
/* Global objects */ |
190 | 228 |
|
191 | 229 |
var httpRequest = new XMLHttpRequest(); |
192 | 230 |
|
193 | 231 |
/* Global variables */ |
194 | 232 |
|
195 |
-var graphPeriod; |
|
196 |
- |
|
233 |
+var chartPeriod = 1; |
|
197 | 234 |
|
198 | 235 |
function main() { |
236 |
+ httpRequest.timeout = 3000; |
|
237 |
+ |
|
199 | 238 |
/* Register call back function to process http requests */ |
200 | 239 |
httpRequest.onreadystatechange = function() { |
201 | 240 |
if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
... | ... |
@@ -208,30 +247,38 @@ function main() { |
208 | 247 |
httpRequest.ontimeout = function(e) { |
209 | 248 |
displayOfflineStatus(); |
210 | 249 |
}; |
211 |
- |
|
250 |
+ |
|
251 |
+ initializeDateSelector(); |
|
212 | 252 |
getRadmonData(); |
213 |
- graphPeriod = 1; |
|
214 |
- getRadmonGraphs(); |
|
215 |
- setInterval(getRadmonData, 5000); |
|
216 |
- setInterval(getRadmonGraphs, 300000); |
|
253 |
+ getRadmonCharts(); |
|
254 |
+ setInterval(getRadmonData, 2000); |
|
255 |
+ setInterval(getRadmoncharts, 300000); |
|
217 | 256 |
} |
218 | 257 |
|
219 | 258 |
function getRadmonData() { |
220 |
- httpRequest.open("GET", radmonDataUrl, true); |
|
221 |
- httpRequest.timeout = 3000; |
|
259 |
+ httpRequest.open("POST", radmonDataUrl, true); |
|
222 | 260 |
httpRequest.send(); |
223 | 261 |
} |
224 | 262 |
|
225 | 263 |
function setChartPeriod(n) { |
226 |
- graphPeriod = n; |
|
227 |
- getRadmonGraphs(); |
|
264 |
+ /* Show custom charts if custom charts selected, otherwise show |
|
265 |
+ stock charts. */ |
|
266 |
+ chartPeriod = n; |
|
267 |
+ if (n == 0) { |
|
268 |
+ customChartsContainer.style.display = "block"; |
|
269 |
+ stockChartsContainer.style.display = "none"; |
|
270 |
+ } else { |
|
271 |
+ customChartsContainer.style.display = "none"; |
|
272 |
+ stockChartsContainer.style.display = "block"; |
|
273 |
+ getRadmonCharts(); |
|
274 |
+ } |
|
228 | 275 |
} |
229 | 276 |
|
230 |
-function getRadmonGraphs() { |
|
277 |
+function getRadmonCharts() { |
|
231 | 278 |
var d = new Date; |
232 | 279 |
var pfx; |
233 | 280 |
|
234 |
- switch(graphPeriod) { |
|
281 |
+ switch(chartPeriod) { |
|
235 | 282 |
case 1: |
236 | 283 |
pfx = "24hr_"; |
237 | 284 |
break; |
... | ... |
@@ -250,6 +297,12 @@ function displayData(dataItem) { |
250 | 297 |
var timeStamp, date, time, hourminute; |
251 | 298 |
var localDateObj,localTimeZone; |
252 | 299 |
|
300 |
+ // Custom charts can only be generated by the local server, i.e, |
|
301 |
+ // with access to rrdtool database. |
|
302 |
+ if (dataItem.serverMode == "primary") { |
|
303 |
+ customSelector.style.visibility = "visible"; |
|
304 |
+ } |
|
305 |
+ |
|
253 | 306 |
timeStamp = dataItem.date; |
254 | 307 |
date = timeStamp.split(" ")[0]; |
255 | 308 |
time = timeStamp.split(" ")[1]; |
... | ... |
@@ -259,11 +312,11 @@ function displayData(dataItem) { |
259 | 312 |
|
260 | 313 |
date_e.innerHTML = date; |
261 | 314 |
time_e.innerHTML = hourminute + |
262 |
- " <small>(GMT+" + localTimeZone + ")</small>"; |
|
315 |
+ " <small>(UTC-" + localTimeZone + ")</small>"; |
|
263 | 316 |
cpm_e.innerHTML = dataItem.CPM; |
264 | 317 |
cps_e.innerHTML = dataItem.CPS; |
265 | 318 |
uSvPerHr_e.innerHTML = dataItem.uSvPerHr; |
266 |
- mode_e.innerHTML = dataItem.Mode; |
|
319 |
+ mode_e.innerHTML = dataItem.mode; |
|
267 | 320 |
|
268 | 321 |
status_e.innerHTML = dataItem.status; |
269 | 322 |
if (dataItem.status == "online") { |
... | ... |
@@ -277,7 +330,7 @@ function displayOfflineStatus() { |
277 | 330 |
var d = new Date(); |
278 | 331 |
localTimeZone = d.getTimezoneOffset() / 60; |
279 | 332 |
date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear(); |
280 |
- time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + " <small>(GMT+" + |
|
333 |
+ time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + " <small>(UTC-" + |
|
281 | 334 |
localTimeZone + ")</small>"; |
282 | 335 |
cpm_e.innerHTML = ""; |
283 | 336 |
cps_e.innerHTML = ""; |
... | ... |
@@ -287,6 +340,22 @@ function displayOfflineStatus() { |
287 | 340 |
status_e.style.color = "red"; |
288 | 341 |
} |
289 | 342 |
|
343 |
+function initializeDateSelector() { |
|
344 |
+ var d = new Date(); |
|
345 |
+ |
|
346 |
+ var dEnd = new Date(d.getFullYear(), |
|
347 |
+ d.getMonth(), d.getDate() - 0); |
|
348 |
+ |
|
349 |
+ var dBegin = new Date(d.getFullYear(), |
|
350 |
+ d.getMonth(), d.getDate() - 1); |
|
351 |
+ |
|
352 |
+ document.getElementById("beginDate").valueAsDate = dBegin; |
|
353 |
+ document.getElementById("endDate").valueAsDate = dEnd; |
|
354 |
+} |
|
355 |
+ |
|
356 |
+function getCustomCharts() { |
|
357 |
+ fmDateSelector.submit(); |
|
358 |
+} |
|
290 | 359 |
</script> |
291 | 360 |
|
292 | 361 |
</body> |
... | ... |
@@ -1,7 +1,11 @@ |
1 | 1 |
<!DOCTYPE html> |
2 |
+<!-- Courtesy ruler for editing this file |
|
3 |
+12345678901234567890123456789012345678901234567890123456789012345678901234567890 |
|
4 |
+--> |
|
2 | 5 |
<html> |
3 | 6 |
<head> |
4 | 7 |
<title>DIY Radiation</title> |
8 |
+<meta charset="UTF-8"> |
|
5 | 9 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | 10 |
<style> |
7 | 11 |
body { |
... | ... |
@@ -30,7 +34,7 @@ h4 { |
30 | 34 |
width: 50%; |
31 | 35 |
padding: 10px; |
32 | 36 |
font: bold 20px arial, sans-serif; |
33 |
- text-align: middle; |
|
37 |
+ text-align: center; |
|
34 | 38 |
display: table-cell; |
35 | 39 |
vertical-align: middle; |
36 | 40 |
} |
... | ... |
@@ -201,6 +201,9 @@ function main() { |
201 | 201 |
displayOfflineStatus(); |
202 | 202 |
} |
203 | 203 |
}; |
204 |
+ httpRequest.ontimeout = function(e) { |
|
205 |
+ displayOfflineStatus(); |
|
206 |
+ }; |
|
204 | 207 |
|
205 | 208 |
getRadmonData(); |
206 | 209 |
graphPeriod = 1; |
... | ... |
@@ -211,6 +214,7 @@ function main() { |
211 | 214 |
|
212 | 215 |
function getRadmonData() { |
213 | 216 |
httpRequest.open("GET", radmonDataUrl, true); |
217 |
+ httpRequest.timeout = 3000; |
|
214 | 218 |
httpRequest.send(); |
215 | 219 |
} |
216 | 220 |
|
... | ... |
@@ -261,11 +265,11 @@ function displayData(dataItem) { |
261 | 265 |
if (dataItem.status == "online") { |
262 | 266 |
status_e.style.color = "green"; |
263 | 267 |
} else { |
264 |
- status_e.style.color = "red"; |
|
268 |
+ displayOffLineStatus(); |
|
265 | 269 |
} |
266 | 270 |
} |
267 | 271 |
|
268 |
-function displayOfflineStatus(dataItem) { |
|
272 |
+function displayOfflineStatus() { |
|
269 | 273 |
var d = new Date(); |
270 | 274 |
localTimeZone = d.getTimezoneOffset() / 60; |
271 | 275 |
date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear(); |
... | ... |
@@ -274,7 +278,7 @@ function displayOfflineStatus(dataItem) { |
274 | 278 |
cpm_e.innerHTML = ""; |
275 | 279 |
cps_e.innerHTML = ""; |
276 | 280 |
uSvPerHr_e.innerHTML = ""; |
277 |
- mode_e.innerHTML = ""; |
|
281 |
+ mode_e.innerHTML = " "; |
|
278 | 282 |
status_e.innerHTML = "offline"; |
279 | 283 |
status_e.style.color = "red"; |
280 | 284 |
} |
... | ... |
@@ -28,8 +28,9 @@ h4 { |
28 | 28 |
} |
29 | 29 |
.currentDataCell { |
30 | 30 |
width: 50%; |
31 |
+ padding: 10px; |
|
31 | 32 |
font: bold 20px arial, sans-serif; |
32 |
- text-align: center; |
|
33 |
+ text-align: middle; |
|
33 | 34 |
display: table-cell; |
34 | 35 |
vertical-align: middle; |
35 | 36 |
} |
... | ... |
@@ -38,7 +39,7 @@ h4 { |
38 | 39 |
text-align: left; |
39 | 40 |
line-height: 130%; |
40 | 41 |
display: inline-block; |
41 |
- vertical-align: top; |
|
42 |
+ vertical-align: middle; |
|
42 | 43 |
} |
43 | 44 |
.chartContainer { |
44 | 45 |
padding: 2px; |
... | ... |
@@ -209,7 +210,7 @@ function main() { |
209 | 210 |
} |
210 | 211 |
|
211 | 212 |
function getRadmonData() { |
212 |
- httpRequest.open("POST", radmonDataUrl, true); |
|
213 |
+ httpRequest.open("GET", radmonDataUrl, true); |
|
213 | 214 |
httpRequest.send(); |
214 | 215 |
} |
215 | 216 |
|
... | ... |
@@ -162,16 +162,17 @@ Radiation Dose Chart</a> by Randall Monroe.</li> |
162 | 162 |
|
163 | 163 |
<script> |
164 | 164 |
|
165 |
-/* Globals */ |
|
165 |
+/* Global constants */ |
|
166 |
+ |
|
166 | 167 |
var radmonDataUrl = "dynamic/radmonOutputData.js"; |
167 |
-var httpRequest = new XMLHttpRequest(); |
|
168 |
-var graphPeriod = 1; |
|
169 | 168 |
|
170 |
-/* Chart elements */ |
|
169 |
+/* Global DOM objects */ |
|
170 |
+ |
|
171 |
+// Chart elements |
|
171 | 172 |
var cpmChart_g = document.getElementById("cpmChart"); |
172 | 173 |
var uSvChart_g = document.getElementById("uSvChart"); |
173 | 174 |
|
174 |
-/* Text elements */ |
|
175 |
+// Text elements |
|
175 | 176 |
var date_e = document.getElementById("date"); |
176 | 177 |
var time_e = document.getElementById("time"); |
177 | 178 |
var cpm_e = document.getElementById("cpm"); |
... | ... |
@@ -180,16 +181,28 @@ var uSvPerHr_e = document.getElementById("uSvPerHr"); |
180 | 181 |
var mode_e = document.getElementById("mode"); |
181 | 182 |
var status_e = document.getElementById("status"); |
182 | 183 |
|
184 |
+/* Global objects */ |
|
185 |
+ |
|
186 |
+var httpRequest = new XMLHttpRequest(); |
|
187 |
+ |
|
188 |
+/* Global variables */ |
|
189 |
+ |
|
190 |
+var graphPeriod; |
|
191 |
+ |
|
192 |
+ |
|
183 | 193 |
function main() { |
184 | 194 |
/* Register call back function to process http requests */ |
185 | 195 |
httpRequest.onreadystatechange = function() { |
186 | 196 |
if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
187 | 197 |
var dataArray = JSON.parse(httpRequest.responseText); |
188 | 198 |
displayData(dataArray[0]); |
199 |
+ } else if (httpRequest.readyState == 4 && httpRequest.status == 404) { |
|
200 |
+ displayOfflineStatus(); |
|
189 | 201 |
} |
190 | 202 |
}; |
191 | 203 |
|
192 | 204 |
getRadmonData(); |
205 |
+ graphPeriod = 1; |
|
193 | 206 |
getRadmonGraphs(); |
194 | 207 |
setInterval(getRadmonData, 5000); |
195 | 208 |
setInterval(getRadmonGraphs, 300000); |
... | ... |
@@ -251,6 +264,20 @@ function displayData(dataItem) { |
251 | 264 |
} |
252 | 265 |
} |
253 | 266 |
|
267 |
+function displayOfflineStatus(dataItem) { |
|
268 |
+ var d = new Date(); |
|
269 |
+ localTimeZone = d.getTimezoneOffset() / 60; |
|
270 |
+ date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear(); |
|
271 |
+ time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + " <small>(GMT+" + |
|
272 |
+ localTimeZone + ")</small>"; |
|
273 |
+ cpm_e.innerHTML = ""; |
|
274 |
+ cps_e.innerHTML = ""; |
|
275 |
+ uSvPerHr_e.innerHTML = ""; |
|
276 |
+ mode_e.innerHTML = ""; |
|
277 |
+ status_e.innerHTML = "offline"; |
|
278 |
+ status_e.style.color = "red"; |
|
279 |
+} |
|
280 |
+ |
|
254 | 281 |
</script> |
255 | 282 |
|
256 | 283 |
</body> |
... | ... |
@@ -2,6 +2,7 @@ |
2 | 2 |
<html> |
3 | 3 |
<head> |
4 | 4 |
<title>DIY Radiation</title> |
5 |
+<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
5 | 6 |
<style> |
6 | 7 |
body { |
7 | 8 |
background-image: url("static/chalk.jpg"); |
... | ... |
@@ -124,11 +125,11 @@ Mode: |
124 | 125 |
<span class="chartNav"> |
125 | 126 |
<ul class="chartNav"> |
126 | 127 |
<li class="chartNav">Select charts:</li> |
127 |
-<li class="chartNav"><text class="chartNav" onclick="show_charts(1)"> |
|
128 |
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)"> |
|
128 | 129 |
24 hours</text></li> |
129 |
-<li class="chartNav"><text class="chartNav" onclick="show_charts(2)"> |
|
130 |
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)"> |
|
130 | 131 |
4 weeks</text></li> |
131 |
-<li class="chartNav"><text class="chartNav" onclick="show_charts(3)"> |
|
132 |
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)"> |
|
132 | 133 |
12 months</text></li> |
133 | 134 |
</ul> |
134 | 135 |
</span> |
... | ... |
@@ -164,7 +165,7 @@ Radiation Dose Chart</a> by Randall Monroe.</li> |
164 | 165 |
/* Globals */ |
165 | 166 |
var radmonDataUrl = "dynamic/radmonOutputData.js"; |
166 | 167 |
var httpRequest = new XMLHttpRequest(); |
167 |
-var graphPeriod; |
|
168 |
+var graphPeriod = 1; |
|
168 | 169 |
|
169 | 170 |
/* Chart elements */ |
170 | 171 |
var cpmChart_g = document.getElementById("cpmChart"); |
... | ... |
@@ -180,45 +181,47 @@ var mode_e = document.getElementById("mode"); |
180 | 181 |
var status_e = document.getElementById("status"); |
181 | 182 |
|
182 | 183 |
function main() { |
183 |
- getRadmonData(); |
|
184 |
- show_charts(1); |
|
185 |
- setInterval(getRadmonData, 5000); |
|
186 |
-} |
|
187 |
- |
|
188 |
-function getRadmonData() { |
|
184 |
+ /* Register call back function to process http requests */ |
|
189 | 185 |
httpRequest.onreadystatechange = function() { |
190 | 186 |
if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
191 | 187 |
var dataArray = JSON.parse(httpRequest.responseText); |
192 | 188 |
displayData(dataArray[0]); |
193 | 189 |
} |
194 | 190 |
}; |
191 |
+ |
|
192 |
+ getRadmonData(); |
|
193 |
+ getRadmonGraphs(); |
|
194 |
+ setInterval(getRadmonData, 5000); |
|
195 |
+ setInterval(getRadmonGraphs, 300000); |
|
196 |
+} |
|
197 |
+ |
|
198 |
+function getRadmonData() { |
|
195 | 199 |
httpRequest.open("POST", radmonDataUrl, true); |
196 | 200 |
httpRequest.send(); |
197 | 201 |
} |
198 | 202 |
|
199 |
-function show_charts(n) { |
|
203 |
+function setChartPeriod(n) { |
|
200 | 204 |
graphPeriod = n; |
201 | 205 |
getRadmonGraphs(); |
202 |
- setInterval(getRadmonGraphs, 300000); |
|
203 | 206 |
} |
204 | 207 |
|
205 | 208 |
function getRadmonGraphs() { |
206 | 209 |
var d = new Date; |
210 |
+ var pfx; |
|
207 | 211 |
|
208 | 212 |
switch(graphPeriod) { |
209 | 213 |
case 1: |
210 |
- cpmChart_g.src = "dynamic/24hr_cpm.png?ver=" + d.getTime(); |
|
211 |
- uSvChart_g.src = "dynamic/24hr_svperhr.png?ver=" + d.getTime(); |
|
214 |
+ pfx = "24hr_"; |
|
212 | 215 |
break; |
213 | 216 |
case 2: |
214 |
- cpmChart_g.src = "dynamic/4wk_cpm.png?ver=" + d.getTime(); |
|
215 |
- uSvChart_g.src = "dynamic/4wk_svperhr.png?ver=" + d.getTime(); |
|
217 |
+ pfx = "4wk_"; |
|
216 | 218 |
break; |
217 | 219 |
case 3: |
218 |
- cpmChart_g.src = "dynamic/12m_cpm.png?ver=" + d.getTime(); |
|
219 |
- uSvChart_g.src = "dynamic/12m_svperhr.png?ver=" + d.getTime(); |
|
220 |
+ pfx = "12m_"; |
|
220 | 221 |
break; |
221 | 222 |
} |
223 |
+ cpmChart_g.src = "dynamic/" + pfx + "cpm.png?ver=" + d.getTime(); |
|
224 |
+ uSvChart_g.src = "dynamic/" + pfx + "svperhr.png?ver=" + d.getTime(); |
|
222 | 225 |
} |
223 | 226 |
|
224 | 227 |
function displayData(dataItem) { |
... | ... |
@@ -82,7 +82,9 @@ text.chartNav { |
82 | 82 |
|
83 | 83 |
<div class="mainContainer"> |
84 | 84 |
|
85 |
-<h2>DIY Radiation Monitor</h2> |
|
85 |
+<h2><a href="https://github.com/fractalxaos/radmon" |
|
86 |
+style="text-decoration:none" target="_new"> |
|
87 |
+DIY Radiation Monitor</a></h2> |
|
86 | 88 |
<h4>Albany, Oregon</h4> |
87 | 89 |
|
88 | 90 |
<div class="datetime"> |
... | ... |
@@ -109,7 +111,7 @@ uSv per hour: |
109 | 111 |
<div class="currentDataCell"> |
110 | 112 |
<ins>Radiation Monitor</ins><br><br> |
111 | 113 |
<div class="dataItems"> |
112 |
-Device:<br> |
|
114 |
+Status:<br> |
|
113 | 115 |
Mode: |
114 | 116 |
</div> |
115 | 117 |
<div class="dataItems"> |
... | ... |
@@ -122,9 +124,12 @@ Mode: |
122 | 124 |
<span class="chartNav"> |
123 | 125 |
<ul class="chartNav"> |
124 | 126 |
<li class="chartNav">Select charts:</li> |
125 |
-<li class="chartNav"><text class="chartNav" onclick="show_charts(1)">24 hours</text></li> |
|
126 |
-<li class="chartNav"><text class="chartNav" onclick="show_charts(2)">4 weeks</text></li> |
|
127 |
-<li class="chartNav"><text class="chartNav" onclick="show_charts(3)">12 months</text></li> |
|
127 |
+<li class="chartNav"><text class="chartNav" onclick="show_charts(1)"> |
|
128 |
+24 hours</text></li> |
|
129 |
+<li class="chartNav"><text class="chartNav" onclick="show_charts(2)"> |
|
130 |
+4 weeks</text></li> |
|
131 |
+<li class="chartNav"><text class="chartNav" onclick="show_charts(3)"> |
|
132 |
+12 months</text></li> |
|
128 | 133 |
</ul> |
129 | 134 |
</span> |
130 | 135 |
<br> |
... | ... |
@@ -141,11 +146,13 @@ Mode: |
141 | 146 |
<b>NOTES:</b> |
142 | 147 |
<ul> |
143 | 148 |
<li>DIY Radiation Monitor project plans and software available at |
144 |
-<a href="https://github.com/fractalxaos/radmon" target="_new"><i>Github.com</i></a>.</li> |
|
145 |
-<li>Project sponsored by <a href="http://www.eugenemakerspace.com" TARGET="_NEW"> |
|
149 |
+<a href="https://github.com/fractalxaos/radmon" target="_new"> |
|
150 |
+<i>Github.com</i></a>.</li> |
|
151 |
+<li>Project sponsored by |
|
152 |
+<a href="http://www.eugenemakerspace.com" TARGET="_NEW"> |
|
146 | 153 |
<i>Eugene Maker Space</i></a>, Eugene, Oregon.</li> |
147 |
-<li>For more information about the effects of radiation on the human body see |
|
148 |
-<a href="https://xkcd.com/radiation/" target="_blank"> |
|
154 |
+<li>For more information about the effects of radiation on the human body |
|
155 |
+see <a href="https://xkcd.com/radiation/" target="_blank"> |
|
149 | 156 |
Radiation Dose Chart</a> by Randall Monroe.</li> |
150 | 157 |
</ul> |
151 | 158 |
</div> |
... | ... |
@@ -155,7 +162,7 @@ Radiation Dose Chart</a> by Randall Monroe.</li> |
155 | 162 |
<script> |
156 | 163 |
|
157 | 164 |
/* Globals */ |
158 |
-var radmonDataUrl = "dynamic/radmonData.js"; |
|
165 |
+var radmonDataUrl = "dynamic/radmonOutputData.js"; |
|
159 | 166 |
var httpRequest = new XMLHttpRequest(); |
160 | 167 |
var graphPeriod; |
161 | 168 |
|
... | ... |
@@ -175,7 +182,7 @@ var status_e = document.getElementById("status"); |
175 | 182 |
function main() { |
176 | 183 |
getRadmonData(); |
177 | 184 |
show_charts(1); |
178 |
- setInterval(getRadmonData, 10000); |
|
185 |
+ setInterval(getRadmonData, 5000); |
|
179 | 186 |
} |
180 | 187 |
|
181 | 188 |
function getRadmonData() { |
... | ... |
@@ -226,7 +233,8 @@ function displayData(dataItem) { |
226 | 233 |
localTimeZone = localDateObj.getTimezoneOffset() / 60; |
227 | 234 |
|
228 | 235 |
date_e.innerHTML = date; |
229 |
- time_e.innerHTML = hourminute + " <small>(GMT+" + localTimeZone + ")</small>"; |
|
236 |
+ time_e.innerHTML = hourminute + |
|
237 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
230 | 238 |
cpm_e.innerHTML = dataItem.CPM; |
231 | 239 |
cps_e.innerHTML = dataItem.CPS; |
232 | 240 |
uSvPerHr_e.innerHTML = dataItem.uSvPerHr; |
... | ... |
@@ -200,16 +200,16 @@ function getRadmonGraphs() { |
200 | 200 |
|
201 | 201 |
switch(graphPeriod) { |
202 | 202 |
case 1: |
203 |
- cpmChart_g.src = "dynamic/radGraph1.png?ver=" + d.getTime(); |
|
204 |
- uSvChart_g.src = "dynamic/radGraph2.png?ver=" + d.getTime(); |
|
203 |
+ cpmChart_g.src = "dynamic/24hr_cpm.png?ver=" + d.getTime(); |
|
204 |
+ uSvChart_g.src = "dynamic/24hr_svperhr.png?ver=" + d.getTime(); |
|
205 | 205 |
break; |
206 | 206 |
case 2: |
207 |
- cpmChart_g.src = "dynamic/radGraph3.png?ver=" + d.getTime(); |
|
208 |
- uSvChart_g.src = "dynamic/radGraph4.png?ver=" + d.getTime(); |
|
207 |
+ cpmChart_g.src = "dynamic/4wk_cpm.png?ver=" + d.getTime(); |
|
208 |
+ uSvChart_g.src = "dynamic/4wk_svperhr.png?ver=" + d.getTime(); |
|
209 | 209 |
break; |
210 | 210 |
case 3: |
211 |
- cpmChart_g.src = "dynamic/radGraph5.png?ver=" + d.getTime(); |
|
212 |
- uSvChart_g.src = "dynamic/radGraph6.png?ver=" + d.getTime(); |
|
211 |
+ cpmChart_g.src = "dynamic/12m_cpm.png?ver=" + d.getTime(); |
|
212 |
+ uSvChart_g.src = "dynamic/12m_svperhr.png?ver=" + d.getTime(); |
|
213 | 213 |
break; |
214 | 214 |
} |
215 | 215 |
} |
... | ... |
@@ -159,6 +159,19 @@ var radmonDataUrl = "dynamic/radmonData.js"; |
159 | 159 |
var httpRequest = new XMLHttpRequest(); |
160 | 160 |
var graphPeriod; |
161 | 161 |
|
162 |
+/* Chart elements */ |
|
163 |
+var cpmChart_g = document.getElementById("cpmChart"); |
|
164 |
+var uSvChart_g = document.getElementById("uSvChart"); |
|
165 |
+ |
|
166 |
+/* Text elements */ |
|
167 |
+var date_e = document.getElementById("date"); |
|
168 |
+var time_e = document.getElementById("time"); |
|
169 |
+var cpm_e = document.getElementById("cpm"); |
|
170 |
+var cps_e = document.getElementById("cps"); |
|
171 |
+var uSvPerHr_e = document.getElementById("uSvPerHr"); |
|
172 |
+var mode_e = document.getElementById("mode"); |
|
173 |
+var status_e = document.getElementById("status"); |
|
174 |
+ |
|
162 | 175 |
function main() { |
163 | 176 |
getRadmonData(); |
164 | 177 |
show_charts(1); |
... | ... |
@@ -184,30 +197,26 @@ function show_charts(n) { |
184 | 197 |
|
185 | 198 |
function getRadmonGraphs() { |
186 | 199 |
var d = new Date; |
200 |
+ |
|
187 | 201 |
switch(graphPeriod) { |
188 | 202 |
case 1: |
189 |
- document.getElementById("cpmChart").src = |
|
190 |
- "dynamic/radGraph1.png?ver=" + d.getTime(); |
|
191 |
- document.getElementById("uSvChart").src = |
|
192 |
- "dynamic/radGraph2.png?ver=" + d.getTime(); |
|
203 |
+ cpmChart_g.src = "dynamic/radGraph1.png?ver=" + d.getTime(); |
|
204 |
+ uSvChart_g.src = "dynamic/radGraph2.png?ver=" + d.getTime(); |
|
193 | 205 |
break; |
194 | 206 |
case 2: |
195 |
- document.getElementById("cpmChart").src = |
|
196 |
- "dynamic/radGraph3.png?ver=" + d.getTime(); |
|
197 |
- document.getElementById("uSvChart").src = |
|
198 |
- "dynamic/radGraph4.png?ver=" + d.getTime(); |
|
207 |
+ cpmChart_g.src = "dynamic/radGraph3.png?ver=" + d.getTime(); |
|
208 |
+ uSvChart_g.src = "dynamic/radGraph4.png?ver=" + d.getTime(); |
|
199 | 209 |
break; |
200 | 210 |
case 3: |
201 |
- document.getElementById("cpmChart").src = |
|
202 |
- "dynamic/radGraph5.png?ver=" + d.getTime(); |
|
203 |
- document.getElementById("uSvChart").src = |
|
204 |
- "dynamic/radGraph6.png?ver=" + d.getTime(); |
|
211 |
+ cpmChart_g.src = "dynamic/radGraph5.png?ver=" + d.getTime(); |
|
212 |
+ uSvChart_g.src = "dynamic/radGraph6.png?ver=" + d.getTime(); |
|
205 | 213 |
break; |
206 | 214 |
} |
207 | 215 |
} |
208 | 216 |
|
209 | 217 |
function displayData(dataItem) { |
210 |
- var timeStamp, date, time, hourminute, status; |
|
218 |
+ var timeStamp, date, time, hourminute; |
|
219 |
+ var localDateObj,localTimeZone; |
|
211 | 220 |
|
212 | 221 |
timeStamp = dataItem.date; |
213 | 222 |
date = timeStamp.split(" ")[0]; |
... | ... |
@@ -216,20 +225,18 @@ function displayData(dataItem) { |
216 | 225 |
localDateObj = new Date(); |
217 | 226 |
localTimeZone = localDateObj.getTimezoneOffset() / 60; |
218 | 227 |
|
219 |
- document.getElementById("date").innerHTML = date; |
|
220 |
- document.getElementById("time").innerHTML = |
|
221 |
- hourminute + " <small>(GMT+" + localTimeZone + ")</small>"; |
|
222 |
- document.getElementById("cpm").innerHTML = dataItem.CPM; |
|
223 |
- document.getElementById("cps").innerHTML = dataItem.CPS; |
|
224 |
- document.getElementById("uSvPerHr").innerHTML = dataItem.uSvPerHr; |
|
225 |
- document.getElementById("mode").innerHTML = dataItem.Mode; |
|
226 |
- |
|
227 |
- status = dataItem.status; |
|
228 |
- document.getElementById("status").innerHTML = status; |
|
229 |
- if (status == "online") { |
|
230 |
- document.getElementById("status").style.color = "green"; |
|
228 |
+ date_e.innerHTML = date; |
|
229 |
+ time_e.innerHTML = hourminute + " <small>(GMT+" + localTimeZone + ")</small>"; |
|
230 |
+ cpm_e.innerHTML = dataItem.CPM; |
|
231 |
+ cps_e.innerHTML = dataItem.CPS; |
|
232 |
+ uSvPerHr_e.innerHTML = dataItem.uSvPerHr; |
|
233 |
+ mode_e.innerHTML = dataItem.Mode; |
|
234 |
+ |
|
235 |
+ status_e.innerHTML = dataItem.status; |
|
236 |
+ if (dataItem.status == "online") { |
|
237 |
+ status_e.style.color = "green"; |
|
231 | 238 |
} else { |
232 |
- document.getElementById("status").style.color = "red"; |
|
239 |
+ status_e.style.color = "red"; |
|
233 | 240 |
} |
234 | 241 |
} |
235 | 242 |
|
... | ... |
@@ -13,7 +13,7 @@ h4 { |
13 | 13 |
font: bold 16px arial, sans-serif; |
14 | 14 |
} |
15 | 15 |
.mainContainer { |
16 |
- width: 800px; |
|
16 |
+ width: 750px; |
|
17 | 17 |
text-align: center; |
18 | 18 |
margin: auto; |
19 | 19 |
} |
... | ... |
@@ -50,6 +50,31 @@ img.chart { |
50 | 50 |
text-align: left; |
51 | 51 |
padding: 10px; |
52 | 52 |
} |
53 |
+span.chartNav { |
|
54 |
+ margin: auto; |
|
55 |
+} |
|
56 |
+ul.chartNav { |
|
57 |
+ list-style-type: none; |
|
58 |
+ margin: 10px; |
|
59 |
+ padding: 0; |
|
60 |
+ overflow: hidden; |
|
61 |
+ background-color: #bbb; |
|
62 |
+ text-align: center; |
|
63 |
+} |
|
64 |
+li.chartNav { |
|
65 |
+ display: inline-block; |
|
66 |
+ font: bold 18px arial, sans-serif; |
|
67 |
+ color: black; |
|
68 |
+} |
|
69 |
+text.chartNav:hover { |
|
70 |
+ background-color: #333; |
|
71 |
+ cursor: pointer; |
|
72 |
+ color: white; |
|
73 |
+} |
|
74 |
+text.chartNav { |
|
75 |
+ display: inline-block; |
|
76 |
+ padding: 8px 12px; |
|
77 |
+} |
|
53 | 78 |
</style> |
54 | 79 |
</head> |
55 | 80 |
|
... | ... |
@@ -94,30 +119,22 @@ Mode: |
94 | 119 |
</div> |
95 | 120 |
</div> |
96 | 121 |
|
122 |
+<span class="chartNav"> |
|
123 |
+<ul class="chartNav"> |
|
124 |
+<li class="chartNav">Select charts:</li> |
|
125 |
+<li class="chartNav"><text class="chartNav" onclick="show_charts(1)">24 hours</text></li> |
|
126 |
+<li class="chartNav"><text class="chartNav" onclick="show_charts(2)">4 weeks</text></li> |
|
127 |
+<li class="chartNav"><text class="chartNav" onclick="show_charts(3)">12 months</text></li> |
|
128 |
+</ul> |
|
129 |
+</span> |
|
97 | 130 |
<br> |
98 | 131 |
|
99 | 132 |
<div class="chartContainer"> |
100 |
-<img class="chart" id="1-day-cpm"> |
|
133 |
+<img class="chart" id="cpmChart"> |
|
101 | 134 |
</div> |
102 | 135 |
|
103 | 136 |
<div class="chartContainer"> |
104 |
-<img class="chart" id="1-day-uSv"> |
|
105 |
-</div> |
|
106 |
- |
|
107 |
-<div class="chartContainer"> |
|
108 |
-<img class="chart" id="4-week-cpm"> |
|
109 |
-</div> |
|
110 |
- |
|
111 |
-<div class="chartContainer"> |
|
112 |
-<img class="chart" id="4-week-uSv"> |
|
113 |
-</div> |
|
114 |
- |
|
115 |
-<div class="chartContainer"> |
|
116 |
-<img class="chart" id="1-year-cpm"> |
|
117 |
-</div> |
|
118 |
- |
|
119 |
-<div class="chartContainer"> |
|
120 |
-<img class="chart" id="1-year-uSv"> |
|
137 |
+<img class="chart" id="uSvChart"> |
|
121 | 138 |
</div> |
122 | 139 |
|
123 | 140 |
<div class="notes"> |
... | ... |
@@ -140,12 +157,12 @@ Radiation Dose Chart</a> by Randall Monroe.</li> |
140 | 157 |
/* Globals */ |
141 | 158 |
var radmonDataUrl = "dynamic/radmonData.js"; |
142 | 159 |
var httpRequest = new XMLHttpRequest(); |
160 |
+var graphPeriod; |
|
143 | 161 |
|
144 | 162 |
function main() { |
145 | 163 |
getRadmonData(); |
146 |
- getRadmonGraphs(); |
|
164 |
+ show_charts(1); |
|
147 | 165 |
setInterval(getRadmonData, 10000); |
148 |
- setInterval(getRadmonGraphs, 60000); |
|
149 | 166 |
} |
150 | 167 |
|
151 | 168 |
function getRadmonData() { |
... | ... |
@@ -159,14 +176,34 @@ function getRadmonData() { |
159 | 176 |
httpRequest.send(); |
160 | 177 |
} |
161 | 178 |
|
179 |
+function show_charts(n) { |
|
180 |
+ graphPeriod = n; |
|
181 |
+ getRadmonGraphs(); |
|
182 |
+ setInterval(getRadmonGraphs, 60000); |
|
183 |
+} |
|
184 |
+ |
|
162 | 185 |
function getRadmonGraphs() { |
163 | 186 |
var d = new Date; |
164 |
- document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png?ver=" + d.getTime(); |
|
165 |
- document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png?ver=" + d.getTime(); |
|
166 |
- document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png?ver=" + d.getTime(); |
|
167 |
- document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png?ver=" + d.getTime(); |
|
168 |
- document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png?ver=" + d.getTime(); |
|
169 |
- document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png?ver=" + d.getTime(); |
|
187 |
+ switch(graphPeriod) { |
|
188 |
+ case 1: |
|
189 |
+ document.getElementById("cpmChart").src = |
|
190 |
+ "dynamic/radGraph1.png?ver=" + d.getTime(); |
|
191 |
+ document.getElementById("uSvChart").src = |
|
192 |
+ "dynamic/radGraph2.png?ver=" + d.getTime(); |
|
193 |
+ break; |
|
194 |
+ case 2: |
|
195 |
+ document.getElementById("cpmChart").src = |
|
196 |
+ "dynamic/radGraph3.png?ver=" + d.getTime(); |
|
197 |
+ document.getElementById("uSvChart").src = |
|
198 |
+ "dynamic/radGraph4.png?ver=" + d.getTime(); |
|
199 |
+ break; |
|
200 |
+ case 3: |
|
201 |
+ document.getElementById("cpmChart").src = |
|
202 |
+ "dynamic/radGraph5.png?ver=" + d.getTime(); |
|
203 |
+ document.getElementById("uSvChart").src = |
|
204 |
+ "dynamic/radGraph6.png?ver=" + d.getTime(); |
|
205 |
+ break; |
|
206 |
+ } |
|
170 | 207 |
} |
171 | 208 |
|
172 | 209 |
function displayData(dataItem) { |
... | ... |
@@ -7,12 +7,10 @@ body { |
7 | 7 |
background-image: url("static/chalk.jpg"); |
8 | 8 |
} |
9 | 9 |
h2 { |
10 |
- font: 24px arial, sans-serif; |
|
11 |
- font-weight: bold; |
|
10 |
+ font: bold 24px arial, sans-serif; |
|
12 | 11 |
} |
13 | 12 |
h4 { |
14 |
- font: 16px arial, sans-serif; |
|
15 |
- font-weight: bold; |
|
13 |
+ font: bold 16px arial, sans-serif; |
|
16 | 14 |
} |
17 | 15 |
.mainContainer { |
18 | 16 |
width: 800px; |
... | ... |
@@ -20,21 +18,16 @@ h4 { |
20 | 18 |
margin: auto; |
21 | 19 |
} |
22 | 20 |
.datetime { |
23 |
- font: 19px arial, sans-serif; |
|
24 |
- font-weight: bold; |
|
25 |
- color: black; |
|
26 |
- padding: 10px; |
|
21 |
+ font: bold 22px arial, sans-serif; |
|
22 |
+ padding: 20px; |
|
27 | 23 |
} |
28 | 24 |
.rowContainer { |
29 | 25 |
display: table; |
30 |
- border-spacing: 1px; |
|
26 |
+ width: 100%; |
|
31 | 27 |
} |
32 | 28 |
.currentDataCell { |
33 |
- height: 175px; |
|
34 |
- width: 396px; |
|
35 |
- font: 19px arial, sans-serif; |
|
36 |
- font-weight: bold; |
|
37 |
- color: black; |
|
29 |
+ width: 50%; |
|
30 |
+ font: bold 20px arial, sans-serif; |
|
38 | 31 |
text-align: center; |
39 | 32 |
display: table-cell; |
40 | 33 |
vertical-align: middle; |
... | ... |
@@ -42,21 +35,19 @@ h4 { |
42 | 35 |
.dataItems { |
43 | 36 |
padding: 2px; |
44 | 37 |
text-align: left; |
38 |
+ line-height: 130%; |
|
45 | 39 |
display: inline-block; |
46 | 40 |
vertical-align: top; |
47 | 41 |
} |
48 | 42 |
.chartContainer { |
49 |
- margin: 1px; |
|
50 | 43 |
padding: 2px; |
51 | 44 |
} |
52 | 45 |
img.chart { |
53 | 46 |
width:100%; |
54 | 47 |
} |
55 |
-.footer { |
|
56 |
- font: 17px times new roman, sans-serif; |
|
57 |
- color: black; |
|
48 |
+.notes { |
|
49 |
+ font: 17px arial, sans-serif; |
|
58 | 50 |
text-align: left; |
59 |
- margin: 1px; |
|
60 | 51 |
padding: 10px; |
61 | 52 |
} |
62 | 53 |
</style> |
... | ... |
@@ -65,8 +56,9 @@ img.chart { |
65 | 56 |
<body onload="main()"> |
66 | 57 |
|
67 | 58 |
<div class="mainContainer"> |
59 |
+ |
|
68 | 60 |
<h2>DIY Radiation Monitor</h2> |
69 |
-<h4>Located in Albany, Oregon</h4> |
|
61 |
+<h4>Albany, Oregon</h4> |
|
70 | 62 |
|
71 | 63 |
<div class="datetime"> |
72 | 64 |
<text id="date"></text> |
... | ... |
@@ -74,8 +66,6 @@ img.chart { |
74 | 66 |
<text id="time"></text> |
75 | 67 |
</div> |
76 | 68 |
|
77 |
-<hr> |
|
78 |
- |
|
79 | 69 |
<div class="rowContainer"> |
80 | 70 |
<div class="currentDataCell"> |
81 | 71 |
<ins>Current Reading</ins><br><br> |
... | ... |
@@ -104,7 +94,7 @@ Mode: |
104 | 94 |
</div> |
105 | 95 |
</div> |
106 | 96 |
|
107 |
-<hr> |
|
97 |
+<br> |
|
108 | 98 |
|
109 | 99 |
<div class="chartContainer"> |
110 | 100 |
<img class="chart" id="1-day-cpm"> |
... | ... |
@@ -130,13 +120,16 @@ Mode: |
130 | 120 |
<img class="chart" id="1-year-uSv"> |
131 | 121 |
</div> |
132 | 122 |
|
133 |
-<div class="footer"> |
|
123 |
+<div class="notes"> |
|
134 | 124 |
<b>NOTES:</b> |
135 | 125 |
<ul> |
136 | 126 |
<li>DIY Radiation Monitor project plans and software available at |
137 | 127 |
<a href="https://github.com/fractalxaos/radmon" target="_new"><i>Github.com</i></a>.</li> |
138 | 128 |
<li>Project sponsored by <a href="http://www.eugenemakerspace.com" TARGET="_NEW"> |
139 | 129 |
<i>Eugene Maker Space</i></a>, Eugene, Oregon.</li> |
130 |
+<li>For more information about the effects of radiation on the human body see |
|
131 |
+<a href="https://xkcd.com/radiation/" target="_blank"> |
|
132 |
+Radiation Dose Chart</a> by Randall Monroe.</li> |
|
140 | 133 |
</ul> |
141 | 134 |
</div> |
142 | 135 |
</div> |
... | ... |
@@ -177,26 +170,29 @@ function getRadmonGraphs() { |
177 | 170 |
} |
178 | 171 |
|
179 | 172 |
function displayData(dataItem) { |
180 |
- var timeStamp, date, time, hourminute; |
|
173 |
+ var timeStamp, date, time, hourminute, status; |
|
181 | 174 |
|
182 | 175 |
timeStamp = dataItem.date; |
183 | 176 |
date = timeStamp.split(" ")[0]; |
184 | 177 |
time = timeStamp.split(" ")[1]; |
185 | 178 |
hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
179 |
+ localDateObj = new Date(); |
|
180 |
+ localTimeZone = localDateObj.getTimezoneOffset() / 60; |
|
186 | 181 |
|
187 | 182 |
document.getElementById("date").innerHTML = date; |
188 |
- document.getElementById("time").innerHTML = hourminute + " (PDT)"; |
|
183 |
+ document.getElementById("time").innerHTML = |
|
184 |
+ hourminute + " <small>(GMT+" + localTimeZone + ")</small>"; |
|
189 | 185 |
document.getElementById("cpm").innerHTML = dataItem.CPM; |
190 | 186 |
document.getElementById("cps").innerHTML = dataItem.CPS; |
191 | 187 |
document.getElementById("uSvPerHr").innerHTML = dataItem.uSvPerHr; |
192 | 188 |
document.getElementById("mode").innerHTML = dataItem.Mode; |
193 | 189 |
|
194 |
- document.getElementById("status").innerHTML = dataItem.status; |
|
195 |
- if (dataItem.status == "online") { |
|
196 |
- document.getElementById("status").style.color = "green"; |
|
197 |
- } |
|
198 |
- else { |
|
199 |
- document.getElementById("status").style.color = "red"; |
|
190 |
+ status = dataItem.status; |
|
191 |
+ document.getElementById("status").innerHTML = status; |
|
192 |
+ if (status == "online") { |
|
193 |
+ document.getElementById("status").style.color = "green"; |
|
194 |
+ } else { |
|
195 |
+ document.getElementById("status").style.color = "red"; |
|
200 | 196 |
} |
201 | 197 |
} |
202 | 198 |
|
... | ... |
@@ -18,7 +18,6 @@ h4 { |
18 | 18 |
width: 800px; |
19 | 19 |
text-align: center; |
20 | 20 |
margin: auto; |
21 |
- //border: 1px solid; |
|
22 | 21 |
} |
23 | 22 |
.datetime { |
24 | 23 |
font: 19px arial, sans-serif; |
... | ... |
@@ -29,7 +28,6 @@ h4 { |
29 | 28 |
.rowContainer { |
30 | 29 |
display: table; |
31 | 30 |
border-spacing: 1px; |
32 |
- //border: 1px solid; |
|
33 | 31 |
} |
34 | 32 |
.currentDataCell { |
35 | 33 |
height: 175px; |
... | ... |
@@ -40,7 +38,6 @@ h4 { |
40 | 38 |
text-align: center; |
41 | 39 |
display: table-cell; |
42 | 40 |
vertical-align: middle; |
43 |
- //border: 1px solid; |
|
44 | 41 |
} |
45 | 42 |
.dataItems { |
46 | 43 |
padding: 2px; |
... | ... |
@@ -51,7 +48,6 @@ h4 { |
51 | 48 |
.chartContainer { |
52 | 49 |
margin: 1px; |
53 | 50 |
padding: 2px; |
54 |
- //border: 1px solid; |
|
55 | 51 |
} |
56 | 52 |
img.chart { |
57 | 53 |
width:100%; |
... | ... |
@@ -2,167 +2,207 @@ |
2 | 2 |
<html> |
3 | 3 |
<head> |
4 | 4 |
<title>DIY Radiation</title> |
5 |
-<script src="jQuery.min.js"></script> |
|
6 | 5 |
<style> |
7 | 6 |
body { |
8 | 7 |
background-image: url("static/chalk.jpg"); |
9 | 8 |
} |
10 |
-#frame { |
|
11 |
- width:800px; |
|
12 |
- text-align:center; |
|
13 |
- margin:auto; |
|
9 |
+h2 { |
|
10 |
+ font: 24px arial, sans-serif; |
|
11 |
+ font-weight: bold; |
|
14 | 12 |
} |
15 |
-#datetime { |
|
16 |
- text-align:center; |
|
17 |
- display:inline-block; |
|
18 |
- margin:1px; |
|
19 |
- font-size:21px; |
|
20 |
- color:black; |
|
21 |
- width:700px; |
|
22 |
- padding:10px; |
|
13 |
+h4 { |
|
14 |
+ font: 16px arial, sans-serif; |
|
15 |
+ font-weight: bold; |
|
23 | 16 |
} |
24 |
-div.currentdata { |
|
25 |
- font-size:20px; |
|
26 |
- display:inline-block; |
|
27 |
- margin:1px; |
|
28 |
- text-align:center; |
|
29 |
- color:black; |
|
30 |
- width:342px; |
|
31 |
- padding:10px; |
|
32 |
- border-style:solid; |
|
33 |
- border-width:1px; |
|
17 |
+.mainContainer { |
|
18 |
+ width: 800px; |
|
19 |
+ text-align: center; |
|
20 |
+ margin: auto; |
|
21 |
+ //border: 1px solid; |
|
34 | 22 |
} |
35 |
-div.chartitem { |
|
36 |
- display:inline-block; |
|
37 |
- text-align:left; |
|
38 |
- margin:1px; |
|
39 |
- width: 730px; |
|
40 |
- padding:2px; |
|
41 |
- border-style:solid; |
|
42 |
- border-width:1px; |
|
23 |
+.datetime { |
|
24 |
+ font: 19px arial, sans-serif; |
|
25 |
+ font-weight: bold; |
|
26 |
+ color: black; |
|
27 |
+ padding: 10px; |
|
28 |
+} |
|
29 |
+.rowContainer { |
|
30 |
+ display: table; |
|
31 |
+ border-spacing: 1px; |
|
32 |
+ //border: 1px solid; |
|
33 |
+} |
|
34 |
+.currentDataCell { |
|
35 |
+ height: 175px; |
|
36 |
+ width: 396px; |
|
37 |
+ font: 19px arial, sans-serif; |
|
38 |
+ font-weight: bold; |
|
39 |
+ color: black; |
|
40 |
+ text-align: center; |
|
41 |
+ display: table-cell; |
|
42 |
+ vertical-align: middle; |
|
43 |
+ //border: 1px solid; |
|
44 |
+} |
|
45 |
+.dataItems { |
|
46 |
+ padding: 2px; |
|
47 |
+ text-align: left; |
|
48 |
+ display: inline-block; |
|
49 |
+ vertical-align: top; |
|
50 |
+} |
|
51 |
+.chartContainer { |
|
52 |
+ margin: 1px; |
|
53 |
+ padding: 2px; |
|
54 |
+ //border: 1px solid; |
|
43 | 55 |
} |
44 | 56 |
img.chart { |
45 | 57 |
width:100%; |
46 | 58 |
} |
59 |
+.footer { |
|
60 |
+ font: 17px times new roman, sans-serif; |
|
61 |
+ color: black; |
|
62 |
+ text-align: left; |
|
63 |
+ margin: 1px; |
|
64 |
+ padding: 10px; |
|
65 |
+} |
|
47 | 66 |
</style> |
48 | 67 |
</head> |
49 | 68 |
|
50 |
-<body> |
|
51 |
-<div id="frame"> |
|
69 |
+<body onload="main()"> |
|
70 |
+ |
|
71 |
+<div class="mainContainer"> |
|
52 | 72 |
<h2>DIY Radiation Monitor</h2> |
53 | 73 |
<h4>Located in Albany, Oregon</h4> |
54 |
-<hr> |
|
55 |
-<b> |
|
56 | 74 |
|
57 |
-<div id="datetime"> |
|
75 |
+<div class="datetime"> |
|
58 | 76 |
<text id="date"></text> |
59 | 77 |
|
60 | 78 |
<text id="time"></text> |
61 | 79 |
</div> |
62 | 80 |
|
63 |
-<div class="currentdata"> |
|
81 |
+<hr> |
|
82 |
+ |
|
83 |
+<div class="rowContainer"> |
|
84 |
+<div class="currentDataCell"> |
|
64 | 85 |
<ins>Current Reading</ins><br><br> |
65 |
-Counts per minute: <text id="cpm"></text><br> |
|
66 |
-Counts per second: <text id="cps"></text><br> |
|
67 |
-uSv per hour: <text id="uSvPerHr"></text> |
|
86 |
+<div class="dataItems"> |
|
87 |
+Counts per minute:<br> |
|
88 |
+Counts per second:<br> |
|
89 |
+uSv per hour: |
|
90 |
+</div> |
|
91 |
+<div class="dataItems"> |
|
92 |
+<text id="cpm"></text><br> |
|
93 |
+<text id="cps"></text><br> |
|
94 |
+<text id="uSvPerHr"></text> |
|
95 |
+</div> |
|
68 | 96 |
</div> |
69 | 97 |
|
70 |
-<div class="currentdata"> |
|
71 |
-<ins>Status</ins><br><br> |
|
72 |
-Mode: <text id="mode"></text><br> |
|
73 |
-Device: <text id="status"></text><br> |
|
74 |
- |
|
98 |
+<div class="currentDataCell"> |
|
99 |
+<ins>Radiation Monitor</ins><br><br> |
|
100 |
+<div class="dataItems"> |
|
101 |
+Device:<br> |
|
102 |
+Mode: |
|
103 |
+</div> |
|
104 |
+<div class="dataItems"> |
|
105 |
+<text id="status"></text><br> |
|
106 |
+<text id="mode"></text> |
|
107 |
+</div> |
|
75 | 108 |
</div> |
109 |
+</div> |
|
110 |
+ |
|
111 |
+<hr> |
|
76 | 112 |
|
77 |
-<div class="chartitem"> |
|
113 |
+<div class="chartContainer"> |
|
78 | 114 |
<img class="chart" id="1-day-cpm"> |
79 | 115 |
</div> |
80 | 116 |
|
81 |
-<div class="chartitem"> |
|
117 |
+<div class="chartContainer"> |
|
82 | 118 |
<img class="chart" id="1-day-uSv"> |
83 | 119 |
</div> |
84 | 120 |
|
85 |
-<div class="chartitem"> |
|
121 |
+<div class="chartContainer"> |
|
86 | 122 |
<img class="chart" id="4-week-cpm"> |
87 | 123 |
</div> |
88 | 124 |
|
89 |
-<div class="chartitem"> |
|
125 |
+<div class="chartContainer"> |
|
90 | 126 |
<img class="chart" id="4-week-uSv"> |
91 | 127 |
</div> |
92 | 128 |
|
93 |
-<div class="chartitem"> |
|
129 |
+<div class="chartContainer"> |
|
94 | 130 |
<img class="chart" id="1-year-cpm"> |
95 | 131 |
</div> |
96 | 132 |
|
97 |
-<div class="chartitem"> |
|
133 |
+<div class="chartContainer"> |
|
98 | 134 |
<img class="chart" id="1-year-uSv"> |
99 | 135 |
</div> |
100 | 136 |
|
101 |
-<div class="chartitem"> |
|
137 |
+<div class="footer"> |
|
102 | 138 |
<b>NOTES:</b> |
103 | 139 |
<ul> |
104 |
-<li>For more information visit <a href="http://www.eugenemakerspace.com" target="_new"><i>www.eugenemakerspace.com</i></a> |
|
105 |
-<li>Project plans and notes available at <a href="http://github.com/fractalxaos/Radmon" target="_new"><i>GitHub.com</i></a> |
|
140 |
+<li>DIY Radiation Monitor project plans and software available at |
|
141 |
+<a href="https://github.com/fractalxaos/radmon" target="_new"><i>Github.com</i></a>.</li> |
|
142 |
+<li>Project sponsored by <a href="http://www.eugenemakerspace.com" TARGET="_NEW"> |
|
143 |
+<i>Eugene Maker Space</i></a>, Eugene, Oregon.</li> |
|
106 | 144 |
</ul> |
107 | 145 |
</div> |
108 | 146 |
</div> |
109 | 147 |
<br> |
148 |
+ |
|
110 | 149 |
<script> |
111 | 150 |
|
112 |
- function getRadmon() { |
|
113 |
- $.ajaxSetup({ |
|
114 |
- cache:false, url: "dynamic/radmonData.js", success: |
|
115 |
- function(result){ |
|
116 |
- var sData, dataObj; |
|
117 |
- sData = result.slice(1,-1); |
|
118 |
- dataObj = JSON.parse(sData); |
|
119 |
- parseRadmon(dataObj); |
|
151 |
+/* Globals */ |
|
152 |
+var radmonDataUrl = "dynamic/radmonData.js"; |
|
153 |
+var httpRequest = new XMLHttpRequest(); |
|
154 |
+ |
|
155 |
+function main() { |
|
156 |
+ getRadmonData(); |
|
157 |
+ getRadmonGraphs(); |
|
158 |
+ setInterval(getRadmonData, 10000); |
|
159 |
+ setInterval(getRadmonGraphs, 60000); |
|
160 |
+} |
|
161 |
+ |
|
162 |
+function getRadmonData() { |
|
163 |
+ httpRequest.onreadystatechange = function() { |
|
164 |
+ if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
|
165 |
+ var dataArray = JSON.parse(httpRequest.responseText); |
|
166 |
+ displayData(dataArray[0]); |
|
120 | 167 |
} |
121 |
- }); |
|
122 |
- $.ajax(); |
|
123 |
- } |
|
124 |
- |
|
125 |
- function getGraphs() { |
|
126 |
- document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png"; |
|
127 |
- document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png"; |
|
128 |
- document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png"; |
|
129 |
- document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png"; |
|
130 |
- document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png"; |
|
131 |
- document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png"; |
|
132 |
- } |
|
133 |
- |
|
134 |
- function parseRadmon(dataItem) { |
|
168 |
+ }; |
|
169 |
+ httpRequest.open("GET", radmonDataUrl, true); |
|
170 |
+ httpRequest.send(); |
|
171 |
+} |
|
172 |
+ |
|
173 |
+function getRadmonGraphs() { |
|
174 |
+ var d = new Date; |
|
175 |
+ document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png?ver=" + d.getTime(); |
|
176 |
+ document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png?ver=" + d.getTime(); |
|
177 |
+ document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png?ver=" + d.getTime(); |
|
178 |
+ document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png?ver=" + d.getTime(); |
|
179 |
+ document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png?ver=" + d.getTime(); |
|
180 |
+ document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png?ver=" + d.getTime(); |
|
181 |
+} |
|
182 |
+ |
|
183 |
+function displayData(dataItem) { |
|
135 | 184 |
var timeStamp, date, time, hourminute; |
136 | 185 |
|
137 | 186 |
timeStamp = dataItem.date; |
138 | 187 |
date = timeStamp.split(" ")[0]; |
139 | 188 |
time = timeStamp.split(" ")[1]; |
140 | 189 |
hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
141 |
- $("#date").text(date); |
|
142 |
- $("#time").text(hourminute + " (PDT)"); |
|
143 |
- |
|
144 |
- $("#cps").text(dataItem.CPS); |
|
145 |
- $("#cpm").text(dataItem.CPM); |
|
146 |
- $("#uSvPerHr").text(dataItem.uSvPerHr); |
|
147 |
- $("#mode").text(dataItem.Mode); |
|
148 |
- |
|
149 |
- $("#status").text(dataItem.status); |
|
190 |
+ |
|
191 |
+ document.getElementById("date").innerHTML = date; |
|
192 |
+ document.getElementById("time").innerHTML = hourminute + " (PDT)"; |
|
193 |
+ document.getElementById("cpm").innerHTML = dataItem.CPM; |
|
194 |
+ document.getElementById("cps").innerHTML = dataItem.CPS; |
|
195 |
+ document.getElementById("uSvPerHr").innerHTML = dataItem.uSvPerHr; |
|
196 |
+ document.getElementById("mode").innerHTML = dataItem.Mode; |
|
197 |
+ |
|
198 |
+ document.getElementById("status").innerHTML = dataItem.status; |
|
150 | 199 |
if (dataItem.status == "online") { |
151 |
- document.getElementById("status").style.color = "green"; |
|
200 |
+ document.getElementById("status").style.color = "green"; |
|
152 | 201 |
} |
153 | 202 |
else { |
154 |
- document.getElementById("status").style.color = "red"; |
|
155 |
- } |
|
156 |
- } |
|
157 |
- |
|
158 |
- $(document).ready( |
|
159 |
- function() { |
|
160 |
- getRadmon(); |
|
161 |
- getGraphs(); |
|
162 |
- setInterval(getRadmon, 10000); |
|
163 |
- setInterval(getGraphs, 60000); |
|
203 |
+ document.getElementById("status").style.color = "red"; |
|
164 | 204 |
} |
165 |
- ); |
|
205 |
+} |
|
166 | 206 |
|
167 | 207 |
</script> |
168 | 208 |
|
... | ... |
@@ -50,6 +50,7 @@ img.chart { |
50 | 50 |
<body> |
51 | 51 |
<div id="frame"> |
52 | 52 |
<h2>DIY Radiation Monitor</h2> |
53 |
+<h4>Located in Albany, Oregon</h4> |
|
53 | 54 |
<hr> |
54 | 55 |
<b> |
55 | 56 |
|
... | ... |
@@ -108,64 +109,63 @@ Device: <text id="status"></text><br> |
108 | 109 |
<br> |
109 | 110 |
<script> |
110 | 111 |
|
111 |
- function getRadmon() { |
|
112 |
- $.ajaxSetup({cache:false, url: "dynamic/radmonData.js", |
|
113 |
- success: function(result){ |
|
114 |
- jStr = result.slice(1,-2); |
|
115 |
- dataObj = JSON.parse(jStr); |
|
116 |
- //data = dataObj.radmon; |
|
112 |
+ function getRadmon() { |
|
113 |
+ $.ajaxSetup({ |
|
114 |
+ cache:false, url: "dynamic/radmonData.js", success: |
|
115 |
+ function(result){ |
|
116 |
+ var sData, dataObj; |
|
117 |
+ sData = result.slice(1,-1); |
|
118 |
+ dataObj = JSON.parse(sData); |
|
117 | 119 |
parseRadmon(dataObj); |
118 |
- } |
|
119 |
- }); |
|
120 |
- $.ajax(); |
|
121 |
- } |
|
122 |
- |
|
123 |
- function getGraphs() { |
|
124 |
- document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png"; |
|
125 |
- document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png"; |
|
126 |
- document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png"; |
|
127 |
- document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png"; |
|
128 |
- document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png"; |
|
129 |
- document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png"; |
|
130 |
- } |
|
131 |
- |
|
132 |
- function parseRadmon(dataItem) { |
|
133 |
- var timeStamp |
|
134 |
- var date; |
|
135 |
- var time; |
|
136 |
- var hourminute; |
|
137 |
- |
|
138 |
- timeStamp = dataItem.date; |
|
139 |
- date = timeStamp.split(" ")[0]; |
|
140 |
- time = timeStamp.split(" ")[1]; |
|
141 |
- hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
142 |
- $("#date").text(date); |
|
143 |
- $("#time").text(hourminute + " (PDT)"); |
|
144 |
- |
|
145 |
- $("#cps").text(dataItem.CPS); |
|
146 |
- $("#cpm").text(dataItem.CPM); |
|
147 |
- $("#uSvPerHr").text(dataItem.uSvPerHr); |
|
148 |
- |
|
149 |
- sTmp = (dataItem.Mode).toLowerCase(); |
|
150 |
- $("#mode").text(sTmp); |
|
151 |
- |
|
152 |
- $("#status").text(dataItem.status); |
|
153 |
- if (dataItem.status == "online") { |
|
154 |
- document.getElementById("status").style.color = "green"; |
|
155 |
- } |
|
156 |
- else { |
|
157 |
- document.getElementById("status").style.color = "red"; |
|
158 | 120 |
} |
121 |
+ }); |
|
122 |
+ $.ajax(); |
|
123 |
+ } |
|
124 |
+ |
|
125 |
+ function getGraphs() { |
|
126 |
+ document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png"; |
|
127 |
+ document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png"; |
|
128 |
+ document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png"; |
|
129 |
+ document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png"; |
|
130 |
+ document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png"; |
|
131 |
+ document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png"; |
|
132 |
+ } |
|
133 |
+ |
|
134 |
+ function parseRadmon(dataItem) { |
|
135 |
+ var timeStamp, date, time, hourminute; |
|
136 |
+ |
|
137 |
+ timeStamp = dataItem.date; |
|
138 |
+ date = timeStamp.split(" ")[0]; |
|
139 |
+ time = timeStamp.split(" ")[1]; |
|
140 |
+ hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
141 |
+ $("#date").text(date); |
|
142 |
+ $("#time").text(hourminute + " (PDT)"); |
|
143 |
+ |
|
144 |
+ $("#cps").text(dataItem.CPS); |
|
145 |
+ $("#cpm").text(dataItem.CPM); |
|
146 |
+ $("#uSvPerHr").text(dataItem.uSvPerHr); |
|
147 |
+ $("#mode").text(dataItem.Mode); |
|
148 |
+ |
|
149 |
+ $("#status").text(dataItem.status); |
|
150 |
+ if (dataItem.status == "online") { |
|
151 |
+ document.getElementById("status").style.color = "green"; |
|
152 |
+ } |
|
153 |
+ else { |
|
154 |
+ document.getElementById("status").style.color = "red"; |
|
159 | 155 |
} |
156 |
+ } |
|
160 | 157 |
|
161 |
- $(document).ready(function() { |
|
158 |
+ $(document).ready( |
|
159 |
+ function() { |
|
162 | 160 |
getRadmon(); |
163 | 161 |
getGraphs(); |
164 | 162 |
setInterval(getRadmon, 10000); |
165 | 163 |
setInterval(getGraphs, 60000); |
166 |
- }); |
|
164 |
+ } |
|
165 |
+ ); |
|
166 |
+ |
|
167 |
+</script> |
|
167 | 168 |
|
168 |
- </script> |
|
169 | 169 |
</body> |
170 | 170 |
</html> |
171 | 171 |
|
... | ... |
@@ -1,145 +1,112 @@ |
1 | 1 |
<!DOCTYPE html> |
2 | 2 |
<html> |
3 |
-<!--<META http-equiv="refresh" content="60">--> |
|
4 | 3 |
<head> |
5 |
- <title>DIY Radiation Monitor</title> |
|
6 |
- <script src="jQuery.min.js"></script> |
|
4 |
+<title>DIY Radiation</title> |
|
5 |
+<script src="jQuery.min.js"></script> |
|
6 |
+<style> |
|
7 |
+body { |
|
8 |
+ background-image: url("static/chalk.jpg"); |
|
9 |
+} |
|
10 |
+#frame { |
|
11 |
+ width:800px; |
|
12 |
+ text-align:center; |
|
13 |
+ margin:auto; |
|
14 |
+} |
|
15 |
+#datetime { |
|
16 |
+ text-align:center; |
|
17 |
+ display:inline-block; |
|
18 |
+ margin:1px; |
|
19 |
+ font-size:21px; |
|
20 |
+ color:black; |
|
21 |
+ width:700px; |
|
22 |
+ padding:10px; |
|
23 |
+} |
|
24 |
+div.currentdata { |
|
25 |
+ font-size:20px; |
|
26 |
+ display:inline-block; |
|
27 |
+ margin:1px; |
|
28 |
+ text-align:center; |
|
29 |
+ color:black; |
|
30 |
+ width:342px; |
|
31 |
+ padding:10px; |
|
32 |
+ border-style:solid; |
|
33 |
+ border-width:1px; |
|
34 |
+} |
|
35 |
+div.chartitem { |
|
36 |
+ display:inline-block; |
|
37 |
+ text-align:left; |
|
38 |
+ margin:1px; |
|
39 |
+ width: 730px; |
|
40 |
+ padding:2px; |
|
41 |
+ border-style:solid; |
|
42 |
+ border-width:1px; |
|
43 |
+} |
|
44 |
+img.chart { |
|
45 |
+ width:100%; |
|
46 |
+} |
|
47 |
+</style> |
|
7 | 48 |
</head> |
8 | 49 |
|
9 |
-<body background="./static/chalk.jpg"> |
|
10 |
- |
|
11 |
-<center> |
|
12 |
-<h1>DIY Radiation Monitor</h1> |
|
50 |
+<body> |
|
51 |
+<div id="frame"> |
|
52 |
+<h2>DIY Radiation Monitor</h2> |
|
13 | 53 |
<hr> |
14 |
- |
|
15 |
-<table width="750" border="0" cellpadding="1"> |
|
16 |
- <tr> |
|
17 |
- <td align="center"> |
|
18 |
- <b><font size="5"> |
|
19 |
- <text id="date"></text> <text id="time"></text> |
|
20 |
- </font></b> |
|
21 |
- </td> |
|
22 |
- </tr> |
|
23 |
- |
|
24 |
- <tr> |
|
25 |
- <td> |
|
26 |
- <table width="100%" border="1", cellpadding="10"> |
|
27 |
- <tr> |
|
28 |
- <td width="50%" align="center"> |
|
29 |
- <b><font size="5"> |
|
30 |
- Current Reading |
|
31 |
- </font></b> |
|
32 |
- <br><br> |
|
33 |
- <b><font size="4"> |
|
34 |
- Counts per minute: <text id="cpm"></text><br> |
|
35 |
- Counts per second: <text id="cps"></text><br> |
|
36 |
- uSv per hour: <text id="uSvPerHr"></text> |
|
37 |
- </font></b> |
|
38 |
- </td> |
|
39 |
- <td width="50%" align="center" valign="center"> |
|
40 |
- <b><font size="5"> |
|
41 |
- Device Status |
|
42 |
- </font></b> |
|
43 |
- <br><br> |
|
44 |
- <b><font size="4"> |
|
45 |
- Mode: <text id="mode"></text><br> |
|
46 |
- Status: <text id="status"></text> |
|
47 |
- </font></b> |
|
48 |
- </td> |
|
49 |
- </tr> |
|
50 |
- </table> |
|
51 |
- </td> |
|
52 |
- </tr> |
|
53 |
- |
|
54 |
- <tr> |
|
55 |
- <td> |
|
56 |
- <table width="100%" border="1", cellpadding="10"> |
|
57 |
- <tr> |
|
58 |
- <td align="center"> |
|
59 |
- <img id="1-day-cpm"> |
|
60 |
- </td> |
|
61 |
- </tr> |
|
62 |
- </table> |
|
63 |
- </td> |
|
64 |
- </tr> |
|
65 |
- |
|
66 |
- <tr> |
|
67 |
- <td> |
|
68 |
- <table width="100%" border="1", cellpadding="10"> |
|
69 |
- <tr> |
|
70 |
- <td align="center"> |
|
71 |
- <img id="1-day-uSv"> |
|
72 |
- </td> |
|
73 |
- </tr> |
|
74 |
- </table> |
|
75 |
- </td> |
|
76 |
- </tr> |
|
77 |
- |
|
78 |
- <tr> |
|
79 |
- <td> |
|
80 |
- <table width="100%" border="1", cellpadding="10"> |
|
81 |
- <tr> |
|
82 |
- <td align="center"> |
|
83 |
- <img id="4-week-cpm"> |
|
84 |
- </td> |
|
85 |
- </tr> |
|
86 |
- </table> |
|
87 |
- </td> |
|
88 |
- </tr> |
|
89 |
- |
|
90 |
- <tr> |
|
91 |
- <td> |
|
92 |
- <table width="100%" border="1", cellpadding="10"> |
|
93 |
- <tr> |
|
94 |
- <td align="center"> |
|
95 |
- <img id="4-week-uSv"> |
|
96 |
- </td> |
|
97 |
- </tr> |
|
98 |
- </table> |
|
99 |
- </td> |
|
100 |
- </tr> |
|
101 |
- |
|
102 |
- <tr> |
|
103 |
- <td> |
|
104 |
- <table width="100%" border="1", cellpadding="10"> |
|
105 |
- <tr> |
|
106 |
- <td align="center"> |
|
107 |
- <img id="1-year-cpm"> |
|
108 |
- </td> |
|
109 |
- </tr> |
|
110 |
- </table> |
|
111 |
- </td> |
|
112 |
- </tr> |
|
113 |
- |
|
114 |
- <tr> |
|
115 |
- <td> |
|
116 |
- <table width="100%" border="1", cellpadding="10"> |
|
117 |
- <tr> |
|
118 |
- <td align="center"> |
|
119 |
- <img id="1-year-uSv"> |
|
120 |
- </td> |
|
121 |
- </tr> |
|
122 |
- </table> |
|
123 |
- </td> |
|
124 |
- </tr> |
|
125 |
- |
|
126 |
- <tr> |
|
127 |
- <td> |
|
128 |
- <table width="100%" border="1", cellpadding="10"> |
|
129 |
- <tr> |
|
130 |
- <td> |
|
131 |
- <b>NOTES:</b> |
|
132 |
- <li>For more information visit <a href="http://www.eugenemakerspace.com" target="_new"><i>www.eugenemakerspace.com</i></a> |
|
133 |
- <li>Project plans and notes available at <a href="http://github.com/fractalxaos/Radmon" target="_new"><i>GitHub.com</i></a> |
|
134 |
- </td> |
|
135 |
- </tr> |
|
136 |
- </table> |
|
137 |
- </td> |
|
138 |
- </tr> |
|
139 |
-</table> |
|
140 |
-</center> |
|
141 |
- |
|
142 |
- <script> |
|
54 |
+<b> |
|
55 |
+ |
|
56 |
+<div id="datetime"> |
|
57 |
+<text id="date"></text> |
|
58 |
+ |
|
59 |
+<text id="time"></text> |
|
60 |
+</div> |
|
61 |
+ |
|
62 |
+<div class="currentdata"> |
|
63 |
+<ins>Current Reading</ins><br><br> |
|
64 |
+Counts per minute: <text id="cpm"></text><br> |
|
65 |
+Counts per second: <text id="cps"></text><br> |
|
66 |
+uSv per hour: <text id="uSvPerHr"></text> |
|
67 |
+</div> |
|
68 |
+ |
|
69 |
+<div class="currentdata"> |
|
70 |
+<ins>Status</ins><br><br> |
|
71 |
+Mode: <text id="mode"></text><br> |
|
72 |
+Device: <text id="status"></text><br> |
|
73 |
+ |
|
74 |
+</div> |
|
75 |
+ |
|
76 |
+<div class="chartitem"> |
|
77 |
+<img class="chart" id="1-day-cpm"> |
|
78 |
+</div> |
|
79 |
+ |
|
80 |
+<div class="chartitem"> |
|
81 |
+<img class="chart" id="1-day-uSv"> |
|
82 |
+</div> |
|
83 |
+ |
|
84 |
+<div class="chartitem"> |
|
85 |
+<img class="chart" id="4-week-cpm"> |
|
86 |
+</div> |
|
87 |
+ |
|
88 |
+<div class="chartitem"> |
|
89 |
+<img class="chart" id="4-week-uSv"> |
|
90 |
+</div> |
|
91 |
+ |
|
92 |
+<div class="chartitem"> |
|
93 |
+<img class="chart" id="1-year-cpm"> |
|
94 |
+</div> |
|
95 |
+ |
|
96 |
+<div class="chartitem"> |
|
97 |
+<img class="chart" id="1-year-uSv"> |
|
98 |
+</div> |
|
99 |
+ |
|
100 |
+<div class="chartitem"> |
|
101 |
+<b>NOTES:</b> |
|
102 |
+<ul> |
|
103 |
+<li>For more information visit <a href="http://www.eugenemakerspace.com" target="_new"><i>www.eugenemakerspace.com</i></a> |
|
104 |
+<li>Project plans and notes available at <a href="http://github.com/fractalxaos/Radmon" target="_new"><i>GitHub.com</i></a> |
|
105 |
+</ul> |
|
106 |
+</div> |
|
107 |
+</div> |
|
108 |
+<br> |
|
109 |
+<script> |
|
143 | 110 |
|
144 | 111 |
function getRadmon() { |
145 | 112 |
$.ajaxSetup({cache:false, url: "dynamic/radmonData.js", |
... | ... |
@@ -169,16 +136,11 @@ |
169 | 136 |
var hourminute; |
170 | 137 |
|
171 | 138 |
timeStamp = dataItem.date; |
172 |
- if (timeStamp != "") { |
|
173 |
- date = timeStamp.split(" ")[0]; |
|
174 |
- time = timeStamp.split(" ")[1]; |
|
175 |
- hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
176 |
- $("#date").text(date); |
|
177 |
- $("#time").text(hourminute + " (PDT)"); |
|
178 |
- } else { |
|
179 |
- $("#date").text(""); |
|
180 |
- $("#time").text(""); |
|
181 |
- } |
|
139 |
+ date = timeStamp.split(" ")[0]; |
|
140 |
+ time = timeStamp.split(" ")[1]; |
|
141 |
+ hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
142 |
+ $("#date").text(date); |
|
143 |
+ $("#time").text(hourminute + " (PDT)"); |
|
182 | 144 |
|
183 | 145 |
$("#cps").text(dataItem.CPS); |
184 | 146 |
$("#cpm").text(dataItem.CPM); |
... | ... |
@@ -166,18 +166,19 @@ |
166 | 166 |
var timeStamp |
167 | 167 |
var date; |
168 | 168 |
var time; |
169 |
- var sTmp; |
|
169 |
+ var hourminute; |
|
170 | 170 |
|
171 |
- timeStamp = dataItem.time; |
|
172 |
- if (timeStamp != "") { |
|
171 |
+ timeStamp = dataItem.date; |
|
172 |
+ if (timeStamp != "") { |
|
173 | 173 |
date = timeStamp.split(" ")[0]; |
174 | 174 |
time = timeStamp.split(" ")[1]; |
175 |
+ hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
175 | 176 |
$("#date").text(date); |
176 |
- $("#time").text(time); |
|
177 |
+ $("#time").text(hourminute + " (PDT)"); |
|
177 | 178 |
} else { |
178 | 179 |
$("#date").text(""); |
179 | 180 |
$("#time").text(""); |
180 |
- } |
|
181 |
+ } |
|
181 | 182 |
|
182 | 183 |
$("#cps").text(dataItem.CPS); |
183 | 184 |
$("#cpm").text(dataItem.CPM); |
... | ... |
@@ -198,7 +199,7 @@ |
198 | 199 |
$(document).ready(function() { |
199 | 200 |
getRadmon(); |
200 | 201 |
getGraphs(); |
201 |
- setInterval(getRadmon, 1000); |
|
202 |
+ setInterval(getRadmon, 10000); |
|
202 | 203 |
setInterval(getGraphs, 60000); |
203 | 204 |
}); |
204 | 205 |
|
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,208 @@ |
1 |
+<!DOCTYPE html> |
|
2 |
+<html> |
|
3 |
+<!--<META http-equiv="refresh" content="60">--> |
|
4 |
+<head> |
|
5 |
+ <title>DIY Radiation Monitor</title> |
|
6 |
+ <script src="jQuery.min.js"></script> |
|
7 |
+</head> |
|
8 |
+ |
|
9 |
+<body background="./static/chalk.jpg"> |
|
10 |
+ |
|
11 |
+<center> |
|
12 |
+<h1>DIY Radiation Monitor</h1> |
|
13 |
+<hr> |
|
14 |
+ |
|
15 |
+<table width="750" border="0" cellpadding="1"> |
|
16 |
+ <tr> |
|
17 |
+ <td align="center"> |
|
18 |
+ <b><font size="5"> |
|
19 |
+ <text id="date"></text> <text id="time"></text> |
|
20 |
+ </font></b> |
|
21 |
+ </td> |
|
22 |
+ </tr> |
|
23 |
+ |
|
24 |
+ <tr> |
|
25 |
+ <td> |
|
26 |
+ <table width="100%" border="1", cellpadding="10"> |
|
27 |
+ <tr> |
|
28 |
+ <td width="50%" align="center"> |
|
29 |
+ <b><font size="5"> |
|
30 |
+ Current Reading |
|
31 |
+ </font></b> |
|
32 |
+ <br><br> |
|
33 |
+ <b><font size="4"> |
|
34 |
+ Counts per minute: <text id="cpm"></text><br> |
|
35 |
+ Counts per second: <text id="cps"></text><br> |
|
36 |
+ uSv per hour: <text id="uSvPerHr"></text> |
|
37 |
+ </font></b> |
|
38 |
+ </td> |
|
39 |
+ <td width="50%" align="center" valign="center"> |
|
40 |
+ <b><font size="5"> |
|
41 |
+ Device Status |
|
42 |
+ </font></b> |
|
43 |
+ <br><br> |
|
44 |
+ <b><font size="4"> |
|
45 |
+ Mode: <text id="mode"></text><br> |
|
46 |
+ Status: <text id="status"></text> |
|
47 |
+ </font></b> |
|
48 |
+ </td> |
|
49 |
+ </tr> |
|
50 |
+ </table> |
|
51 |
+ </td> |
|
52 |
+ </tr> |
|
53 |
+ |
|
54 |
+ <tr> |
|
55 |
+ <td> |
|
56 |
+ <table width="100%" border="1", cellpadding="10"> |
|
57 |
+ <tr> |
|
58 |
+ <td align="center"> |
|
59 |
+ <img id="1-day-cpm"> |
|
60 |
+ </td> |
|
61 |
+ </tr> |
|
62 |
+ </table> |
|
63 |
+ </td> |
|
64 |
+ </tr> |
|
65 |
+ |
|
66 |
+ <tr> |
|
67 |
+ <td> |
|
68 |
+ <table width="100%" border="1", cellpadding="10"> |
|
69 |
+ <tr> |
|
70 |
+ <td align="center"> |
|
71 |
+ <img id="1-day-uSv"> |
|
72 |
+ </td> |
|
73 |
+ </tr> |
|
74 |
+ </table> |
|
75 |
+ </td> |
|
76 |
+ </tr> |
|
77 |
+ |
|
78 |
+ <tr> |
|
79 |
+ <td> |
|
80 |
+ <table width="100%" border="1", cellpadding="10"> |
|
81 |
+ <tr> |
|
82 |
+ <td align="center"> |
|
83 |
+ <img id="4-week-cpm"> |
|
84 |
+ </td> |
|
85 |
+ </tr> |
|
86 |
+ </table> |
|
87 |
+ </td> |
|
88 |
+ </tr> |
|
89 |
+ |
|
90 |
+ <tr> |
|
91 |
+ <td> |
|
92 |
+ <table width="100%" border="1", cellpadding="10"> |
|
93 |
+ <tr> |
|
94 |
+ <td align="center"> |
|
95 |
+ <img id="4-week-uSv"> |
|
96 |
+ </td> |
|
97 |
+ </tr> |
|
98 |
+ </table> |
|
99 |
+ </td> |
|
100 |
+ </tr> |
|
101 |
+ |
|
102 |
+ <tr> |
|
103 |
+ <td> |
|
104 |
+ <table width="100%" border="1", cellpadding="10"> |
|
105 |
+ <tr> |
|
106 |
+ <td align="center"> |
|
107 |
+ <img id="1-year-cpm"> |
|
108 |
+ </td> |
|
109 |
+ </tr> |
|
110 |
+ </table> |
|
111 |
+ </td> |
|
112 |
+ </tr> |
|
113 |
+ |
|
114 |
+ <tr> |
|
115 |
+ <td> |
|
116 |
+ <table width="100%" border="1", cellpadding="10"> |
|
117 |
+ <tr> |
|
118 |
+ <td align="center"> |
|
119 |
+ <img id="1-year-uSv"> |
|
120 |
+ </td> |
|
121 |
+ </tr> |
|
122 |
+ </table> |
|
123 |
+ </td> |
|
124 |
+ </tr> |
|
125 |
+ |
|
126 |
+ <tr> |
|
127 |
+ <td> |
|
128 |
+ <table width="100%" border="1", cellpadding="10"> |
|
129 |
+ <tr> |
|
130 |
+ <td> |
|
131 |
+ <b>NOTES:</b> |
|
132 |
+ <li>For more information visit <a href="http://www.eugenemakerspace.com" target="_new"><i>www.eugenemakerspace.com</i></a> |
|
133 |
+ <li>Project plans and notes available at <a href="http://github.com/fractalxaos/Radmon" target="_new"><i>GitHub.com</i></a> |
|
134 |
+ </td> |
|
135 |
+ </tr> |
|
136 |
+ </table> |
|
137 |
+ </td> |
|
138 |
+ </tr> |
|
139 |
+</table> |
|
140 |
+</center> |
|
141 |
+ |
|
142 |
+ <script> |
|
143 |
+ |
|
144 |
+ function getRadmon() { |
|
145 |
+ $.ajaxSetup({cache:false, url: "dynamic/radmonData.js", |
|
146 |
+ success: function(result){ |
|
147 |
+ jStr = result.slice(1,-2); |
|
148 |
+ dataObj = JSON.parse(jStr); |
|
149 |
+ //data = dataObj.radmon; |
|
150 |
+ parseRadmon(dataObj); |
|
151 |
+ } |
|
152 |
+ }); |
|
153 |
+ $.ajax(); |
|
154 |
+ } |
|
155 |
+ |
|
156 |
+ function getGraphs() { |
|
157 |
+ document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png"; |
|
158 |
+ document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png"; |
|
159 |
+ document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png"; |
|
160 |
+ document.getElementById("4-week-uSv").src = "dynamic/radGraph4.png"; |
|
161 |
+ document.getElementById("1-year-cpm").src = "dynamic/radGraph5.png"; |
|
162 |
+ document.getElementById("1-year-uSv").src = "dynamic/radGraph6.png"; |
|
163 |
+ } |
|
164 |
+ |
|
165 |
+ function parseRadmon(dataItem) { |
|
166 |
+ var timeStamp |
|
167 |
+ var date; |
|
168 |
+ var time; |
|
169 |
+ var sTmp; |
|
170 |
+ |
|
171 |
+ timeStamp = dataItem.time; |
|
172 |
+ if (timeStamp != "") { |
|
173 |
+ date = timeStamp.split(" ")[0]; |
|
174 |
+ time = timeStamp.split(" ")[1]; |
|
175 |
+ $("#date").text(date); |
|
176 |
+ $("#time").text(time); |
|
177 |
+ } else { |
|
178 |
+ $("#date").text(""); |
|
179 |
+ $("#time").text(""); |
|
180 |
+ } |
|
181 |
+ |
|
182 |
+ $("#cps").text(dataItem.CPS); |
|
183 |
+ $("#cpm").text(dataItem.CPM); |
|
184 |
+ $("#uSvPerHr").text(dataItem.uSvPerHr); |
|
185 |
+ |
|
186 |
+ sTmp = (dataItem.Mode).toLowerCase(); |
|
187 |
+ $("#mode").text(sTmp); |
|
188 |
+ |
|
189 |
+ $("#status").text(dataItem.status); |
|
190 |
+ if (dataItem.status == "online") { |
|
191 |
+ document.getElementById("status").style.color = "green"; |
|
192 |
+ } |
|
193 |
+ else { |
|
194 |
+ document.getElementById("status").style.color = "red"; |
|
195 |
+ } |
|
196 |
+ } |
|
197 |
+ |
|
198 |
+ $(document).ready(function() { |
|
199 |
+ getRadmon(); |
|
200 |
+ getGraphs(); |
|
201 |
+ setInterval(getRadmon, 1000); |
|
202 |
+ setInterval(getGraphs, 60000); |
|
203 |
+ }); |
|
204 |
+ |
|
205 |
+ </script> |
|
206 |
+</body> |
|
207 |
+</html> |
|
208 |
+ |