Skip to content

Commit

Permalink
💄 close #156
Browse files Browse the repository at this point in the history
  • Loading branch information
DavidZhang73 committed Mar 16, 2022
1 parent 49d52d5 commit bfe9573
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 143 deletions.
135 changes: 8 additions & 127 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,121 +1,25 @@
<template>
<q-layout
view="hHh Lpr lff"
style="height: 100%"
<q-scroll-area
v-if="$q.platform.is.desktop"
style="height: 100vh; max-width: 100vw;"
:thumb-style="{ right: '3px', width: '4px' }"
>
<q-header
:class="['header', {'text-dark': !$q.dark.isActive}]"
:elevated="!$q.dark.isActive"
>
<q-toolbar>
<q-btn
flat
round
dense
:icon="drawer ? 'menu_open' : 'menu'"
@click="drawer = !drawer"
></q-btn>
<q-toolbar-title class="text-center">
<a
class="q-mr-sm"
href="https://www.anu.edu.au/"
target="_blank"
>
<q-avatar
square
size="md"
>
<img
v-if="q.dark.isActive"
src="/img/logo-dark.svg"
alt="logo"
>
<img
v-else
src="/img/logo.svg"
alt="logo"
>
</q-avatar>
</a>
<router-link
class="vertical-middle"
:to="'/'"
>
ANU CVML Video Annotation Tool
</router-link>
</q-toolbar-title>
<q-circular-progress
v-if="annotationStore.hasVideo && annotationStore.isCaching"
class="q-mx-sm"
show-value
font-size="10px"
:value="progress"
size="30px"
:thickness="0.2"
color="primary"
track-color="grey-3"
>
{{ progress }}%
<q-tooltip
anchor="center left"
self="center right"
>
Caching video frames. VideoLoader: {{ useV2 ? 'V2' : 'V1' }}.
</q-tooltip>
</q-circular-progress>
<q-btn
:icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
flat
round
dense
@click="q.dark.toggle"
></q-btn>
</q-toolbar>
</q-header>
<Drawer></Drawer>
<q-page-container>
<q-page padding>
<template v-if="annotationStore.hasVideo">
<VideoLoaderV2 v-if="useV2"/>
<VideoLoaderV1 v-else/>
<ActionThumbnailPreview v-if="preferenceStore.actions"/>
</template>
<router-view></router-view>
</q-page>
</q-page-container>
<q-footer class="bg-transparent">
<q-toolbar>
<q-toolbar-title
class="text-center text-caption"
:class="q.dark.isActive ? 'text-gray-4': 'text-black'"
>
Copyright © 2022,
<a
href="https://github.com/anucvml/vidat"
target="_blank"
>
ANU CVML
</a>. All rights reserved.
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
<Layout/>
</q-scroll-area>
<Layout v-else/>
</template>

