Polar plot for hokuyo, delete Tree.js

utcoupe · Jan 25, 2017 · 665f769 · 665f769
1 parent 17c79b6
commit 665f769
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 Installer tous les logiciels requis (compilation, installation, etc.) :
 ```
-sudo apt install git build-essential python nodejs npm nodejs-legacy cmake libboost-dev
+sudo apt install git build-essential python nodejs npm nodejs-legacy cmake libboost-dev g++
 ```
 
 Une fois dans le dossier, pour installer les dépendances JavaScript :

diff --git a/webclient/lib/raphael.min.js b/webclient/lib/raphael.min.js
diff --git a/webclient/pages/hokuyo/hokuyo.css b/webclient/pages/hokuyo/hokuyo.css
@@ -1,4 +1,28 @@
+.hokuyo{
+}
+
+.test {
+	margin: auto;
+	margin-top: 1em;
+	margin-bottom: 1em;
+	width: 1000px;
+}
+
 #mainHokDisp {
-	width: 99%;
 	overflow-wrap: normal;
+	background-color: #222;
+	margin: auto;
+}
+
+#singleHokDisps {
+	margin: auto;
+	margin-top: 1em;
+	margin-bottom: 3em;
+	display: flex;
+	justify-content: space-between;
+	width: 1000px;
+}
+
+.singleHokDisp {
+	/*background-color: #333;*/
 }
