<!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>