--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/service/beacon/beacon-map.html	Wed Jul 20 23:52:03 2016 -0700
@@ -0,0 +1,114 @@
+<link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
+<link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
+
+<dom-module id="beacon-map">
+  <template>
+    <style>
+     #map { }
+     canvas { border: 1px solid gray; }
+    </style>
+    <iron-ajax on-response="onPoints" needs="redo"
+               url="points"
+               params="{{pointsParams}}"
+               ></iron-ajax>
+    <canvas id="map" width="500" height="800"></canvas>
+  </template>
+  <script src="dat.gui.js"></script>
+
+  <script>
+   HTMLImports.whenReady(function () {
+       Polymer({
+           is: "beacon-map",
+           properties: {
+               show: { type: Object, notify: true },
+               pointsParams: { computed: '_pointsParams(show)' }
+           },
+           ready: function() {
+               this.scaleSum = 1;
+               //var gui = new dat.GUI();
+               //gui.add(this, 'scaleSum', .001, 3);
+               //gui.listen({updateDisplay: this.redraw.bind(this)});
+
+           },
+           _pointsParams: function(show) {
+               if (show) {
+                   return { addr: show.addr };
+               }
+           },
+           onPoints: function(ev) {
+               this.points = ev.detail.response.points;
+               this.redraw();
+           },
+           redraw: function() {
+               if (!this.points || this.points.length < 1) {
+                   return;
+               }
+               var ctx = this.$.map.getContext('2d');
+               var w = this.$.map.width, h = this.$.map.height;
+               
+               ctx.clearRect(0, 0, w, h);
+
+               ctx.font = "12px serif";
+
+               var pos = [
+                   [.2, .2],
+                   [.2, .7],
+                   [.8, .2],
+                   [.9, .6],
+                   [.8, .8],
+                   [.4, .5],
+                   [.7, .6],
+               ];
+               
+               
+               ctx.fillText("changing", pos[0][0] * 400, pos[0][1] * 400);
+               ctx.fillText("garage",   pos[1][0] * 400, pos[1][1] * 400);
+               ctx.fillText("bed",      pos[2][0] * 400, pos[2][1] * 400);
+               ctx.fillText("dash",     pos[3][0] * 400, pos[3][1] * 400);
+               ctx.fillText("bang",     pos[4][0] * 400, pos[4][1] * 400);
+               ctx.fillText("living",   pos[5][0] * 400, pos[5][1] * 400);
+               ctx.fillText("kitchen",  pos[6][0] * 400, pos[6][1] * 400);
+               
+               ctx.beginPath();
+               var first = true;
+               this.points.forEach(function(p) {
+                   if (!p.map) {
+                       return;
+                       }
+                   var weak = -95, strong = -60;
+                   var w = p.map(function(rssi) {
+                       return (rssi - weak) / (strong - weak);
+                   });
+                   
+                   var sum = w[0] + w[1] + w[2] + w[3] + w[4] + w[5] + w[6];
+                   sum *= this.scaleSum;
+                   w[0] /= sum;
+                   w[1] /= sum;
+                   w[2] /= sum;
+                   w[3] /= sum;
+                   w[4] /= sum;
+                   w[5] /= sum;
+                   w[6] /= sum;
+
+                   var x=0, y=0;
+                   for (var i=0; i<7; i++) {
+                       x += pos[i][0] * w[i];
+                       y += pos[i][1] * w[i];
+                   }
+
+                   x *= 400;
+                   y *= 400;
+                   if (first) {
+                       ctx.moveTo(x, y);
+                       first = false;
+                   } else {
+                       ctx.lineTo(x, y);
+                       
+                   }
+               });
+               ctx.stroke();
+           }
+       });
+   });
+  </script>
+</dom-module>