style; 'loading'

[pulsecounter.git] / web / index.html
diff --git a/web/index.html b/web/index.html

index e08a07a9f0211d995eb08d711d39c4e21367c280..9e459a20450ddcba8543270404b1fdbe25633d8f 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -42,7 +42,7 @@
        dv = times[i+1][1] - times[i][1];
        dt = times[i+1][0] - times[i][0];
        if (dt != 0 && dv != 0) {
        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]);
        }
          if (hmax < v) hmax = v;
          res.push([times[i][0], v]);
        }
@@ -63,14 +63,23 @@
      ctx.strokeStyle = color;
      ctx.stroke();
    }
      ctx.strokeStyle = color;
      ctx.stroke();
    }
+  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) {
    function redraw() {
      if (cold_d.length && hot_d.length) {
+      clearplot();
        drawplot(cold_d, "blue");
        drawplot(hot_d, "red");
        xaxis();
        yaxis();
      } else {
        drawplot(cold_d, "blue");
        drawplot(hot_d, "red");
        xaxis();
        yaxis();
      } else {
-      /* load animation here */ ;
+      showloading();
      }
    }
  
      }
    }
  
@@ -87,7 +96,8 @@
      cold_d = differentiate(data.cold);
      hot_d = differentiate(data.hot);
      hfact = (wh - yzero) / hmax;
      cold_d = differentiate(data.cold);
      hot_d = differentiate(data.hot);
      hfact = (wh - yzero) / hmax;
-    //document.getElementById("debug").innerHTML = cold_d + "<br>" + hot_d;
+    //dbg.innerHTML = "hmax=" + hmax + " hfact=" + hfact + "<br>"
+    //              + cold_d + "<br>" + hot_d;
      redraw();
    }
  
      redraw();
    }
  
@@ -108,7 +118,7 @@
    }
  
    function resize() {
    }
  
    function resize() {
-    ww = window.innerWidth;
+    ww = window.innerWidth - 4;
      if (ww > window.innerHeight) ww = window.innerHeight;
      wh = ww / 2;
      canvas.width = ww;
      if (ww > window.innerHeight) ww = window.innerHeight;
      wh = ww / 2;
      canvas.width = ww;
@@ -144,7 +154,7 @@ br {
    clear: both;
  }
  div#currentvals {
    clear: both;
  }
  div#currentvals {
-  width: 14em;
+  width: 18em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
@@ -166,15 +176,16 @@ div#hot {
    background-color: #ffd0e0;
  }
  canvas#plot {
    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;
  }
    display: block;
    width: 640px;
    height: 320px;
    border: solid 1px black;
  }
+body {
+  margin: 0px;
+}
  </style>
  <title>Water Meters</title>
  </head><body>
  </style>
  <title>Water Meters</title>
  </head><body>