WebCompass/index.html at main · educationxrmhmp/WebCompass · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Compass (iOS + Android)</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 2em;
    }
    #heading {
      font-size: 2em;
      margin-top: 1em;
    }
  </style>
</head>
<body>
  <h1>🧭 Cross-Platform Compass</h1>
  <button id="startBtn">Start Compass</button>
  <p id="heading">Waiting for permission...</p>

  <script>
    const headingElem = document.getElementById("heading");

    function handleOrientation(event) {
      let heading;

      if (typeof event.webkitCompassHeading !== "undefined") {
        // ✅ iOS Safari (gives true heading)
        heading = event.webkitCompassHeading;
      } else if (event.absolute && event.alpha !== null) {
        // ✅ Android Chrome (calculate heading from alpha)
        heading = 360 - event.alpha;
      }

      if (heading !== undefined) {
        heading = (heading + 360) % 360; // Normalize
        headingElem.textContent = `Heading: ${Math.round(heading)}°`;
      } else {
        headingElem.textContent = "Compass data unavailable.";
      }
    }

    function startCompass() {
      // iOS 13+ requires permission via gesture
      if (
        typeof DeviceOrientationEvent !== "undefined" &&
        typeof DeviceOrientationEvent.requestPermission === "function"
      ) {
        DeviceOrientationEvent.requestPermission()
          .then(response => {
            if (response === "granted") {
              window.addEventListener("deviceorientation", handleOrientation, true);
            } else {
              headingElem.textContent = "Permission denied.";
            }
          })
          .catch(err => {
            headingElem.textContent = "Error: " + err.message;
          });
      } else {
        // Android or older iOS
        if (/iPad|iPhone|iPod/.test(navigator.userAgent) ||
            (navigator.userAgent.includes("Mac") && "ontouchend" in document)) {
          // iOS fallback
          window.addEventListener("deviceorientation", handleOrientation, true);
        } else {
          // Android
          window.addEventListener("deviceorientationabsolute", handleOrientation, true);
        }
      }
    }

    document.getElementById("startBtn").addEventListener("click", startCompass);
  </script>
</body>
</html>