2041d70b022f2a21e8022f4fb4540d0eb4e8346e
[pulsecounter.git] / web / index.html
1 <?xml version="1.0" encoding="utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <script>
7   var dbg;
8   var xmlhttp;
9   var canvas, ctx;
10   var ww, wh;
11   var hmax, hfact;
12   var tmin, tmax, tfact;
13   var xzero = 20, yzero = 20;
14   var cold_d = [], hot_d = [];
15
16   function getcomb(lo, hi) {
17     var comb = [], lb = [];
18     var d = hi - lo;
19     var ord = Math.pow(10, Math.floor(Math.log10(d)));
20     var scl = Math.floor(d / ord);
21     var inc, inc2, first, x, lb;
22
23     if (scl < 2) { inc = 0.1; inc2 = 0.5; }
24     else if (scl < 5) { inc = 0.2; inc2 = 1; }
25     else { inc = 0.5; inc2 = 2; }
26     inc *= ord;
27     inc2 *= ord;
28     first = (Math.floor(lo / inc) + 1) * inc;
29     for (x = 0; x < (d / inc) - 1.5; x++)
30       comb.push(first + inc * x);
31     first = (Math.floor(lo / inc2) + 1) * inc2;
32     for (x = 0; x < (d / inc2) - 1.5; x++)
33       lb.push(first + inc2 * x);
34     //dbg.innerHTML = "ord=" + ord + "<br>inc=" + inc + "<br>"
35     //              + comb + "<br>" + lb;
36     return [comb, lb];
37   }
38
39   function px(x) {
40     return xzero + ((x - tmin) * tfact);
41   }
42
43   function py(y) {
44     return wh - yzero - (y * hfact);
45   }
46
47   function xaxis() {
48     ctx.beginPath();
49     ctx.moveTo(px(tmin), py(0));
50     ctx.lineTo(px(tmax), py(0));
51     ctx.strokeStyle = "black";
52     ctx.stroke();
53   }
54
55   function yaxis() {
56     var comb = getcomb(0, hmax);
57     var i;
58
59     ctx.beginPath();
60     for (i = 0; comb[0][i]; i++) {
61       ctx.moveTo(px(tmin) - 5, py(comb[0][i]));
62       ctx.lineTo(px(tmax), py(comb[0][i]));
63     }
64     ctx.strokeStyle = "lightgray";
65     ctx.stroke();
66
67     ctx.beginPath();
68     ctx.moveTo(px(tmin), py(0));
69     ctx.lineTo(px(tmin), py(hmax));
70     ctx.strokeStyle = "black";
71     ctx.stroke();
72
73     ctx.fillStyle = "black";
74     ctx.font = "bold 8px Courier";
75     ctx.fillText(0, px(tmin) - 8, py(0));
76     for (i = 0; comb[1][i]; i++) {
77       ctx.fillText(comb[1][i], px(tmin) - xzero + 2, py(comb[1][i]));
78     }
79     ctx.fillText("l/h", px(tmin) + 2, py(hmax) + 8);
80   }
81
82   /* @ updates global var `hmax` */
83   function differentiate(times) {
84     var res = [];
85     var dv, dt, v;
86
87     for (i = 0; i < times.length - 1; i++) {
88       dv = times[i+1][1] - times[i][1];
89       dt = times[i+1][0] - times[i][0];
90       if (dt != 0 && dv != 0) {
91         v = (dv / dt) * 360 ; /* Litres per hour */
92         if (hmax < v) hmax = v;
93         res.push([times[i][0], v]);
94       }
95     }
96     res.push([times[i][0], v]);
97
98     return res;
99   }
100
101   function drawplot(data, color) {
102     var i;
103
104     ctx.beginPath();
105     ctx.moveTo(px(data[0][0]), py(data[0][1]));
106     for (i = 1; i < data.length; i++) {
107       ctx.lineTo(px(data[i][0]), py(data[i - 1][1]));
108       ctx.lineTo(px(data[i][0]), py(data[i][1]));
109     }
110     ctx.strokeStyle = color;
111     ctx.stroke();
112   }
113
114   function showloading() {
115     ctx.fillStyle = "green";
116     ctx.font = "bold 16px Courier";
117     ctx.fillText("loading", (ww / 2) - 40 , (wh / 2) + 8);
118   }
119
120   function clearplot() {
121     ctx.clearRect(0, 0, ww, wh);
122   }
123
124   function redraw() {
125     if (cold_d.length && hot_d.length) {
126       tfact = (ww - xzero) / (tmax - tmin);
127       hfact = (wh - yzero) / hmax;
128       clearplot();
129       xaxis();
130       yaxis();
131       drawplot(cold_d, "blue");
132       drawplot(hot_d, "red");
133     } else {
134       showloading();
135     }
136   }
137
138   function gotdata(data) {
139     document.getElementById("cold").innerHTML =
140       (data.current.cold / 100).toFixed(2);
141     document.getElementById("hot").innerHTML =
142       (data.current.hot / 100).toFixed(2);
143     tmin = data.range.lo;
144     tmax = data.range.hi;
145     /* differetiate() updates hmax */
146     hmax = 0;
147     cold_d = differentiate(data.cold);
148     hot_d = differentiate(data.hot);
149     //dbg.innerHTML = "hmax=" + hmax + " hfact=" + hfact + "<br>"
150     //              + cold_d + "<br>" + hot_d;
151     redraw();
152   }
153
154   function iso2qu(idate) {
155     return idate.replace("T", "+").replace("0Z", "");
156   }
157
158   function sendquery(lo, hi) {
159     var url = "query.cgi" + "?lo=" + iso2qu(lo) + "&" + iso2qu(hi);
160
161     //dbg.innerHTML = url;
162     xmlhttp.onreadystatechange = function() {
163       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
164         // dbg.innerHTML = xmlhttp.responseText;
165         var myData = JSON.parse(xmlhttp.responseText);
166         gotdata(myData);
167       }
168     }
169     xmlhttp.open("GET", url, true);
170     xmlhttp.send();
171   }
172
173   function resize() {
174     ww = window.innerWidth - 4;
175     if (ww > window.innerHeight) ww = window.innerHeight;
176     wh = ww / 2;
177     canvas.width = ww;
178     canvas.height = wh;
179     canvas.style.width = ww + "px";
180     canvas.style.height = wh + "px";
181     redraw();
182   }
183
184   function initialize() {
185     var tdy = new Date();
186     var tmr;
187
188     tdy.setMilliseconds(0);
189     tdy.setSeconds(0);
190     tdy.setMinutes(0);
191     tdy.setHours(0);
192     tmr = new Date(1*tdy + 86400000);
193     dbg = document.getElementById("debug");
194     canvas = document.getElementById("plot");
195     ctx = canvas.getContext("2d");
196     resize();
197     
198     xmlhttp = new XMLHttpRequest();
199     sendquery(tdy.toISOString(), tmr.toISOString());
200   }
201
202   /* Set up */
203   if(window.attachEvent) {
204     window.attachEvent('onload', initialize);
205     window.attachEvent('onresize', resize);
206   } else {
207     window.onload = initialize;
208     window.onresize = resize;
209   }
210 </script>
211 <style>
212 h1 {
213   text-align: center;
214 }
215 br {
216   clear: both;
217 }
218 div#currentvals {
219   width: 18em;
220   margin-left: auto;
221   margin-right: auto;
222   margin-bottom: 10px;
223   text-align: center;
224   font-size: 150%;
225 }
226 div.current {
227   position: relative;
228   padding: 0.2em;
229   border: solid 1px black;
230   margin: 0.2em;
231 }
232 div#cold {
233   float: left;
234   background-color: #d0e0ff;
235 }
236 div#hot {
237   float: right;
238   background-color: #ffd0e0;
239 }
240 canvas#plot {
241   padding: 0px;
242   margin: auto;
243   display: block;
244   width: 640px;
245   height: 320px;
246   border: solid 1px black;
247 }
248 body {
249   margin: 0px;
250 }
251 </style>
252 <title>Water Meters</title>
253 </head><body>
254 <h1>Water Meters</h1>
255 <div id="currentvals">
256   Current Values
257   <div class="current" id="cold">cold</div>
258   <div class="current" id="hot">hot</div>
259 </div>
260 <br />
261 <canvas id="plot" width="640" height = "320"></canvas>
262 <br />
263 <div id=debug>
264 </div>
265 </body>