]> 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
don't draw plot w/o data
[pulsecounter.git] / web / index.html
diff --git a/web/index.html b/web/index.html
index 1bdb731335e6af68774bfffe13bb085eba1f66e4..7c0b4a4af3c9554e27d316fd47732226cd6eb8b3 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -4,12 +4,12 @@
 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script>
-  var dbg;
+  var dbg, errordiv;
   var canvas, ctx;
   var ww, wh;
   var hmax, hfact;
   var tmin, tmax, tfact;
-  var xzero = 40, yzero = 48;
+  var xzero = 60, yzero = 48;
   var cold_d = [], hot_d = [];
 
   function showdate(utime) {
@@ -28,10 +28,10 @@
   const mn = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
               "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
-  function getcombx(lo, hi) {
+  function getcombx(tmin, tmax) {
     var comb = [], lb = [];
     var trange = tmax - tmin;
-    var inc, inc2, base, t, dt;
+    var inc, inc2, base, base2, t, dt, zoff;
     var label = function(t) { return "<<" + t.toFixed(1) + ">>"; }
     function tohour(t) { var dt = new Date(t*1000); return dt.getHours(); }
     function todow(t) { var dt = new Date(t*1000); return dow[dt.getDay()]; }
@@ -56,25 +56,28 @@
     else { /* ~ one month */
       /* TODO: make this a separate case with loop over months rather than
          fixed number of seconds. */
-      inc = 2592000;
+      inc = 86400;
       inc2 = 2592000;
       label = tomonth;
     }
 
     dt = new Date(tmin*1000);
-    base = (Math.floor(tmin / inc) + 1) * inc + 60 * dt.getTimezoneOffset();
+    zoff = 60 * dt.getTimezoneOffset();
+    base = (Math.floor((tmin - zoff - 1) / inc) + 1) * inc + zoff;
     for (t = base; t < tmax; t += inc)
       comb.push(t);
-    base = (Math.floor(tmin / inc2) + 1) * inc2 + 60 * dt.getTimezoneOffset();
-    for (t = base; t < tmax; t += inc2)
+    base2 = (Math.floor((tmin - zoff - 1) / inc2) + 1) * inc2 + zoff;
+    for (t = base2; t < tmax; t += inc2)
       lb.push([t, label(t)]);
-    //dbg.innerHTML = "ord=" + ord + "<br>inc=" + inc + "<br>"
+    //dbg.innerHTML = "inc=" + inc + "<br>inc2=" + inc2 + "<br>"
+    //              + "tmin=" + tmin + " tmax=" + tmax + "<br>"
+    //              + "base=" + base + " base2=" + base2 + "<br>"
     //              + comb + "<br>" + lb;
     return [comb, lb];
   }
 
   function xaxis() {
-    var comb = getcombx(0, hmax);
+    var comb = getcombx(tmin, tmax);
     var i;
 
     ctx.beginPath();
@@ -190,14 +193,16 @@
   function drawplot(data, color) {
     var 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]));
+    if (data.length) {
+      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]));
+      }
+      ctx.strokeStyle = color;
+      ctx.stroke();
     }
-    ctx.strokeStyle = color;
-    ctx.stroke();
   }
 
   function showloading() {
@@ -220,6 +225,8 @@
   }
 
   function redraw() {
+    errordiv.style.visibility = "hidden";
+    errordiv.innerHTML = "";
     clearplot();
     if (cold_d.length || hot_d.length) {
       tfact = (ww - xzero) / (tmax - tmin);
@@ -239,10 +246,14 @@
     document.getElementById("curhot").innerHTML =
       (data.current.hot / 100).toFixed(2);
 
-    document.getElementById("totcold").innerHTML =
-      ((data.cold[data.cold.length - 1][1] - data.cold[0][1]) * 10);
-    document.getElementById("tothot").innerHTML =
-      ((data.hot[data.hot.length - 1][1] - data.hot[0][1]) * 10);
+    if (data.cold.length)
+      document.getElementById("totcold").innerHTML =
+        ((data.cold[data.cold.length - 1][1] - data.cold[0][1]) * 10);
+    else document.getElementById("totcold").innerHTML = "0";
+    if (data.hot.length)
+      document.getElementById("tothot").innerHTML =
+        ((data.hot[data.hot.length - 1][1] - data.hot[0][1]) * 10);
+    else document.getElementById("tothot").innerHTML = "0";
 
     tmin = data.range.lo;
     tmax = data.range.hi;
@@ -263,11 +274,16 @@
 
     //dbg.innerHTML = url;
     xmlhttp.onreadystatechange = function() {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        // dbg.innerHTML = xmlhttp.responseText;
-        var myData = JSON.parse(xmlhttp.responseText);
-        gotdata(myData);
-      }
+      if (xmlhttp.readyState == 4)
+        if (xmlhttp.status == 200) {
+          // dbg.innerHTML = xmlhttp.responseText;
+          var myData = JSON.parse(xmlhttp.responseText);
+          gotdata(myData);
+        } else {
+          errordiv.style.visibility = "visible";
+          errordiv.style.display = "block";
+          errordiv.innerHTML = xmlhttp.responseText;
+        }
     }
     xmlhttp.open("GET", url, true);
     clearplot();
@@ -345,6 +361,7 @@
     var qstr = window.location.search;
 
     dbg = document.getElementById("debug");
+    errordiv = document.getElementById("errormsg");
     canvas = document.getElementById("plot");
     ctx = canvas.getContext("2d");
     resize();
@@ -417,6 +434,11 @@ canvas#plot {
   height: 320px;
   /* border: solid 1px black; */
 }
+div#errormsg {
+  visibility: hidden;
+  color: red;
+  text-align: center;
+}
 div#queries {
   margin-left: auto;
   margin-right: auto;
@@ -455,6 +477,8 @@ body {
 <br />
 <canvas id="plot" width="640" height = "320"></canvas>
 <br />
+<div id="errormsg"></div>
+<br />
 <div id="totalvals">
   Total for the period (l)
   <div class="current cold" id="totcold">cold</div>
Electric pulse counter on msp430 + cc2541 BLE module