~koehr/koehr.in: sensors/index.html - sourcehut git


                                                                                
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .output {min-height: 1em; background: #EEE; margin: .2em;}
    .output::after {display: block; float: right; color: #888;}
    #motion::after {content: "motion"}
    #proximity::after {content: "proximity"}
    #orientation::after {content: "orientation"}
    #light::after {content: "light"}
  </style>
</head>
<body>
  <div class="output" id="motion">waiting</div>
  <div class="output" id="proximity">waiting</div>
  <div class="output" id="orientation">waiting</div>
  <div class="output" id="light">waiting</div>
  <script>
    const EL = {
      motion: document.getElementById("motion"),
      proximity: document.getElementById("proximity"),
      orientation: document.getElementById("orientation"),
      light: document.getElementById("light")
    }
    function log(where, value) {
      const el = EL[where]
      el.innerText = JSON.stringify(value)
    }

    if (!window.DeviceMotionEvent) EL.motion.innerText = "not supported"
    if (!window.DeviceProximityEvent) EL.proximity.innerText = "not supported"
    if (!window.DeviceOrientationEvent) EL.orientation.innerText = "not supported"
    if (!window.DeviceLightEvent) EL.light.innerText = "not supported"


    window.addEventListener("devicemotion", evt => log('motion', [evt.acceleration.x, evt.acceleration.y, evt.acceleration.z]))
    window.addEventListener("deviceproximity", evt => log('proximity', evt.value))
    window.addEventListener("deviceorientation", evt => log('orientation', [evt.alpha, evt.beta, evt.gamma]))
    window.addEventListener("devicelight", evt => log('light', evt.value))
  </script>
</body>
</html>