Unity et Node.js – Blue-Bears

Node.js est un serveur codé en Javascript qui permet d’établir un flux de communication avec un browser, en temps réel. Cela permet par exemple de récupérer en temps réel les données d’orientation des accéléromètres d’un téléphone mobile quelque soit son modèle. L’utilisateur charge une page web et le streaming démarre.

Stop … je suis tombé depuis la dessus :
http://www.youtube.com/watch?feature=player_embedded&v=sjwy3oGPu6Y
On repart sur Node.js;
- l’autre solution semble un peu lourde à mettre en place : 3 appli en cascades !! Dont une en démo => stop 20 secondes toutes les 10 minutes.
Au passage Doc interface INPUT de Unity :
- http://docs.unity3d.com/ScriptReference/Input.html
- Ça peu servir.

http://www.albertosarullo.com/blog/javascript-accelerometer-demo-source

Un code de capture en Javascript des données du Gyro => Safari (Apple/Iphone/Ipad) only. A ouvrir dans le browser Safari d’un mobile.

Reference des fonctions Safari : DeviceMotionEvent & DeviceOrientationEvent

[pastacode lang= »markup » message= »Iphone Sensor Accelero » highlight= » » provider= »manual »]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accelerometer Javascript Test</title>
<meta name="viewport" content="width=device-width,user-scalable=yes" />
<style>
body {
	font-family: helvetica, arial, sans serif;
}
#sphere {
	position: absolute;	
	width: 50px;
	height: 50px;
	border-radius: 50px;
	-webkit-radius: 50px;
	background-color: blue;
}
</style>
</head>

<body>
<div id="content">
    <h1>Accelerometer Javascript Test</h1>
    <div id="sphere"></div>
<ul>
	<li>acceleration x: <span id="accelerationX"></span>g</li>
	<li>acceleration y: <span id="accelerationY"></span>g</li>
	<li>acceleration z: <span id="accelerationZ"></span>g</li>
	<li>rotation alpha: <span id="rotationAlpha"></span>degree</li>
	<li>rotation beta: <span id="rotationBeta"></span>degree</li>
	<li>rotation gamma: <span id="rotationGamma"></span>degree</li>
</ul>

test: <span id="test"></span>
</div>
<script type="text/javascript">

var x = 0, y = 0,
    vx = 0, vy = 0,
	ax = 0, ay = 0;
	
var sphere = document.getElementById("sphere");

if (window.DeviceMotionEvent != undefined) {
	window.ondevicemotion = function(e) {
		ax = event.accelerationIncludingGravity.x * 5;
		ay = event.accelerationIncludingGravity.y * 5;
		document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
		document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
		document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

		if ( e.rotationRate ) {
			document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
			document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
			document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
		}		
	}

	setInterval( function() {
		var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
		if ( landscapeOrientation) {
			vx = vx + ay;
			vy = vy + ax;
		} else {
			vy = vy - ay;
			vx = vx + ax;
		}
		vx = vx * 0.98;
		vy = vy * 0.98;
		y = parseInt(y + vy / 50);
		x = parseInt(x + vx / 50);
		
		boundingBoxCheck();
		
		sphere.style.top = y + "px";
		sphere.style.left = x + "px";
		
	}, 25);
} 


function boundingBoxCheck(){
	if (x<0) { x = 0; vx = -vx; }
	if (y<0) { y = 0; vy = -vy; }
	if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; }
	if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; }
	
}

</script>

</body>
</html>

[/pastacode]

http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/
Ici du code Html/Javascript (cf infra) pour récupérer les Accéléromètres et les Gyro.

