Skip to content

Updating to Modern iOS Support#13

Open
antgiant wants to merge 11 commits into
lamplightdev:gh-pagesfrom
antgiant:gh-pages
Open

Updating to Modern iOS Support#13
antgiant wants to merge 11 commits into
lamplightdev:gh-pagesfrom
antgiant:gh-pages

Conversation

@antgiant

@antgiant antgiant commented Dec 26, 2021

Copy link
Copy Markdown

Apple devices now require a new permission request to access compass (orientation) data. This adds the required permission request. I also went ahead and fixed the orientation and offset issues on Apple. So this pull request also
Closes #7
Closes #8
Closes #9
Closes #11
Closes #12

Fixing call to wrong function name
Does this fix the iOS orientation bug?
Undo last change and remove adjustment as a new test
Heading works now, time to work on offset as browser rotates.
Switching orientation source to window.orientation
@antgiant antgiant changed the title Updating to Modem iOS Support Updating to Modern iOS Support Dec 26, 2021
@suysh

suysh commented Apr 27, 2022

Copy link
Copy Markdown

On Android there is still an offset by 180deg like on your latest readme example page https://compass.wooleys.us/
Device orientation (landscape/portrait) has been taken into account correctly.

My friend with an Iphone 11pro reported the compass website also as not working. Any ideas why?

Regards, Hans

@antgiant

antgiant commented Apr 27, 2022

Copy link
Copy Markdown
Author

Hmm, Is the iPhone 180° offset as well or is it just not working at all? If it is the second have your friend touch the screen. That triggers the second permission prompt that Apple requires to access compass data.

As for your Android I would like to fix that but I cannot replicate it currently. Any chance you are in the Southern (or Eastern) Hemisphere? Maybe this code has an assumption of being in the Northern Hemisphere somewhere? Or Perhaps the Western Hemisphere?

@suysh

suysh commented Apr 28, 2022

Copy link
Copy Markdown

I don't have an Iphone to test, but the wooleys.us was reported completely not working.
OK, I will ask again to test and tap the screen for second permission.

For the android, I'm in Belgium (51°N 4°E), could this explain the offset?

@suysh

suysh commented Apr 28, 2022

Copy link
Copy Markdown

Update from the Iphone-side : all is working fine after tapping the screen : Great job !

@antgiant

Copy link
Copy Markdown
Author

Glad to hear that the iPhone is working right!

Now to figure out the Android issue. I didn't modify the Android code, so I assume your issue exists on the main repo too? I'll look around and see if I can find anything to test. Will report back here.

@suysh

suysh commented Apr 28, 2022

Copy link
Copy Markdown

I think you need for Android:
window.addEventListener("deviceorientationabsolute", handler, true);
And for Iphone:
window.addEventListener("deviceorientation", handler, true);

So, in total (can be you need to add 90deg)

var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf("android")>-1;
if (isAndroid==false) { window.addEventListener("deviceorientation", handler, true); }
else { window.addEventListener("deviceorientationabsolute", handler, true); }

function handler(e) {
      heading = e.webkitCompassHeading || Math.abs(e.alpha - 360);
      plot_compas(heading);
}

@antgiant

antgiant commented Apr 28, 2022

Copy link
Copy Markdown
Author

Ok I updated https://compass.wooleys.us/ to include your suggested changes. Does it work correctly for you now?

(See antgiant@3b8c0b1 and antgiant@055b249 for code changes.)

@suysh

suysh commented Apr 29, 2022

Copy link
Copy Markdown

That's working on my side. Also the orientation from portrait and landscape is fine. Great Job !
I hope this is now working on all types of phones and browsers.

@antgiant

Copy link
Copy Markdown
Author

Thanks for catching the issue. I have added the fix to this pull request. I can confirm that these changes did not break iPhone support. So, hopefully this now works even better for all devices. :-)

@suysh

suysh commented May 2, 2022

Copy link
Copy Markdown

I was checking the compatibility on other browsers and found that the location is not working on Firefox for Android.
In the original https://compass.wooleys.us/ it’s working fine.
Any idea why?

@antgiant

antgiant commented May 2, 2022

Copy link
Copy Markdown
Author

Just to be clear https://lamplightdev.github.io/compass is the original. https://compass.wooleys.us is my updated version. (This pull request would make them both the same.)

Which version is not working with Firefox?

@suysh

suysh commented May 2, 2022

Copy link
Copy Markdown

I downloaded the latest commit and placed it on my site : https://www.dehemen.be/antgiant
To compare I used https://compass.wooleys.us

On Google Chrome for Android both sites are working, orientation = OK, location = OK

I testen on my phone : Firefox For Android 99.2.0 (2022-04-12T04:32:43.163454)
dehemen : compass = 90deg off, location = N/A
wooleys : compass = 90deg off, location = OK

Firefox For Windows 99.0.1 :
The location is working, compass don't know (no compass on my laptop)

@antgiant

antgiant commented May 2, 2022

Copy link
Copy Markdown
Author

Sorry I do not know. The two immediate possibilities I can think of are

  1. Some of the APIs require https but you have a very so it shouldn't be that.
  2. A browser permission not being given.

Hmm I just tested Firefox on a iPhone and there neither your site nor mine shows the location but both show compass data. Maybe Firefox uses a different location API?

I have not touched the location code at all. Guess I'll need to dig in there later.

@suysh

suysh commented Oct 11, 2022 via email

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants