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>