diff --git a/webclient/pages/hokuyo/hokuyo.js b/webclient/pages/hokuyo/hokuyo.js
@@ -1,21 +1,64 @@
 angular.module('app').controller('HokuyoCtrl', ['$rootScope', '$scope', 'Hokuyo',
 	function($rootScope, $scope, Hokuyo) {
 	$rootScope.act_page = 'hokuyo';
-	var displays = new HokuyoDisplay("mainHokDisp", "main");
-	// $scope.logs = Hokuyo.logs;
-	$scope.test = "Coucou !";
-	$scope.test3 = 42;
+	Hokuyo.displays.main = new HokuyoDisplay("mainHokDisp", "main");
+	Hokuyo.displays.one = new HokuyoDisplay("hok1", "one");
+	Hokuyo.displays.two = new HokuyoDisplay("hok2", "two");
+	// $scope.test = "Coucou !";
+	// $scope.test3 = 42;
+
+	$scope.name = "hokuyo.polar_raw_data";
+	$scope.from = "hokuyo";
+	$scope.data = '{\n\
+ 	"hokuyo": "corner",\n\
+	"polarSpots": [\n\
+		[ -40, 235 ],\n\
+		[ -30, 235 ],\n\
+		[ -35, 230 ],\n\
+		[ -25, 230 ],\n\
+		[ -20, 100 ],\n\
+		[ -15, 105 ],\n\
+		[ -5, 120 ],\n\
+		[ 0, 100 ],\n\
+		[ 5, 90 ],\n\
+		[ 10, 95 ],\n\
+		[ 15, 100 ],\n\
+		[ 20, 100 ],\n\
+		[ 25, 230 ],\n\
+		[ 30, 235 ]\n\
+	]\n\
+}';
+
+	$scope.update = function() {
+		Hokuyo.onOrder($scope.from, $scope.name, JSON.parse($scope.data));
+	}
 
 }]);
 
 angular.module('app').service('Hokuyo', ['$rootScope', '$sce', 'Client',
 	function($rootScope, $sce, Client) {
-	this.init = function () {
+		this.displays = {
+			main: null,
+			one: null,
+			two: null
+		}
+
+		this.init = function () {
+			Client.order(this.onOrder);
+		};
 
-		Client.order(function (from, name, data) {
-			if(name == 'hokuyo') {
-				// Do something
+		this.onOrder = function (from, name, data) {
+			if($rootScope.act_page == 'hokuyo') {
+					if (name == 'hokuyo.polar_raw_data') {
+						if (data.hokuyo == "corner" && !!this.displays.one) {
+							this.displays.one.updatePolarSpots(data.polarSpots);
+						} else if (data.hokuyo == "enemy" && !!this.displays.two) {
+							this.displays.two.updatePolarSpots(data.polarSpots);
+					}
+				} else if (name == 'hokuyo.robots'
+					&& !!this.displays.main) {
+					this.displays.main.updateRobots(data.robots);
+				}
 			}
-		}.bind(this));
-	};
+		}.bind(this);
 }]);
diff --git a/webclient/pages/hokuyo/hokuyo.tpl.html b/webclient/pages/hokuyo/hokuyo.tpl.html
@@ -1,12 +1,34 @@
+<style type="text/css">
+	@import url(pages/hokuyo/hokuyo.css);
+</style>
 <div ng-controller="HokuyoCtrl">
     <div class="hokuyo">
 <!--     	Test 1
         {{test}}
         <input type="number" ng-model="test3" ></input> -->
 
-<script type="text/javascript">
-	var displays = new HokuyoDisplay("mainHokDisp", "main");</script>
-		<div id="mainHokDisp" name="mainHokDisp" >
+
+		<div class="test">
+			<span class="legend">Name:</span>
+			<input type="text" ng-model="name"/>
+			<br />
+			<span class="legend">From:</span>
+			<input type="text" ng-model="from"/>
+			<br />
+			<textarea ng-model="data" rows="10" cols="45"></textarea>
+			<br />
+			<button type="button" class="btn" ng-click="update()">Mettre à jour</button> 
+		</div>
+
+		<div id="mainHokDisp" name="mainHokDisp" style="display: none;">
+		</div>
+
+		<div id="singleHokDisps" name="singleHokDisps" >
+			<div id="hok1" name="hok1" class="singleHokDisp" >
+			</div>
+
+			<div id="hok2" name="hok2" class="singleHokDisp" >
+			</div>
 		</div>
     </div>
 </div>
diff --git a/webclient/pages/hokuyo/hokuyoDisplay.class.js b/webclient/pages/hokuyo/hokuyoDisplay.class.js
@@ -2,54 +2,110 @@
 
 class HokuyoDisplay {
 	constructor(parentId, mode) {
-		var W = $('#'+parentId).width();
-		var H = ( 200 / 300 ) * W;// Math.max($('body').height() - $('#div_menu').outerHeight() - 2*$('#simu_before').outerHeight(), 200);
+		this.MAIN = "main";
+		this.ONE = "one";
+		this.TWO = "two";
 
-		//permet de redimensionner la fenetre
-		window.addEventListener('resize', function() {
-			var W = $('#'+parentId).width();
-			var H = ( 200 / 300 ) * W;// Math.max($('body').height() - $('#div_menu').outerHeight() - 2*$('#simu_before').outerHeight(), 200);
-			this.renderer.setSize(W, H);
-			this.camera.aspect = W / H;
-			this.camera.updateProjectionMatrix();
-		});
+		this.dotRadius = 1; 	// cm
 
-		this.container = document.getElementById(parentId);
+		this.parentId = parentId;
+		this.mode = mode;
+		this.div = $('#' + this.parentId);
 
-		this.scene= new THREE.Scene();
 
-		this.renderer = new THREE.WebGLRenderer({antialias:false});
+		this.onResize();// Math.max($('body').height() - $('#div_menu').outerHeight() - 2*$('#simu_before').outerHeight(), 200);
 
-		this.renderer.setSize(W,H);
-		this.renderer.setClearColor(0x272525,0.5);
+		// On window resize (doesn't seem to work)
+		// window.addEventListener('resize', this.onResize());
+		// this.div.resize(this.onResize());
+		// setInterval(this.onResize(), 1000);
 
-		this.container.appendChild(this.renderer.domElement);
+		this.initChart();
+	}
+
+	onResize() {
+		if (this.mode == this.MAIN) {
+			var maxWidth = 1200; // px
+
+			// if (this.W != this.div.width()) {
+			this.W = 1000; //this.div.width();
+			if (this.W > maxWidth) {
+				this.W = maxWidth;
+			}
+			this.H = ( 200 / 300 ) * this.W;
+			// }
+		} else {
+			this.W = 490;
+			this.H = this.W;
+
+			this.center = this.W/2 + "," + this.H/2;
+		}
+
+		this.div.width(this.W);
+		this.div.height(this.H);
+
+		// console.log(this.mode);
+		// console.log(this.W);
+		// console.log(this.H);
+	}
+
+	initChart() {
+		this.r = Raphael(this.parentId, this.div.width(), this.div.height());
+		if (this.mode != this.MAIN) {
 
-		// this.camera = new THREE.OrthographicCamera( -150, 150, 100, -100, 1, 1000 );
-		this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
-		this.camera.position.x = 0;
-		this.camera.position.y = 0;
-		this.camera.position.z = 10;
-		this.camera.lookAt ( new THREE.Vector3( 0, 0, 0 ) );
-
+        	var grey = Raphael.color("#333");
+        	this.dotColor = Raphael.getColor(1);
+        	this.viewportScale = (this.W/2) / 400;
 
-		// Test !
-		var geometry = new THREE.BoxGeometry( 1, 1, 1 );
-		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-		var cube = new THREE.Mesh( geometry, material );
-		cube.position.x = 0;
-		cube.position.y = 0;
-		cube.position.z = 0;
-		this.scene.add( cube );
+        	// Outmost circle
+        	// Unit: cm
+        	this.r.circle(0, 0, 400).attr({stroke: this.dotColor, fill: grey, transform: "t " + this.center + "s" + this.viewportScale, "fill-opacity": .1});
 
-		var render = function () {
-			requestAnimationFrame( render );
+        	// Inner circles
+        	// Unit: cm
+        	for (var radius = 100; radius < 400; radius+=100) {
+        		this.r.circle(0, 0, radius).attr({stroke: grey, fill: null, transform: "t " + this.center + "s" + this.viewportScale, "stroke-opacity": .4});
+        	}
 
-			cube.rotation.z += 0.1;
+			// Arraw
+        	// Unit: pixel
+        	this.r.path("M-7 10L0 -10L7 10L-7 10").attr({stroke: this.dotColor, fill: this.dotColor, transform: "t " + this.center, "fill-opacity": .4});
+
+        	this.dots = new Map();
+		}
+	}
+
+	updatePolarSpots(spots) {
+		if (this.mode == this.MAIN) {
+			console.error("Main display can't handle polar spot");
+			return;
+		}
+
+		// For each spots
+		spots.forEach(function(newSpot) {
+			var existingPlot = this.dots.get(newSpot[0]);
+
+			if (!!existingPlot) {
+				// Dot already exist at this angle, let's update it
+				existingPlot.attr({cy: newSpot[1] * this.viewportScale });
+			} else {
+				// This dot doesn't already exist, let's create it
+        		var dot = this.r.circle(0, newSpot[1] * this.viewportScale, this.dotRadius).attr({
+        			stroke: this.dotColor,
+        			fill: this.dotColor,
+        			transform:  "t," + this.center + "r180,0,0" + "r" + newSpot[0] + ",0,0"});
+        		//  + " 0 0" +   + 
+        		this.dots.set(newSpot[0], dot);
+			}
+		}.bind(this));
+
+	}
 
-			this.renderer.render( this.scene, this.camera );
-		}.bind(this);
+	updateRobots(robots) {
+		if (this.mode != this.MAIN) {
+			console.error("Single LiDAR displays can't handle global robot spot");
+			return;
+		}
 
-		render();
 	}
 }
diff --git a/webclient/webclient.html b/webclient/webclient.html
@@ -11,6 +11,7 @@
 		<script src="lib/angular.min.js"></script>
 		<script src="lib/angular-route.min.js"></script>
 		<script src="lib/jquery-2.1.1.min.js"></script>
+		<script src="lib/raphael.min.js"></script>
 		<!-- <script src="lib/socket.io.js"></script> -->
 		<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
 		<script src="lib/bootstrap/js/bootstrap.min.js"></script>