| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| background-color: rgb(255, 255, 255); |
| font-size: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="alpha"></div> |
| <div id="beta"></div> |
| <div id="gamma"></div> |
| <div id="frequency"></div> |
| <div id="count"></div> |
| |
| <script> |
| var lastShowAngles = NaN; |
| var lastShowHz = NaN; |
| var fireCount = 0; |
| |
| window.addEventListener('deviceorientation', function(event) { |
| var now = Date.now(); |
| |
| if (isNaN(lastShowAngles) || now - lastShowAngles >= 200) { |
| ['alpha', 'beta', 'gamma'].forEach(function(axis) { |
| document.getElementById(axis).innerHTML = |
| axis + ' = ' + event[axis]; |
| }); |
| lastShowAngles = now; |
| } |
| |
| var elapsedSinceShowHz = now - lastShowHz; |
| if (isNaN(lastShowHz) || elapsedSinceShowHz >= 1000) { |
| document.getElementById('frequency').innerHTML = |
| (fireCount * 1000 / elapsedSinceShowHz) + ' Hz'; |
| |
| fireCount = 0; |
| lastShowHz = now; |
| } |
| |
| fireCount++; |
| }, true); |
| </script> |
| </body> |
| </html> |