[pastacode lang= »markup » message= »Iphone Sensor Accelero + Gyro » highlight= » » provider= »manual »]

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<link rel="apple-touch-icon" href="apple-touch-icon.png" />
		<title>Peter Friese's Gyro Demo</title> 
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style> 
		#no {
			display: none;	
		}
		
		@media screen {
			html, body, div, span {
				margin: 0;
			  padding: 0;
			  border: 0;
			  outline: 0;
			  font-size: 100%;
			  vertical-align: baseline;
			}			
			body {
				height: auto;
		  	-webkit-text-size-adjust:none;
		  	font-family:Helvetica, Arial, Verdana, sans-serif;
		  	padding:0px;
				overflow-x: hidden;		
			}		
			
			.outer {
				background: rgba(123, 256, 245, 0.9);
				padding: 0px;
				min-height: 48px;
				
			}
			
			.box {
				position: relative;
				float: left;
				width: 45%;
				padding: 7px;
				border: 1px solid rgba(255, 255, 255, 0.6);
				background: rgba(178,215,255,0.75);
				min-height: 160px;
			}	
			
			.box2 {
				position: relative;
				float: left;
				width: 45%;
				padding: 7px;
				border: 1px solid rgba(255, 255, 255, 0.6);
				background: rgba(178,215,255,0.75);
			}	
			
			.box span {
				display: block;
			}
			
			span.head {
				font-weight: bold;				
			}
		
		}
		</style> 
	</head> 

	<body>
		<div id="yes"> 
				<div class="box" id="accel">
					<span class="head">Accelerometer</span>
					<span id="xlabel"></span>
					<span id="ylabel"></span>
					<span id="zlabel"></span>
					<span id="ilabel"></span>					
					<span id="arAlphaLabel"></span>										
					<span id="arBetaLabel"></span>										
					<span id="arGammaLabel"></span>																				
				</div>		
			
				<div class="box" id="gyro">
					<span class="head">Gyroscope</span>
					<span id="alphalabel"></span>			
					<span id="betalabel"></span>
					<span id="gammalabel"></span>
				</div>
				
				<div class="box2" id="accelcolor">
					<span class="head">Color</span>
				</div>
				<div class="box2" id="gyrocolor">
					<span class="head">Color</span>
				</div>
				
		</div>
		<div id="no">
			Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.    
		</div>
		
		<script> 
			// Position Variables
			var x = 0;
			var y = 0;
			var z = 0;

			// Speed - Velocity
			var vx = 0;
			var vy = 0;
			var vz = 0;

			// Acceleration
			var ax = 0;
			var ay = 0;
			var az = 0;
			var ai = 0;
			var arAlpha = 0;
			var arBeta = 0;
			var arGamma = 0;

			var delay = 100;
			var vMultiplier = 0.01;			var alpha = 0;
		
			var alpha = 0;
			var beta = 0;
			var gamma = 0;
			
			
			if (window.DeviceMotionEvent==undefined) {
				document.getElementById("no").style.display="block";
				document.getElementById("yes").style.display="none";
			} 
			else {
				window.ondevicemotion = function(event) {
					ax = Math.round(Math.abs(event.accelerationIncludingGravity.x * 1));
					ay = Math.round(Math.abs(event.accelerationIncludingGravity.y * 1));
					az = Math.round(Math.abs(event.accelerationIncludingGravity.z * 1));		
					ai = Math.round(event.interval * 100) / 100;
					rR = event.rotationRate;
					if (rR != null) {
						arAlpha = Math.round(rR.alpha);
						arBeta = Math.round(rR.beta);
						arGamma = Math.round(rR.gamma);
					}

/*					
					ax = Math.abs(event.acceleration.x * 1000);
					ay = Math.abs(event.acceleration.y * 1000);
					az = Math.abs(event.acceleration.z * 1000);		
	*/				
				}
								
				window.ondeviceorientation = function(event) {
					alpha = Math.round(event.alpha);
					beta = Math.round(event.beta);
					gamma = Math.round(event.gamma);
				}				
				
				function d2h(d) {return d.toString(16);}
				function h2d(h) {return parseInt(h,16);}
				
				function makecolor(a, b, c) {
					red = Math.abs(a) % 255;
					green = Math.abs(b) % 255;
					blue = Math.abs(c) % 255;
					return "#" + d2h(red) + d2h(green) + d2h(blue);
				}
				
				function makeacceleratedcolor(a, b, c) {
					red = Math.round(Math.abs(a + az) % 255);
					green = Math.round(Math.abs(b + ay) % 255);
					blue = Math.round(Math.abs(c + az) % 255);
					return "#" + d2h(red) + d2h(green) + d2h(blue);
				}
 
				setInterval(function() {
					document.getElementById("xlabel").innerHTML = "X: " + ax;
					document.getElementById("ylabel").innerHTML = "Y: " + ay;
					document.getElementById("zlabel").innerHTML = "Z: " + az;										
					document.getElementById("ilabel").innerHTML = "I: " + ai;										
					document.getElementById("arAlphaLabel").innerHTML = "arA: " + arAlpha;															
					document.getElementById("arBetaLabel").innerHTML = "arB: " + arBeta;
					document.getElementById("arGammaLabel").innerHTML = "arG: " + arGamma;																									
					document.getElementById("alphalabel").innerHTML = "Alpha: " + alpha;
					document.getElementById("betalabel").innerHTML = "Beta: " + beta;
					document.getElementById("gammalabel").innerHTML = "Gamma: " + gamma;

					document.getElementById("accelcolor").innerHTML = "Color: " + makecolor(ax, ay, az);
					document.getElementById("accelcolor").style.background = makecolor(ax, ay, az);
					document.getElementById("accelcolor").style.color = "#FFFFFF";
					document.getElementById("accelcolor").style.fontWeight = "bold";

					document.getElementById("gyrocolor").innerHTML = "Color: " + makecolor(alpha, beta, gamma);
					document.getElementById("gyrocolor").style.background = makecolor(alpha, beta, gamma);
					document.getElementById("gyrocolor").style.color = "#FFFFFF";
					document.getElementById("gyrocolor").style.fontWeight = "bold";

					document.bgColor = makecolor(arAlpha, arBeta, arGamma);

				}, delay);
			} 
			</script> 
		</body> 
</html>

[/pastacode]

INSTALLATION de NODE.JS sur le serveur Blue-Bears.

https://gist.github.com/isaacs/579814
La première procédure a fonctionné.

[pastacode lang= »markup » message= »Node.js en 30 secondes » highlight= » » provider= »manual »]

echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
. ~/.bashrc
mkdir ~/local
mkdir ~/node-latest-install
cd ~/node-latest-install
curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
./configure --prefix=~/local
make install # ok, fine, this step probably takes more than 30 seconds...
curl https://www.npmjs.org/install.sh | sh

[/pastacode]

L’excellent (comme toujours) Developpez.com sur Node.js
- http://nodejs.developpez.com/tutoriels/javascript/node-js-livre-debutant/
Le script : server.js placé en /Root est lancé par la console : node server.js
- « Hello World » sur le port 8888 comme prévu : RHAAAAA LOVELY !
- Refaire l’install sur un User moins « chaud ».
Importer un flux dans unity : BitStream
- http://docs.unity3d.com/ScriptReference/BitStream.html