From b42d6ba8027edf177afa04045ea11b4722638759 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 17:39:09 -0500 Subject: [PATCH 01/11] Adding new iOS Safari Permission Prompts --- js/app.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/js/app.js b/js/app.js index e9cbee6..5607af8 100644 --- a/js/app.js +++ b/js/app.js @@ -384,6 +384,42 @@ return degrees + "° " + minutes + "' " + seconds + "\" " + direction; } +/** + * @param callback function(error) + * @author YellowAfterlife + **/ +function requestDeviceOrientation(callback) { + if (window.DeviceOrientationEvent == null) { + callback(new Error("DeviceOrientation is not supported.")); + } else if (DeviceOrientationEvent.requestPermission) { + DeviceOrientationEvent.requestPermission().then(function(state) { + if (state == "granted") { + callback(null); + } else callback(new Error("Permission denied by user")); + }, function(err) { + callback(err); + }); + } else { // no need for permission + callback(null); + } +} + +function firstClick() { + requestDeviceMotion(function(err) { + if (err == null) { + window.removeEventListener("click", firstClick); + window.removeEventListener("touchend", firstClick); + window.addEventListener("devicemotion", function(e) { + // access e.acceleration, etc. + }); + } else { + // failed; a JS error object is stored in `err` + } + }); +} +window.addEventListener("click", firstClick); +window.addEventListener("touchend", firstClick); + if (screen.width > screen.height) { defaultOrientation = "landscape"; } else { From 70ece7c4efb99f3996137a2242e5a0fbae19eded Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 17:41:53 -0500 Subject: [PATCH 02/11] Bug fix Fixing call to wrong function name --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 5607af8..ca596df 100644 --- a/js/app.js +++ b/js/app.js @@ -405,7 +405,7 @@ function requestDeviceOrientation(callback) { } function firstClick() { - requestDeviceMotion(function(err) { + requestDeviceOrientation(function(err) { if (err == null) { window.removeEventListener("click", firstClick); window.removeEventListener("touchend", firstClick); From 60a34be4ad6c3df3e29df7a58cefd2c49ec71245 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 17:53:51 -0500 Subject: [PATCH 03/11] Testing a Fix Does this fix the iOS orientation bug? --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index ca596df..28ec5fc 100644 --- a/js/app.js +++ b/js/app.js @@ -199,7 +199,7 @@ if (typeof rose.style.transform !== "undefined") { rose.style.transform = "rotateZ(" + positionCurrent.hng + "deg)"; } else if (typeof rose.style.webkitTransform !== "undefined") { - rose.style.webkitTransform = "rotateZ(" + positionCurrent.hng + "deg)"; + rose.style.webkitTransform = "rotateZ(" + (-1*positionCurrent.hng) + "deg)"; } } else { // device can't show heading From 2a32a597ef3df563f273109662293af5044742d1 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 18:03:44 -0500 Subject: [PATCH 04/11] More testing Undo last change and remove adjustment as a new test --- js/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/app.js b/js/app.js index 28ec5fc..d178cfe 100644 --- a/js/app.js +++ b/js/app.js @@ -189,7 +189,7 @@ } } - positionCurrent.hng = heading + adjustment; + positionCurrent.hng = heading;// + adjustment; var phase = positionCurrent.hng < 0 ? 360 + positionCurrent.hng : positionCurrent.hng; positionHng.textContent = (360 - phase | 0) + "°"; @@ -199,7 +199,7 @@ if (typeof rose.style.transform !== "undefined") { rose.style.transform = "rotateZ(" + positionCurrent.hng + "deg)"; } else if (typeof rose.style.webkitTransform !== "undefined") { - rose.style.webkitTransform = "rotateZ(" + (-1*positionCurrent.hng) + "deg)"; + rose.style.webkitTransform = "rotateZ(" + positionCurrent.hng + "deg)"; } } else { // device can't show heading From 7eb658b34673abc71f5c7bc0c4bf1a5f240d1044 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 18:09:43 -0500 Subject: [PATCH 05/11] Try two on heading fix --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index d178cfe..0622c5a 100644 --- a/js/app.js +++ b/js/app.js @@ -189,7 +189,7 @@ } } - positionCurrent.hng = heading;// + adjustment; + positionCurrent.hng = -1*heading;// + adjustment; var phase = positionCurrent.hng < 0 ? 360 + positionCurrent.hng : positionCurrent.hng; positionHng.textContent = (360 - phase | 0) + "°"; From 900b70c80651b1b03ee27ca3149943c1b6145d10 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 18:20:35 -0500 Subject: [PATCH 06/11] Offset fix attempt Heading works now, time to work on offset as browser rotates. --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 0622c5a..3199dd0 100644 --- a/js/app.js +++ b/js/app.js @@ -189,7 +189,7 @@ } } - positionCurrent.hng = -1*heading;// + adjustment; + positionCurrent.hng = -1*heading + adjustment; var phase = positionCurrent.hng < 0 ? 360 + positionCurrent.hng : positionCurrent.hng; positionHng.textContent = (360 - phase | 0) + "°"; From 61349034abd92d8025662ee73bb319bd6467d2dd Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 18:27:04 -0500 Subject: [PATCH 07/11] Make heading change WebKit only --- js/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/app.js b/js/app.js index 3199dd0..1e0a6a3 100644 --- a/js/app.js +++ b/js/app.js @@ -153,7 +153,7 @@ var heading = event.alpha; if (typeof event.webkitCompassHeading !== "undefined") { - heading = event.webkitCompassHeading; //iOS non-standard + heading = -1*event.webkitCompassHeading; //iOS non-standard } var orientation = getBrowserOrientation(); @@ -189,7 +189,7 @@ } } - positionCurrent.hng = -1*heading + adjustment; + positionCurrent.hng = heading + adjustment; var phase = positionCurrent.hng < 0 ? 360 + positionCurrent.hng : positionCurrent.hng; positionHng.textContent = (360 - phase | 0) + "°"; From dbbbc46bede3a28cc98954bce9972707583847f1 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 18:38:06 -0500 Subject: [PATCH 08/11] Switching orientation source Switching orientation source to window.orientation --- js/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 1e0a6a3..01d546c 100644 --- a/js/app.js +++ b/js/app.js @@ -158,6 +158,7 @@ var orientation = getBrowserOrientation(); + if (typeof heading !== "undefined" && heading !== null) { // && typeof orientation !== "undefined") { // we have a browser that reports device heading and orientation @@ -189,7 +190,7 @@ } } - positionCurrent.hng = heading + adjustment; + positionCurrent.hng = heading + window.orientation;// + adjustment; var phase = positionCurrent.hng < 0 ? 360 + positionCurrent.hng : positionCurrent.hng; positionHng.textContent = (360 - phase | 0) + "°"; From 8366f93e47090b01fc5b26b46607b369190dd798 Mon Sep 17 00:00:00 2001 From: antgiant Date: Sat, 25 Dec 2021 18:45:12 -0500 Subject: [PATCH 09/11] Trying to invert orientation offset --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 01d546c..3584a64 100644 --- a/js/app.js +++ b/js/app.js @@ -190,7 +190,7 @@ } } - positionCurrent.hng = heading + window.orientation;// + adjustment; + positionCurrent.hng = heading - window.orientation;// + adjustment; var phase = positionCurrent.hng < 0 ? 360 + positionCurrent.hng : positionCurrent.hng; positionHng.textContent = (360 - phase | 0) + "°"; From 7f172a97a4f07bc51b2f02fd484d69d8b7703ed3 Mon Sep 17 00:00:00 2001 From: antgiant Date: Thu, 28 Apr 2022 18:58:34 -0400 Subject: [PATCH 10/11] Using Device Orientation Absolute when avaliable. --- js/app.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/app.js b/js/app.js index 3584a64..0b862e7 100644 --- a/js/app.js +++ b/js/app.js @@ -150,11 +150,7 @@ // called on device orientation change function onHeadingChange(event) { - var heading = event.alpha; - - if (typeof event.webkitCompassHeading !== "undefined") { - heading = -1*event.webkitCompassHeading; //iOS non-standard - } + var heading = -1*event.webkitCompassHeading || Math.abs(event.alpha - 360); var orientation = getBrowserOrientation(); @@ -430,7 +426,11 @@ window.addEventListener("touchend", firstClick); debugOrientationDefault.textContent = defaultOrientation; } - window.addEventListener("deviceorientation", onHeadingChange); + if ('ondeviceorientationabsolute' in window) { + window.addEventListener("deviceorientationabsolute", onHeadingChange, true); + } else { + window.addEventListener("deviceorientation", onHeadingChange, true); + } document.addEventListener("fullscreenchange", onFullscreenChange); document.addEventListener("webkitfullscreenchange", onFullscreenChange); From 4f4df5f3b87a53f0f43fa681eba4e4d67260850f Mon Sep 17 00:00:00 2001 From: antgiant Date: Thu, 28 Apr 2022 20:43:59 -0400 Subject: [PATCH 11/11] Attempting to fix Android part 2 --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 0b862e7..bb791d1 100644 --- a/js/app.js +++ b/js/app.js @@ -150,7 +150,7 @@ // called on device orientation change function onHeadingChange(event) { - var heading = -1*event.webkitCompassHeading || Math.abs(event.alpha - 360); + var heading = -1*event.webkitCompassHeading || event.alpha; var orientation = getBrowserOrientation();