<script setup>
import { useFavicon, usePreferredDark } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useQuasar } from 'quasar'
import { computed } from 'vue'
import ActionThumbnailPreview from '~/components/ActionThumbnailPreview.vue'
import VideoLoaderV1 from '~/components/VideoLoaderV1.vue'
import VideoLoaderV2 from '~/components/VideoLoaderV2.vue'
import Layout from '~/components/Layout.vue'
import { useAnnotation } from '~/hooks/annotation.js'
import utils from '~/libs/utils.js'
import { useAnnotationStore } from '~/store/annotation.js'
import { useConfigurationStore } from '~/store/configuration.js'
import { usePreferenceStore } from '~/store/preference.js'
import Drawer from './components/Drawer.vue'
import { useMainStore } from './store/index.js'
const mainStore = useMainStore()
Expand All @@ -127,29 +31,6 @@ const preferenceStore = usePreferenceStore()
const q = useQuasar()
q.dark.set('auto')
const useV2 = computed(() => {
let ret
if (preferenceStore.decoder === 'v1') {
ret = false
} else if (preferenceStore.decoder === 'v2') {
ret = true
} else {
const isSupported = window.VideoDecoder && window.EncodedVideoChunk && window.OffscreenCanvas
ret = isSupported && (mainStore.videoFormat === null || mainStore.videoFormat === 'mp4')
}
console.debug('VideoLoader:', ret ? 'V2' : 'V1')
return ret
})
const progress = computed(() => {
if (!isNaN(annotationStore.video.frames && annotationStore.cachedFrameList.length)) {
return Math.round(
annotationStore.cachedFrameList.filter(frame => frame).length / annotationStore.video.frames * 100)
} else {
return 0
}
})
// get parameters from url
const URLParameter = {}
for (const pair of window.location.search.replace('?', '').split('&')) {
Expand Down
145 changes: 145 additions & 0 deletions src/components/Layout.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<template>
<q-layout
view="hHh Lpr lff"
style="height: 100%"
>
<q-header
:class="['header', {'text-dark': !$q.dark.isActive}]"
:elevated="!$q.dark.isActive"
>
<q-toolbar>
<q-btn
flat
round
dense
:icon="drawer ? 'menu_open' : 'menu'"
@click="drawer = !drawer"
></q-btn>
<q-toolbar-title class="text-center">
<a
class="q-mr-sm"
href="https://www.anu.edu.au/"
target="_blank"
>
<q-avatar
square
size="md"
>
<img
v-if="$q.dark.isActive"
src="/img/logo-dark.svg"
alt="logo"
>
<img
v-else
src="/img/logo.svg"
alt="logo"
>
</q-avatar>
</a>
<router-link
class="vertical-middle"
:to="'/'"
>
ANU CVML Video Annotation Tool
</router-link>
</q-toolbar-title>
<q-circular-progress
v-if="annotationStore.hasVideo && annotationStore.isCaching"
class="q-mx-sm"
show-value
font-size="10px"
:value="progress"
size="30px"
:thickness="0.2"
color="primary"
track-color="grey-3"
>
{{ progress }}%
<q-tooltip
anchor="center left"
self="center right"
>
Caching video frames. VideoLoader: {{ useV2 ? 'V2' : 'V1' }}.
</q-tooltip>
</q-circular-progress>
<q-btn
:icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
flat
round
dense
@click="$q.dark.toggle"
></q-btn>
</q-toolbar>
</q-header>
<Drawer></Drawer>
<q-page-container>
<q-page padding>
<template v-if="annotationStore.hasVideo">
<VideoLoaderV2 v-if="useV2"/>
<VideoLoaderV1 v-else/>
<ActionThumbnailPreview v-if="preferenceStore.actions"/>
</template>
<router-view></router-view>
</q-page>
</q-page-container>
<q-footer class="bg-transparent">
<q-toolbar>
<q-toolbar-title
class="text-center text-caption"
:class="$q.dark.isActive ? 'text-gray-4': 'text-black'"
>
Copyright © 2022,
<a
href="https://github.com/anucvml/vidat"
target="_blank"
>
ANU CVML
</a>. All rights reserved.
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
import ActionThumbnailPreview from '~/components/ActionThumbnailPreview.vue'
import VideoLoaderV1 from '~/components/VideoLoaderV1.vue'
import VideoLoaderV2 from '~/components/VideoLoaderV2.vue'
import { useAnnotationStore } from '~/store/annotation.js'
import { useConfigurationStore } from '~/store/configuration.js'
import { useMainStore } from '~/store/index.js'
import { usePreferenceStore } from '~/store/preference.js'
import Drawer from './Drawer.vue'
const mainStore = useMainStore()
let { drawer } = storeToRefs(mainStore)
const annotationStore = useAnnotationStore()
const configurationStore = useConfigurationStore()
const preferenceStore = usePreferenceStore()
const useV2 = computed(() => {
let ret
if (preferenceStore.decoder === 'v1') {
ret = false
} else if (preferenceStore.decoder === 'v2') {
ret = true
} else {
const isSupported = window.VideoDecoder && window.EncodedVideoChunk && window.OffscreenCanvas
ret = isSupported && (mainStore.videoFormat === null || mainStore.videoFormat === 'mp4')
}
console.debug('VideoLoader:', ret ? 'V2' : 'V1')
return ret
})
const progress = computed(() => {
if (!isNaN(annotationStore.video.frames && annotationStore.cachedFrameList.length)) {
return Math.round(
annotationStore.cachedFrameList.filter(frame => frame).length / annotationStore.video.frames * 100)
} else {
return 0
}
})
</script>
8 changes: 3 additions & 5 deletions src/pages/annotation/ControlPanel.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<q-list :class="{'flex justify-evenly full-width': q.screen.lt.md}">
<q-list :class="{'flex justify-evenly full-width': $q.screen.lt.md}">
<div v-if="annotationStore.mode !== 'action'">
<q-item dense>
<q-item-section class="text-center">
Expand Down Expand Up @@ -102,7 +102,7 @@
></q-select>
</q-item-section>
</q-item>
<q-item v-if="q.platform.has.touch && annotationStore.mode !== 'action'">
<q-item v-if="$q.platform.has.touch && annotationStore.mode !== 'action'">
<q-item-section>
<q-toggle
v-model="delMode"
Expand Down Expand Up @@ -162,7 +162,7 @@
label="Grayscale"
></q-toggle>
<q-toggle
v-if="!q.platform.has.touch && annotationStore.mode !== 'action'"
v-if="!$q.platform.has.touch && annotationStore.mode !== 'action'"
v-model="preferenceStore.showPopup"
label="Show Popup"
></q-toggle>
Expand All @@ -173,7 +173,6 @@
</template>

<script setup>
import { useQuasar } from 'quasar'
import { computed, watch } from 'vue'
import { ObjectAnnotation, RegionAnnotation, SkeletonAnnotation } from '~/libs/annotationlib.js'
import utils from '~/libs/utils.js'
Expand All @@ -186,7 +185,6 @@ const mainStore = useMainStore()
const preferenceStore = usePreferenceStore()
const annotationStore = useAnnotationStore()
const configurationStore = useConfigurationStore()
const q = useQuasar()
const annotationListMap = computed(() => annotationStore[annotationStore.mode + 'AnnotationListMap'])
Expand Down
Loading

0 comments on commit bfe9573

Please sign in to comment.