whichlight/firebase-accelerometer

## firebase-accelerometer


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title></title>
    <script type='text/javascript' src='http://static.firebase.com/demo/firebase.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>


	<style type="text/css">
		body {
			font-family: sans-serif;
		}

	    .main {
			border: 1px solid black;
			box-shadow: 10px 10px 5px #888;
			border-radius: 12px;
			padding: 20px;
			background-color: #ddd;
			margin: 25px;
			width: 450px;
			margin-left:auto;
			margin-right:auto;
		}

		.logo {
			width:275px;
			margin-left: auto;
			margin-right: auto;
			display: block;
			padding: 15px;
		}

		.container {
			-webkit-perspective: 300;
			perspective: 300;
		}
	</style>

</head>
<body>
	<div class="main">
		<h2>Device Motion</h2>
		<table>
			<tr>
	    		<td>DANCE Supported</td><td id="dmEvent"></td>
	    	</tr>
			<tr>
				<td>accelerationIncludingGravity</td><td id="moAccel"></td>
			</tr>
			<tr>
				<td>Calculated Left-Right Tilt</td><td id="moCalcTiltLR"></td>
			</tr>
			<tr>
				<td>Calculated Front-Back Tilt</td><td id="moCalcTiltFB"></td>
			</tr>
		</table>
	</div>

	<div class="container" style="-webkit-perspective: 300; perspective: 300;">
		<img src="html5_logo.png" id="imgLogo" class="logo">
	</div>

	<script type="text/javascript">
          var danceRef = new Firebase('http://demo.firebase.com/guest283401817');

		init2();

		function init() {
			if (window.DeviceMotionEvent) {
				console.log("DeviceMotionEvent supported");
			} else if ('listenForDeviceMovement' in window) {
				console.log("DeviceMotionEvent supported [listenForDeviceMovement]");
			}
		}

		function init2() {
			if ((window.DeviceMotionEvent) || ('listenForDeviceMovement' in window)) {
				window.addEventListener('devicemotion', deviceMotionHandler3, false);
			} else {
				document.getElementById("dmEvent").innerHTML = "Not supported on your device or browser.  Sorry."
			}
		}

		function deviceMotionHandler3(eventData) {
			// Grab the acceleration including gravity from the results
			var a = eventData.accelerationIncludingGravity;


			// Display the acceleration and calculated values
			document.getElementById("moAccel").innerHTML = a.x;
			document.getElementById("moCalcTiltLR").innerHTML = a.y;
			document.getElementById("moCalcTiltFB").innerHTML = a.z;
		    var rawAcceleration=[a.x,a.y,a.z]
            //use this to put in the database
            //danceRef.set({"x":a.x, "y":a.y,"z":a.z});

            //add more fun for others!
            //danceRef.on('child_added', drawPixel);


		}

	</script>

</body>
</html>


	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type='text/javascript' src='http://static.firebase.com/demo/firebase.js'></script>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>


	<style type="text/css">
	body {
	font-family: sans-serif;
	}

	.main {
	border: 1px solid black;
	box-shadow: 10px 10px 5px #888;
	border-radius: 12px;
	padding: 20px;
	background-color: #ddd;
	margin: 25px;
	width: 450px;
	margin-left:auto;
	margin-right:auto;
	}

	.logo {
	width:275px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 15px;
	}

	.container {
	-webkit-perspective: 300;
	perspective: 300;
	}
	</style>

	</head>
	<body>
	<div class="main">
	<h2>Device Motion</h2>
	<table>
	<tr>
	<td>DANCE Supported</td><td id="dmEvent"></td>
	</tr>
	<tr>
	<td>accelerationIncludingGravity</td><td id="moAccel"></td>
	</tr>
	<tr>
	<td>Calculated Left-Right Tilt</td><td id="moCalcTiltLR"></td>
	</tr>
	<tr>
	<td>Calculated Front-Back Tilt</td><td id="moCalcTiltFB"></td>
	</tr>
	</table>
	</div>

	<div class="container" style="-webkit-perspective: 300; perspective: 300;">
	<img src="html5_logo.png" id="imgLogo" class="logo">
	</div>

	<script type="text/javascript">
	var danceRef = new Firebase('http://demo.firebase.com/guest283401817');

	init2();

	function init() {
	if (window.DeviceMotionEvent) {
	console.log("DeviceMotionEvent supported");
	} else if ('listenForDeviceMovement' in window) {
	console.log("DeviceMotionEvent supported [listenForDeviceMovement]");
	}
	}

	function init2() {
	if ((window.DeviceMotionEvent) \|\| ('listenForDeviceMovement' in window)) {
	window.addEventListener('devicemotion', deviceMotionHandler3, false);
	} else {
	document.getElementById("dmEvent").innerHTML = "Not supported on your device or browser. Sorry."
	}
	}

	function deviceMotionHandler3(eventData) {
	// Grab the acceleration including gravity from the results
	var a = eventData.accelerationIncludingGravity;


	// Display the acceleration and calculated values
	document.getElementById("moAccel").innerHTML = a.x;
	document.getElementById("moCalcTiltLR").innerHTML = a.y;
	document.getElementById("moCalcTiltFB").innerHTML = a.z;
	var rawAcceleration=[a.x,a.y,a.z]
	//use this to put in the database
	//danceRef.set({"x":a.x, "y":a.y,"z":a.z});

	//add more fun for others!
	//danceRef.on('child_added', drawPixel);



	}

	</script>

	</body>
	</html>