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

Randomly select region icon set

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-04-20 09:19:45 -07:00
parent 219522181b
commit b180c8bb08
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/region-icon.vue
View File

@@ -1,13 +1,13 @@
<template>
<svg width="100%" height="100%" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g v-if="version == 1" stroke="none" :fill="fillColor" >
<g v-if="iconSet == 1" stroke="none" :fill="fillColor" >
<path d="M22,8.25 20.75,7.5 20.25,6.5 19,6 V5 L18.25,6 16,7.75 13.5,8.75 H8.5 L7,9 6,9.75 5,11 L4.25,12.5 3.5,14 2.5,15 2,15.5 2.5,15.75 3.5,15.5 4.5,14.25 5.5,12.25 6.75,10.75 7,12 7.25,13.25 6.5,15.5 7,19 H8 V 18.5 L7.5,18.25 7.75,15.75 9.75,12.25 12,13 15.25,13.5 15.5,17.25 16,19 H17 V18.5 L16.5,18.25 V15.5 L17,13 17.75,10.75 19,8.75 H20 L21.25,9 Z" style="opacity: .4;"/>
<path v-if="region == 0" d="M16,7.75 13.5,8.75 12,13 15.25,13.5 17,13 17.75,10.75 Z" fill-rule="evenodd" :fill="fillColor" />
<path v-else-if="region ==1" d="M13.5,8.75 H8.5 L7,9 6,9.75 5,11 4.25,12.5 3.5,14 2.5,15 2,15.5 2.5,15.75 3.5,15.5 4.5,14.25 5.5,12.25 6.75,10.75 7,12 9.75,12.25 12,13 Z" :fill="fillColor" fill-rule="evenodd"/>
<path v-else-if="region == 2" d="M14,11.75 15.25,13.5 15.5,17.25 16,19 H17 V18.5 L16.5,18.25 V15.5 L17,13 17.75,10.75 16.75,9.25 15,8.5 14,9 Z M10,9.25 8.5,9 7,9.5 6.75,10.75 7,12 7.25,13.25 6.5,15.5 7,19 H8 V18.5 L7.5,18.25 7.75,15.75 9.75,12.25 10.25,10.75 Z" :fill="fillColor" fill-rule="evenodd"/>
<path v-else-if="region == 3" d="M22,8.25 20.75,7.5 20.25,6.5 19,6 V5 L18.25,6 16,7.75 17.75,10.75 19,8.75 H20 L21.25,9 Z" :fill="fillColor" fill-rule="evenodd"/>
</g>
<g v-else-if="version == 2" stroke="none" :fill="fillColor" >
<g v-else-if="iconSet == 2" stroke="none" :fill="fillColor" >
<path d="M22,9.5 20.5,8.5 19.75,7.25 18.25,6.75 V 5 L 17,6.75 15,8.25 12,9.5 H 5.75 L 2.75,10 2,12 2.5,15.75 3.25,16 4,19 H 5.5 V 18.25 L 5,18 5.25,16.25 6,15.25 H 10 L 13.75,16 14.75,19 H 16.25 V 18.25 L 15.75,18 V 16 L 17,15.25 17.5,12 18.25,10.25 H 19.5 L 21,10.5 Z" style="opacity: .4;"/>
<path v-if="region == 0" d="M12,9.5 H 11 L 10,15.25 13.75,16 H 15.75 L 17,15.25 17.5,12 Z" fill-rule="evenodd" :fill="fillColor" />
<path v-else-if="region ==1" d="M 11,9.5 H 5.75 L 2.75,10 2,12 2.5,15.75 3.25,16 6,15.25 H 10 Z" :fill="fillColor" fill-rule="evenodd"/>
@@ -31,9 +31,12 @@
type: String,
default: "var(--avn-theme-color)"
},
version: {
iconSet: {
type: Number,
default: 2
default: 1,
validator(value) {
return value >= 1 && value <= 2
}
}
}
}

2
src/js/store.js
View File

@@ -3,6 +3,7 @@ import { reactive, computed } from 'vue';
const state = reactive({
disclaimerAgreement: false,
enabledRegions: ['thorax','abdomen','limbs','head'],
regionIconSet: Math.floor(Math.random() * 2) + 1,
version: '0.5.0-rc',
fullscreen: false,
useExternal: 'optional',
@@ -46,6 +47,7 @@ export default () => ({
externalType: computed(() => state.useExternal),
getRegions: computed(() => state.enabledRegions),
getVersion: computed(() => state.version),
getIconSet: computed(() => state.regionIconSet),
set,
agree,
getServerList,

10
src/pages/detect.vue
View File

@@ -43,7 +43,7 @@
</div>
<f7-segmented class="image-menu" raised>
<f7-button popover-open="#region-popover">
<RegionIcon :region="activeRegion" />
<RegionIcon :region="activeRegion" :iconSet="getIconSet" />
</f7-button>
<f7-button v-if="!videoAvailable" :class="(!modelLoading) ? '' : 'disabled'" popover-open="#capture-popover">
<SvgIcon icon="camera_add"/>
@@ -77,16 +77,16 @@
<f7-popover id="region-popover" class="popover-button-menu">
<f7-segmented raised class="segment-button-menu">
<f7-button :class="(getRegions.includes('thorax')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
<RegionIcon :region="0" />
<RegionIcon :region="0" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
<RegionIcon :region="1" />
<RegionIcon :region="1" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
<RegionIcon :region="2" />
<RegionIcon :region="2" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<RegionIcon :region="3" />
<RegionIcon :region="3" :iconSet="getIconSet" />
</f7-button>
</f7-segmented>
</f7-popover>

11
src/pages/home.vue
View File

@@ -24,16 +24,16 @@
<p style="text-align: center; margin: 0;">Select a region to begin.</p>
<div class="region-grid">
<f7-button :class="`region-button thorax${isAgreed && getRegions.includes('thorax') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('thorax') && '/detect/thorax/'">
<RegionIcon class="region-image" :region="0" />
<RegionIcon class="region-image" :region="0" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="`region-button abdomen${isAgreed && getRegions.includes('abdomen') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('abdomen') && '/detect/abdomen/'">
<RegionIcon class="region-image" :region="1" />
<RegionIcon class="region-image" :region="1" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="`region-button limbs${isAgreed && getRegions.includes('limbs') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('limbs') && '/detect/limbs/'">
<RegionIcon class="region-image" :region="2" />
<RegionIcon class="region-image" :region="2" :iconSet="getIconSet" />
</f7-button>
<f7-button :class="`region-button headneck${isAgreed && getRegions.includes('head') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('head') && '/detect/head/'">
<RegionIcon class="region-image" :region="3" />
<RegionIcon class="region-image" :region="3" :iconSet="getIconSet" />
</f7-button>
</div>
</div>
@@ -97,7 +97,8 @@
</style>
<script>
import RegionIcon from '../components/region-icon.vue'
import { touchstart } from 'dom7'
import RegionIcon from '../components/region-icon.vue'
import store from '../js/store'
import { f7 } from 'framework7-vue'