Resolve issues with cordova android build (#28)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: Georgi_Lab/ALVINN_f7#28

cordova/config.xml

@@ -11,12 +11,15 @@
 
     <allow-navigation href="*" />
 
+    <access origin="*" />
+
     <platform name="android">
       <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="#002f65" />
+      <preference name="AndroidInsecureFileModeEnabled" value="true" />
       <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.json

@@ -14,6 +14,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "cordova-android": "^12.0.0",
+    "cordova-browser": "^7.0.0",
     "cordova-ios": "^7.0.1",
     "cordova-plugin-keyboard": "^1.2.0",
     "cordova-plugin-splashscreen": "^6.0.2",
@@ -27,7 +28,8 @@
     },
     "platforms": [
       "ios",
-      "android"
+      "android",
+      "browser"
     ]
   }
 }

src/pages/detect.vue

@@ -9,15 +9,19 @@
     </f7-navbar>
     <f7-block class="detect-grid">
       <div class="image-container">
-        <img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
-        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
+        <img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
+        <img v-else src="../assets/icons/image.svg" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
+        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none; box-sizing: border-box;" />
       </div>
       <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
       </div>
       <f7-segmented class="image-menu" raised>
         <f7-button popover-open="#region-popover">
-          <img :src="imageRegion" />
+          <img v-if="activeRegion == 0" src="../assets/regions/thorax.svg" />
+          <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" />
@@ -49,7 +53,7 @@
             <f7-toggle v-model:checked="debugOn" style="margin-right: 16px;" />
           </f7-list-item>
         </f7-list>
-        <f7-block v-if="debugOn" v-html="debugText" />
+        <f7-block v-if="debugOn" v-html="debugDisplay" />
       </f7-page>
     </f7-panel>
   </f7-page>
@@ -182,7 +186,7 @@
         activeRegion: 4,
         imageRegion: '',
         imageLoaded: false,
-        imageView: '../assets/icons/image.svg',
+        imageView: '',
         reader: new FileReader(),
         detectorName: '',
         detectSettings: {
@@ -191,29 +195,25 @@
           },
         serverSettings: {},
         debugOn: true,
-        debugText: ''
+        debugText: ['Variables loaded']
       }
     },
     created () {
       switch (this.f7route.params.region) {
         case 'thorax':
         this.activeRegion = 0
-        this.imageRegion = '../assets/regions/thorax.svg'
         this.detectorName = 'thorax'
           break;
         case 'abdomen':
         this.activeRegion = 1
-        this.imageRegion = '../assets/regions/abdpel.svg'
         this.detectorName = 'combined'
           break;
         case 'limbs':
         this.activeRegion = 2
-        this.imageRegion = '../assets/regions/limb.svg'
         this.detectorName = 'defaultNew'
           break;
         case 'head':
         this.activeRegion = 3
-        this.imageRegion = '../assets/regions/headneck.svg'
           break;
       }
       var loadServerSettings = localStorage.getItem('serverSettings')
@@ -225,22 +225,27 @@
         xhr.open("GET", modelURL)
         xhr.setRequestHeader('Content-Type', 'application/json')
         xhr.onload = function () {
-          if (self.debugOn) self.debugText = this.response //DEBUG ANDROID BUILD
+          if (self.debugOn) self.debugText.push(xhr.response) //DEBUG ANDROID BUILD
           if (this.status !== 200) {
             //this.response.text().then(function(message){alert(message)})
-            console.log(this.response)
+            self.debugText.push(xhr.response)
+            console.log(xhr.response)
             return;
           }
-          var detectors = JSON.parse(this.response).detectors
+          var detectors = JSON.parse(xhr.response).detectors
           self.detectSettings.filter = detectors
             .find( d => { return d.name == self.detectorName } ).labels
             .filter( l => { return l != "" } ).sort()
             .map( l => { return {'name': l, 'detect': true} } )
         }
-        
         xhr.send()
       }
     },
+    computed: {
+      debugDisplay () {
+        return this.debugText.join('<br/>')
+      }
+    },
     methods: {
       chipColor (confVal) {
         if (confVal >= 90) return 'green'
@@ -255,13 +260,14 @@
           xhr.open("POST", modelURL)
           xhr.setRequestHeader('Content-Type', 'application/json')
           xhr.onload = function () {
-            if (self.debugOn) self.debugText = this.response //DEBUG ANDROID BUILD
+            if (self.debugOn) self.debugText.push(xhr.response)
             if (this.status !== 200) {
               //this.response.text().then(function(message){alert(message)})
-              console.log(this.response)
+              self.debugText.push(xhr.response)
+              console.log(xhr.response)
               return;
             }
-            self.resultData = JSON.parse(this.response)
+            self.resultData = JSON.parse(xhr.response)
           }
           
           var detectStructures = {}
@@ -313,12 +319,13 @@
         box.style.display = 'block'
         box.style.left = `${(img.offsetWidth - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth}px`
         box.style.top = `${(img.offsetHeight - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight}px`
-        box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
-        box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * imgHeight}px`
+        box.style.width = `${(Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth}px`
+        box.style.height = `${(Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight}px`
       },
       deleteChip ( iChip ) {
         f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {
           this.resultData.detections.splice(iChip, 1)
+          this.selectChip = -1
         });
       },
       getImage () {