cecf347414e2c7dacf52b5b1c92a33fdf3797369
[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 canvas;
8   var ctx;
9   var ww;
10   var wh;
11   var hmax = 0;
12   var hfact;
13   var tmin;
14   var tmax;
15   var tfact;
16   var xzero = 20;
17   var yzero = 20;
18   function px(x) {
19     return xzero + ((x - tmin) * tfact);
20   }
21   function py(y) {
22     return wh - yzero - (y * hfact);
23   }
24   function xaxis() {
25     ctx.beginPath();
26     ctx.moveTo(px(tmin), py(0));
27     ctx.lineTo(px(tmax), py(0));
28     ctx.strokeStyle = "black";
29     ctx.stroke();
30   }
31   function yaxis() {
32     ctx.beginPath();
33     ctx.moveTo(px(tmin), py(0));
34     ctx.lineTo(px(tmin), py(hmax));
35     ctx.strokeStyle = "black";
36     ctx.stroke();
37   }
38   function differentiate(times) { /* updates glbal hmax */
39     var res = [];
40     var dv, dt, v;
41
42     for (i = 0; i < times.length - 1; i++) {
43       dv = times[i+1][1] - times[i][1];
44       dt = times[i+1][0] - times[i][0];
45       if (dt != 0 && dv != 0) {
46         v = dv / dt;
47         if (hmax < v) hmax = v;
48         res.push([times[i][0], v]);
49       }
50     }
51     res.push([times[i][0], v]);
52
53     return res;
54   }
55   function drawplot(data, color) {
56     var i;
57
58     ctx.beginPath();
59     ctx.moveTo(px(data[0][0]), py(data[0][1]));
60     for (i = 1; i < data.length; i++) {
61       ctx.lineTo(px(data[i][0]), py(data[i - 1][1]));
62       ctx.lineTo(px(data[i][0]), py(data[i][1]));
63     }
64     ctx.strokeStyle = color;
65     ctx.stroke();
66   }
67   function gotdata(data) {
68     var cold_d = [], hot_d = [];
69
70     document.getElementById("cold").innerHTML =
71       (data.current.cold / 100).toFixed(2);
72     document.getElementById("hot").innerHTML =
73       (data.current.hot / 100).toFixed(2);
74     canvas = document.getElementById("plot");
75
76     ctx = canvas.getContext("2d");
77     ww = canvas.width;
78     wh = canvas.height;
79
80     tmin = data.range.lo;
81     tmax = data.range.hi;
82     tfact = (ww - xzero) / (tmax - tmin);
83     cold_d = differentiate(data.cold);
84     hot_d = differentiate(data.hot);
85     /* differetiate() updates hmax */
86     hfact = (wh - yzero) / hmax;
87
88     document.getElementById("debug").innerHTML.append("<br>" ++ cold_d + "<br>" + hot_d);
89
90     drawplot(cold_d, "blue");
91     drawplot(hot_d, "red");
92     xaxis();
93     yaxis();
94   }
95 </script>
96 <style>
97 h1 {
98   text-align: center;
99 }
100 br {
101   clear: both;
102 }
103 div#currentvals {
104   width: 14em;
105   margin-left: auto;
106   margin-right: auto;
107   margin-bottom: 10px;
108   text-align: center;
109   font-size: 150%;
110 }
111 div.current {
112   position: relative;
113   padding: 0.2em;
114   border: solid 1px black;
115   margin: 0.2em;
116 }
117 div#cold {
118   float: left;
119   background-color: #d0e0ff;
120 }
121 div#hot {
122   float: right;
123   background-color: #ffd0e0;
124 }
125 canvas#plot {
126   padding-left: 0;
127   padding-right: 0;
128   margin-left: auto;
129   margin-right: auto;
130   display: block;
131   width: 640px;
132   height: 320px;
133   border: solid 1px black;
134 }
135 </style>
136 <title>Water Meters</title>
137 </head><body>
138 <h1>Water Meters</h1>
139 <div id="currentvals">
140   Current Values
141   <div class="current" id="cold">cold</div>
142   <div class="current" id="hot">hot</div>
143 </div>
144 <br />
145 <canvas id="plot" width="640" height = "320"></canvas>
146 <br />
147 <div id=debug>
148 </div>
149 <script>
150   var xmlhttp = new XMLHttpRequest();
151   var url = "query.cgi";
152   var qstr = "?lo=2015-12-19+00:00:00&hi=2015-12-20+00:00:00";
153
154   xmlhttp.onreadystatechange = function() {
155     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
156       document.getElementById("debug").innerHTML = xmlhttp.responseText;
157       var myData = JSON.parse(xmlhttp.responseText);
158       gotdata(myData);
159     }
160   }
161   xmlhttp.open("GET", url+qstr, true);
162   xmlhttp.send();
163 </script>
164 </body>