Add preloader animation

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
2024-01-11 21:05:50 -07:00
9 changed files with 145 additions and 262 deletions
--- a/README.md
+++ b/README.md
@@ -1,31 +1,101 @@
 # ALVINN

-Anatomy Lab Visual Identification Neural Net (A.L.V.I.N.N) is a f7 based app for using a computer vision neural net model to identify anatomical structures in photographic imagery.
+## Framework7 CLI Options

-## Install
-* **Android:** Download the latest Android apk in [packages](https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/packages) and open the downloaded file to install.
-* **iOS:** To do
-* **Web app:** To do
-* **Run from source:** Clone this repository and in the root directory run `npm install` followed by `npm start`.  For more information see [f7 info](f7_info.md).
+Framework7 app created with following options:

-## Quick Start
-1. From the main screen of the app, select the menu icon in the upper left corner and go to `Settings`.
-1. Make sure that `Use external server` option is selected and fill in address and port parameters to connect to a back end serving the ALVINN models (Doods2 is the default backend).
-1. Save the settings and return to the main screen.
-1. Select the region of the body you want to identify structures from.
-1. In the region page, click on the camera icon to take a new picture or load a picture from storage. When the picture load, any identifiable structures will be listed as tags below the image.
-1. Click on each tag to see the structure highlighted in the image.
+```
+{
+  "cwd": "/home/mserver/ALVINN/ALVINN_f7",
+  "type": [
+    "web",
+    "pwa",
+    "cordova"
+  ],
+  "name": "ALVINN",
+  "pkg": "edu.midwestern.alvinn",
+  "framework": "vue",
+  "template": "single-view",
+  "cssPreProcessor": false,
+  "bundler": "vite",
+  "cordova": {
+    "folder": "cordova",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "plugins": [
+      "cordova-plugin-statusbar",
+      "cordova-plugin-keyboard",
+      "cordova-plugin-splashscreen"
+    ]
+  },
+  "theming": {
+    "customColor": true,
+    "color": "#002f65",
+    "darkMode": false,
+    "iconFonts": true
+  },
+  "customBuild": false
+}
+```

-## Advanced Features
-### Detection Parameters
-After an image has been loaded and structure detection has been performed, the detection parameters can be adjusted using the third detection menu button (eye).
-This button will make three tools available:
-1. Confidence slider: You can use the slider to change the confidence threshold for identifying structures.
-The default threshold is 50% confidence.
-1. Refresh detections: If there has been a permanent change to the structures detections, such as deleting a tag, the detection list can be reset to its original state.
-1. Structure list: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.
+## Install Dependencies

