Mercurial > code > home > repos > homeauto

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css" media="all">
      /* <![CDATA[ */
      body {
	  font-family: sans-serif;
	  font-size: 12px;
      }
      .stripChart {
	  background: none repeat scroll 0 0 #EAEAEA;
	  border-bottom: 1px solid #b7b7b7;
	  display: inline-block;
	  height: 22px;
	  margin: 0;
	  padding: 0;
	  white-space: nowrap;
      }
      .chartArea {
	  width: 300px;
	  height: 20px;
	  border: 1px solid gray;
	  display: inline-block;
	  position: relative;
	  background: white;
      }
      .name {
	  display: inline-block;
	  width: 16em;
      }

      .chartArea > span {
	  position: absolute;
	  height: 20px;
	  background: #d3e1ed;
	  background: -moz-linear-gradient(left, #d3e1ed 0%, #86aecc 100%);
	  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d3e1ed), color-stop(100%,#86aecc));
	  background: -webkit-linear-gradient(left, #d3e1ed 0%,#86aecc 100%);
	  background: -o-linear-gradient(left, #d3e1ed 0%,#86aecc 100%);
	  background: linear-gradient(left, #d3e1ed 0%,#86aecc 100%);
      }

      .stripChart > .timeLeft, .stripChart > .timeRight {
	  font-size: 10px;
	  vertical-align: super;
	  padding: 0 4px;
      }

      /* ]]> */
    </style>

  </head>
  <body>
    <h1>bluetooth watcher on {{host}}</h1>

    <p>Recent activity</p>

    <div id="activity"/>
    <script type="text/javascript" src="//bigasterisk.com/lib/jquery-2.0.3.min.js"/>
      <script type="text/javascript" src="//bigasterisk.com/lib/underscore-1.5.2.min.js"/>
      <script type="text/javascript" src="pretty.js"/>

    <script type="text/javascript">
    // <![CDATA[

    function StripChart(parent) {
        var strips = [[null, null]]; // [[starttime, endtime], ...]
        this.addEvent = function (ev) {
            // must pass events in order
            if (ev.action == "arrive") {
                if (_.isNull(_.last(strips)[1])) {
		    if (_.isNull(_.last(strips)[0])) {
			_.last(strips)[0] = ev.t;
		    } else {
			// two arrives in a row
		    }
                } else {
                    strips.push([ev.t, null]);
                }
            }
            if (ev.action == "leave") {
                if (_.isNull(_.last(strips)[1])) {
                    _.last(strips)[1] = ev.t;
                } else {
                    // two leaves in a row
                }
            }
        };
        function stripIsComplete(se) {
            return !_.isNull(se[0]) && !_.isNull(se[1]);
        }
	function displayTime(secs) {
	    var iso = new Date(secs*1000).toJSON().replace(/\.\d+/,"");
	    return prettyDate(iso);
	}
        this.draw = function () {
	    var now = .001*new Date();
            if (_.isNull(_.last(strips)[1])) {
                _.last(strips)[1] = now;
            }
            var complete = _.select(strips, stripIsComplete);
            if (_.isEmpty(complete)) {
                return;
            }
            var t1 = _.first(complete)[0], t2 = now;
            function xForTime(t) {
                return 300 * (t - t1) / (t2 - t1)
            }
	    parent.append($("<span>").addClass("timeLeft").text(displayTime(t1)));
	    var out = $("<span>").addClass("chartArea")
	    parent.append(out);
	    var lastX = 0;
            $.each(complete, function (i, se) {
                var x1 = xForTime(se[0]), x2 = xForTime(se[1]);
		if (x1 < lastX) {
		    // culls ok, but may leave gaps. I'd rather
		    // something that joins the slivers intead of
		    // skipping them
		    return;
		}
		var w = Math.max(2, x2 - x1)
                out.append($("<span>").css({left: x1, width: w}));
		lastX = x1 + w;
            });
	    parent.append($("<span>").addClass("timeRight").text("now"));
        };
    }

    $(function() {
        var addressRow = {}; // address : row
        var chart = {} // address : StripChart

        $.getJSON("recent", {hours:24*7}, function (data) {

            $.each(data.events, function (i, ev) {
                if (!addressRow[ev.address]) {
                    var row = $("<li>").append($("<span>").addClass("name").text(ev.name)).append($("<span>").addClass("stripChart"));
                    $("#activity").append(row);
                    addressRow[ev.address] = row;
                    chart[ev.address] = new StripChart(row.find(".stripChart"));
                }
                chart[ev.address].addEvent(ev);
            });
            $.each(chart, function (k, c) {
                c.draw();
            });
        });
    });
    // ]]>
</script>


  </body>
</html>
author	drewp <drewp@bigasterisk.com>
date	Mon, 19 Feb 2018 04:21:28 -0800
parents	38a4769595e2
children