How to get and save DeviceOrientationEvent and DeviceMotionEvent

In this code I have a start and a stop button and a timer.

I want to get information from the phone such as DeviceOrientationEvent with properties such as absolute, alpha, beta and gamma as shown in this link. And I also want to get DeviceMotionEvent.acceleration as shown here. I don't know how do I do something like this, as I never had to use these kind of events.

After I know how to get these events I will be saving them in acceleration and angle.

<template>
  <q-page padding>
    <div class="text-center text-h5 q-mt-lg">
      
    </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,
      positions: [],
      acceleration: [],
      angle: [],
      distance: 0
    }
  },
  mounted: async function () {
  },
  methods: {
    async startTest () {
      this.isStarted = true
      this.startedTS = new Date()
      this.startTimer()
      phone.screen.forbidSleep()
    },

    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,
        positions: this.positions,
        acceleration: this.acceleration,
        angle: this.angle,
        distance: this.distance
      }

      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>

Any help on how to start in this would be highly appreciated. Thank you!

from Recent Questions - Stack Overflow https://ift.tt/3taKE0Y
https://ift.tt/eA8V8J