mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-20 00:51:41 +00:00
Clean up spacing and other things in various parts of the UI (#1972)
## Description After the Vue 3 upgrade, the spacing for various UI elements was left inconsistent in many places. Dialogs were hit especially hard and had some very inconsistent spacing. Additionally, the 24 pixels of padding around all cards was noted as a waste of space and unnecessary, so it has been shrunk down to 20 pixels to make the UI a tiny bit more compact and to make it visually closer to some parts of the UI that have 16 pixels of padding (the camera views are the most notable example). Padding between input elements has also been reduced to 20 pixels (this required some hackery to get consistent sizes on input elements, since switches and sliders have different heights.) Some other minor UI tweaks were made, such as removing the divider between dialog contents and dialog buttons because it visually looks better, shrinking the banner padding so it doesn't displace as much content, making the banner background one uniform color instead of a highlight around the icon, fixing the targets tab so that the columns stop shifting around when the values change, preserving newlines in the log view, cleaning up the object detection UI, and making the import dialogs have consistently inset input elements. Old dashboard:  New dashboard:  Old Camera tab:  New Camera tab:  Old Calibration Info:  New Calibration Info:  Old Log Viewer:  New Log Viewer:  Old Pipeline Creation Dialog:  New Pipeline Creation Dialog:  Old Factory Reset:  New Factory Reset:  Old Pipeline Change:  New Pipeline Change:  Old Import Dialog:  New Import Dialog:  ## Meta Merge checklist: - [x] Pull Request title is [short, imperative summary](https://cbea.ms/git-commit/) of proposed changes - [x] The description documents the _what_ and _why_ - [ ] If this PR changes behavior or adds a feature, user documentation is updated - [ ] If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly - [ ] If this PR touches configuration, this is backwards compatible with settings back to v2024.3.1 - [ ] If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated - [ ] If this PR addresses a bug, a regression test for it is added
This commit is contained in:
Gold856
@@ -271,7 +271,7 @@ const handleBulkImport = () => {
|
||||
|
||||
<template>
|
||||
<v-card class="mb-3" style="background-color: #006492">
|
||||
<v-card-title class="pa-5">Object Detection</v-card-title>
|
||||
<v-card-title>Object Detection</v-card-title>
|
||||
<div class="pa-5 pt-0">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
@@ -293,12 +293,12 @@ const handleBulkImport = () => {
|
||||
"
|
||||
>
|
||||
<v-card color="primary" dark>
|
||||
<v-card-title class="pa-5 pb-0">Import New Object Detection Model</v-card-title>
|
||||
<v-card-text class="pa-5">
|
||||
<v-card-title class="pb-0">Import New Object Detection Model</v-card-title>
|
||||
<v-card-text>
|
||||
Upload a new object detection model to this device that can be used in a pipeline. Note that ONLY
|
||||
640x640 YOLOv5, YOLOv8, and YOLOv11 models trained and converted to `.rknn` format for RK3588 CPUs are
|
||||
currently supported!
|
||||
<div class="pa-5">
|
||||
<div class="pa-5 pb-0">
|
||||
<v-file-input v-model="importModelFile" variant="underlined" label="Model File" accept=".rknn" />
|
||||
<v-text-field
|
||||
v-model="importLabels"
|
||||
@@ -317,6 +317,7 @@ const handleBulkImport = () => {
|
||||
/>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
width="100%"
|
||||
:disabled="
|
||||
importModelFile === null ||
|
||||
importLabels === null ||
|
||||
@@ -341,13 +342,13 @@ const handleBulkImport = () => {
|
||||
</v-btn>
|
||||
<v-dialog v-model="showBulkImportDialog" width="600">
|
||||
<v-card color="primary" dark>
|
||||
<v-card-title class="pa-5 pb-0">Import Multiple Object Detection Models</v-card-title>
|
||||
<v-card-text class="pa-5">
|
||||
<v-card-title class="pb-0">Import Multiple Object Detection Models</v-card-title>
|
||||
<v-card-text>
|
||||
Upload a zip file containing multiple object detection models to this device. Note this zip file should
|
||||
only come from a previous export of object detection models.
|
||||
<div class="pa-5">
|
||||
<div class="pa-5 pb-0">
|
||||
<v-file-input v-model="importFile" variant="underlined" label="Zip File" accept=".zip" />
|
||||
<v-btn color="secondary" :disabled="importFile === null" @click="handleBulkImport()">
|
||||
<v-btn color="secondary" width="100%" :disabled="importFile === null" @click="handleBulkImport()">
|
||||
<v-icon start class="open-icon"> mdi-import </v-icon>
|
||||
<span class="open-label">Bulk Import</span>
|
||||
</v-btn>
|
||||
@@ -377,16 +378,21 @@ const handleBulkImport = () => {
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-simple-table fixed-header height="100%" density="compact" dark>
|
||||
<v-col cols="">
|
||||
<v-table fixed-header height="100%" density="compact" dark>
|
||||
<thead style="font-size: 1.25rem">
|
||||
<tr>
|
||||
<th class="text-left">Available Models</th>
|
||||
<th>Model Nicknames</th>
|
||||
<th>Labels</th>
|
||||
<th>Delete</th>
|
||||
<th>Edit</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="model in supportedModels" :key="model.modelPath">
|
||||
<td>{{ model.nickname }}</td>
|
||||
<td>{{ model.labels.join(", ") }}</td>
|
||||
<td class="text-right">
|
||||
<v-btn
|
||||
icon
|
||||
@@ -416,58 +422,62 @@ const handleBulkImport = () => {
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-simple-table>
|
||||
</v-table>
|
||||
<v-dialog v-model="confirmDeleteDialog.show" width="600">
|
||||
<v-card color="primary" dark>
|
||||
<v-card-title>Delete Object Detection Model</v-card-title>
|
||||
<v-card-text>
|
||||
Are you sure you want to delete the model
|
||||
{{ confirmDeleteDialog.model.nickname }}?
|
||||
<v-row class="mt-12 ml-8 mr-8 mb-1" style="display: flex; align-items: center; justify-content: center">
|
||||
<v-btn text @click="confirmDeleteDialog.show = false" color="secondary">Cancel</v-btn>
|
||||
<v-btn color="error" @click="deleteModel(confirmDeleteDialog.model)">Delete</v-btn>
|
||||
</v-row>
|
||||
<v-card-text class="pt-0">
|
||||
Are you sure you want to delete the model {{ confirmDeleteDialog.model.nickname }}?
|
||||
<v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
|
||||
<v-btn variant="elevated" color="error" @click="deleteModel(confirmDeleteDialog.model)">Delete</v-btn>
|
||||
<v-btn variant="elevated" @click="confirmDeleteDialog.show = false" color="secondary">Cancel</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showRenameDialog.show" width="600">
|
||||
<v-card color="primary" dark>
|
||||
<v-card-title>Rename Object Detection Model</v-card-title>
|
||||
<v-card-text>
|
||||
<v-card-text class="pt-0">
|
||||
Enter a new name for the model {{ showRenameDialog.model.nickname }}:
|
||||
<v-row class="mt-6 ml-4 mr-8">
|
||||
<v-text-field v-model="showRenameDialog.newName" label="New Name" />
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-btn text @click="showRenameDialog.show = false" color="error">Cancel</v-btn>
|
||||
<v-btn text color="secondary" @click="renameModel(showRenameDialog.model, showRenameDialog.newName)"
|
||||
<div class="pa-5 pb-0">
|
||||
<v-text-field v-model="showRenameDialog.newName" hide-details label="New Name" variant="underlined" />
|
||||
</div>
|
||||
<v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
|
||||
<v-btn
|
||||
variant="elevated"
|
||||
color="secondary"
|
||||
@click="renameModel(showRenameDialog.model, showRenameDialog.newName)"
|
||||
>Rename</v-btn
|
||||
>
|
||||
</v-row>
|
||||
<v-btn variant="elevated" @click="showRenameDialog.show = false" color="error">Cancel</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showInfo.show" width="600">
|
||||
<v-card color="primary" dark>
|
||||
<v-card-title>Object Detection Model Info</v-card-title>
|
||||
<v-btn color="secondary" @click="openExportIndividualModelPrompt">
|
||||
<v-icon left class="open-icon"> mdi-export </v-icon>
|
||||
<span class="open-label">Export Model</span>
|
||||
</v-btn>
|
||||
<a
|
||||
ref="exportIndividualModel"
|
||||
style="color: black; text-decoration: none; display: none"
|
||||
:href="`http://${address}/api/objectdetection/exportIndividual?modelPath=${showInfo.model.modelPath.replace('file:', '')}`"
|
||||
:download="`${showInfo.model.nickname}_${showInfo.model.family}_${showInfo.model.version}_${showInfo.model.resolutionWidth}x${showInfo.model.resolutionHeight}_${showInfo.model.labels.join('_')}.${showInfo.model.family.toLowerCase()}`"
|
||||
target="_blank"
|
||||
/>
|
||||
<v-card-text>
|
||||
<p>Model Path: {{ showInfo.model.modelPath }}</p>
|
||||
<p>Model Nickname: {{ showInfo.model.nickname }}</p>
|
||||
<p>Model Family: {{ showInfo.model.family }}</p>
|
||||
<p>Model Version: {{ showInfo.model.version }}</p>
|
||||
<p>Model Label(s): {{ showInfo.model.labels.join(", ") }}</p>
|
||||
<p>Model Resolution: {{ showInfo.model.resolutionWidth }} x {{ showInfo.model.resolutionHeight }}</p>
|
||||
<v-card-text class="pt-0">
|
||||
<v-btn color="secondary" width="100%" @click="openExportIndividualModelPrompt">
|
||||
<v-icon left class="open-icon"> mdi-export </v-icon>
|
||||
<span class="open-label">Export Model</span>
|
||||
</v-btn>
|
||||
<a
|
||||
ref="exportIndividualModel"
|
||||
style="color: black; text-decoration: none; display: none"
|
||||
:href="`http://${address}/api/objectdetection/exportIndividual?modelPath=${showInfo.model.modelPath.replace('file:', '')}`"
|
||||
:download="`${showInfo.model.nickname}_${showInfo.model.family}_${showInfo.model.version}_${showInfo.model.resolutionWidth}x${showInfo.model.resolutionHeight}_${showInfo.model.labels.join('_')}.${showInfo.model.family.toLowerCase()}`"
|
||||
target="_blank"
|
||||
/>
|
||||
<div class="pt-5">
|
||||
<p>Model Path: {{ showInfo.model.modelPath }}</p>
|
||||
<p>Model Nickname: {{ showInfo.model.nickname }}</p>
|
||||
<p>Model Family: {{ showInfo.model.family }}</p>
|
||||
<p>Model Version: {{ showInfo.model.version }}</p>
|
||||
<p>Model Label(s): {{ showInfo.model.labels.join(", ") }}</p>
|
||||
<p>Model Resolution: {{ showInfo.model.resolutionWidth }} x {{ showInfo.model.resolutionHeight }}</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@@ -476,18 +486,18 @@ const handleBulkImport = () => {
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="showNukeDialog" width="800" dark>
|
||||
<v-card color="primary" class="pa-3" flat>
|
||||
<v-card-title style="justify-content: center" class="pb-6">
|
||||
<v-card color="primary" flat>
|
||||
<v-card-title style="display: flex; justify-content: center">
|
||||
<span class="open-label">
|
||||
<v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
|
||||
Clear and Reset Object Detection Models
|
||||
<v-icon end color="error" class="open-icon ma-1">mdi-nuke</v-icon>
|
||||
</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-3">
|
||||
<v-card-text class="pt-0 pb-10px">
|
||||
<v-row class="align-center text-white">
|
||||
<v-col cols="12" md="6">
|
||||
<span class="mt-3"> This will delete ALL OF YOUR MODELS and re-extract the default models. </span>
|
||||
<span> This will delete ALL OF YOUR MODELS and re-extract the default models. </span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-btn color="secondary" style="float: right" @click="openExportPrompt">
|
||||
@@ -504,7 +514,7 @@ const handleBulkImport = () => {
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-card-text class="pt-0 pb-0">
|
||||
<pv-input
|
||||
v-model="yesDeleteMyModelsText"
|
||||
:label="'Type "' + expected + '":'"
|
||||
@@ -512,9 +522,10 @@ const handleBulkImport = () => {
|
||||
:input-cols="6"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-card-text class="pt-10px">
|
||||
<v-btn
|
||||
color="error"
|
||||
width="100%"
|
||||
:disabled="yesDeleteMyModelsText.toLowerCase() !== expected.toLowerCase()"
|
||||
@click="nukeModels"
|
||||
>
|
||||
@@ -530,9 +541,14 @@ const handleBulkImport = () => {
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.v-btn {
|
||||
.v-col-12 > .v-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pt-10px {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 351px) {
|
||||
.open-icon {
|
||||
margin: 0 !important;
|
||||
@@ -552,6 +568,7 @@ const handleBulkImport = () => {
|
||||
background-color: #006492 !important;
|
||||
font-size: 1rem !important;
|
||||
color: white !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
td {
|
||||
|
||||
Reference in New Issue
Block a user