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>