Created
June 24, 2012 02:55
-
-
Save whichlight/2981261 to your computer and use it in GitHub Desktop.
playing around with accelerometer stuff in firebase
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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