X-Git-Url: http://www.average.org/gitweb/?p=pulsecounter.git;a=blobdiff_plain;f=web%2Findex.html;h=e08a07a9f0211d995eb08d711d39c4e21367c280;hp=b29c00f6d7bbcc52c8906a2977a668b6e09dc619;hb=f221f12f7259cd64fdf09494ed61926322448ae8;hpb=1cae8620aaf2c15a0a8badd8e1cd6df082b15e3c

diff --git a/web/index.html b/web/index.html
index b29c00f..e08a07a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,45 +4,136 @@
 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script>
-  var canvas;
-  var context;
-  var ww;
-  var wh;
-  var tmin;
-  var tmax;
-  function drawplot(times, color) {
-    var tfact = ww / (tmax - tmin);
+  var dbg;
+  var xmlhttp;
+  var canvas, ctx;
+  var ww, wh;
+  var hmax, hfact;
+  var tmin, tmax, tfact;
+  var xzero = 20, yzero = 20;
+  var cold_d = [], hot_d = [];
+
+  function px(x) {
+    return xzero + ((x - tmin) * tfact);
+  }
+  function py(y) {
+    return wh - yzero - (y * hfact);
+  }
+  function xaxis() {
+    ctx.beginPath();
+    ctx.moveTo(px(tmin), py(0));
+    ctx.lineTo(px(tmax), py(0));
+    ctx.strokeStyle = "black";
+    ctx.stroke();
+  }
+  function yaxis() {
+    ctx.beginPath();
+    ctx.moveTo(px(tmin), py(0));
+    ctx.lineTo(px(tmin), py(hmax));
+    ctx.strokeStyle = "black";
+    ctx.stroke();
+  }
+  /* @ updates global var `hmax` */
+  function differentiate(times) {
+    var res = [];
+    var dv, dt, v;
+
+    for (i = 0; i < times.length - 1; i++) {
+      dv = times[i+1][1] - times[i][1];
+      dt = times[i+1][0] - times[i][0];
+      if (dt != 0 && dv != 0) {
+        v = dv / dt;
+        if (hmax < v) hmax = v;
+        res.push([times[i][0], v]);
+      }
+    }
+    res.push([times[i][0], v]);
+
+    return res;
+  }
+  function drawplot(data, color) {
     var i;
-    var height = [];
-    var hmax = 0;
-    var hfact;
 
-    for (i = 1; i < times.length; i++) {
-      height[i] = 1 / (times[i][0] - times[i-1][0]);
-      if (hmax < height[i]) hmax = height[i];
+    ctx.beginPath();
+    ctx.moveTo(px(data[0][0]), py(data[0][1]));
+    for (i = 1; i < data.length; i++) {
+      ctx.lineTo(px(data[i][0]), py(data[i - 1][1]));
+      ctx.lineTo(px(data[i][0]), py(data[i][1]));
     }
-    height[i+1] = height[i];
-    hfact = wh / hmax;
-    context.beginPath();
-    context.moveTo(0, wh - height[1]*hfact);
-    for (i = 1; i < times.length; i++) {
-      context.lineTo((times[i][0] - tmin)*tfact,wh - height[i]*hfact);
-      context.lineTo((times[i][0] - tmin)*tfact,wh - height[i+1]*hfact);
+    ctx.strokeStyle = color;
+    ctx.stroke();
+  }
+  function redraw() {
+    if (cold_d.length && hot_d.length) {
+      drawplot(cold_d, "blue");
+      drawplot(hot_d, "red");
+      xaxis();
+      yaxis();
+    } else {
+      /* load animation here */ ;
     }
-    context.strokeStyle = color;
-    context.stroke();
   }
+
   function gotdata(data) {
-    canvas = document.getElementById("plot");
-    context = canvas.getContext("2d");
-    ww = canvas.offsetWidth;
-    wh = canvas.offsetHeight;
+    document.getElementById("cold").innerHTML =
+      (data.current.cold / 100).toFixed(2);
+    document.getElementById("hot").innerHTML =
+      (data.current.hot / 100).toFixed(2);
     tmin = data.range.lo;
     tmax = data.range.hi;
-    document.getElementById("cold").innerHTML = data.current.cold;
-    document.getElementById("hot").innerHTML = data.current.hot;
-    drawplot(data.cold, "blue");
-    drawplot(data.hot, "red");
+    tfact = (ww - xzero) / (tmax - tmin);
+    /* differetiate() updates hmax */
+    hmax = 0;
+    cold_d = differentiate(data.cold);
+    hot_d = differentiate(data.hot);
+    hfact = (wh - yzero) / hmax;
+    //document.getElementById("debug").innerHTML = cold_d + "<br>" + hot_d;
+    redraw();
+  }
+
+  function sendquery(lo, hi) {
+    var url = "query.cgi";
+
+    if (lo && hi) url += "?lo=" + lo + "&" + hi;
+    else url = "query.cgi?lo=2015-12-19+00:00:00&hi=2015-12-20+00:00:00"; //FIX
+    xmlhttp.onreadystatechange = function() {
+      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+        // dbg.innerHTML = xmlhttp.responseText;
+        var myData = JSON.parse(xmlhttp.responseText);
+        gotdata(myData);
+      }
+    }
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+  }
+
+  function resize() {
+    ww = window.innerWidth;
+    if (ww > window.innerHeight) ww = window.innerHeight;
+    wh = ww / 2;
+    canvas.width = ww;
+    canvas.height = wh;
+    canvas.style.width = ww + "px";
+    canvas.style.height = wh + "px";
+    redraw();
+  }
+
+  function initialize() {
+    dbg = document.getElementById("debug");
+    canvas = document.getElementById("plot");
+    ctx = canvas.getContext("2d");
+    xmlhttp = new XMLHttpRequest();
+    resize();
+    sendquery();
+  }
+
+  /* Set up */
+  if(window.attachEvent) {
+    window.attachEvent('onload', initialize);
+    window.attachEvent('onresize', resize);
+  } else {
+    window.onload = initialize;
+    window.onresize = resize;
   }
 </script>
 <style>
@@ -50,12 +141,13 @@ h1 {
   text-align: center;
 }
 br {
-  clear: all;
+  clear: both;
 }
 div#currentvals {
-  width: 16em;
+  width: 14em;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 10px;
   text-align: center;
   font-size: 150%;
 }
@@ -63,7 +155,7 @@ div.current {
   position: relative;
   padding: 0.2em;
   border: solid 1px black;
-  margin: 1em;
+  margin: 0.2em;
 }
 div#cold {
   float: left;
@@ -74,8 +166,13 @@ div#hot {
   background-color: #ffd0e0;
 }
 canvas#plot {
+  padding-left: 0;
+  padding-right: 0;
   margin-left: auto;
   margin-right: auto;
+  display: block;
+  width: 640px;
+  height: 320px;
   border: solid 1px black;
 }
 </style>
@@ -88,22 +185,8 @@ canvas#plot {
   <div class="current" id="hot">hot</div>
 </div>
 <br />
-<canvas id="plot" width="640" height = "480"></canvas>
+<canvas id="plot" width="640" height = "320"></canvas>
 <br />
 <div id=debug>
 </div>
-<script>
-  var xmlhttp = new XMLHttpRequest();
-  var url = "query.cgi";
-
-  xmlhttp.onreadystatechange = function() {
-    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-      document.getElementById("debug").innerHTML = xmlhttp.responseText;
-      var myData = JSON.parse(xmlhttp.responseText);
-      gotdata(myData);
-    }
-  }
-  xmlhttp.open("GET", url, true);
-  xmlhttp.send();
-</script>
 </body>