-### Submitting Images
-If all of the detection tags that are currently visible have been viewed, then the final button (cloud upload) on the detection menu will be enabled.
-This button will cause the image and the verified structures to be uploaded to the ALVINN project servers where that data will be available for further training of the neural net.
-If after the image has been uploaded, the available detection tags change, then the option to re-upload the image will be available if all the new tags have been viewed and verified.
+First of all we need to install dependencies, run in terminal
+```
+npm install
+```
+
+## NPM Scripts
+
+* 🔥 `start` - run development server
+* 🔧 `dev` - run development server
+* 🔧 `build` - build web app for production
+* 📱 `build-cordova` - build cordova app
+* 📱 `build-cordova-ios` - build cordova iOS app
+* 📱 `cordova-ios` - run dev build cordova iOS app
+* 📱 `build-cordova-android` - build cordova Android app
+* 📱 `cordova-android` - run dev build cordova Android app
+
+## Vite
+
+There is a [Vite](https://vitejs.dev) bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Vite config located in `vite.config.js`.
+
+## PWA
+
+This is a PWA. Don't forget to check what is inside of your `service-worker.js`. It is also recommended that you disable service worker (or enable "Update on reload") in browser dev tools during development.
+
+## Cordova
+
+Cordova project located in `cordova` folder. You shouldn't modify content of `cordova/www` folder. Its content will be correctly generated when you call `npm run cordova-build-prod`.
+## Assets
+
+Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
+
+```
+framework7 assets
+```
+
+Or launch UI where you will be able to change icons and splash screens:
+
+```
+framework7 assets --ui
+```
+
+
+
+## Documentation & Resources
+
+* [Framework7 Core Documentation](https://framework7.io/docs/)
+* [Framework7 Vue Documentation](https://framework7.io/vue/)
+
+
+* [Framework7 Icons Reference](https://framework7.io/icons/)
+* [Community Forum](https://forum.framework7.io)
+
+## Support Framework7
+
+Love Framework7? Support project by donating or pledging on:
+- Patreon: https://patreon.com/framework7
+- OpenCollective: https://opencollective.com/framework7
--- a/cordova/config.xml
+++ b/cordova/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="edu.midwestern.alvinn" version="0.2.0" 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">
+<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">
--- a/cordova/package.json
+++ b/cordova/package.json
@@ -1,7 +1,7 @@
 {
  "name": "edu.midwestern.alvinn",
  "displayName": "ALVINN",
-  "version": "0.2.0",
+  "version": "0.1.0-b",
  "description": "Anatomy Lab Visual Identification Neural Network.",
  "main": "index.js",
  "scripts": {
--- a/f7_info.md
+++ b/f7_info.md
@@ -1,101 +0,0 @@
-# ALVINN
-
-## Framework7 CLI Options
-
-Framework7 app created with following options:
-
-```
-{
-  "cwd": "/home/mserver/ALVINN/ALVINN_f7",
-  "type": [
-    "web",
-    "pwa",
-    "cordova"
-  ],
-  "name": "ALVINN",
-  "pkg": "edu.midwestern.alvinn",
-  "framework": "vue",
-  "template": "single-view",
-  "cssPreProcessor": false,
-  "bundler": "vite",
-  "cordova": {
-    "folder": "cordova",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "plugins": [
-      "cordova-plugin-statusbar",
-      "cordova-plugin-keyboard",
-      "cordova-plugin-splashscreen"
-    ]
-  },
-  "theming": {
-    "customColor": true,
-    "color": "#002f65",
-    "darkMode": false,
-    "iconFonts": true
-  },
-  "customBuild": false
-}
-```
-
-## Install Dependencies
-
-First of all we need to install dependencies, run in terminal
-```
-npm install
-```
-
-## NPM Scripts
-
-* 🔥 `start` - run development server
-* 🔧 `dev` - run development server
-* 🔧 `build` - build web app for production
-* 📱 `build-cordova` - build cordova app
-* 📱 `build-cordova-ios` - build cordova iOS app
-* 📱 `cordova-ios` - run dev build cordova iOS app
-* 📱 `build-cordova-android` - build cordova Android app
-* 📱 `cordova-android` - run dev build cordova Android app
-
-## Vite
-
-There is a [Vite](https://vitejs.dev) bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Vite config located in `vite.config.js`.
-
-## PWA
-
-This is a PWA. Don't forget to check what is inside of your `service-worker.js`. It is also recommended that you disable service worker (or enable "Update on reload") in browser dev tools during development.
-
-## Cordova
-
-Cordova project located in `cordova` folder. You shouldn't modify content of `cordova/www` folder. Its content will be correctly generated when you call `npm run cordova-build-prod`.
-## Assets
-
-Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
-
-```
-framework7 assets
-```
-
-Or launch UI where you will be able to change icons and splash screens:
-
-```
-framework7 assets --ui
-```
-
-
-
-## Documentation & Resources
-
-* [Framework7 Core Documentation](https://framework7.io/docs/)
-* [Framework7 Vue Documentation](https://framework7.io/vue/)
-
-
-* [Framework7 Icons Reference](https://framework7.io/icons/)
-* [Community Forum](https://forum.framework7.io)
-
-## Support Framework7
-
-Love Framework7? Support project by donating or pledging on:
- Patreon: https://patreon.com/framework7
- OpenCollective: https://opencollective.com/framework7
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "alvinn",
  "private": true,
-  "version": "0.2.0",
+  "version": "0.1.1",
  "description": "ALVINN",
  "repository": "",
  "license": "UNLICENSED",
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -10,7 +10,7 @@
          <f7-list-item link="/about/">About ALVINN</f7-list-item>
        </f7-list>
        <f7-toolbar class="panel-bar" position="bottom">
-          <span>version 0.2.0</span>
+          <span>version 0.1.1</span>
        </f7-toolbar>
      </f7-page>
    </f7-view>
@@ -78,11 +78,6 @@
        this.showDisclaimer = false
        store().agree()
      }
-      var loadServerSettings = localStorage.getItem('serverSettings')
-      if (!loadServerSettings) {
-        //Temp default settings for MWU deployment
-        localStorage.setItem('serverSettings','{"use":true,"address":"10.188.0.98","port":"9001","previous":{"10.188.0.98":"9001"}}')
-      }
    },
    methods: {
      setAgreement () {
--- a/src/components/svg-icon.vue
+++ b/src/components/svg-icon.vue
@@ -6,15 +6,10 @@
    <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"/>
-    <path v-else-if="icon == 'camera_add'" d="M440-440ZM120-120q-33 0-56.5-23.5T40-200v-480q0-33 23.5-56.5T120-760h126l50-54q11-12 26.5-19t32.5-7h165q17 0 28.5 11.5T560-800q0 17-11.5 28.5T520-760H355l-73 80H120v480h640v-320q0-17 11.5-28.5T800-560q17 0 28.5 11.5T840-520v320q0 33-23.5 56.5T760-120H120Zm640-640h-40q-17 0-28.5-11.5T680-800q0-17 11.5-28.5T720-840h40v-40q0-17 11.5-28.5T800-920q17 0 28.5 11.5T840-880v40h40q17 0 28.5 11.5T920-800q0 17-11.5 28.5T880-760h-40v40q0 17-11.5 28.5T800-680q-17 0-28.5-11.5T760-720v-40ZM440-260q75 0 127.5-52.5T620-440q0-75-52.5-127.5T440-620q-75 0-127.5 52.5T260-440q0 75 52.5 127.5T440-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Z"/>
    <path v-else-if="icon == 'cloud_upload'" d="M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Zm220-280Z"/>
    <path v-else-if="icon == 'cloud_done'" d="m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z"/>
    <path v-else-if="icon == 'check_list'" d="M655-200 513-342l56-56 85 85 170-170 56 57-225 226Zm0-320L513-662l56-56 85 85 170-170 56 57-225 226ZM80-280v-80h360v80H80Zm0-320v-80h360v80H80Z"/>
    <path v-else-if="icon == 'refresh_search'" d="M822-142 592-372q-32 26-71 39t-81 13q-42 0-80-12.5T290-368l58-58q20 12 43 19t49 7q75 0 127.5-52.5T620-580q0-75-52.5-127.5T440-760q-69 0-119.5 46.5T262-598l50-50 56 56-148 148L72-592l56-56 54 52q6-103 80-173.5T440-840q109 0 184.5 75.5T700-580q0 42-13 82t-39 70l230 230-56 56Z"/>
-    <path v-else-if="icon == 'thorax'" d="M200-120q-51 0-85.5-34.5T80-240v-167l105-281q12-33 42-52.5t65-19.5q45 0 76.5 32.5T400-649v49h-80v-49q0-13-9-22t-21-9q-10 0-18.5 5.5T260-660L160-392v152q0 17 11.5 28.5T200-200h120q17 0 28.5-11.5T360-240v-80h80v80q0 51-35 85.5T320-120H200Zm559 0H639q-50 0-85-34.5T519-240v-80h80v80q0 17 11.5 28.5T639-200h120q17 0 28.5-11.5T799-240v-152L699-660q-4-9-12-14.5t-18-5.5q-13 0-21.5 9t-8.5 22v49h-80v-49q0-46 31.5-78.5T667-760q35 0 64.5 19.5T774-688l105 281v167q0 51-35 85.5T759-120ZM320-456Zm319 0Zm-159-47L376-400l-56-56 120-120v-304h80v304l120 120-57 56-103-103Z"/>
-    <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"/>
  </svg>
 </template>
  
@@ -32,15 +27,10 @@
            'photo_library',
            'no_photography',
            'photo_camera',
-            'camera_add',
            'cloud_upload',
            'cloud_done',
            'check_list',
-            'refresh_search',
-            'thorax',
-            'abdomen',
-            'limbs',
-            'head'
+            'refresh_search'
          ]
          return iconList.includes(value)
        }
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -1,13 +1,13 @@
 <template>
  <f7-page name="detect" :id="detectorName + '-detect-page'">
    <!-- Top Navbar -->
-    <f7-navbar :sliding="false" :back-link="true" back-link-url="/" back-link-force>
+    <f7-navbar :sliding="false" back-link="true" back-link-url="/" back-link-force>
      <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
    </f7-navbar>
    <f7-block class="detect-grid">
      <div class="image-container">
-        <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
-        <SvgIcon v-if="!imageView"  :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
+        <canvas id="im-draw" ref="image_cvs" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
+        <SvgIcon v-if="!imageView"  icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
      </div>
      <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
        <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
@@ -24,12 +24,12 @@
        <f7-preloader v-if="detecting" size="32" style="color: var(--avn-theme-color);" />
      </div>
      <div v-if="showDetectSettings" class="detect-inputs" style="grid-area: detect-settings;">
-        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
-        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
-        <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`" style="flex: 0 1 20%">
+        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
+        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
+        <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`">
          <SvgIcon icon="check_list"/>
        </f7-button>
-        <f7-button @click="setData" style="flex: 0 1 20%">
+        <f7-button @click="setData">
          <SvgIcon icon="refresh_search"/>
        </f7-button>
      </div>
@@ -38,7 +38,7 @@
          <RegionIcon :region="activeRegion" />
        </f7-button>
        <f7-button popover-open="#capture-popover">
-          <SvgIcon icon="camera_add"/>
+          <SvgIcon icon="image"/>
        </f7-button>
        <f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
          <SvgIcon icon="visibility"/>
@@ -80,15 +80,15 @@

    <f7-popover id="capture-popover" class="popover-button-menu">
      <f7-segmented raised class="segment-button-menu">
+        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream">
+          <SvgIcon icon="videocam"/>
+        </f7-button>
        <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-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream">
-          <SvgIcon icon="videocam"/>
-        </f7-button>
      </f7-segmented>
    </f7-popover>

@@ -99,7 +99,7 @@
  .detect-grid {
    display: grid;
    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 56px auto min-content;
+    grid-template-rows: 1fr auto auto min-content;
    grid-template-areas: 
      "image-view"
      "result-view"
@@ -112,8 +112,8 @@

  .image-container {
    grid-area: image-view;
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
    min-width: 0;
    min-height: 0;
    position: relative;
@@ -203,7 +203,7 @@

  @media (max-height: 450px) and (orientation: landscape) {
    .detect-grid {
-      grid-template-columns: minmax(0,1fr) minmax(56px,max-content) auto auto;
+      grid-template-columns: minmax(0,1fr) max-content auto auto;
      grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
      grid-template-areas: 
        "image-view result-view detect-settings menu-view";
@@ -319,19 +319,19 @@
    created () {
      switch (this.f7route.params.region) {
        case 'thorax':
-          this.activeRegion = 0
-          this.detectorName = 'thorax'
+        this.activeRegion = 0
+        this.detectorName = 'thorax'
          break;
        case 'abdomen':
-          this.activeRegion = 1
-          this.detectorName = 'combined'
-            break;
+        this.activeRegion = 1
+        this.detectorName = 'combined'
+          break;
        case 'limbs':
-          this.activeRegion = 2
-          this.detectorName = 'defaultNew'
+        this.activeRegion = 2
+        this.detectorName = 'defaultNew'
          break;
        case 'head':
-          this.activeRegion = 3
+        this.activeRegion = 3
          break;
      }
      var loadServerSettings = localStorage.getItem('serverSettings')
@@ -342,13 +342,10 @@
        var xhr = new XMLHttpRequest()
        xhr.open("GET", modelURL)
        xhr.setRequestHeader('Content-Type', 'application/json')
-        xhr.timeout = 10000
-        xhr.ontimeout = this.remoteTimeout
        xhr.onload = function () {
          if (this.status !== 200) {
+            //this.response.text().then(function(message){alert(message)})
            console.log(xhr.response)
-            const errorResponse = JSON.parse(xhr.response)
-            f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
            return;
          }
          var detectors = JSON.parse(xhr.response).detectors
@@ -358,16 +355,13 @@
            .map( l => { return {'name': l, 'detect': true} } )
          self.detectorLabels = findLabel || []
        }
-        
        xhr.send()
      }
-      window.onresize = (e) => { this.selectChip('redraw') }
    },
    computed: {
      showResults () {
        var filteredResults = this.resultData.detections
        if (!filteredResults) return []
-
        var allSelect = this.detectorLabels.every( s => { return s.detect } )
        var selectedLabels = this.detectorLabels
            .filter( l => { return l.detect })
@@ -377,7 +371,7 @@
          filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
          filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
        })
-        return filteredResults
+          return filteredResults
      },
      numResults () {
        return this.showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted }).length
@@ -402,19 +396,17 @@
          var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
          var xhr = new XMLHttpRequest()
          xhr.open("POST", modelURL)
-          xhr.timeout = 10000
-          xhr.ontimeout = this.remoteTimeout
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.onload = function () {
-            self.detecting = false
            if (this.status !== 200) {
+              //this.response.text().then(function(message){alert(message)})
              console.log(xhr.response)
-              const errorResponse = JSON.parse(xhr.response)
-              f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
+              self.detecting = false
              return;
            }
            self.resultData = JSON.parse(xhr.response)
            self.uploadDirty = true
+            self.detecting = false
          }
          
          var doodsData = {
@@ -431,10 +423,6 @@
          f7.dialog.alert('Using built-in model')
        }
      },
-      remoteTimeout () {
-        this.detecting = false
-        f7.dialog.alert('No connection to remote ALVINN instance.  Please check app settings.')
-      },
      selectAll (ev) {
        if (ev.target.checked) {
          this.detectorLabels.forEach( s => s.detect = true )
@@ -466,19 +454,23 @@
          return
        }

-        if (iChip == 'redraw') {
-          if (this.selectedChip == -1) return
-          iChip = this.selectedChip
-        }
-
-        const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
-
-        var boxLeft = boxCoords.cvsLeft
-        var boxTop = boxCoords.cvsTop
-        var boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
-        var boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
-        imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
+        var imgWidth
+        var imgHeight
        this.selectedChip = iChip
+        var imgAspect = this.imageView.width / this.imageView.height
+        var rendAspect = imCanvas.width / imCanvas.height
+        if (imgAspect >= rendAspect) {
+          imgWidth = imCanvas.width
+          imgHeight = imCanvas.width / imgAspect
+        } else {
+          imgWidth = imCanvas.height * imgAspect
+          imgHeight = imCanvas.height
+        }
+        var boxLeft = (imCanvas.width - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth
+        var boxTop = (imCanvas.height - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight
+        var boxWidth = (Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth
+        var boxHeight = (Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight
+        imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
        this.resultData.detections[iChip].beenViewed = true
      },
      deleteChip ( iChip ) {
@@ -541,44 +533,6 @@
      },
      onLevelChange(value) {
        this.detectorLevel = value
-      },
-      structureClick(e) {
-        const boxCoords = this.box2cvs(this.showResults)
-        var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX &&
-            r.cvsRight >= e.offsetX &&
-            r.cvsTop <= e.offsetY &&
-            r.cvsBottom >= e.offsetY &&
-            this.resultData.detections[i].resultIndex > this.selectedChip &&
-            this.resultData.detections[i].aboveThreshold &&
-            this.resultData.detections[i].isSearched &&
-            !this.resultData.detections[i].isDeleted
-        })
-        this.selectChip(findBox >= 0 ? this.resultData.detections[findBox].resultIndex : this.selectedChip)
-      },
-      box2cvs(boxInput) {
-        if (!boxInput) return []
-        const boxList = boxInput.length ? boxInput : [boxInput]
-        const [imCanvas, imageCtx] = this.resetView()
-        var imgWidth
-        var imgHeight
-        const imgAspect = this.imageView.width / this.imageView.height
-        const rendAspect = imCanvas.width / imCanvas.height
-        if (imgAspect >= rendAspect) {
-          imgWidth = imCanvas.width
-          imgHeight = imCanvas.width / imgAspect
-        } else {
-          imgWidth = imCanvas.height * imgAspect
-          imgHeight = imCanvas.height
-        }
-        const cvsCoords = boxList.map( (d, i) => {
-          return {
-            "cvsLeft": (imCanvas.width - imgWidth) / 2 + d.left * imgWidth,
-            "cvsRight": (imCanvas.width - imgWidth) / 2 + d.right * imgWidth,
-            "cvsTop": (imCanvas.height - imgHeight) / 2 + d.top * imgHeight,
-            "cvsBottom": (imCanvas.height - imgHeight) / 2 + d.bottom * imgHeight
-          }
-        })
-        return cvsCoords
      }
    }
  }
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -15,11 +15,6 @@
            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
          </f7-list>
-          <span>Other servers</span>
-          <f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
-            <f7-list-item v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
-            <f7-list-item v-if="Object.keys(otherIp).length == 0" title="No previous server settings"></f7-list-item>
-          </f7-list>
          <f7-block-title medium>Dark Mode</f7-block-title>
          <f7-list style="width: 100%;">
            <f7-list-item title="Auto" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
@@ -41,29 +36,16 @@
              serverSettings: {
                use: false,
                address: '10.170.64.22',
-                port: '9001',
-                previous: {}
+                port: '9001'
              },
              themeSettings: {
                darkMode: 'auto'
              }
            }
        },
-        computed: {
-          otherIp () {
-            let filteredIps = {}
-            for (var oldIp in this.serverSettings.previous) {
-              if (oldIp != this.serverSettings.address) {
-                filteredIps[oldIp] = this.serverSettings.previous[oldIp]
-              }
-            }
-            return filteredIps
-          }
-        },
        created () {
            var loadServerSettings = localStorage.getItem('serverSettings')
            if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
-            if (!this.serverSettings.previous) this.serverSettings.previous = {}
            var loadThemeSettings = localStorage.getItem('themeSettings')
            if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
        },
@@ -72,9 +54,6 @@
                let saveSetting = new Promise(
                  (saved,failed) => {
                    try {
-                      if (this.serverSettings.use) {
-                        this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
-                      }
                      localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
                      localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
                      saved()
@@ -103,10 +82,6 @@
            setDarkMode (mode) {
              this.themeSettings.darkMode = mode
              f7.setDarkMode(mode)
-            },
-            setServerProps (add, port) {
-              this.serverSettings.address = add
-              this.serverSettings.port = port
            }
          }
        }