Add image mode chooser (#51)

Closes: #46

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

Reviewed-on: Georgi_Lab/ALVINN_f7#51

src/components/svg-icon.vue

@@ -3,6 +3,9 @@
     <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"/>
+    <path v-else-if="icon == 'photo_library'" d="M360-400h400L622-580l-92 120-62-80-108 140Zm-40 160q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/>
+    <path v-else-if="icon == 'no_photography'" d="m880-195-80-80v-405H638l-73-80H395l-38 42-57-57 60-65h240l74 80h126q33 0 56.5 23.5T880-680v485Zm-720 75q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h41l80 80H160v480h601l80 80H160Zm466-215q-25 34-62.5 54.5T480-260q-75 0-127.5-52.5T300-440q0-46 20.5-83.5T375-586l58 58q-24 13-38.5 36T380-440q0 42 29 71t71 29q29 0 52-14.5t36-38.5l58 58Zm-18-233q25 24 38.5 57t13.5 71v12q0 6-1 12L456-619q6-1 12-1h12q38 0 71 13.5t57 38.5ZM819-28 27-820l57-57L876-85l-57 57ZM407-440Zm171-57Z"/>
+    <path v-else-if="icon == 'photo_camera'" d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/>
   </svg>
 </template>
   
@@ -13,7 +16,7 @@
       icon: {
         type: String,
         validator(value) {
-          return ['image','videocam','visibility'].includes(value)
+          return ['image','videocam','visibility','photo_library','no_photography','photo_camera'].includes(value)
         }
       },
       fillColor: {

src/pages/detect.vue

@@ -30,7 +30,7 @@
         <f7-button popover-open="#region-popover">
           <RegionIcon :region="activeRegion" />
         </f7-button>
-        <f7-button @click="selectImage">
+        <f7-button popover-open="#capture-popover">
           <SvgIcon icon="image" fill-color="var(--avn-theme-color)"/>
         </f7-button>
         <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
@@ -40,7 +40,7 @@
           <SvgIcon icon="videocam" fill-color="var(--avn-theme-color)"/>
         </f7-button>
       </f7-segmented>
-      <input v-if="!isCordova" type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
+      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
     </f7-block>
 
     <f7-panel :id="detectorName + '-settings'" right cover>
@@ -82,6 +82,17 @@
       </f7-segmented>
     </f7-popover>
 
+    <f7-popover id="capture-popover">
+      <f7-segmented raised style="flex-wrap: wrap; flex-direction: column;">
+        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('camera')">
+          <SvgIcon icon="photo_camera" />
+        </f7-button>
+        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
+          <SvgIcon icon="photo_library" />
+        </f7-button>
+      </f7-segmented>
+    </f7-popover>
+
   </f7-page>
 </template>
 
@@ -345,8 +356,13 @@
           this.detectorLabels.forEach( s => s.detect = false )
         }
       },
-      selectImage () {
+      selectImage (mode) {
-        if (this.isCordova) {
+        if (mode == "camera") {
+          this.$refs.image_chooser.setAttribute("capture","environment")
+        } else {
+          this.$refs.image_chooser.removeAttribute("capture")
+        }
+        if (this.isCordova && mode == "camera") {
             navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
         } else {
           var loadResult = this.$refs.image_chooser.click()