Frontend is working fine but when it points north everytime, it suddenly rotates 360. i did some changings in the handler function but the result goes same.
HTML Structure:
The HTML document starts with the usual structure, including the DOCTYPE declaration, language setting, and metadata.
The contains a flex container with a vertical direction (flex-direction: column) and a height of 100 viewport height (height: 100vh).
Compass Styles:
The compass is styled using CSS.
The .compass class defines the appearance of the compass, including its size, border-radius, and a box-shadow for a visual effect.
The .arrow class represents the arrow within the compass and is styled to create a red triangular arrow at the top of the compass.
The .compass-circle and .my-point classes are used for the background image of the compass and a custom point marker, respectively.
The .start-btn class styles a button to start the compass.
JavaScript Logic:
JavaScript is used to add interactivity and dynamic behavior to the compass.
The script begins by selecting relevant elements from the DOM, including the compass circle, the custom point marker, the start button, and checking if the device is running on iOS.
The init function sets up event listeners and initializes geolocation.
Compass Initialization:
The startCompass function is triggered when the “Start compass” button is clicked. It requests permission to use the device orientation API on iOS devices.
If permission is granted, the handler function is attached to the deviceorientation or deviceorientationabsolute event depending on the device.
Handling Device Orientation:
The handler function is responsible for updating the compass based on the device’s orientation.
It calculates the compass heading (compass) and updates the CSS transform property of the compass circle to rotate it accordingly.
The pointDegree variable is used to determine the angle between the device’s orientation and a predefined point (Qibla geolocation).
Handling Geolocation:
The locationHandler function is triggered when the device’s geolocation is obtained.
It calculates the angle (pointDegree) between the device’s location and the predefined Qibla geolocation.
Calculating Degree to Point:
The calcDegreeToPoint function calculates the angle between the device’s location and the predefined Qibla geolocation using latitude and longitude.
Initialization:
The init function is called to set up event listeners and initialize the compass.
The handler function explaination:
compass = e.webkitCompassHeading || Math.abs(e.alpha – 360);
e refers to the event object passed to the handler function. This object contains information about the device’s orientation.
e.webkitCompassHeading is used to get the compass heading in degrees on devices that support the WebKit-specific webkitCompassHeading property. This property provides the absolute heading in degrees, where 0 degrees points north.
If webkitCompassHeading is not available (for example, on non-WebKit browsers), the code falls back to using e.alpha. e.alpha represents the device’s orientation around its z-axis in degrees, with 0 degrees pointing towards the top of the screen.
Since the alpha value can be negative or greater than 360, Math.abs(e.alpha – 360) is used to ensure the resulting value is positive and within the range of 0 to 360 degrees.
The calculated compass value is then assigned to the variable compass.
compassCircle.style.transform = translate(-50%, -50%) rotate(${-compass}deg);
This line updates the CSS transform property of the .compass-circle element, which represents the circular background of the compass.
The translate(-50%, -50%) part centers the rotation point of the compass at its center. It shifts the rotation axis to the center of the compass element.
The rotate(${-compass}deg) part rotates the compass circle by the negative value of the compass variable. This rotation effectively simulates the movement of a compass needle pointing towards the specified compass heading.
The negative sign is used to ensure that the rotation is in the correct direction. For example, if the compass heading is 30 degrees, the rotation would be -30 degrees to make the compass needle point in the correct direction.
The resulting transform property visually rotates the compass circle based on the calculated compass heading, giving the appearance of a dynamic and responsive compass.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.compass {
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
margin: auto;
}
.compass>.arrow {
position: absolute;
width: 0;
height: 0;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: 30px 20px 0 20px;
border-color: red transparent transparent transparent;
z-index: 1;
}
.compass>.compass-circle,
.compass>.my-point {
position: absolute;
width: 90%;
height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-out;
background: url(https://purepng.com/public/uploads/large/purepng.com-compasscompassinstrumentnavigationcardinal-directionspointsdiagram-1701527842316onq7x.png) center no-repeat;
background-size: contain;
}
.compass>.my-point {
opacity: 0;
width: 20%;
height: 20%;
background: rgb(8, 223, 69);
border-radius: 50%;
transition: opacity 0.5s ease-out;
}
.start-btn {
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="compass">
<div class="arrow"></div>
<div class="compass-circle"></div>
<div class="my-point"></div>
</div>
<button class="start-btn">Start compass</button>
</body>
<script>
const compassCircle = document.querySelector(".compass-circle");
const myPoint = document.querySelector(".my-point");
const startBtn = document.querySelector(".start-btn");
const isIOS =
navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
navigator.userAgent.match(/AppleWebKit/);
function init() {
startBtn.addEventListener("click", startCompass);
navigator.geolocation.getCurrentPosition(locationHandler);
if (!isIOS) {
window.addEventListener("deviceorientationabsolute", handler, true);
}
}
function startCompass() {
if (isIOS) {
DeviceOrientationEvent.requestPermission()
.then((response) => {
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
}
}
function handler(e) {
compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
// ±15 degree
if (
(pointDegree < Math.abs(compass) &&
pointDegree + 15 > Math.abs(compass)) ||
pointDegree > Math.abs(compass + 15) ||
pointDegree < Math.abs(compass)
) {
myPoint.style.opacity = 0;
} else if (pointDegree) {
myPoint.style.opacity = 1;
}
}
let pointDegree;
function locationHandler(position) {
const { latitude, longitude } = position.coords;
pointDegree = calcDegreeToPoint(latitude, longitude);
if (pointDegree < 0) {
pointDegree = pointDegree + 360;
}
}
function calcDegreeToPoint(latitude, longitude) {
// Qibla geolocation
const point = {
lat: 21.422487,
lng: 39.826206
};
const phiK = (point.lat * Math.PI) / 180.0;
const lambdaK = (point.lng * Math.PI) / 180.0;
const phi = (latitude * Math.PI) / 180.0;
const lambda = (longitude * Math.PI) / 180.0;
const psi =
(180.0 / Math.PI) *
Math.atan2(
Math.sin(lambdaK - lambda),
Math.cos(phi) * Math.tan(phiK) -
Math.sin(phi) * Math.cos(lambdaK - lambda)
);
return Math.round(psi);
}
init();
</script>
</html>