salmanyaqoob

"reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.LOCATION",
        "reason": "get Qibla direction",
        "usedScene": {
          "ability": [
            "default"

salmanyaqoob

qibla(coordinates) {
    const makkah = {
        latitude: 21.42252,
        longitude: 39.82621
    };

    const term1 = Math.sin(this.degreesToRadians(makkah.longitude) - this.degreesToRadians(coordinates.longitude));
    const term2 = Math.cos(this.degreesToRadians(coordinates.latitude)) * Math.tan(this.degreesToRadians(makkah.latitude));
    const term3 = Math.sin(this.degreesToRadians(coordinates.latitude)) * Math.cos(this.degreesToRadians(makkah.longitude) - this.degreesToRadians(coordinates.longitude));
    const angle = Math.atan2(term1, term2 - term3);

salmanyaqoob

loadCompass(coordinates = {
    latitude: 24.7136,
    longitude: 46.6753
}) {
    var _this = this;
    var qiblaDirection = parseFloat(this.qibla(coordinates));
    console.log("compass: qiblaDirection: " + qiblaDirection);
    _this.needle_transform = "rotate(" + qiblaDirection + "deg)";
    sensor.subscribeCompass({
        success: function (ret) {

salmanyaqoob

initLocationCompass(){
    var _this = this;
    this.locationLoading().then(result => {
        console.info("Location: " + result);
        _this.loadCompass(result);
        _this.isLocationLoading = false;
        _this.isLocationError = false;
    }, error => {
        console.info("Location: error ->" + error);
        _this.isLocationLoading = false;

salmanyaqoob

onReady() {
    this.setBrightnessKeepScreenOn();
},
onInit() {
    this.initLocationCompass();
},
exit(){
    app.terminate();
},
retry(){

salmanyaqoob

data: {
    compass_transform: "rotate(0deg)",
    needle_transform: "rotate(0deg)",
    isLocationLoading: true,
    isLocationError: false,
}

salmanyaqoob

import sensor from '@system.sensor';
import brightness from '@system.brightness';
import geolocation from '@system.geolocation';
import app from '@system.app';

export default {}

salmanyaqoob

<stack class="compass-container" if="{{isLocationLoading === false && isLocationError === false}}">
    <stack class="compass" style="transform:{{compass_transform}}">
        <div class="needle" style="transform:{{needle_transform}}">
            <image src="/common/images/needle.png"></image>
        </div>
        <div class="compass" >
            <image src="/common/images/compass.png"></image>
        </div>
    </stack>
    <div class="qibla_style">

salmanyaqoob

<stack if="{{isLocationLoading === false && isLocationError === true}}" class="error-container">
    <text class="error_title">Location not fetch. Try again</text>
    <div class="button-container">
        <button type="circle" icon="/common/images/exit.png" onclick="exit"></button>
        <button type="circle" icon="/common/images/refresh.png" onclick="retry"></button>
    </div>
</stack>

salmanyaqoob

<stack if="{{isLocationLoading === true && isLocationError === false}}" class="container-location-loading">
    <image src="../../common/images/location_animation.gif" class="location_loading" />
</stack>