src/assets/region-icon.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
+  <svg width="100%" height="100%" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
-    <svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
     <g :stroke="fillColor" stroke-width=".264583px">
       <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.471155 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" fill="none" />
       <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" />
@@ -9,10 +8,9 @@
         <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 == 4" 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"/>
+      <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>
-  </div>
 </template>
 
 <script>
@@ -22,7 +20,7 @@
       region: {
         type: Number,
         validator(value) {
-          return value >= 0 && value <= 4
+          return value >= 0 && value <= 3
         }
       },
       fillColor: {

src/components/app.vue

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

src/pages/detect.vue

@@ -18,11 +18,7 @@
       </div>
       <f7-segmented class="image-menu" raised>
         <f7-button popover-open="#region-popover">
-          <!--<img v-if="activeRegion == 0" src="../assets/regions/thorax.svg" />-->
+          <RegionIcon :region="activeRegion" fill-color="var(--f7-theme-color)"/>
-          <RegionIcon :region="activeRegion" />
-          <!--<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" />-->
         </f7-button>
         <f7-button @click="selectImage">
           <img src="../assets/icons/image.svg" />

src/pages/home.vue

@@ -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>
@@ -79,3 +79,13 @@
   }
 
 </style>
+
+<script>
+  import RegionIcon from '../assets/region-icon.vue'
+
+  export default {
+    components: {
+      RegionIcon
+    }
+  }
+</script>