ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add preloader animation (#72)

Browse Source 
Closes: #70

Adds a prelaoder animation to the results container while the image is loading and being processed for detections.

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

Reviewed-on: Georgi_Lab/ALVINN_f7#72
This commit is contained in:
Justin Georgi
2024-01-12 21:29:14 -07:00
parent a3d0c5c70f
commit 712c3d90c7
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/detect.vue
View File

@@ -8,9 +8,8 @@
<div class="image-container">
<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 ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
</div>
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
<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 })"
:class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
:text="result.label"
@@ -21,7 +20,8 @@
@delete="deleteChip(result.resultIndex)"
:style="chipGradient(result.confidence)"
/>
<span v-if="numResults == 0" style="height: var(--f7-chip-height); font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">No results.</span>
<span v-if="numResults == 0 && !detecting" style="height: var(--f7-chip-height); font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">No results.</span>
<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 50px"/>
@@ -99,7 +99,7 @@
.detect-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto auto min-content;
grid-template-rows: 1fr 56px auto min-content;
grid-template-areas:
"image-view"
"result-view"
@@ -203,7 +203,7 @@
@media (max-height: 450px) and (orientation: landscape) {
.detect-grid {
grid-template-columns: minmax(0,1fr) max-content auto auto;
grid-template-columns: minmax(0,1fr) minmax(56px,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";
@@ -304,6 +304,7 @@
imageLoaded: false,
imageView: null,
imageLoadMode: "environment",
detecting: false,
detectPanel: false,
showDetectSettings: false,
detectorName: '',
@@ -400,10 +401,12 @@
if (this.status !== 200) {
//this.response.text().then(function(message){alert(message)})
console.log(xhr.response)
self.detecting = false
return;
}
self.resultData = JSON.parse(xhr.response)
self.uploadDirty = true
self.detecting = false
}
var doodsData = {
@@ -496,6 +499,7 @@
const searchImage = this.$refs.image_chooser.files[0]
var reader = new FileReader()
reader.addEventListener("loadend", () => {
this.detecting = true
resolve(reader.result)
})
reader.readAsDataURL(searchImage)