Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating to Modern iOS Support #13

Open
wants to merge 11 commits into
base: gh-pages
Choose a base branch
from

Conversation

antgiant
Copy link

@antgiant antgiant commented Dec 26, 2021

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
Copy link

suysh commented Apr 27, 2022

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
Copy link
Author

antgiant commented Apr 27, 2022

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
Copy link

suysh commented Apr 28, 2022

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
Copy link

suysh commented Apr 28, 2022

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

@antgiant
Copy link
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
Copy link

suysh commented Apr 28, 2022

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
Copy link
Author

antgiant commented Apr 28, 2022

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
Copy link

suysh commented Apr 29, 2022

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
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
Copy link

suysh commented May 2, 2022

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
Copy link
Author

antgiant commented May 2, 2022

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
Copy link

suysh commented May 2, 2022

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
Copy link
Author

antgiant commented May 2, 2022

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
Copy link

suysh commented Oct 11, 2022 via email

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