Inglorious WebCompass Component
The Compass type keeps device orientation and heading state in the store.
Setup
javascript
import { createStore } from "@inglorious/store"
import { Compass } from "@inglorious/web/compass"
const store = createStore({
types: { Compass },
autoCreateEntities: true,
})
1
2
3
4
5
6
7
2
3
4
5
6
7
This creates a compass entity automatically when autoCreateEntities is enabled.
Entity State
The compass entity tracks:
isSupported— whether device orientation sensors are availableisLoading— whether permission or heading data is pendingisCompassPermissionGranted— whether compass permission was grantedisCompassActive— whether a valid heading is currently activeheading— the latest heading in degrees, ornullerror— the latest normalized{ code, message }errormanualOffset— an optional heading offset in degrees
Events
Drive compass behavior with these events:
javascript
api.notify("compassPermissionsRequest")
api.notify("compassWatch")
api.notify("compassUnwatch")
1
2
3
2
3
What each event does
compassPermissionsRequest— request compass permission when neededcompassWatch— start listening for device orientation eventscompassUnwatch— stop listening for device orientation events
Example
javascript
import { mount, html } from "@inglorious/web"
import { store } from "./store.js"
const renderApp = (api) => {
const compass = api.getEntity("compass")
return html`
<section>
<h2>Compass</h2>
<p>Supported: ${compass.isSupported ? "yes" : "no"}</p>
<p>Permission: ${compass.isPermissionGranted ? "granted" : "unknown"}</p>
<p>Active: ${compass.isActive ? "yes" : "no"}</p>
<p>
Heading:
${compass.heading !== null
? `${compass.heading.toFixed(1)}°`
: "unknown"}
</p>
<p>Error: ${compass.error ? compass.error.message : "none"}</p>
<button @click=${() => api.notify("compassPermissionsRequest")}>
Request Permission
</button>
<button @click=${() => api.notify("compassWatch")}>Start Compass</button>
<button @click=${() => api.notify("compassUnwatch")}>Stop Compass</button>
</section>
`
}
mount(store, renderApp, document.getElementById("root"))
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
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
Notes
The Compass type manages permission, watch lifecycle, and heading updates so your UI can remain declarative and store-driven.