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