X-Git-Url: http://www.average.org/gitweb/?p=pulsecounter.git;a=blobdiff_plain;f=web%2Findex.html;h=9e459a20450ddcba8543270404b1fdbe25633d8f;hp=18b60e6762fbbfa577800f19b4c8b60cb3c46cf3;hb=6db8bb22e8ead45eede4226e6cfb9682e206fb1b;hpb=256a00ed504af5e5fba67508173445363edf5007
diff --git a/web/index.html b/web/index.html
index 18b60e6..9e459a2 100644
--- 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) {
- v = dv / dt;
+ v = (dv / dt) * 360 ; /* Litres per hour */
if (hmax < v) hmax = v;
res.push([times[i][0], v]);
}
@@ -63,18 +63,31 @@
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) {
+ 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);
@@ -83,13 +96,9 @@
cold_d = differentiate(data.cold);
hot_d = differentiate(data.hot);
hfact = (wh - yzero) / hmax;
-
- //document.getElementById("debug").innerHTML = cold_d + "
" + hot_d;
-
- drawplot(cold_d, "blue");
- drawplot(hot_d, "red");
- xaxis();
- yaxis();
+ //dbg.innerHTML = "hmax=" + hmax + " hfact=" + hfact + "
"
+ // + cold_d + "
" + hot_d;
+ redraw();
}
function sendquery(lo, hi) {
@@ -108,17 +117,33 @@
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();
+ }
+
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;
}
Water Meters