wip on html 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.offsetWidth;
39     wh = canvas.offsetHeight;
40     tmin = data.range.lo;
41     tmax = data.range.hi;
42     document.getElementById("cold").innerHTML = data.current.cold;
43     document.getElementById("hot").innerHTML = data.current.hot;
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: all;
54 }
55 div#currentvals {
56   width: 16em;
57   margin-left: auto;
58   margin-right: auto;
59   text-align: center;
60   font-size: 150%;
61 }
62 div.current {
63   position: relative;
64   padding: 0.2em;
65   border: solid 1px black;
66   margin: 1em;
67 }
68 div#cold {
69   float: left;
70   background-color: #d0e0ff;
71 }
72 div#hot {
73   float: right;
74   background-color: #ffd0e0;
75 }
76 canvas#plot {
77   margin-left: auto;
78   margin-right: auto;
79   border: solid 1px black;
80 }
81 </style>
82 <title>Water Meters</title>
83 </head><body>
84 <h1>Water Meters</h1>
85 <div id="currentvals">
86   Current Values
87   <div class="current" id="cold">cold</div>
88   <div class="current" id="hot">hot</div>
89 </div>
90 <br />
91 <canvas id="plot" width="640" height = "480"></canvas>
92 <br />
93 <div id=debug>
94 </div>
95 <script>
96   var xmlhttp = new XMLHttpRequest();
97   var url = "query.cgi";
98
99   xmlhttp.onreadystatechange = function() {
100     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
101       document.getElementById("debug").innerHTML = xmlhttp.responseText;
102       var myData = JSON.parse(xmlhttp.responseText);
103       gotdata(myData);
104     }
105   }
106   xmlhttp.open("GET", url, true);
107   xmlhttp.send();
108 </script>
109 </body>