Add structure info link and configuration

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

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