Improve 'slopes' input, add compass indicator

src/Logic/Osm/OsmConnection.ts

@@ -551,6 +551,9 @@ export class OsmConnection {
 
     private UpdateCapabilities(): void {
         const self = this
+        if (this.fakeUser) {
+            return
+        }
         this.FetchCapabilities().then(({ api, gpx }) => {
             self.apiIsOnline.setData(api)
             self.gpxServiceIsOnline.setData(gpx)

src/Logic/Web/Orientation.ts

@@ -0,0 +1,80 @@
+import { UIEventSource } from "../UIEventSource"
+
+/**
+ * Exports the device orientation as UIEventSources and detects 'shakes'
+ */
+export class Orientation {
+    public static singleton = new Orientation()
+
+    public gotMeasurement: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    /**
+     * The direction wrt to the magnetic north, with clockwise = positive.
+     * 0 degrees is pointing towards the north
+     * 90° is east,
+     * 180° is south
+     * 270° is west
+     *
+     * Note that this is the opposite of what the DeviceOrientationEvent uses!
+     * */
+    public alpha: UIEventSource<number> = new UIEventSource<number>(undefined)
+    public beta: UIEventSource<number> = new UIEventSource<number>(undefined)
+    public gamma: UIEventSource<number> = new UIEventSource<number>(undefined)
+    /**
+     * Indicates if 'alpha' is with the actual magnetic field or just mimicks that
+     */
+    public absolute: UIEventSource<boolean> = new UIEventSource<boolean>(undefined)
+    /**
+     * A derivate of beta and gamma
+     * An arrow pointing up, rotated with this amount should more or less point towards the sky
+     * Used in the slope input
+     */
+    public arrowDirection: UIEventSource<number> = new UIEventSource(undefined)
+    private _measurementsStarted = false
+
+    constructor() {
+        this.fakeMeasurements()
+    }
+
+    public fakeMeasurements() {
+        this.alpha.setData(45)
+        this.beta.setData(20)
+        this.gamma.setData(30)
+        this.absolute.setData(true)
+        this.gotMeasurement.setData(true)
+    }
+
+    public startMeasurements() {
+        if (this._measurementsStarted) {
+            return
+        }
+        this._measurementsStarted = true
+        console.log("Starting device orientation listener")
+        try {
+            window.addEventListener("deviceorientationabsolute", (e: DeviceOrientationEvent) =>
+                this.update(e)
+            )
+        } catch (e) {
+            console.log("Could not init device orientation api due to", e)
+        }
+    }
+
+    private update(event: DeviceOrientationEvent) {
+        this.gotMeasurement.setData(true)
+        // IF the phone is lying flat, then:
+        // alpha is the compass direction (but not absolute)
+        // beta is tilt if you would lift the phone towards you
+        // gamma is rotation if you rotate the phone along the long axis
+
+        // Note: the event uses _counterclockwise_ = positive for alpha
+        // However, we use _clockwise_ = positive throughout the application, so we use '-' here!
+        this.alpha.setData(Math.floor(360 - event.alpha))
+        this.beta.setData(Math.floor(event.beta))
+        this.gamma.setData(Math.floor(event.gamma))
+        this.absolute.setData(event.absolute)
+        if (this.beta.data < 0) {
+            this.arrowDirection.setData(this.gamma.data + 180)
+        } else {
+            this.arrowDirection.setData(-this.gamma.data)
+        }
+    }
+}