Add sample image option (#136)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: #136

src/components/svg-icon.vue

@@ -15,6 +15,7 @@
     <path v-else-if="icon == 'abdomen'" d="M120-80v-240q0-50 35-85t85-35h80q50 0 85-35t35-85q0-17-11.5-28.5T400-600q-33 0-56.5-23.5T320-680v-200h80v200q50 0 85 35t35 85q0 83-58.5 141.5T320-360h-80q-17 0-28.5 11.5T200-320v240h-80Zm240 0h-80v-80q0-50 35-85t85-35h160q83 0 141.5-58.5T760-480v-40q0-83-58.5-141.5T560-720q-33 0-56.5-23.5T480-800v-80h80v80q117 0 198.5 81.5T840-520v40q0 117-81.5 198.5T560-200H400q-17 0-28.5 11.5T360-160v80Zm-160 0v-240q0-17 11.5-28.5T240-360h80q83 0 141.5-58.5T520-560q0-50-35-85t-85-35v-200 200q50 0 85 35t35 85q0 83-58.5 141.5T320-360h-80q-17 0-28.5 11.5T200-320v240Z"/>
     <path v-else-if="icon == 'limbs'" d="M540-440q17 0 28.5-11.5T580-480q0-7-1.5-12.5T574-503q11-4 18.5-14t7.5-23q0-17-11.5-28.5T560-580q-13 0-23 7t-14 19l-146-70q2-4 2.5-8t.5-8q0-17-11.5-28.5T340-680q-17 0-28.5 11.5T300-640q0 6 2 11.5t5 10.5q-11 4-19 14t-8 24q0 17 11.5 28.5T320-540q14 0 24-7.5t14-19.5l146 70-4 17q0 17 11.5 28.5T540-440ZM394-80q-16-47-24-92.5t-10-86q-2-40.5-.5-74.5t4.5-58q-1 0 0 0-22-5-50.5-12.5t-61-20.5Q220-437 186-455.5T119-500l50-70q39 35 81.5 55.5t78.5 32q36 11.5 60 15l24 3.5q18 1 28.5 15t7.5 32l-4.5 33.5q-4.5 33.5-5 83.5t7.5 109q8 59 33 111h-86Zm366 0h-80v-423q0-48-25.5-87T586-649L313-772l49-67 257 117q64 29 102.5 88T760-503v423Zm-280 0q-25-52-33-111t-7.5-109q.5-50 5-83.5L449-417q3-18-7.5-32T413-464l-24-3.5q-24-3.5-60-15t-78.5-32Q208-535 169-570q39 35 81.5 55.5t78.5 32q36 11.5 60 15l24 3.5q18 1 28.5 15t7.5 32l-4.5 33.5q-4.5 33.5-5 83.5t7.5 109q8 59 33 111Z"/>
     <path v-else-if="icon == 'head'" d="M194-80v-395h80v315h280v-193l105-105q29-29 45-65t16-77q0-40-16.5-76T659-741l-25-26-127 127H347l-43 43-57-56 67-67h160l160-160 82 82q40 40 62 90.5T800-600q0 57-22 107.5T716-402l-82 82v240H194Zm197-187L183-475q-11-11-17-26t-6-31q0-16 6-30.5t17-25.5l84-85 124 123q28 28 43.5 64.5T450-409q0 40-15 76.5T391-267Z"/>
+    <path v-else-if="icon == 'photo-sample'" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm40-80h400L545-420 440-280l-65-87-95 127Zm-40 80v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
   </svg>
 </template>
   
@@ -40,7 +41,8 @@
             'thorax',
             'abdomen',
             'limbs',
-            'head'
+            'head',
+            'photo-sample'
           ]
           return iconList.includes(value)
         }

src/css/detect.css

@@ -111,6 +111,15 @@
   max-width: 100px;
 }
 
+.dialog-buttons {
+  align-items: center;
+}
+
+.avn-dialog-button {
+  font-size: 17px;
+  align-self: center;
+}
+
 /*Additional styles for small format landscape orientation*/
 @media (max-height: 450px) and (orientation: landscape) {
   .detect-grid {

src/pages/detect.vue

@@ -94,8 +94,8 @@
         <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
           <SvgIcon icon="photo_library" />
         </f7-button>
-        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="videoStream">
-          <SvgIcon icon="videocam"/>
+        <f7-button v-if="otherSettings.demo" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
+          <SvgIcon icon="photo-sample"/>
         </f7-button>
       </f7-segmented>
     </f7-popover>
@@ -286,6 +286,19 @@
           this.videoAvailable = await this.openCamera(this.$refs.image_container)
           if (this.videoAvailable) { return }
         }
+        if (mode == 'sample') {
+          f7.dialog.create({
+            title: 'Sample images',
+            buttons: [
+              {text: 'Sample 1', close: true, onClick: () => this.getImage('sample1'), cssClass: 'avn-dialog-button'},
+              {text: 'Sample 2', close: true, onClick: () => this.getImage('sample2'), cssClass: 'avn-dialog-button'},
+              {text: 'Sample 3', close: true, onClick: () => this.getImage('sample3'), cssClass: 'avn-dialog-button'},
+              {text: 'Cancel', close: true, color: 'red', cssClass: 'avn-dialog-button'}
+            ],
+            verticalButtons: true
+          }).open()
+          return
+        }
         this.$refs.image_chooser.click()
       },
       onFail (message) {
@@ -341,15 +354,22 @@
           } else if (this.isCordova && this.imageLoadMode == "camera") {
             this.detecting = true
             resolve('data:image/jpg;base64,' + searchImage)
-          } else {
-            const searchImage = this.$refs.image_chooser.files[0]
-            this.$refs.image_chooser.value=[]
-            var reader = new FileReader()
-            reader.addEventListener("load", () => {
-              this.detecting = true
-              resolve(reader.result)
+          }
+          var reader = new FileReader()
+          reader.addEventListener("load", () => {
+            this.detecting = true
+            resolve(reader.result)
+          })
+          if (this.imageLoadMode == 'sample') {
+            fetch(`../samples/${this.detectorName}-${searchImage}.jpeg`).then( resp => {
+              return resp.blob()
+            }).then(respBlob => {
+              reader.readAsDataURL(respBlob)
             })
-            reader.readAsDataURL(searchImage)
+          } else {
+            const fileImage = this.$refs.image_chooser.files[0]
+            this.$refs.image_chooser.value=[]
+            reader.readAsDataURL(fileImage)
           }
         })
         loadImage.then((imgData) => {

src/pages/settings.vue

@@ -18,6 +18,10 @@
             <span style="margin-left: 16px;">Use mini ALVINN<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster, less accurate: recommended for slower devices" /></span>
             <f7-toggle v-model:checked="otherSettings.mini" style="margin-right: 16px;" />
           </div>
+          <div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
+            <span style="margin-left: 16px;">Enable demo mode</span>
+            <f7-toggle v-model:checked="otherSettings.demo" style="margin-right: 16px;" />
+          </div>
           <div style="display:flex; justify-content:space-between; width: 100%">
             <span style="margin-left: 16px;">Use external server</span>
             <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" />