{{ regions[activeRegion] }}
-
-
-
@@ -26,6 +23,16 @@
/>
No results.
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
@@ -102,10 +99,11 @@
.detect-grid {
display: grid;
grid-template-columns: 1fr;
- grid-template-rows: 1fr auto min-content;
+ grid-template-rows: 1fr auto auto min-content;
grid-template-areas:
"image-view"
"result-view"
+ "detect-settings"
"menu-view";
justify-items: center;
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
@@ -160,6 +158,19 @@
transform: translate(-2px, -2px);
}
+ .detect-inputs {
+ display: flex;
+ align-items: center;
+ margin: 5px;
+ width: 100%;
+ max-width: 400px;
+ min-width: 192px;
+ }
+
+ .level-slide-vert {
+ display: none;
+ }
+
.image-menu {
grid-area: menu-view;
margin: 5px;
@@ -192,10 +203,10 @@
@media (max-height: 450px) and (orientation: landscape) {
.detect-grid {
- grid-template-columns: minmax(0,1fr) max-content 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 menu-view";
+ "image-view result-view detect-settings menu-view";
justify-items: stretch;
align-items: stretch;
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
@@ -210,6 +221,21 @@
flex-wrap: nowrap;
overflow-y: scroll;
}
+
+ .detect-inputs {
+ flex-direction: column;
+ min-width: 0;
+ max-width: 72px;
+ }
+
+ .level-slide-horz {
+ display: none;
+ }
+
+ .level-slide-vert {
+ display: block;
+ }
+
.image-container {
flex-direction: column;
@@ -279,12 +305,12 @@
imageLoaded: false,
imageView: '',
imageLoadMode: "environment",
+ detectPanel: false,
+ showDetectSettings: false,
detectorName: '',
detectorLevel: 50,
detectorLabels: [],
serverSettings: {},
- debugOn: false,
- debugText: ['Variables loaded'],
isCordova: !!window.cordova,
uploadUid: null,
uploadDirty: false
@@ -317,10 +343,8 @@
xhr.open("GET", modelURL)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onload = function () {
- if (self.debugOn) self.debugText.push(xhr.response) //DEBUG ANDROID BUILD
if (this.status !== 200) {
//this.response.text().then(function(message){alert(message)})
- self.debugText.push(xhr.response)
console.log(xhr.response)
return;
}
@@ -338,9 +362,6 @@
console.log('destroy the panel!')
},
computed: {
- debugDisplay () {
- return this.debugText.join('
')
- },
showResults () {
var filteredResults = this.resultData.detections
if (!filteredResults) return []
@@ -377,10 +398,8 @@
xhr.open("POST", modelURL)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onload = function () {
- if (self.debugOn) self.debugText.push(xhr.response)
if (this.status !== 200) {
//this.response.text().then(function(message){alert(message)})
- self.debugText.push(xhr.response)
console.log(xhr.response)
return;
}
@@ -468,7 +487,10 @@
} else {
const searchImage = this.$refs.image_chooser.files[0]
var reader = new FileReader()
- reader.addEventListener("loadend", () => {this.imageView = reader.result})
+ reader.addEventListener("loadend", () => {
+ this.imageView = reader.result
+ this.setData()
+ })
reader.readAsDataURL(searchImage)
}
resolve()
@@ -497,6 +519,9 @@
.map( r => { return {"top": r.top, "left": r.left, "bottom": r.bottom, "right": r.right, "label": r.label}})
this.uploadUid = await this.uploadData(this.imageView.split(',')[1],uploadData,this.uploadUid)
if (this.uploadUid) { this.uploadDirty = false }
+ },
+ onLevelChange(value) {
+ this.detectorLevel = value
}
}
}
diff --git a/src/pages/home.vue b/src/pages/home.vue
index 35bf475..a28c3c1 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -79,8 +79,7 @@
}
.region-button {
- width: auto;
- height: calc(100% - 15px);
+ max-height: calc(100% - 15px);
}
}