diff --git a/frontend/components/label/Label.vue b/frontend/components/label/Label.vue
new file mode 100644
index 0000000000000000000000000000000000000000..251c86f8cfba000bbcb5f493d52db47b97edc2a9
--- /dev/null
+++ b/frontend/components/label/Label.vue
@@ -0,0 +1,233 @@
+<template>
+ <div class="col">
+ <div class="ml-4">
+ <div class="row">
+ <div class="col">
+ <h5 class="title users-margin">
+ {{ title }}
+ </h5>
+ </div>
+ </div>
+ <br>
+ <div class="row form-title-margin">
+ <div class="col">
+ <input
+ id="imagesID"
+ type="text"
+ class="form-control form-border field-length form-content"
+ placeholder="Search for file name..."
+ name="imagesID"
+ @input="debounceWrapper"
+ >
+ </div>
+ </div>
+ <br>
+ <b-row v-if="images" :key="updateUI">
+ <b-col v-for="id in Object.keys(images)" :key="id">
+ <div id="container">
+ <Images
+ class="animated fadeIn"
+ :src="images[id].url"
+ :image-i-d="images[id].id"
+ :image-u-r-l="images[id].url"
+ :image-name="images[id].name"
+ :is-currently-labeled="images[id].isCurrentlyLabeled"
+ @click.native="openViewer(images[id])"
+ />
+ <br>
+ </div>
+ </b-col>
+ </b-row>
+ <b-pagination
+ v-model="page"
+ class="mt-3"
+ :total-rows="totalRows"
+ pills
+ :per-page="perPage"
+ />
+ </div>
+ </div>
+</template>
+
+<script>
+import Images from '~/components/view/Images'
+import { backendURL } from '~/config.js'
+import { debounce } from 'debounce'
+export default {
+ components: {
+ Images
+ },
+ props: {
+ title: {
+ type: String,
+ default: 'Label Unlabeled Images'
+ },
+ isOutputViewer: {
+ type: Boolean,
+ default: false
+ },
+ viewerURL: {
+ type: String,
+ default: '/viewer/'
+ },
+ isLabeled: {
+ type: Boolean,
+ default: false
+ },
+ output: {
+ type: Object,
+ default: () => {
+ return {
+ type: 'xml',
+ standard: 'pascal'
+ }
+ }
+ }
+ },
+ data () {
+ return {
+ images: {},
+ keyword: '',
+ isViewerActive: false,
+ perPage: 2,
+ totalRows: 0,
+ page: 1,
+ timer: '',
+ updateUI: false
+ }
+ },
+ watch: {
+ async page () {
+ this.images = {}
+ await this.getAllImagesWithLabelStatus()
+ }
+ },
+ async created () {
+ this.images = {}
+ await this.getAllImagesWithLabelStatus()
+ this.timer = setInterval(this.getAllImagesWithLabelStatus, 5000)
+ },
+ beforeDestroy () {
+ clearInterval(this.timer)
+ },
+ methods: {
+ async getAllImages(perPage, page, keyword) {
+ var url = '/api/image'
+ const response = await this.$axios.get(url, {
+ params: {
+ PerPage: perPage,
+ Page: page,
+ search: keyword,
+ Labeled: this.isLabeled
+ }
+ }).catch((error) => console.error(error))
+ if (response.data.data.images) {
+ this.totalRows = response.data.data["total_image"]
+ response.data.data.images.forEach((image) => {
+ var imageObj = {
+ id: image.ImageID,
+ name: image.Filename,
+ url: backendURL + '/api/' + image.ImagePath,
+ isCurrentlyLabeled: false
+ }
+ this.images[image.ImageID] = imageObj
+ })
+ }
+ },
+ async getImageCurrentlyBeingLabelled() {
+ var url = '/api/accesscontrol'
+ const response = await this.$axios.get(url).catch((error) => console.error(error))
+ if (response.data.data) {
+ response.data.data.forEach(async (imageStatus) => {
+ // Delete access control
+ if (imageStatus["timeout"] < this.getCurrentTime()) {
+ await this.deleteImageAccessControlByImageID(imageStatus["image_id"]).catch((error) => console.error(error))
+ } else {
+ if (this.images[imageStatus["image_id"]]) {
+ this.images[imageStatus["image_id"]].isCurrentlyLabeled = true
+ }
+ }
+ })
+ }
+ this.updateUI = !this.updateUI
+ },
+ async getAllImagesWithLabelStatus() {
+ this.images = {}
+ await this.getAllImages(this.perPage, this.page, this.keyword)
+ await this.getImageCurrentlyBeingLabelled()
+ },
+ getCurrentTime () {
+ var date = new Date()
+ return date.toISOString()
+ },
+ async deleteImageAccessControlByImageID (imageID) {
+ var url = '/api/accesscontrol/' + imageID
+ try {
+ var response = await this.$axios.delete(url)
+ if (this.images[imageID]) {
+ this.images[imageID].isCurrentlyLabeled = false
+ }
+ return response.data.status
+ } catch (error) {
+ console.log("Label" , error)
+ throw error
+ }
+ },
+ async openViewer (image) {
+ if (!this.isOutputViewer) {
+ if (!image.isCurrentlyLabeled) {
+ var url = '/api/accesscontrol/' + image.id
+ try {
+ await this.$axios.get(url)
+ alert("This image is currently Labeled")
+ } catch (e) {
+ this.$router.push({ path: this.viewerURL, query: { url: image.url, id: image.id }})
+ }
+ }
+ } else {
+ this.$router.push({ path: this.viewerURL, query: {type: this.output.type, id: image.id, name: image.name, standard: this.output.standard}})
+ }
+
+ },
+ debounceWrapper (e) {
+ this.page = 1
+ this.keyword = e.target.value
+ // alert(this.keyword)
+ this.debounceInput(e)
+ },
+ // Only fires when user stops typing
+ debounceInput: debounce(async function () {
+ await this.getAllImagesWithLabelStatus()
+ // await this.getAllImages(this.perPage, this.page, e.target.value)
+ }, 500)
+ }
+}
+</script>
+
+<style scoped>
+
+ .form-title, .form-content, .btn-content {
+ font-size: 0.85rem;
+ color: #1E889B;
+ letter-spacing: 0.025rem;
+
+ font-family: 'Open Sans Regular';
+ }
+
+ .btn-action .btn-content {
+ color: white;
+ margin-top: 5px;
+ margin-left: -5px;
+ }
+
+ .form-title-margin {
+ margin-top: -5px;
+ }
+
+ #container {
+ grid-area: main;
+ align-self: center;
+ justify-self: center;
+ width: 18rem;
+ }
+</style>
\ No newline at end of file
diff --git a/frontend/components/root/Navbar.vue b/frontend/components/root/Navbar.vue
index 64aa3172e848f38888d75edc0d1d0396b266694a..ba1d651e4ca2db14a183c3046c43cf66572a03af 100644
--- a/frontend/components/root/Navbar.vue
+++ b/frontend/components/root/Navbar.vue
@@ -12,8 +12,17 @@
</div>
</b-nav-item>
+ <div v-if="role === 'admin'">
+ <!-- Upload Dataset -->
+ <b-nav-item link-classes="side-bar-color mt-5 ml-4" @click="changeActiveElmtID('upload-dataset')">
+ <div id="upload-dataset">
+ Upload Dataset
+ </div>
+ </b-nav-item>
+ </div>
+
<!-- Label Dataset -->
- <b-nav-item link-classes="side-bar-color mt-5 ml-4" @click="changeActiveElmtID('label-dataset')">
+ <b-nav-item link-classes="side-bar-color mt-3 ml-4" @click="changeActiveElmtID('label-dataset')">
<div id="label-dataset">
Label Dataset
</div>
@@ -28,15 +37,6 @@
</b-nav-item>
</div>
- <div v-if="role === 'admin'">
- <!-- Upload Dataset -->
- <b-nav-item link-classes="side-bar-color mt-3 ml-4" @click="changeActiveElmtID('upload-dataset')">
- <div id="upload-dataset">
- Upload Dataset
- </div>
- </b-nav-item>
- </div>
-
<!-- COCO Output -->
<b-nav-item link-classes="side-bar-color mt-3 ml-4" @click="changeActiveElmtID('coco-output')">
<div id="coco-output">
@@ -95,7 +95,7 @@
</b-nav-item>
<!-- Delete User -->
- <b-nav-item link-classes="side-bar-color mt-3 ml-4 mb-5" @click="changeActiveElmtID('delete-user')">
+ <b-nav-item link-classes="side-bar-color mt-3 ml-4" @click="changeActiveElmtID('delete-user')">
<div class="icon-text-wrapper">
<i class="mt-1 mr-3 fas fa-trash" />
<div id="delete-user">
@@ -129,7 +129,7 @@
</b-nav-item>
<!-- Change Password -->
- <b-nav-item link-classes="side-bar-color mt-3 ml-4" @click="changeActiveElmtID('change-password')">
+ <b-nav-item link-classes="side-bar-color mt-3 ml-4 mb-5" @click="changeActiveElmtID('change-password')">
<div class="icon-text-wrapper">
<i class="mt-1 mr-3 fas fa-cog" />
<div id="change-password">
@@ -182,7 +182,6 @@ export default {
this.redirectRoute(elmtID)
},
redirectRoute (elmtID) {
- console.log("elmtID: ", elmtID)
switch (elmtID) {
case 'label-dataset':
this.$nuxt.$router.replace({ path: '/main/label'})
@@ -220,33 +219,44 @@ export default {
}
},
onPathChangeHandler (browserURL) {
- console.log("Browser: ", browserURL)
var elmtID = ''
- if ((/^\/main\/label(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='label-dataset'
- } else if((/^\/main\/pascal(\/|(\?)|$)/.test(browserURL))){
- elmtID = 'pascal-output'
- } else if ((/^\/main\/coco(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='coco-output'
- } else if ((/^\/main\/edit(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='edit-dataset'
- } else if ((/^\/main\/upload(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='upload-dataset'
- } else if ((/^\/main\/change-username(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='change-username'
- } else if ((/^\/main\/change-password(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='change-password'
- } else if ((/^\/main\/show-user(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='show-all-users'
- } else if ((/^\/main\/add-user(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='add-user'
- } else if ((/^\/main\/edit-user(\/|(\?)|$)/.test(browserURL))) {
- elmtID ='edit-user'
- } else if (((/^\/main\/delete-user(\/|(\?)|$)/.test(browserURL)))) {
- elmtID ='delete-user'
+ console.log("Browser: ", browserURL)
+ if (((/^\/main\/output-view(\/|(\?)|$)/.test(browserURL)))) {
+ var type = this.$route.query.type
+ if (type === 'xml') {
+ elmtID = 'pascal-output'
+ } else {
+ elmtID = 'coco-output'
+ }
+ this.activeElmtID = elmtID
+ this.setClass(elmtID, 'active')
+ } else {
+ if ((/^\/main\/label(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='label-dataset'
+ } else if((/^\/main\/pascal(\/|(\?)|$)/.test(browserURL))){
+ elmtID = 'pascal-output'
+ } else if ((/^\/main\/coco(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='coco-output'
+ } else if ((/^\/main\/edit(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='edit-dataset'
+ } else if ((/^\/main\/upload(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='upload-dataset'
+ } else if ((/^\/main\/change-username(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='change-username'
+ } else if ((/^\/main\/change-password(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='change-password'
+ } else if ((/^\/main\/show-user(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='show-all-users'
+ } else if ((/^\/main\/add-user(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='add-user'
+ } else if ((/^\/main\/edit-user(\/|(\?)|$)/.test(browserURL))) {
+ elmtID ='edit-user'
+ } else if (((/^\/main\/delete-user(\/|(\?)|$)/.test(browserURL)))) {
+ elmtID ='delete-user'
+ }
+ this.changeActiveElmtID(elmtID)
+ this.setClass(elmtID, 'active')
}
- this.changeActiveElmtID(elmtID)
- this.setClass(elmtID, 'active')
}
}
}
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index d827c3f3695a392a8e5fe1bda6b3f17725438647..c54d9d349e700f38d71165e268cdb902e0ae82cc 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -34,7 +34,7 @@ export default {
plugins: [
'~/plugins/axios',
{ src: '~/plugins/vue-sweetalert2', ssr: false },
- '~/plugins/vue-annotator'
+ { src: '~/plugins/json-viewer', ssr: false }
],
/*
** Nuxt.js dev-modules
diff --git a/frontend/pages/main/coco.vue b/frontend/pages/main/coco.vue
index 12694b90e8d3fcf250d21b161883dd31a006e908..de63a5c7dbaca9fa6724a45e1318a1cff33e721d 100644
--- a/frontend/pages/main/coco.vue
+++ b/frontend/pages/main/coco.vue
@@ -12,71 +12,43 @@
<i class="ml-3 mt-1 fas fa-download" />
</button>
</div>
- <div class="row">
- <div class="col">
- <h5 class="title users-margin">
- JSON per Image
- </h5>
- </div>
- </div>
- <br>
- <div class="row form-title-margin">
- <div class="col">
- <input
- id="imagesID"
- v-model="search"
- type="text"
- class="form-control form-border field-length form-content"
- placeholder="Search for Images ID..."
- name="imagesID"
- >
- </div>
- </div>
- <br>
- <b-row>
- <b-col v-for="labs in filterImages" :key="labs">
- <div id="container">
- <nuxt-link :to="{ path: '/main/output-view', query: {type: 'json', id: labs.ImageID, name: labs.Filename, standard: standard}}">
- <Images
- :image-name="labs.Filename"
- :image-i-d="labs.ImageID"
- :image-u-r-l="backendURL + '/api/' + labs.ImagePath"
- />
- </nuxt-link>
- <br>
- </div>
- </b-col>
- </b-row>
+ </div>
+ <div class="row">
+ <Label
+ :is-output-viewer="isOutputViewer"
+ :is-labeled="isLabeled"
+ title="JSON Per Image"
+ viewer-u-r-l="/main/output-view"
+ :output="{type: 'json', standard: standard}"
+ />
</div>
</div>
</template>
<script>
-export default {
- data () {
- return {
- // search: ''
- }
- }
-}
-</script>
-
-<script>
-import Images from '~/components/view/Images.vue'
import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js'
import { backendURL } from '~/config.js'
-import VueDropdown from 'vue-dynamic-dropdown'
+import Label from '~/components/label/Label'
+
export default {
components: {
- Images,
- VueDropdown
+ Label
},
mixins: [getAllLabeledImages],
data () {
return {
+ isOutputViewer: true,
+ isLabeled: true,
backendURL: backendURL,
standard: 'coco',
- search: '',
+ search: ''
+ }
+ },
+ computed: {
+ filterImages: function(){
+ return this.labeledImages.filter((labs) => {
+ return labs.Filename.match(this.search)
+ })
}
},
methods: {
@@ -137,13 +109,6 @@ export default {
element.click()
document.body.removeChild(element)
}
- },
- computed: {
- filterImages: function(){
- return this.labeledImages.filter((labs) => {
- return labs.Filename.match(this.search);
- });
- }
}
}
</script>
diff --git a/frontend/pages/main/edit.vue b/frontend/pages/main/edit.vue
index 2dd718da3f31a14392c404021d74a0db91624427..ae2c50eeee8f318b494a61fe305ba114e9ec5fc7 100644
--- a/frontend/pages/main/edit.vue
+++ b/frontend/pages/main/edit.vue
@@ -1,206 +1,21 @@
<template>
- <div class="col">
- <div class="ml-4">
- <div class="row">
- <div class="col">
- <h5 class="title users-margin">
- Edit Labeled Images
- </h5>
- </div>
- </div>
- <br>
- <div class="row form-title-margin">
- <div class="col">
- <input
- id="imagesID"
- type="text"
- class="form-control form-border field-length form-content"
- placeholder="Search for file name..."
- name="imagesID"
- @input="debounceWrapper"
- >
- </div>
- </div>
- <br>
- <b-row v-if="images" :key="updateUI">
- <b-col v-for="id in Object.keys(images)" :key="id">
- <div id="container">
- <Images
- class="animated fadeIn"
- :src="images[id].url"
- :image-i-d="images[id].id"
- :image-u-r-l="images[id].url"
- :image-name="images[id].name"
- :is-currently-labeled="images[id].isCurrentlyLabeled"
- @click.native="openViewer(images[id])"
- />
- <br>
- </div>
- </b-col>
- </b-row>
- <b-pagination
- v-model="page"
- class="mt-3"
- :total-rows="totalRows"
- pills
- :per-page="perPage"
- />
- </div>
- </div>
+ <Label
+ title="Label Labeled Images"
+ viewer-u-r-l="/viewer/index-edit"
+ :is-labeled="isLabeled"
+ />
</template>
<script>
-import Images from '~/components/view/Images'
-import { backendURL } from '~/config.js'
-import { debounce } from 'debounce'
+import Label from '~/components/label/Label'
export default {
components: {
- Images
+ Label
},
data () {
return {
- images: {},
- keyword: '',
- isViewerActive: false,
- perPage: 12,
- totalRows: 0,
- page: 1,
- timer: '',
- updateUI: false
+ isLabeled: true
}
- },
- watch: {
- async page () {
- this.images = {}
- await this.getAllImagesWithLabelStatus()
- }
- },
- async created () {
- this.images = {}
- await this.getAllImagesWithLabelStatus()
- this.timer = setInterval(this.getAllImagesWithLabelStatus, 5000)
- },
- beforeDestroy () {
- clearInterval(this.timer)
- },
- methods: {
- async getAllImages(perPage, page, keyword) {
- var url = '/api/image'
- const response = await this.$axios.get(url, {
- params: {
- PerPage: perPage,
- Page: page,
- search: keyword
- }
- }).catch((error) => console.error(error))
- console.log("Images: ", response.data.data.images)
- if (response.data.data.images) {
- this.totalRows = (response.data.data["total_page"] + 1) * this.perPage
- response.data.data.images.forEach((image) => {
- if (image.Labeled) {
- var imageObj = {
- id: image.ImageID,
- name: image.Filename,
- url: backendURL + '/api/' + image.ImagePath,
- isCurrentlyLabeled: false
- }
- this.images[image.ImageID] = imageObj
- console.log("Images: ", this.images)
- }
- })
- }
- },
- async getImageCurrentlyBeingLabelled() {
- var url = '/api/accesscontrol'
- const response = await this.$axios.get(url).catch((error) => console.error(error))
- console.log("Response image labelled: ", response.data.data)
- if (response.data.data) {
- response.data.data.forEach(async (imageStatus) => {
- // Delete access control
- if (imageStatus["timeout"] < this.getCurrentTime()) {
- await this.deleteImageAccessControlByImageID(imageStatus["image_id"]).catch((error) => console.error(error))
- } else {
- if (this.images[imageStatus["image_id"]]) {
- this.images[imageStatus["image_id"]].isCurrentlyLabeled = true
- }
- }
- })
- }
- this.updateUI = !this.updateUI
- },
- async getAllImagesWithLabelStatus() {
- this.images = {}
- await this.getAllImages(this.perPage, this.page, this.keyword)
- await this.getImageCurrentlyBeingLabelled()
- },
- getCurrentTime () {
- var date = new Date()
- return date.toISOString()
- },
- async deleteImageAccessControlByImageID (imageID) {
- var url = '/api/accesscontrol/' + imageID
- try {
- var response = await this.$axios.delete(url)
- if (this.images[imageID]) {
- this.images[imageID].isCurrentlyLabeled = false
- }
- return response.data.status
- } catch (error) {
- console.log("Label" , error)
- throw error
- }
- },
- async openViewer (image) {
- console.log(image)
- if (!image.isCurrentlyLabeled) {
- var url = '/api/accesscontrol/' + image.id
- try {
- await this.$axios.get(url)
- alert("This image is currently Labeled")
- } catch (e) {
- this.$router.push({ path: '/viewer/index-edit', query: { url: image.url, id: image.id }})
- }
- }
- },
- debounceWrapper (e) {
- this.page = 1
- this.keyword = e.target.value
- // alert(this.keyword)
- this.debounceInput(e)
- },
- // Only fires when user stops typing
- debounceInput: debounce(async function () {
- await this.getAllImagesWithLabelStatus()
- // await this.getAllImages(this.perPage, this.page, e.target.value)
- }, 500)
}
}
-</script>
-
-<style scoped>
-
- .form-title, .form-content, .btn-content {
- font-size: 0.85rem;
- color: #1E889B;
- letter-spacing: 0.025rem;
-
- font-family: 'Open Sans Regular';
- }
-
- .btn-action .btn-content {
- color: white;
- margin-top: 5px;
- margin-left: -5px;
- }
-
- .form-title-margin {
- margin-top: -5px;
- }
-
- #container {
- grid-area: main;
- align-self: center;
- justify-self: center;
- width: 18rem;
- }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/frontend/pages/main/label.vue b/frontend/pages/main/label.vue
index 7a51dd0bf8633712c1274af51617e63bc4761e52..9d50b6eafddbb5dd12ae2d2e9ce6a77cbfb0d0d6 100644
--- a/frontend/pages/main/label.vue
+++ b/frontend/pages/main/label.vue
@@ -1,206 +1,12 @@
<template>
- <div class="col">
- <div class="ml-4">
- <div class="row">
- <div class="col">
- <h5 class="title users-margin">
- Label Unlabeled Images
- </h5>
- </div>
- </div>
- <br>
- <div class="row form-title-margin">
- <div class="col">
- <input
- id="imagesID"
- type="text"
- class="form-control form-border field-length form-content"
- placeholder="Search for file name..."
- name="imagesID"
- @input="debounceWrapper"
- >
- </div>
- </div>
- <br>
- <b-row v-if="images" :key="updateUI">
- <b-col v-for="id in Object.keys(images)" :key="id">
- <div id="container">
- <Images
- class="animated fadeIn"
- :src="images[id].url"
- :image-i-d="images[id].id"
- :image-u-r-l="images[id].url"
- :image-name="images[id].name"
- :is-currently-labeled="images[id].isCurrentlyLabeled"
- @click.native="openViewer(images[id])"
- />
- <br>
- </div>
- </b-col>
- </b-row>
- <b-pagination
- v-model="page"
- class="mt-3"
- :total-rows="totalRows"
- pills
- :per-page="perPage"
- />
- </div>
- </div>
+ <Label />
</template>
<script>
-import Images from '~/components/view/Images'
-import { backendURL } from '~/config.js'
-import { debounce } from 'debounce'
+import Label from '~/components/label/Label'
export default {
components: {
- Images
- },
- data () {
- return {
- images: {},
- keyword: '',
- isViewerActive: false,
- perPage: 12,
- totalRows: 0,
- page: 1,
- timer: '',
- updateUI: false
- }
- },
- watch: {
- async page () {
- this.images = {}
- await this.getAllImagesWithLabelStatus()
- }
- },
- async created () {
- this.images = {}
- await this.getAllImagesWithLabelStatus()
- this.timer = setInterval(this.getAllImagesWithLabelStatus, 5000)
- },
- beforeDestroy () {
- clearInterval(this.timer)
- },
- methods: {
- async getAllImages(perPage, page, keyword) {
- var url = '/api/image'
- const response = await this.$axios.get(url, {
- params: {
- PerPage: perPage,
- Page: page,
- search: keyword
- }
- }).catch((error) => console.error(error))
- console.log("Images: ", response.data.data.images)
- if (response.data.data.images) {
- this.totalRows = (response.data.data["total_page"] + 1) * this.perPage
- response.data.data.images.forEach((image) => {
- if (!image.Labeled) {
- var imageObj = {
- id: image.ImageID,
- name: image.Filename,
- url: backendURL + '/api/' + image.ImagePath,
- isCurrentlyLabeled: false
- }
- this.images[image.ImageID] = imageObj
- console.log("Images: ", this.images)
- }
- })
- }
- },
- async getImageCurrentlyBeingLabelled() {
- var url = '/api/accesscontrol'
- const response = await this.$axios.get(url).catch((error) => console.error(error))
- console.log("Response image labelled: ", response.data.data)
- if (response.data.data) {
- response.data.data.forEach(async (imageStatus) => {
- // Delete access control
- if (imageStatus["timeout"] < this.getCurrentTime()) {
- await this.deleteImageAccessControlByImageID(imageStatus["image_id"]).catch((error) => console.error(error))
- } else {
- if (this.images[imageStatus["image_id"]]) {
- this.images[imageStatus["image_id"]].isCurrentlyLabeled = true
- }
- }
- })
- }
- this.updateUI = !this.updateUI
- },
- async getAllImagesWithLabelStatus() {
- this.images = {}
- await this.getAllImages(this.perPage, this.page, this.keyword)
- await this.getImageCurrentlyBeingLabelled()
- },
- getCurrentTime () {
- var date = new Date()
- return date.toISOString()
- },
- async deleteImageAccessControlByImageID (imageID) {
- var url = '/api/accesscontrol/' + imageID
- try {
- var response = await this.$axios.delete(url)
- if (this.images[imageID]) {
- this.images[imageID].isCurrentlyLabeled = false
- }
- return response.data.status
- } catch (error) {
- console.log("Label" , error)
- throw error
- }
- },
- async openViewer (image) {
- console.log(image)
- if (!image.isCurrentlyLabeled) {
- var url = '/api/accesscontrol/' + image.id
- try {
- await this.$axios.get(url)
- alert("This image is currently Labeled")
- } catch (e) {
- this.$router.push({ path: '/viewer', query: { url: image.url, id: image.id }})
- }
- }
- },
- debounceWrapper (e) {
- this.page = 1
- this.keyword = e.target.value
- // alert(this.keyword)
- this.debounceInput(e)
- },
- // Only fires when user stops typing
- debounceInput: debounce(async function () {
- await this.getAllImagesWithLabelStatus()
- // await this.getAllImages(this.perPage, this.page, e.target.value)
- }, 500)
+ Label
}
}
-</script>
-
-<style scoped>
-
- .form-title, .form-content, .btn-content {
- font-size: 0.85rem;
- color: #1E889B;
- letter-spacing: 0.025rem;
-
- font-family: 'Open Sans Regular';
- }
-
- .btn-action .btn-content {
- color: white;
- margin-top: 5px;
- margin-left: -5px;
- }
-
- .form-title-margin {
- margin-top: -5px;
- }
-
- #container {
- grid-area: main;
- align-self: center;
- justify-self: center;
- width: 18rem;
- }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/frontend/pages/main/output-view/index.vue b/frontend/pages/main/output-view/index.vue
index 72166692d8c2730a9a3eb997fe47513a7d307f9e..2d7a7500cd963b6946fae542d0e038ac151b90ae 100644
--- a/frontend/pages/main/output-view/index.vue
+++ b/frontend/pages/main/output-view/index.vue
@@ -41,16 +41,8 @@
</template>
<script>
-import JsonViewer from 'vue-json-viewer'
import Convert from 'xml-js'
-// import XMLFormatter from 'xml-formatter'
export default {
-// props: {
-// imageID
-// },
- components: {
- JsonViewer
- },
data () {
return {
type: '',
@@ -74,11 +66,10 @@ export default {
this.standard = this.$route.query.standard
this.json = await this.getLabelByID(this.standard)
// this.xml = XMLFormatter(this.convertToXML(),this.config)
- this.xml = this.convertToXML()
if(this.type === 'xml'){
+ this.xml = this.convertToXML()
this.Format()
}
-
},
methods:{
closeOutputViewer() {
@@ -162,7 +153,12 @@ export default {
Format(){
var xml = this.xml.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/ /g, ' ').replace(/\n/g,'<br />')
var mydiv = document.getElementById("xml")
- mydiv.innerHTML += xml
+ if (mydiv) {
+ console.log("1")
+ mydiv.innerHTML += xml
+ console.log("2")
+ }
+ console.log("3")
}
}
}
diff --git a/frontend/pages/main/pascal.vue b/frontend/pages/main/pascal.vue
index ec27bef3c1d2fd8a1de38e77ec21b60802c2f0a4..e6fd65fb49bed0fa0bd5ec3ad25819f948fe6eb6 100644
--- a/frontend/pages/main/pascal.vue
+++ b/frontend/pages/main/pascal.vue
@@ -12,79 +12,46 @@
<i class="ml-3 mt-1 fas fa-download" />
</button>
</div>
- <div class="row">
- <div class="col">
- <h5 class="title users-margin">
- XML per Image
- </h5>
- </div>
- </div>
- <br>
- <div class="row form-title-margin">
- <div class="col">
- <input
- id="imagesID"
- v-model="search"
- type="text"
- class="form-control form-border field-length form-content"
- placeholder="Search for Images ID..."
- name="imagesID"
- >
- </div>
- </div>
- <br>
- <b-row>
- <b-col v-for="labs in filterImages" :key="labs">
- <div id="container">
- <nuxt-link :to="{ path: '/main/output-view', query: {type: 'xml', id: labs.ImageID, name: labs.Filename, standard: standard}}">
- <Images
- :image-name="labs.Filename"
- :image-i-d="labs.ImageID"
- :image-u-r-l="backendURL + '/api/' + labs.ImagePath"
- />
- </nuxt-link>
- <br>
- </div>
- </b-col>
- </b-row>
+ </div>
+ <div class="row">
+ <Label
+ :is-output-viewer="isOutputViewer"
+ :is-labeled="isLabeled"
+ title="XML Per Image"
+ viewer-u-r-l="/main/output-view"
+ />
</div>
</div>
</template>
-<script>
-export default {
- data () {
- return {
- // search: ''
- }
- }
-}
-</script>
<script>
-import Images from '~/components/view/Images.vue'
import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js'
import { backendURL } from '~/config.js'
-import VueDropdown from 'vue-dynamic-dropdown'
import Convert from 'xml-js'
+import Label from '~/components/label/Label'
export default {
components: {
- Images,
- VueDropdown
+ Label
},
mixins: [getAllLabeledImages],
data () {
return {
+ isOutputViewer: true,
+ isLabeled: true,
backendURL: backendURL,
standard: 'pascal',
- search: '',
+ search: ''
+ }
+ },
+ computed: {
+ filterImages: function(){
+ return this.labeledImages.filter((labs) => {
+ return labs.Filename.match(this.search)
+ })
}
},
methods: {
- setNewSelectedOption(event){
- this.standard = event.value.toLowerCase()
- this.config.placeholder = event.value
- },
async getAllLabelJSON(standard){
var url = '/api/label'
var response = await this.$axios(url).catch(error => console.log(error))
@@ -149,13 +116,6 @@ export default {
element.click()
document.body.removeChild(element)
}
- },
- computed: {
- filterImages: function(){
- return this.labeledImages.filter((labs) => {
- return labs.Filename.match(this.search);
- });
- }
}
}
</script>
diff --git a/frontend/pages/viewer/index-edit.vue b/frontend/pages/viewer/index-edit.vue
index 86c3a58ea3b56e4a5938a85db48a410f866707a9..f51a23c9e39b4e2a133a4a2ff60969661a3905d2 100644
--- a/frontend/pages/viewer/index-edit.vue
+++ b/frontend/pages/viewer/index-edit.vue
@@ -91,9 +91,10 @@ export default {
width: 0,
content: ''
},
+ actionName: 'add-box',
activeBoxIndex: -1,
+ cssCursor: 'cell',
boxes: {},
- previouslyCreatedBox: {},
image: {
id: -1,
url: ''
@@ -101,7 +102,8 @@ export default {
canDelete: true,
labelCount: 0,
timer: '',
- dataReady :true,
+ previouslyCreatedBox: {},
+ dataReady: true,
isEdited: false
}
},
diff --git a/frontend/plugins/json-viewer.js b/frontend/plugins/json-viewer.js
new file mode 100644
index 0000000000000000000000000000000000000000..abc21e6f9ea0f61352c3d6280712c44201e9ee04
--- /dev/null
+++ b/frontend/plugins/json-viewer.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+
+import JsonViewer from 'vue-json-viewer'
+Vue.use(JsonViewer)
\ No newline at end of file
diff --git a/frontend/plugins/vue-annotator.js b/frontend/plugins/vue-annotator.js
deleted file mode 100644
index 548fc6c6ec94e0b30997c4346f1d4490edfba4c8..0000000000000000000000000000000000000000
--- a/frontend/plugins/vue-annotator.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// import Vue from 'vue'
-// import VueAnnotator from 'vue-annotator'
-
-// Vue.use(VueAnnotator)
\ No newline at end of file