Skip to content

Instantly share code, notes, and snippets.

@whichlight
Created June 24, 2012 02:55
Show Gist options
  • Save whichlight/2981261 to your computer and use it in GitHub Desktop.
Save whichlight/2981261 to your computer and use it in GitHub Desktop.
playing around with accelerometer stuff in firebase
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment