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

20
src/components/app.vue
View File

@@ -2,7 +2,7 @@
<f7-app v-bind="f7params">
<!-- Left panel with cover effect-->
<f7-panel left cover dark>
<f7-panel left cover>
<f7-view>
<f7-page>
<f7-navbar title="ALVINN"></f7-navbar>
@@ -20,24 +20,6 @@
<!-- Your main view, should have "view-main" class -->
<f7-view main class="safe-areas" url="/"></f7-view>
<!-- Popup -->
<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">
<img src="../assets/regions/thorax.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
<img src="../assets/regions/abdpel.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
<img src="../assets/regions/limb.svg" />
</f7-button>
<f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<img src="../assets/regions/headneck.svg" />
</f7-button>
</f7-segmented>
</f7-popover>
</f7-app>
</template>

32
src/components/region-icon.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<svg width="100%" height="100%" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" :fill="fillColor" >
<path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.74421 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" style="opacity: .25;"/>
<path v-if="region == 0" d="m18.247904 8.2686439c-0.987966 0.103956-3.091153 0.6741123-3.091153 0.6741123-1.652395 2.7995828-2.197177 3.7434008-2.550516 4.3811848 0 0 3.039112 0.665488 4.636275 1.133082-3e-3 0.01385 2.049744 0.445884 2.049744 0.445884s0.707693-1.135262 1.002776-2.188396c0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-0.291029-0.377705-1.38593-1.9038754-2.167098-2.9799951z" fill-rule="evenodd" :fill="fillColor" />
<path v-else-if="region ==1" d="m15.156751 8.9427562c-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.74421 6.6624536-0.07316 0.048468 0.384152 0.1456587 0.866125 0.2843915 1.431499 0.7210773 0.130029 2.5390772 0.501293 3.0586462 0.563846 0.613348 0.03006 1.528237 0.20676 2.05877 0.334503 0.563462-1.044613 0.536275-0.982536 2.57701-4.4457368z" :fill="fillColor" fill-rule="evenodd"/>
<g v-else-if="region == 2" :fill="fillColor" fill-rule="evenodd">
<path d="m17.24251 14.457023c0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-3.100189-4.8581326-4.866767-0.394712-3.172492 3.208384z" />
<path d="m7.1779333 11.058645c0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.1562-5.4517681-2.8350883-3.4878487-3.3430377-1.995345z" />
</g>
<path v-else-if="region == 3" d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849 0.566485 0.8398567 1.254642 1.7575311 2.167098 2.9799951 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" :fill="fillColor" fill-rule="evenodd"/>
</g>
</svg>
</template>
<script>
export default {
name: "RegionIcon",
props: {
region: {
type: Number,
validator(value) {
return value >= 0 && value <= 3
}
},
fillColor: {
type: String,
default: "#002F65"
}
}
}
</script>

25
src/components/svg-icon.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" :fill="fillColor" height="100%" viewBox="0 -960 960 960" width="100%">
<path v-if="icon == 'image'" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/>
<path v-else-if="icon == 'videocam'" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z"/>
<path v-else-if="icon == 'visibility'" d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/>
</svg>
</template>
<script>
export default {
name: "SvgIcon",
props: {
icon: {
type: String,
validator(value) {
return ['image','videocam','visibility'].includes(value)
}
},
fillColor: {
type: String,
default: "#002F65"
}
}
}
</script>

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'],

20
src/pages/home.vue
View File

@@ -14,16 +14,16 @@
<p style="text-align: center; margin: 0;">Select a region to begin</p>
<div class="region-grid">
<f7-button class="region-button thorax" href="/detect/thorax/">
<img class="region-image" src="../assets/regions/thorax.svg" />
<RegionIcon class="region-image" :region="0" />
</f7-button>
<f7-button class="region-button abdomen" href="/detect/abdomen/">
<img class="region-image" src="../assets/regions/abdpel.svg" />
<RegionIcon class="region-image" :region="1" />
</f7-button>
<f7-button class="region-button limbs" href="/detect/limbs/">
<img class="region-image" src="../assets/regions/limb.svg" />
<RegionIcon class="region-image" :region="2" />
</f7-button>
<f7-button class="region-button headneck disabled" href="/detect/head/">
<img class="region-image" src="../assets/regions/headneck.svg" />
<RegionIcon class="region-image" :region="3" />
</f7-button>
</div>
</div>
@@ -78,4 +78,14 @@
}
}
</style>
</style>
<script>
import RegionIcon from '../components/region-icon.vue'
export default {
components: {
RegionIcon
}
}
</script>