Motion example

The index.html file containing JavaScript that makes use of the Motion API functionality is listed below.

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
  <title>Sensor Motion usage example</title>
  <link rel="stylesheet" href="../assets/style.css" type="text/css" media="all"/>
  <script type="text/javascript">
    var sensors = [];

    var errorCallback = function (error) {
      printText(JSON.stringify(error.message, null, 2));
    };

    function printText(str) {
      var d = document.getElementById('text-box');
      d.appendChild(document.createTextNode(str));
      d.appendChild(document.createElement('br'));
      d.scrollTop = d.scrollHeight;
    }

    function clearSensors(id) {
      document.getElementById('text-box').innerHTML = "";

      var table = document.getElementById('data-table');
      while (table.firstChild) {
        table.removeChild(table.firstChild);
      }

      for (var i in  sensors) {
        sensors[i].stop();
      }

      sensors = [];
    }

    function addSensor() {
      var sensorType = document.getElementById('sensor-select').value;
      var interval = parseInt(document.getElementById('delay').value);

      var table = document.getElementById('data-table');
      var tr = document.createElement('tr');
      tr.style.height = '30px';

      var td1 = document.createElement('td');
      td1.style.width = "30%";
      td1.style.textAlign = "center";
      td1.innerHTML = sensorType + "#" + sensors.length + '<br>' + "[" + interval + " ms]";

      var td2 = document.createElement('td');
      td2.style.fontSize = '10px';
      td2.style.width = "70%";

      var pre = document.createElement('pre');
      td2.appendChild(pre);

      tr.appendChild(td1);
      tr.appendChild(td2);

      table.appendChild(tr);

      var dataCallback = function (data) {
        pre.innerHTML = JSON.stringify(data, null, 2);
      };

      var sensor;

      switch (sensorType) {
        case "deviceMotion":
          sensor = new window.launchbox.Motion.DeviceMotion(interval, dataCallback, errorCallback);
          break;
        case "altimeter":
          sensor = new window.launchbox.Motion.Altimeter(interval, dataCallback, errorCallback);
          break;
        case "activity":
          sensor = new window.launchbox.Motion.Activity(interval, dataCallback, errorCallback);
          break;
        case "pedometer":
          sensor = new window.launchbox.Motion.Pedometer(interval, dataCallback, errorCallback);
          break;
        default:
          throw new Error("Unrecognised sensor type!");
      }

      sensors.push(sensor);
    }

    function startSensors() {
      for (var i in  sensors) {
        sensors[i].start();
      }

    }

    function stopSensors() {
      for (var i in  sensors) {
        sensors[i].stop();
      }
    }

  </script>
  <style type="text/css">
    input[type="button"] {
      width: 270px;
      margin: 2px;
      padding: 2px;
    }

    div {
      margin: 5px 0 5px 0;
    }

    #delay {
      width: 100px;
      height: 40px;
      font-size: 18px;
      padding: 2px;
    }

    #sensor-select {
      width: 140px;
      height: 50px;
      font-size: 18px;
      padding: 2px;
    }

  </style>
</head>
<body>
<header>
  <h3>AMP Hybrid Client <span>Sensor Motion usage example</span>
  </h3>
</header>
<div style="text-align: center">
  <label for="sensor-select">Select sensor</label>
  <select id="sensor-select">
    <option value="altimeter" selected>Altimeter</option>
    <option value="activity">Activity</option>
    <option value="deviceMotion">Device Motion</option>
    <option value="pedometer">Pedometer</option>
  </select>
  <input id="delay" type="tel" value="1000" title="DelayValue"/>ms
  <input type="button" onclick="clearSensors()" value="clear()"/>
  <input type="button" onclick="addSensor()" value="addSensor()"/>
  <input type="button" onclick="startSensors()" value="start()"/>
  <input type="button" onclick="stopSensors()" value="stop()"/>
</div>
<div id="text-box"></div>
<table id="data-table" width="100%" border="1"></table>
</body>
</html>

The contents of the cache manifest file called manifest.appcache for this application are listed below:

CACHE MANIFEST

CACHE:
index.html

NETWORK:
*

Motion

Motion example

Related topics