Add camera capability (#45)

Closes: #29

Fixes access to the camera in the android cordova build and maintains access when using the vite build.

Reviewed-on: Georgi_Lab/ALVINN_f7#45

cordova/config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="edu.midwestern.alvinn" version="0.1.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="edu.midwestern.alvinn" version="0.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
     <name>ALVINN</name>
     <description>Anatomy Lab Visual Identification Neural Network.</description>
     <author email="jgeorg@midwestern.edu" href="https://midwestern.edu">
@@ -14,12 +14,16 @@
     <access origin="*" />
 
     <platform name="android">
+      <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
+          <application android:usesCleartextTraffic="true" />
+      </edit-config>
       <preference name="StatusBarOverlaysWebView" value="false" />
       <preference name="android-minSdkVersion" value="22" />
       <preference name="SplashMaintainAspectRatio" value="true" />
       <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/splashscreen.xml" />
       <preference name="AndroidWindowSplashScreenBackground" value="#0f206c" />
       <preference name="AndroidInsecureFileModeEnabled" value="true" />
+      <preference name="hostname" value="localhost" />
       <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
       <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
       <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />

cordova/package-lock.json

@@ -12,6 +12,7 @@
         "cordova-android": "^12.0.1",
         "cordova-browser": "^7.0.0",
         "cordova-ios": "^7.0.1",
+        "cordova-plugin-camera": "^7.0.0",
         "cordova-plugin-keyboard": "^1.2.0",
         "cordova-plugin-statusbar": "^4.0.0"
       }
@@ -501,6 +502,46 @@
         "node": ">=16.13.0"
       }
     },
+    "node_modules/cordova-plugin-camera": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-camera/-/cordova-plugin-camera-7.0.0.tgz",
+      "integrity": "sha512-OVQWZTBb18Y6e5c+bbXt3E4Z1yGnYqaywh2h5vVr/+nxMcdMIE+lm527bRK5vLN/RUqhGYP/Z+5n+O7Fk7fVNw==",
+      "dev": true,
+      "engines": {
+        "cordovaDependencies": {
+          "3.0.0": {
+            "cordova-android": ">=6.3.0"
+          },
+          "4.1.0": {
+            "cordova": ">=7.1.0",
+            "cordova-android": ">=6.3.0"
+          },
+          "5.0.0": {
+            "cordova": ">=9.0.0",
+            "cordova-android": ">=9.0.0",
+            "cordova-ios": ">=5.1.0"
+          },
+          "5.0.4-dev": {
+            "cordova": ">=9.0.0",
+            "cordova-android": "<10.0.0",
+            "cordova-ios": ">=5.1.0"
+          },
+          "6.0.0": {
+            "cordova": ">=9.0.0",
+            "cordova-android": ">=10.0.0",
+            "cordova-ios": ">=5.1.0"
+          },
+          "7.0.0": {
+            "cordova": ">=9.0.0",
+            "cordova-android": ">=12.0.0",
+            "cordova-ios": ">=5.1.0"
+          },
+          "8.0.0": {
+            "cordova": ">100"
+          }
+        }
+      }
+    },
     "node_modules/cordova-plugin-keyboard": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-keyboard/-/cordova-plugin-keyboard-1.2.0.tgz",
@@ -2605,6 +2646,12 @@
         "xml-escape": "^1.1.0"
       }
     },
+    "cordova-plugin-camera": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-camera/-/cordova-plugin-camera-7.0.0.tgz",
+      "integrity": "sha512-OVQWZTBb18Y6e5c+bbXt3E4Z1yGnYqaywh2h5vVr/+nxMcdMIE+lm527bRK5vLN/RUqhGYP/Z+5n+O7Fk7fVNw==",
+      "dev": true
+    },
     "cordova-plugin-keyboard": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-keyboard/-/cordova-plugin-keyboard-1.2.0.tgz",

cordova/package.json

@@ -16,13 +16,17 @@
     "cordova-android": "^12.0.1",
     "cordova-browser": "^7.0.0",
     "cordova-ios": "^7.0.1",
+    "cordova-plugin-camera": "^7.0.0",
     "cordova-plugin-keyboard": "^1.2.0",
     "cordova-plugin-statusbar": "^4.0.0"
   },
   "cordova": {
     "plugins": {
       "cordova-plugin-statusbar": {},
-      "cordova-plugin-keyboard": {}
+      "cordova-plugin-keyboard": {},
+      "cordova-plugin-camera": {
+        "ANDROIDX_CORE_VERSION": "1.6.+"
+      }
     },
     "platforms": [
       "ios",

src/pages/detect.vue

@@ -39,7 +39,7 @@
           <SvgIcon icon="videocam" fill-color="var(--avn-theme-color)"/>
         </f7-button>
       </f7-segmented>
-      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
+      <input v-if="!isCordova" type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
     </f7-block>
 
     <f7-panel :id="detectorName + '-settings'" right cover>
@@ -55,6 +55,7 @@
               </f7-list>
             </f7-accordion-content>
           </f7-list-item>
+          <f7-list-item title="Cordova">{{ isCordova }}</f7-list-item>
           <f7-list-item title="Turn on debugging">
             <f7-toggle v-model:checked="debugOn" style="margin-right: 16px;" />
           </f7-list-item>
@@ -225,13 +226,13 @@
         imageRegion: '',
         imageLoaded: false,
         imageView: '',
-        reader: new FileReader(),
         detectorName: '',
         detectorLevel: 50,
         detectorLabels: [],
         serverSettings: {},
         debugOn: false,
-        debugText: ['Variables loaded']
+        debugText: ['Variables loaded'],
+        isCordova: !!window.cordova
       }
     },
     created () {
@@ -334,7 +335,7 @@
           var doodsData = {
             "detector_name": this.detectorName,
             "detect": detectStructures,
-            "data": this.reader.result.split(',')[1]
+            "data": this.imageView.split(',')[1]
           }
           */
           var doodsData = {
@@ -359,7 +360,14 @@
         }
       },
       selectImage () {
-        var loadResult = this.$refs.image_chooser.click()
+        if (this.isCordova) {
+            navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
+        } else {
+          var loadResult = this.$refs.image_chooser.click()
+        }
+      },
+      onFail (message) {
+        alert(`Camera fail: ${message}`)
       },
       selectChip ( iChip ) {
         if (this.selectedChip == iChip) {
@@ -394,21 +402,26 @@
           this.resetView()
         });
       },
-      getImage () {
+      getImage (searchImage) {
         var self = this
-        const searchImage = this.$refs.image_chooser.files[0]
+        let loadImage =new Promise(resolve => {
-        let loadImage =new Promise((resolve, reject) => {
+          if (this.isCordova) {
-          this.imageView = URL.createObjectURL(searchImage)
+            this.imageView = 'data:image/jpg;base64,' + searchImage
-          this.reader.readAsDataURL(searchImage)
+          } else {
+            const searchImage = this.$refs.image_chooser.files[0]
+            var reader = new FileReader()
+            reader.addEventListener("loadend", () => {this.imageView = reader.result})
+            reader.readAsDataURL(searchImage)
+          }
           resolve()
         })
-        loadImage.then(() => {
+        loadImage.then((imageData) => {
           this.imageLoaded = true
           this.resultData = {}
           this.resetView()
         }).catch((e) => {
           console.log(e.message)
-          f7.dialog.alert('Error loading image')
+          f7.dialog.alert(`Error loading image: ${e.message}`)
         })
       },
       resetView() {