Completed page structure and basic functionality
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
@@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<f7-page name="detect">
|
||||
<!-- Top Navbar -->
|
||||
<f7-navbar :sliding="false">
|
||||
<f7-nav-left>
|
||||
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
|
||||
</f7-nav-left>
|
||||
<f7-nav-title sliding>Region</f7-nav-title>
|
||||
<f7-navbar :sliding="false" back-link="Back">
|
||||
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
|
||||
</f7-navbar>
|
||||
<!-- Toolbar-->
|
||||
<f7-toolbar bottom>
|
||||
<f7-link>Left Link</f7-link>
|
||||
<f7-link>Right Link</f7-link>
|
||||
</f7-toolbar>
|
||||
|
||||
<f7-block style="display: flex; flex-direction: column; align-items: center;">
|
||||
<f7-block>
|
||||
Image goes here
|
||||
<f7-block style="display: flex; flex-direction: column; align-items: center; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top));">
|
||||
<f7-block style="flex: 1 1 50%; align-self: stretch;">
|
||||
<div class="image-box" style="position: relative;">
|
||||
<img :src="imageView" />
|
||||
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
|
||||
</div>
|
||||
</f7-block>
|
||||
<f7-segmented raised style="margin: 5px;">
|
||||
<f7-button>
|
||||
<img src="../assets/regions/thorax.svg" style="width: 48px; height: 48px; fill: var(--f7-theme-color);" />
|
||||
<f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: auto 0 0;">
|
||||
<f7-button popover-open="#region-popover">
|
||||
<img :src="imageRegion" style="height: 100%;" />
|
||||
</f7-button>
|
||||
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
|
||||
<img src="../assets/icons/visibility.svg" style="height: 100%;" />
|
||||
</f7-button>
|
||||
<f7-button @click="selectImage">
|
||||
<img src="../assets/icons/image.svg" style="height: 100%;" />
|
||||
</f7-button>
|
||||
<f7-button @click="setData">
|
||||
<img src="../assets/icons/videocam.svg" style="height: 100%;" />
|
||||
</f7-button>
|
||||
<f7-button icon="material-icons-outlined" icon-material="visibility" icon-size="48" @click="setData"/>
|
||||
<f7-button icon="material-icons-outlined" icon-material="image" icon-size="48" />
|
||||
<f7-button icon="material-icons-outlined" icon-material="videocam" icon-size="48" />
|
||||
</f7-segmented>
|
||||
<f7-input type="file" id="image-chooser" style="display: none;"/>
|
||||
<div v-if="resultData && resultData.detections" class="chip-results">
|
||||
<input type="file" ref="image_chooser" @change="getImage()" accept="image/png, image/jpg, image/jpeg" style="display: none;"/>
|
||||
<div v-if="resultData && resultData.detections" class="chip-results" style="flex: auto 0 0;">
|
||||
<f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
|
||||
</div>
|
||||
</f7-block>
|
||||
@@ -52,21 +52,52 @@
|
||||
box-shadow: 4px 4px 1px var(--f7-theme-color);
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
|
||||
.image-menu .button {
|
||||
aspect-ratio: 1;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import fakeData from "./testData.js"
|
||||
import { f7 } from 'framework7-vue'
|
||||
import fakeData from './testData.js'
|
||||
|
||||
export default {
|
||||
props: ['activeRegion'],
|
||||
props: {
|
||||
f7route: Object,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
|
||||
resultData: {},
|
||||
selectedChip: 1
|
||||
selectedChip: -1,
|
||||
activeRegion: 4,
|
||||
imageRegion: '',
|
||||
imageLoaded: false,
|
||||
imageView: '../assets/icons/image.svg',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
//Might not need this
|
||||
switch (this.f7route.params.region) {
|
||||
case 'thorax':
|
||||
this.activeRegion = 0
|
||||
this.imageRegion = '../assets/regions/thorax.svg'
|
||||
break;
|
||||
case 'abdomen':
|
||||
this.activeRegion = 1
|
||||
this.imageRegion = '../assets/regions/abdpel.svg'
|
||||
break;
|
||||
case 'limbs':
|
||||
this.activeRegion = 2
|
||||
this.imageRegion = '../assets/regions/limb.svg'
|
||||
break;
|
||||
case 'head':
|
||||
this.activeRegion = 3
|
||||
this.imageRegion = '../assets/regions/headneck.svg'
|
||||
break;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chipColor (confVal) {
|
||||
@@ -77,11 +108,28 @@
|
||||
setData () {
|
||||
this.resultData = fakeData.testData
|
||||
},
|
||||
selectImage () {
|
||||
this.$refs.image_chooser.click()
|
||||
//TODO This really needs to be a promise and resolve system
|
||||
this.imageLoaded = true;
|
||||
},
|
||||
selectChip ( iChip ) {
|
||||
this.selectedChip = iChip
|
||||
var box = this.$refs.structure_box
|
||||
box.style.display = "block"
|
||||
box.style.left = `${this.resultData.detections[iChip].left * 100}%`
|
||||
box.style.top = `${this.resultData.detections[iChip].top * 100}%`
|
||||
box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * 100}%`
|
||||
box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * 100}%`
|
||||
},
|
||||
deleteChip ( iChip ) {
|
||||
this.resultData.detections.splice(iChip, 1)
|
||||
f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {
|
||||
this.resultData.detections.splice(iChip, 1)
|
||||
});
|
||||
},
|
||||
getImage () {
|
||||
var example = this.$refs.image_chooser.files[0];
|
||||
this.imageView = URL.createObjectURL(example);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user