sensor-polyfills/index.html at master · kenchris/sensor-polyfills · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<title>Generic Sensor API polyfills example</title>
<script>
  let log = console.log;
  console.log = (message, ...rest) => {
    const div = document.querySelector('#console');
    let child = document.createElement('div');
    if (typeof(message) === 'object') {
      child.innerText = `${message.constructor.name}{${Object.getOwnPropertyNames(message)}}`;
    }
    else
      child.innerText = message;
    div.appendChild(child);

    log.call(console, message, ...rest);
  }
</script>

<script type="module">
import { GeolocationSensor } from './src/geolocation-sensor.js';

window.GeolocationSensor = GeolocationSensor;
</script>

<script type="module">
import {
  AbsoluteOrientationSensor,
  RelativeOrientationSensor,
  Gyroscope,
  Accelerometer,
  LinearAccelerationSensor,
  GravitySensor
} from './src/motion-sensors.js';

let accel = new Accelerometer({ frequency: 50 });

accel.onerror = err => console.log(err);
accel.onreading = (event) => {
  const sensor = event.target;

  const timestamp = document.querySelector('#timestamp');
  timestamp.innerHTML = `Timestamp: ${sensor.timestamp}`;

  const data = document.querySelector('#data');
  data.innerHTML = `[${sensor.x}, ${sensor.y}, ${sensor.z}]`;
}
accel.start();

function format(num) {
  return num.toFixed(3).padStart(6).replace(' ', '&nbsp;');
}

let sensor = new RelativeOrientationSensor();

sensor.onerror = err => console.log(err);

sensor.onreading = (event) => {
    const sensor = event.target;

    let mat = new Float32Array(16);
    sensor.populateMatrix(mat);
    const data = document.querySelector('#data');

    let str = "";
    for (let i = 0; i < 3; i++) {
      const a = format(mat[i * 4 + 0]);
      const b = format(mat[i * 4 + 1]);
      const c = format(mat[i * 4 + 2]);
      str += `[${a}, ${b}, ${c}]<br>`;
    }

    const quat = document.querySelector('#quat');

    let q = sensor.quaternion;
    const a = format(q[0]);
    const b = format(q[1]);
    const c = format(q[2]);
    const d = format(q[3]);

    quat.innerHTML = `
      <br>PureQuaternion: [x: ${a}, y: ${b}, z: ${c}, w: ${d}]`;

    const timestamp = document.querySelector('#timestamp');
    timestamp.innerHTML = `Timestamp: ${sensor.timestamp}`;
  }
  sensor.onactivate = _ => {
    console.log("activating");
    console.log("activated: " + sensor.activated);
  };
  //console.log(sensor);
  //sensor.start();
  //console.log("start/activated: " + sensor.activated);
  //sensor.stop();
  //console.log("stop/activated: " + sensor.activated);


</script>

<body>
  <div id="data"></div>
  <div id="quat"></div>
  <div id="timestamp"></div>
  <div id="console"></div>
</body>
</html>