Randomly select region icon set

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

src/components/region-icon.vue

@@ -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
+        }
       }
     }
   }

src/js/store.js

@@ -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,

src/pages/detect.vue

@@ -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>

src/pages/home.vue

@@ -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,6 +97,7 @@
 </style>
 
 <script>
+  import { touchstart } from 'dom7'
 import RegionIcon from '../components/region-icon.vue'
   import store from '../js/store'
   import { f7 } from 'framework7-vue'