Browse code

minor revision

Gandolf authored on 07/06/2021 21:30:56
Showing 1 changed files
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
 &nbsp;&nbsp;
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>
Browse code

minor revisions

Gandolf authored on 10/04/2020 05:03:10
Showing 1 changed files
... ...
@@ -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
 }
Browse code

revisions 11-15-2018

fractalxaos authored on 11/16/2018 07:25:46
Showing 1 changed files
... ...
@@ -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 = "&nbsp";    
278 282
     status_e.innerHTML = "offline";    
279 283
     status_e.style.color = "red";
280 284
 }
Browse code

sync 2018-07-27

fractalxaos authored on 07/27/2018 19:27:41
Showing 1 changed files
... ...
@@ -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
 
Browse code

minor revisions 20180303

fractalxaos authored on 03/04/2018 01:14:48
Showing 1 changed files
... ...
@@ -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>
Browse code

minor revisions 20180219

fractalxaos authored on 02/19/2018 20:08:25
Showing 1 changed files
... ...
@@ -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) {
Browse code

2017-12-2 minor update

fractalxaos authored on 12/02/2017 23:59:08
Showing 1 changed files
... ...
@@ -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;    
Browse code

revised 2016-12-23

fractalxaos authored on 12/23/2016 18:34:36
Showing 1 changed files
... ...
@@ -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
 }
Browse code

revisions

Jeff Owrey authored on 02/15/2016 21:18:36
Showing 1 changed files
... ...
@@ -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
 
Browse code

revisions

Jeff Owrey authored on 02/15/2016 01:01:24
Showing 1 changed files
... ...
@@ -179,7 +179,7 @@ function getRadmonData() {
179 179
 function show_charts(n) {
180 180
     graphPeriod = n;
181 181
     getRadmonGraphs();   
182
-    setInterval(getRadmonGraphs, 60000);
182
+    setInterval(getRadmonGraphs, 300000);
183 183
 }
184 184
 
185 185
 function getRadmonGraphs() {
Browse code

revisions

Jeff Owrey authored on 02/07/2016 04:35:37
Showing 1 changed files
... ...
@@ -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) {
Browse code

bugfix 20160204

Jeff Owrey authored on 02/04/2016 22:49:40
Showing 1 changed files
... ...
@@ -155,7 +155,7 @@ function getRadmonData() {
155 155
             displayData(dataArray[0]);
156 156
         }
157 157
     };
158
-    httpRequest.open("GET", radmonDataUrl, true);
158
+    httpRequest.open("POST", radmonDataUrl, true);
159 159
     httpRequest.send();
160 160
 }
161 161
 
Browse code

revisions 20160203

Jeff Owrey authored on 02/03/2016 20:12:17
Showing 1 changed files
... ...
@@ -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
 
Browse code

revisions 20160128

Jeff Owrey authored on 01/28/2016 20:16:27
Showing 1 changed files
... ...
@@ -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%;
Browse code

revisions 20160128

Jeff Owrey authored on 01/28/2016 20:11:16
Showing 1 changed files
... ...
@@ -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
 &nbsp;&nbsp;
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
-&nbsp;     
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
 
Browse code

revisions 20151230

Jeff Owrey authored on 12/30/2015 20:46:44
Showing 1 changed files
... ...
@@ -117,7 +117,7 @@ Device: <text id="status"></text><br>
117 117
           sData = result.slice(1,-1);
118 118
           dataObj = JSON.parse(sData);
119 119
           parseRadmon(dataObj);
120
-      }
120
+        }
121 121
     });
122 122
     $.ajax();
123 123
   }
Browse code

revisions 20151230

Jeff Owrey authored on 12/30/2015 20:43:27
Showing 1 changed files
... ...
@@ -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
 
Browse code

revision 20151227

Jeff Owrey authored on 12/28/2015 05:14:28
Showing 1 changed files
... ...
@@ -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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
+&nbsp;&nbsp;
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
+&nbsp;     
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);
Browse code

bug fix 20151227

Jeff Owrey authored on 12/28/2015 02:58:35
Showing 1 changed files
... ...
@@ -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
 
Browse code

first release

Jeff Owrey authored on 09/25/2015 03:44:17
Showing 1 changed files
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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
+