This code features a start button, stop button, and a timer. The goal is to retrieve information from the phone using events like DeviceOrientationEvent, which includes properties such as absolute, alpha, beta, and gamma (referenced in this link: here). I'm unsure about the process of handling these types of events since it's unfamiliar territory for me.
Once these events are captured, the data will be stored in an array named orientation[].
<template>
<q-page padding>
<div class="text-center text-h5 q-mt-lg">
{{ $t('tasks.motion.title') }}
</div>
<div class="row justify-center q-mt-lg">
<q-btn
@click="startTest"
v-show="!isStarted"
:label="$t('common.start')"
/>
<q-btn
@click="completeTest"
v-show="isStarted"
:label="$t('common.complete')"
/>
</div>
</q-page>
</template>
<script>
import phone from 'modules/phone'
import userinfo from 'modules/userinfo'
import { format as Qformat } from 'quasar'
const TEST_DURATION = 60
export default {
name: 'MotionOrientationPage',
props: {
sKey: String,
tId: Number
},
data: function () {
return {
isSignalCheck: true,
isStarted: false,
isCompleted: false,
timer: undefined,
totalTime: TEST_DURATION,
startedTS: undefined,
completionTS: undefined,
alpha: []
}
},
mounted: async function () {
// Events that are running always
if (window.DeviceMotionEvent) {
console.log('devicemotion was defined')
}
if (window.DeviceOrientationEvent) {
console.log('GyroScope was defined')
}
},
methods: {
async startTest () {
this.isStarted = true
this.startedTS = new Date()
this.startTimer()
phone.screen.forbidSleep()
if (this.isStarted && this.isCompleted === false) {
window.addEventListener('deviceorientation', function (event)
{
this.saveAlpha(event.alpha)
console.log(event.alpha)
})
}
},
saveAlpha (alpha) {
this.alpha.push(alpha)
},
startTimer () {
this.totalTime = TEST_DURATION
this.timer = setInterval(() => this.countDown(), 1000)
},
stopTimer () {
clearInterval(this.timer)
},
countDown () {
if (this.totalTime >= 1) {
this.totalTime--
} else {
this.completeTest()
}
},
completeTest () {
this.isStarted = false
this.completionTS = new Date()
this.stopTimer()
phone.screen.allowSleep()
this.isCompleted = true
// package the report
const sKey = this.sKey
const taskId = parseInt(this.taskId)
const userKey = userinfo.user._key
let report = {
userKey: userKey,
sKey: sKey,
taskId: taskId,
createdTS: new Date(),
startedTS: this.startedTS,
completionTS: this.completionTS,
alpha: this.alpha
}
this.$router.push({ name: 'reportMotionOrientation', params: { report: report } })
}
},
computed: {
minutes () {
return Qformat.pad(Math.floor(this.totalTime / 60))
},
seconds () {
return Qformat.pad(this.totalTime - (this.minutes * 60))
}
},
beforeDestroy: function () {
this.stopTimer()
phone.screen.allowSleep()
}
}
</script>
UPDATE: I encountered an issue with the current code where I receive the error message
Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e:95)