ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Icons to vue components (#32)

Browse Source 
Using inline svg in vue components will:
1. Make it possible to recolor svgs (for example for dark mode)
2. Be a better solution to the cordova resource location issue

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#32
This commit is contained in:
Justin Georgi
2023-12-05 21:16:55 -07:00
parent 34b5816eae
commit fb81ebed83
5 changed files with 103 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/detect.vue
View File

@@ -10,7 +10,7 @@
<f7-block class="detect-grid">
<div class="image-container">
<img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
<img v-else src="../assets/icons/image.svg" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
<SvgIcon v-else icon="image" fill-color="var(--f7-theme-color)"/>
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none; box-sizing: border-box;" />
</div>
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -18,19 +18,16 @@
</div>
<f7-segmented class="image-menu" raised>
<f7-button popover-open="#region-popover">
<img v-if="activeRegion == 0" src="../assets/regions/thorax.svg" />
<img v-else-if="activeRegion == 1" src="../assets/regions/abdpel.svg" />
<img v-else-if="activeRegion == 2" src="../assets/regions/limb.svg" />
<img v-else-if="activeRegion == 3" src="../assets/regions/headneck.svg" />
<RegionIcon :region="activeRegion" fill-color="var(--f7-theme-color)"/>
</f7-button>
<f7-button @click="selectImage">
<img src="../assets/icons/image.svg" />
<SvgIcon icon="image" fill-color="var(--f7-theme-color)"/>
</f7-button>
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
<img src="../assets/icons/visibility.svg" />
<SvgIcon icon="visibility" fill-color="var(--f7-theme-color)"/>
</f7-button>
<f7-button class="disabled" @click="setData">
<img src="../assets/icons/videocam.svg" />
<SvgIcon icon="videocam" fill-color="var(--f7-theme-color)"/>
</f7-button>
</f7-segmented>
<input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
@@ -56,6 +53,24 @@
<f7-block v-if="debugOn" v-html="debugDisplay" />
</f7-page>
</f7-panel>
<f7-popover id="region-popover">
<f7-segmented raised style="flex-wrap: wrap; flex-direction: column;">
<f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
<RegionIcon :region="0" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
<RegionIcon :region="1" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
<RegionIcon :region="2" />
</f7-button>
<f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<RegionIcon :region="3" />
</f7-button>
</f7-segmented>
</f7-popover>
</f7-page>
</template>
@@ -174,10 +189,17 @@
<script>
import { f7 } from 'framework7-vue'
import RegionIcon from '../components/region-icon.vue'
import SvgIcon from '../components/svg-icon.vue'
export default {
props: {
f7route: Object,
},
components: {
RegionIcon,
SvgIcon
},
data () {
return {
regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],