Add structure info link and configuration

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

README.md

@@ -45,11 +45,12 @@ Configuring aspects of the hosted ALVINN PWA is done through the `conf.yaml` fil
 The following site settings are avaible:
 | name | description | values | default |
 | --- | --- | --- | --- |
-| `agreeExpire` | number of months before users are shown the site agreement dialog again - set to 0 to display dialog on every reload | integer >= 0 | 3 |
+| `agreeExpire` | number of months before users are shown the site agreement dialog again<br />set to 0 to display dialog on every reload | integer >= 0 | 3 |
 | `demo` | set to **true** to enable demo mode by default | boolean | false
 | `regions` | array of regions names to enable | thorax, abdomen, limbs, head | [thorax, abdomen, limbs, head] |
 | `useExternal` | detemines the ability to use an external detection server:<br />**none** - external server cannot be configured<br />**optional** - external server can be configured in the app's settings page<br />**list** - external server can be selected in the app's settings page but only the configured server(s) may be selected<br />**required** - external server settings from conf file will be used by default and disable server options in the settings page | none, optional, list, required | **optional** |
-| `external` | properties of the external server(s) ALVINN may connect t.<br />This setting must be a single element array if **useExternal** is set to **required**.<br />This setting must be an array of one or more elements if **useExternal** is set to **list** | external server settings array | []|
+| `external` | properties of the external server(s) ALVINN may connect to<br />This setting must be a single element array if **useExternal** is set to **required**.<br />This setting must be an array of one or more elements if **useExternal** is set to **list** | external server settings array | []|
+| `infoUrl` | root url for links to information about identified structures<br />Structure labels with spaces replaced by underscores will be appended to this value for full information links (*e.g.,* Abdominal_diapragm) | string | info link not shown |
 
 ### External server settings
 ALVINN can use an external object detection server instead of the built in models; settings for that external server are configured here. These settings must be configured if **site - useExternal** is set to **list** or **required**.

public/conf/conf.yaml

@@ -10,4 +10,5 @@ external:
     port: 9001
   - name: Georgi lab server
     address: "10.188.0.98"
-    port: 9001
+    port: 9001
+infoUrl: http://anatlabwiki.midwestern.edu/vetlab/index.php/

src/components/app.vue

@@ -96,6 +96,7 @@
       }
       store().set('enabledRegions',this.siteConf?.regions)
       store().set('siteDemo',this.siteConf?.demo)
+      store().set('infoUrl',this.siteConf?.infoUrl)
       const loadServerSettings = localStorage.getItem('serverSettings')
       if (this.siteConf?.useExternal) {
         if (!['none','list','optional','required'].includes(this.siteConf.useExternal)) {

src/css/detect.css

@@ -127,6 +127,15 @@
   align-self: center;
 }
 
+.structure-info {
+  position: absolute;
+  transform: translate(-50%,-50%);
+  z-index: 3;
+  color: rgb(15, 32, 108);
+  background: yellow;
+  border-radius: 100%;
+}
+
 /*Additional styles for small format landscape orientation*/
 @media (max-height: 450px) and (orientation: landscape) {
   .detect-grid {

src/js/store.js

@@ -8,7 +8,8 @@ const state = reactive({
     fullscreen: false,
     useExternal: 'optional',
     siteDemo: false,
-    externalServerList: []
+    externalServerList: [],
+    infoUrl: false
   })
 
 const set = (config, confObj) => {
@@ -48,6 +49,7 @@ export default () => ({
   getRegions: computed(() => state.enabledRegions),
   getVersion: computed(() => state.version),
   getIconSet: computed(() => state.regionIconSet),
+  getInfoUrl: computed(() => state.infoUrl),
   set,
   agree,
   getServerList,

src/pages/detect.vue

@@ -16,6 +16,15 @@
           <f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;" fill large>Capture</f7-button>
         </div>
         <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${(imageLoaded || videoAvailable) ? '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; z-index: 2;`" />
+        <f7-link v-if="getInfoUrl && (selectedChip > -1)"
+          :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px;`"
+          class="structure-info"
+          :icon-only="true"
+          icon-f7="info"
+          target="_blank"
+          :external="true"
+          :href="infoLinkTarget"
+        />
       </div>
       <div 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 })"
@@ -157,7 +166,8 @@
         reloadModel: false,
         videoDeviceAvailable: false,
         videoAvailable: false,
-        cameraStream: null
+        cameraStream: null,
+        infoLinkPos: {}
       }
     },
     setup() {
@@ -254,6 +264,11 @@
       },
       demoEnabled () {
         return this.otherSettings.demo || this.demoMode
+      },
+      infoLinkTarget () {
+        if (!this.getInfoUrl) return ''
+        let structure = this.showResults.find( r => r.resultIndex == this.selectedChip)
+        return this.getInfoUrl + structure.label.replaceAll(' ','_')
       }
     },
     methods: {
@@ -343,10 +358,12 @@
         }
 
         const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
+        this.infoLinkPos.x = boxCoords.cvsLeft
+        this.infoLinkPos.y = boxCoords.cvsTop
 
-        var boxLeft = boxCoords.cvsLeft
-        var boxTop = boxCoords.cvsTop
-        var boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
+        let boxLeft = boxCoords.cvsLeft
+        let boxTop = boxCoords.cvsTop
+        let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
         var boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
         imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
         this.selectedChip = iChip