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

Add UI enhancements (#185)
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 35s
Details

Browse Source 
This PR:
* Adds color coded markers on the confidence slider
* Changes the confidence slider visual to be more intuitive (the highlight region covers the visible structures)
* Gives the tag container a max height so that too many tags doesn't reduce the image to 0 size

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

Reviewed-on: #185
This commit is contained in:
Justin Georgi
2024-06-28 23:04:14 +00:00
parent 8e24bcd731
commit ae1a595087
2 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/css/detect.css
View File

@@ -89,6 +89,26 @@
display: none; display: none;
} }
.level-slide-marker {
border: var(--avn-slide-marker-border);
position: absolute;
top: 0%;
height: 100%;
left: var(--avn-slide-marker-position);
}
.range-bar {
background: var(--avn-theme-color);
}
.range-bar-active {
background: rgba(255,255,255,.8);
}
.dark .range-bar-active {
background: rgba(0,0,0,.8);
}
.image-menu { .image-menu {
grid-area: menu-view; grid-area: menu-view;
margin: 5px; margin: 5px;
@@ -170,6 +190,12 @@
display: block; display: block;
} }
.level-slide-marker {
top: calc(100% - var(--avn-slide-marker-position));
height: auto;
width: 100%;
left: 0%;
}
.image-container { .image-container {
flex-direction: column; flex-direction: column;

12
src/pages/detect.vue
View File

@@ -26,7 +26,7 @@
:href="infoLinkTarget" :href="infoLinkTarget"
/> />
</div> </div>
<div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;"> <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center; max-height: 450px;">
<f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })" <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
:class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''" :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
:id="(result.resultIndex == selectedChip) ? 'selected_chip' : ''" :id="(result.resultIndex == selectedChip) ? 'selected_chip' : ''"
@@ -45,8 +45,14 @@
<f7-button @click="this.detectorLevel > 0 ? this.detectorLevel = 0 : this.detectorLevel = 50" style="flex: 0 1 20%"> <f7-button @click="this.detectorLevel > 0 ? this.detectorLevel = 0 : this.detectorLevel = 50" style="flex: 0 1 20%">
<SvgIcon :icon="this.detectorLevel > 0 ? 'visibility' : 'reset_slide'"/> <SvgIcon :icon="this.detectorLevel > 0 ? 'visibility' : 'reset_slide'"/>
</f7-button> </f7-button>
<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 100%"/> <div style="position: relative; flex: 1 1 100%">
<f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/> <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range"/>
<f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range"/>
<div v-for="result in showResults.filter( r => { return r.isSearched && !r.isDeleted })"
class="level-slide-marker"
:style="`--avn-slide-marker-border: solid hsla(${result.confidence * 1.2}deg, 100%, 50%, .33) 1px; --avn-slide-marker-position: ${result.confidence.toFixed(1)}%`"
></div>
</div>
<f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`" style="flex: 0 1 20%"> <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`" style="flex: 0 1 20%">
<SvgIcon icon="check_list"/> <SvgIcon icon="check_list"/>
</f7-button> </f7-button>