Added Three.js view for Hokuyo

webclient/pages/hokuyo/hokuyo.css

@@ -0,0 +1,4 @@
+#mainHokDisp {
+	width: 99%;
+	overflow-wrap: normal;
+}

webclient/pages/hokuyo/hokuyo.js

@@ -1,6 +1,7 @@
 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;

webclient/pages/hokuyo/hokuyo.tpl.html

@@ -1,7 +1,12 @@
 <div ng-controller="HokuyoCtrl">
     <div class="hokuyo">
-    	Test 1
+<!--     	Test 1
         {{test}}
-        <input type="number" ng-model="test3" ></input>
+        <input type="number" ng-model="test3" ></input> -->
+
+<script type="text/javascript">
+	var displays = new HokuyoDisplay("mainHokDisp", "main");</script>
+		<div id="mainHokDisp" name="mainHokDisp" >
+		</div>
     </div>
 </div>

webclient/pages/hokuyo/hokuyoDisplay.class.js

@@ -0,0 +1,55 @@
+"use strict";
+
+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);
+
+		//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.container = document.getElementById(parentId);
+
+		this.scene= new THREE.Scene();
+
+		this.renderer = new THREE.WebGLRenderer({antialias:false});
+
+		this.renderer.setSize(W,H);
+		this.renderer.setClearColor(0x272525,0.5);
+
+		this.container.appendChild(this.renderer.domElement);
+
+		// 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 ) );
+
+
+		// 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 );
+
+		var render = function () {
+			requestAnimationFrame( render );
+
+			cube.rotation.z += 0.1;
+
+			this.renderer.render( this.scene, this.camera );
+		}.bind(this);
+
+		render();
+	}
+}

webclient/webclient.html

@@ -28,6 +28,9 @@
 		<script src="../simulateur/afficheur/piles_aff.js"></script>
 		<script src="../simulateur/afficheur/afficheur.js"></script>
 
+		<script src="pages/hokuyo/hokuyoDisplay.class.js"></script>
+		<!-- <script src="pages/hokuyo/three.min.js"></script> Already included -->
+
 		<script src="socket_webclient.class.js"></script>
 		<script src="webclient.js"></script>
 		<script src="index.js"></script>