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>