src/pages/detect.vue

@@ -1,7 +1,7 @@
 <template>
     <f7-page name="detect">
       <!-- Top Navbar -->
-      <f7-navbar large :sliding="false">
+      <f7-navbar :sliding="false">
         <f7-nav-left>
           <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
         </f7-nav-left>
@@ -13,25 +13,76 @@
         <f7-link>Right Link</f7-link>
       </f7-toolbar>
 
-      <f7-block>
+      <f7-block style="display: flex; flex-direction: column; align-items: center;">
-        <f7-col>
+        <f7-block>
-            <f7-block>
+            Image goes here
-                Image goes here
+        </f7-block>
-            </f7-block>
+        <f7-segmented raised style="margin: 5px;">
-            <f7-row>
+            <f7-button>
-                <f7-link>
+                <img src="../assets/regions/thorax.svg" style="width: 48px; height: 48px; fill: var(--f7-theme-color);" />
-                    Region menu
+            </f7-button>
-                </f7-link>
+            <f7-button icon="material-icons-outlined" icon-material="visibility" icon-size="48" @click="setData"/>
-                <f7-link icon="material-icons-outlined" icon-material="visibility" icon-size="48" />
+            <f7-button icon="material-icons-outlined" icon-material="image" icon-size="48" />
-                <f7-link icon="material-icons-outlined" icon-material="image" icon-size="48" />
+            <f7-button icon="material-icons-outlined" icon-material="videocam" icon-size="48" />
-                <f7-link icon="material-icons-outlined" icon-material="videocam" icon-size="48" />
+        </f7-segmented>
-            </f7-row>
+        <f7-input type="file" id="image-chooser" style="display: none;"/>
-            <f7-list>
+        <div v-if="resultData && resultData.detections" class="chip-results">
-                <f7-list-item>
+            <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)" />
-                    Results list
+        </div>
-                </f7-list-item>
-            </f7-list>
-        </f7-col>
       </f7-block>
     </f7-page>
-</template>
+</template>
+
+<style>
+    .chip-results {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        --f7-chip-border-radius: 16px;
+        --f7-chip-media-size: 32px;
+        --f7-chip-font-weight: normal;
+    }
+
+    .chip-results .chip {
+        padding-left: 8px;
+    }
+
+    .selected-chip {
+        font-weight: 500;
+        box-shadow: 4px 4px 1px var(--f7-theme-color);
+        transform: translate(-2px, -2px);
+    }
+</style>
+
+<script>
+    import fakeData from "./testData.js"
+    export default {
+        props: ['activeRegion'],
+        data () {
+            return {
+            regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
+            resultData: {},
+            selectedChip: 1
+            }
+        },
+        created () {
+            //Might not need this
+        },
+        methods: {
+            chipColor (confVal) {
+                if (confVal >= 90) return 'green'
+                if (confVal >= 70) return 'lime'
+                return 'yellow';
+            },
+            setData () {
+                this.resultData = fakeData.testData
+            },
+            selectChip ( iChip ) {
+                this.selectedChip = iChip
+            },
+            deleteChip ( iChip ) {
+                this.resultData.detections.splice(iChip, 1)
+            }
+        }
+    }
+</script>

src/pages/testData.js

@@ -0,0 +1,55 @@
+export default {
+    testData: {
+        "id": "manual",
+        "detections": [
+            {
+            "top": 0.5543267130851746,
+            "left": 0.514180064201355,
+            "bottom": 0.7492024302482605,
+            "right": 0.5877177715301514,
+            "label": "Lung, Right",
+            "confidence": 91.04458093643188
+            },
+            {
+            "top": 0.24095627665519714,
+            "left": 0.5838792324066162,
+            "bottom": 0.9880742430686951,
+            "right": 0.8479938507080078,
+            "label": "Diaphragm",
+            "confidence": 88.7181043624878
+            },
+            {
+            "top": 0.3355500102043152,
+            "left": 0.3559962809085846,
+            "bottom": 0.4628722071647644,
+            "right": 0.6606560349464417,
+            "label": "Aorta",
+            "confidence": 85.63258051872253
+            },
+            {
+            "top": 0.46723803877830505,
+            "left": 0.28829023241996765,
+            "bottom": 0.8604505658149719,
+            "right": 0.5213174819946289,
+            "label": "Heart",
+            "confidence": 85.21404266357422
+            },
+            {
+            "top": 0.428698867559433,
+            "left": 0.1482502520084381,
+            "bottom": 0.5519284009933472,
+            "right": 0.5934896469116211,
+            "label": "Phrenic nerve",
+            "confidence": 81.82616829872131
+            },
+            {
+            "top": 0.4919853210449219,
+            "left": 0.4810255169868469,
+            "bottom": 0.5394672155380249,
+            "right": 0.5925238728523254,
+            "label": "Vena Cava, Caudal",
+            "confidence": 75.55835843086243
+            }
+        ]
+    }
+}