]> www.average.org Git - pulsecounter.git/blobdiff - web/index.html
projects / pulsecounter.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
style; 'loading'
[pulsecounter.git] / web / index.html
diff --git a/web/index.html b/web/index.html
index cecf347414e2c7dacf52b5b1c92a33fdf3797369..9e459a20450ddcba8543270404b1fdbe25633d8f 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -4,17 +4,15 @@
 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script>
-  var canvas;
-  var ctx;
-  var ww;
-  var wh;
-  var hmax = 0;
-  var hfact;
-  var tmin;
-  var tmax;
-  var tfact;
-  var xzero = 20;
-  var yzero = 20;
+  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);
   }
@@ -35,7 +33,8 @@
     ctx.strokeStyle = "black";
     ctx.stroke();
   }
-  function differentiate(times) { /* updates glbal hmax */
+  /* @ updates global var `hmax` */
+  function differentiate(times) {
     var res = [];
     var dv, dt, v;
 
@@ -43,7 +42,7 @@
       dv = times[i+1][1] - times[i][1];
       dt = times[i+1][0] - times[i][0];
       if (dt != 0 && dv != 0) {
-        v = dv / dt;
+        v = (dv / dt) * 360 ; /* Litres per hour */
         if (hmax < v) hmax = v;
         res.push([times[i][0], v]);
       }
@@ -64,33 +63,87 @@
     ctx.strokeStyle = color;
     ctx.stroke();
   }
-  function gotdata(data) {
-    var cold_d = [], hot_d = [];
+  function showloading() {
+    ctx.fillStyle = "green";
+    ctx.font = "bold 16px Courier";
+    ctx.fillText("loading", (ww / 2) - 40 , (wh / 2) + 8);
+  }
+  function clearplot() {
+    ctx.clearRect(0, 0, ww, wh);
+  }
+  function redraw() {
+    if (cold_d.length && hot_d.length) {
+      clearplot();
+      drawplot(cold_d, "blue");
+      drawplot(hot_d, "red");
+      xaxis();
+      yaxis();
+    } else {
+      showloading();
+    }
+  }
 
+  function gotdata(data) {
     document.getElementById("cold").innerHTML =
       (data.current.cold / 100).toFixed(2);
     document.getElementById("hot").innerHTML =
       (data.current.hot / 100).toFixed(2);
-    canvas = document.getElementById("plot");
-
-    ctx = canvas.getContext("2d");
-    ww = canvas.width;
-    wh = canvas.height;
-
     tmin = data.range.lo;
     tmax = data.range.hi;
     tfact = (ww - xzero) / (tmax - tmin);
+    /* differetiate() updates hmax */
+    hmax = 0;
     cold_d = differentiate(data.cold);
     hot_d = differentiate(data.hot);
-    /* differetiate() updates hmax */
     hfact = (wh - yzero) / hmax;
+    //dbg.innerHTML = "hmax=" + hmax + " hfact=" + hfact + "<br>"
+    //              + 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 - 4;
+    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();
+  }
 
-    document.getElementById("debug").innerHTML.append("<br>" ++ cold_d + "<br>" + hot_d);
+  function initialize() {
+    dbg = document.getElementById("debug");
+    canvas = document.getElementById("plot");
+    ctx = canvas.getContext("2d");
+    xmlhttp = new XMLHttpRequest();
+    resize();
+    sendquery();
+  }
 
-    drawplot(cold_d, "blue");
-    drawplot(hot_d, "red");
-    xaxis();
-    yaxis();
+  /* Set up */
+  if(window.attachEvent) {
+    window.attachEvent('onload', initialize);
+    window.attachEvent('onresize', resize);
+  } else {
+    window.onload = initialize;
+    window.onresize = resize;
   }
 </script>
 <style>
@@ -101,7 +154,7 @@ br {
   clear: both;
 }
 div#currentvals {
-  width: 14em;
+  width: 18em;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
@@ -123,15 +176,16 @@ div#hot {
   background-color: #ffd0e0;
 }
 canvas#plot {
-  padding-left: 0;
-  padding-right: 0;
-  margin-left: auto;
-  margin-right: auto;
+  padding: 0px;
+  margin: auto;
   display: block;
   width: 640px;
   height: 320px;
   border: solid 1px black;
 }
+body {
+  margin: 0px;
+}
 </style>
 <title>Water Meters</title>
 </head><body>
@@ -146,19 +200,4 @@ canvas#plot {
 <br />
 <div id=debug>
 </div>
-<script>
-  var xmlhttp = new XMLHttpRequest();
-  var url = "query.cgi";
-  var qstr = "?lo=2015-12-19+00:00:00&hi=2015-12-20+00:00:00";
-
-  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+qstr, true);
-  xmlhttp.send();
-</script>
 </body>
Electric pulse counter on msp430 + cc2541 BLE module