Merge branch 'master' of http://github.com/andykamath/seymour

README.md

@@ -18,4 +18,4 @@ Given a beacon at position (<i>X<sub>a</sub>, Y<sub>a</sub></i>), a user's dista
 
 While this was a great start, the problem persisted as to finding the user's specific location. The equation returns a distance between the user and the beacon, which forms a circle around the beacon of radius *d*. In order to track the precise location, we used a technique known as *trilateration* (very similar to *triangularation* in GPS's). When we use *n*=3 beacons, we can plot three different circles and thereby get a much more precise area as to where the user could be through optimization with least squares regression. As can be seen with a simple graph below, the area of overlap between all three beacons can be used to generalize a location within a given confined area.
 
-
+![graph.png](graph.png)

server/routes.js

@@ -1,4 +1,5 @@
 const _get = require('lodash/get');
+const path = require('path');
 const { spawn } = require('child_process');
 
 function routes(io) {
@@ -48,7 +49,7 @@ function routes(io) {
         // JSON parse to turn it into a native array
         position: JSON.parse(bracketedGroups[i + 1]),
         radius: digitsAfterBrackets[i],
-      }
+      };
     }
     return {
       clientPosition,

viewer/assets/js/main.js

@@ -408,13 +408,16 @@
 
 })(jQuery);
 
-var width = 400
+var width = 500
 var height = width
 
 function plotIt(arr) { // assumes input of [Px, Py, Ax, Ay, Ar, Bx, By, Br, Cx, Cy, Cr]
     var canvas = document.getElementById('canvas'); // get canvas element
     var ctx = canvas.getContext('2d'); // getContext
-
+    for (var i = 0; i < arr.length;i++) {
+	arr[i] = 100 * (+arr[i]);
+    }
+
     ctx.clearRect(0,0,width,height);
     ctx.fillStyle = 'rgb(0,0,0)';
 

viewer/index.html

@@ -27,7 +27,7 @@
 							<div class="inner">
 								<h1>Tri-Fi</h1>
 								<p>Trilateration of location via wifi hotspot signal strength analysis.</p>
-								<canvas id="canvas" height=400 width=400></canvas>
+								<canvas id="canvas" height=500 width=500></canvas>
 							</div>
 						</div>
 					</header>

viewer/sockets.js

@@ -11,4 +11,6 @@ socket.on('data', function (data) {
    * }
    */
   console.log(data);
+
+    plotIt(data.clientPosition[0],data.clientPosition[1],data.beaconData[0].position[0],data.beaconData[0].position[1],data.beaconData[0].radius,data.beaconData[1].position[0],data.beaconData[1].position[1],data.beaconData[1].radius,data.beaconData[2].position[0],data.beaconData[2].position[1],data.beaconData[0].radius)
 });