salmanyaqoob

@import '../../common/style.css';

.image-player {
    width: 256px;
    height: 256px;
}

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container">
        <div id="effect1" class="changeColor"></div>
        <div class="space"></div>
        <div id="effect2" class="circleAnimation"></div>
        <input class="backBtn" type="button" value="Back" onclick="backAction"></input>
    </div>
</stack>

salmanyaqoob

import utils from '../../common/utils.js';

export default {
    backAction() {
        utils.backToHome();
    },
}

salmanyaqoob

.stack {
    width: 454px;
    height: 454px;
    justify-content: center;
    background-color: whitesmoke;
}
.container {
    background-color: whitesmoke;
}
.compass-container {

salmanyaqoob

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

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

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

export default {}

salmanyaqoob

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

salmanyaqoob

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