roger-random / compass Goto Github PK

According to MDN, CSS writing-mode: sideways-lr should rotate text 90 degrees counter-clockwise for vertical display.
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Landscape orientation for this app wants such behavior for header and footer text. Unfortunately, as of Chrome 112 this behavior is not working. (See discrepancy between live table vs. image of desired output on above link.)

As a workaround, this app uses writing-mode: vertical-lr which rotates text 90 degrees clockwise, followed by transform: rotate(180deg) to rotate it another 180 degrees.

Replace the workaround with correct CSS declaration once browser bug is fixed.

Relevant source: two locations in src/app/app.component.css

This compass web app uses W3C Magnetometer API which is still a work in progress and not widely available. As of this writing, it means the app is effectively restricted to Chrome browser on Android devices, and even then the user has to go to chrome://flags to enable "Generic Sensor Extra Classes" before this app will run.

Once the API is official and supported by default on more browsers, this app should be updated to match.

Relevant source code: /src/app/magnetometer.service.ts

When magnetometer API is created, one of the possible parameters is referenceFrame:'screen' which is intended to automatically transform magnetometer vector in sync with screen orientation as per https://developer.chrome.com/articles/generic-sensor/#synchronization-with-screen-coordinates

Unfortunately, as of Chrome 112 landscape transformation used by browser is backwards. When in landscape-right, the applied transform is landscape-left. And vice versa.

To workaround this issue, src/app/compass-needle/compass-needle.component.css applies a 180 degree transformation when in landscape mode in order to flip the data back.

Once the browser bug is fixed, this workaround should be removed.