unoseistres · November 12, 2014 05:03
diff --git a/mobile.html b/mobile.html
 <html>
 	<head>
 		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
 		<script type="text/javascript">

 		
 			var socket = io.connect('http://104.131.93.171');
 			
 			socket.on('connect', function() {
 				console.log("Connected biatch");
 				/* console.log("mobile"); */
 			});
 		
 			socket.on('chatmessage', function (data) {
 				console.log(data);
 				document.getElementById('messages').innerHTML = "" + data + 
 + "" + document.getElementById('messages').innerHTML;
 			});
 	
 	
 			socket.on ('backcolor', function(data){
 				console.log(data);
 				/* document.body.style.backgroundColor= "#000000"; */
 				/* document.getElementById('body').innerHTML = "#000000"; */				
 			});
 			
 /////////MOBILE ACCEL CODE 
 			 			
 var isMobile = {
 					Android: function() {
 						return navigator.userAgent.match(/Android/i);
 						},
 					BlackBerry: function() {
 						return navigator.userAgent.match(/BlackBerry/i);
 						},
 					iOS: function() {
 						return navigator.userAgent.match(/iPhone|iPad|iPod/i);
 						},
 					Opera: function() {
 						return navigator.userAgent.match(/Opera Mini/i);
 						},
 					Windows: function() {
 						return navigator.userAgent.match(/IEMobile/i);
 						},
 					any: function() {

 return (isMobile.Android() || isMobile.BlackBerry() || 	isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
 };

 
 //check acceleramtor ONLY if it is MOBILE
 
 	
 			window.addEventListener('load', function() {
 				
 				window.URL = window.URL || window.webkitURL || window.mozURL || 				window.msURL; navigator.getUserMedia = navigator.getUserMedia ||				navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 				navigator.msGetUserMedia;
 				
 		 		 
 		 
 			window.ondevicemotion = function(e) {
 				/* console.log("hi"); */
 				var x = e.accelerationIncludingGravity.x;
 				var y = e.accelerationIncludingGravity.y;
 				var z = e.accelerationIncludingGravity.z;
 									
 				accX = Math.round(e.accelerationIncludingGravity.x*10) / 10;  
 				accY = Math.round(e.accelerationIncludingGravity.y*10) / 10; 
 				accZ = Math.round(e.accelerationIncludingGravity.z*10) / 10;  
 		    
 				movement = 10;
 		    
 				x = -(accX / 10) * movement;
 				y = -(accY / 10) * movement;
 				z = -(accY / 10) * movement;
 		    
 				
 				
 				if (x >= 2){
 			
 				console.log ("greater than two");
 				var color = (document.body.style.backgroundColor= "#F25858");
 				socket.emit('backcolor', color);
 				
 				
 									
 				}else{
 				console.log ("less than two");
 				var color =	(document.body.style.backgroundColor= "#AF88EC");
 				socket.emit('backcolor', color);
 				}
 				
       		
 			document.getElementById("accel").innerHTML = x + " " + y + " " + z;
 			
 			}
 		
 
 });

 			//window.addEventListener('onchange', sendColor);
 			
 			
 			
 			var sendColor = function(body){
 	
 					console.log("coloring" + body);
 					socket.emit('backcolor', body);
 					/* document.body.style.backgroundColor = "yellow"; */
 			};

 			
 			var sendmessage = function(message) {
 				console.log("chatmessage: " + message);
 				socket.emit('chatmessage', message);
 				
 			};
 			

 			
 						
 		</script>
 		<style>
 		#accel2 {
 		visibility: hidden;
 		}
 		
 		body{
 			background-color: fuchsia;
 		}
 		</style>
 			
 	</head>
 <body>
 
 <p id="accel"> "accelerometer of phone"</p>
 <p id="accel2"> "accelerometer of phone"</p>
 
 <div id="messages">
 No Messages Yet
 </div>
 <input type="text" id="message" name="message">
 <input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">
 
 <input id="body" name="body">
 <input type="submit" value="color" 
 onclick="sendColor(document.body.style.backgroundColor);">
 
 <script>  </script>
 
 
 
 
 <!--  //color selector  -->
 <input type = "color" onchange="selectColor(this.value)"> 
 </body>
 </html>
	<html>
	<head>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">


	var socket = io.connect('http://104.131.93.171');

	socket.on('connect', function() {
	console.log("Connected biatch");
	/* console.log("mobile"); */
	});

	socket.on('chatmessage', function (data) {
	console.log(data);
	document.getElementById('messages').innerHTML = "" + data +
	+ "" + document.getElementById('messages').innerHTML;
	});


	socket.on ('backcolor', function(data){
	console.log(data);
	/* document.body.style.backgroundColor= "#000000"; */
	/* document.getElementById('body').innerHTML = "#000000"; */
	});

	/////////MOBILE ACCEL CODE

	var isMobile = {
	Android: function() {
	return navigator.userAgent.match(/Android/i);
	},
	BlackBerry: function() {
	return navigator.userAgent.match(/BlackBerry/i);
	},
	iOS: function() {
	return navigator.userAgent.match(/iPhone\|iPad\|iPod/i);
	},
	Opera: function() {
	return navigator.userAgent.match(/Opera Mini/i);
	},
	Windows: function() {
	return navigator.userAgent.match(/IEMobile/i);
	},
	any: function() {

	return (isMobile.Android() \|\| isMobile.BlackBerry() \|\| isMobile.iOS() \|\| isMobile.Opera() \|\| isMobile.Windows());
	}
	};


	//check acceleramtor ONLY if it is MOBILE


	window.addEventListener('load', function() {

	window.URL = window.URL \|\| window.webkitURL \|\| window.mozURL \|\| window.msURL; navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia;



	window.ondevicemotion = function(e) {
	/* console.log("hi"); */
	var x = e.accelerationIncludingGravity.x;
	var y = e.accelerationIncludingGravity.y;
	var z = e.accelerationIncludingGravity.z;

	accX = Math.round(e.accelerationIncludingGravity.x*10) / 10;
	accY = Math.round(e.accelerationIncludingGravity.y*10) / 10;
	accZ = Math.round(e.accelerationIncludingGravity.z*10) / 10;

	movement = 10;

	x = -(accX / 10) * movement;
	y = -(accY / 10) * movement;
	z = -(accY / 10) * movement;



	if (x >= 2){

	console.log ("greater than two");
	var color = (document.body.style.backgroundColor= "#F25858");
	socket.emit('backcolor', color);



	}else{
	console.log ("less than two");
	var color = (document.body.style.backgroundColor= "#AF88EC");
	socket.emit('backcolor', color);
	}


	document.getElementById("accel").innerHTML = x + " " + y + " " + z;

	}


	});

	//window.addEventListener('onchange', sendColor);



	var sendColor = function(body){

	console.log("coloring" + body);
	socket.emit('backcolor', body);
	/* document.body.style.backgroundColor = "yellow"; */
	};


	var sendmessage = function(message) {
	console.log("chatmessage: " + message);
	socket.emit('chatmessage', message);

	};




	</script>
	<style>
	#accel2 {
	visibility: hidden;
	}

	body{
	background-color: fuchsia;
	}
	</style>

	</head>
	<body>

	<p id="accel"> "accelerometer of phone"</p>
	<p id="accel2"> "accelerometer of phone"</p>

	<div id="messages">
	No Messages Yet
	</div>
	<input type="text" id="message" name="message">
	<input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">

	<input id="body" name="body">
	<input type="submit" value="color"
	onclick="sendColor(document.body.style.backgroundColor);">

	<script> </script>




	<!-- //color selector -->
	<input type = "color" onchange="selectColor(this.value)">
	</body>
	</html>