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