Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

General UI Refinements (#1678) #1

Merged
merged 1 commit into from
Jan 7, 2025
Merged

General UI Refinements (#1678) #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion photon-client/src/components/app/photon-camera-stream.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type { UiCameraConfiguration } from "@/types/SettingTypes";
const props = defineProps<{
streamType: "Raw" | "Processed";
id: string;
outerId?: string;
cameraSettings: UiCameraConfiguration;
}>();

Expand Down Expand Up @@ -90,7 +91,7 @@ onBeforeUnmount(() => {
</script>

<template>
<div class="stream-container" :style="containerStyle">
<div :id="outerId" class="stream-container" :style="containerStyle">
<img :src="loadingImage" class="stream-loading" />
<img
:id="id"
Expand Down
18 changes: 9 additions & 9 deletions photon-client/src/components/app/photon-sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,17 +81,17 @@ const needsCamerasConfigured = computed<boolean>(() => {
<v-list-item-title>Documentation</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="mdAndUp" link @click="() => (compact = !compact)">
<v-list-item-icon>
<v-icon v-if="compact || !mdAndUp"> mdi-chevron-right </v-icon>
<v-icon v-else> mdi-chevron-left </v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Compact Mode</v-list-item-title>
</v-list-item-content>
</v-list-item>

<div style="position: absolute; bottom: 0; left: 0">
<v-list-item v-if="mdAndUp" link @click="() => (compact = !compact)">
<v-list-item-icon>
<v-icon v-if="compact || !mdAndUp"> mdi-chevron-right </v-icon>
<v-icon v-else> mdi-chevron-left </v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Compact Mode</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon v-if="useSettingsStore().network.runNTServer"> mdi-server </v-icon>
Expand Down
521 changes: 246 additions & 275 deletions photon-client/src/components/cameras/CameraCalibrationCard.vue
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 7 additions & 9 deletions photon-client/src/components/cameras/CameraControlCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,14 @@ const expanded = ref([]);
</script>

<template>
<v-card dark class="pr-6 pb-3" style="background-color: #006492">
<v-card dark style="background-color: #006492">
<v-card-title>Camera Control</v-card-title>
<v-row class="pl-6">
<v-col>
<v-btn color="secondary" @click="fetchSnapshots">
<v-icon left class="open-icon"> mdi-folder </v-icon>
<span class="open-label">Show Saved Snapshots</span>
</v-btn>
</v-col>
</v-row>
<v-card-text>
<v-btn color="secondary" @click="fetchSnapshots">
<v-icon left class="open-icon"> mdi-folder </v-icon>
<span class="open-label">Show Saved Snapshots</span>
</v-btn>
</v-card-text>
<v-dialog v-model="showSnapshotViewerDialog">
<v-card dark class="pt-3 pl-5 pr-5" color="primary" flat>
<v-card-title> View Saved Frame Snapshots </v-card-title>
Expand Down
126 changes: 63 additions & 63 deletions photon-client/src/components/cameras/CameraSettingsCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,11 @@ const openExportSettingsPrompt = () => {
};

const yesDeleteMySettingsText = ref("");
const deletingCamera = ref(false);
const deleteThisCamera = () => {
if (deletingCamera.value) return;
deletingCamera.value = true;

const payload = {
cameraUniqueName: useStateStore().currentCameraUniqueName
};
Expand Down Expand Up @@ -149,8 +153,11 @@ const deleteThisCamera = () => {
color: "error"
});
}
})
.finally(() => {
deletingCamera.value = false;
showDeleteCamera.value = false;
});
showDeleteCamera.value = false;
};
const wrappedCameras = computed<SelectItem[]>(() =>
Object.keys(useCameraSettingsStore().cameras).map((cameraUniqueName) => ({
Expand All @@ -161,9 +168,9 @@ const wrappedCameras = computed<SelectItem[]>(() =>
</script>

<template>
<v-card class="mb-3 pr-6 pb-3" color="primary" dark>
<v-card-title>Camera Settings</v-card-title>
<div class="ml-5">
<v-card class="mb-3" color="primary" dark>
<v-card-title class="pa-6 pb-0">Camera Settings</v-card-title>
<v-card-text class="pa-6 pt-3">
<pv-select
v-model="useStateStore().currentCameraUniqueName"
label="Camera"
Expand Down Expand Up @@ -193,74 +200,67 @@ const wrappedCameras = computed<SelectItem[]>(() =>
]"
:select-cols="8"
/>
<br />
<v-row>
<v-col cols="6">
<v-btn
class="mt-2 mb-3"
style="width: 100%"
small
color="secondary"
:disabled="!settingsHaveChanged()"
@click="saveCameraSettings"
>
<v-icon left> mdi-content-save </v-icon>
Save Changes
</v-btn>
</v-col>
<v-col cols="6">
<v-btn class="mt-2 mb-3" style="width: 100%" small color="red" @click="() => (showDeleteCamera = true)">
<v-icon left> mdi-bomb </v-icon>
Delete Camera
</v-btn>
</v-col>
</v-row>
</div>

<v-dialog v-model="showDeleteCamera" dark width="1500">
<v-card dark class="dialog-container pa-6" color="primary" flat>
<v-card-title>Delete camera "{{ useCameraSettingsStore().currentCameraName }}"</v-card-title>
<v-row class="pl-3 align-center pa-6">
<v-col cols="12" md="6">
<span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
</v-col>
<v-col cols="12" md="6">
<v-btn color="secondary" style="float: right" @click="openExportSettingsPrompt">
<v-icon left class="open-icon"> mdi-export </v-icon>
<span class="open-label">Backup Settings</span>
<a
ref="exportSettings"
style="color: black; text-decoration: none; display: none"
:href="`http://${address}/api/settings/photonvision_config.zip`"
download="photonvision-settings.zip"
target="_blank"
/>
</v-btn>
</v-col>
</v-row>

<v-divider class="mt-4 mb-4" />
<v-row class="pl-3 align-center pa-6">
<v-col>
<pv-input
v-model="yesDeleteMySettingsText"
:label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
:label-cols="12"
:input-cols="12"
/>
</v-col>
</v-card-text>
<v-card-text class="d-flex pa-6 pt-0">
<v-col cols="6" class="pa-0 pr-2">
<v-btn block small color="secondary" :disabled="!settingsHaveChanged()" @click="saveCameraSettings">
<v-icon left> mdi-content-save </v-icon>
Save Changes
</v-btn>
</v-col>
<v-col cols="6" class="pa-0 pl-2">
<v-btn block small color="error" @click="() => (showDeleteCamera = true)">
<v-icon left> mdi-trash-can-outline </v-icon>
Delete Camera
</v-btn>
</v-col>
</v-card-text>

<v-dialog v-model="showDeleteCamera" dark width="800">
<v-card dark class="dialog-container pa-3 pb-2" color="primary" flat>
<v-card-title> Delete {{ useCameraSettingsStore().currentCameraSettings.nickname }}? </v-card-title>
<v-card-text>
<v-row class="align-center pt-6">
<v-col cols="12" md="6">
<span class="white--text"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
</v-col>
<v-col cols="12" md="6">
<v-btn color="secondary" block @click="openExportSettingsPrompt">
<v-icon left class="open-icon"> mdi-export </v-icon>
<span class="open-label">Backup Settings</span>
<a
ref="exportSettings"
style="color: black; text-decoration: none; display: none"
:href="`http://${address}/api/settings/photonvision_config.zip`"
download="photonvision-settings.zip"
target="_blank"
/>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-card-text>
<pv-input
v-model="yesDeleteMySettingsText"
:label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
:label-cols="6"
:input-cols="6"
/>
</v-card-text>
<v-card-text>
<v-btn
color="red"
block
color="error"
:disabled="
yesDeleteMySettingsText.toLowerCase() !== useCameraSettingsStore().currentCameraName.toLowerCase()
"
:loading="deletingCamera"
@click="deleteThisCamera"
>
<v-icon left class="open-icon"> mdi-skull </v-icon>
<v-icon left class="open-icon"> mdi-trash-can-outline </v-icon>
<span class="open-label">DELETE (UNRECOVERABLE)</span>
</v-btn>
</v-row>
</v-card-text>
</v-card>
</v-dialog>
</v-card>
Expand Down
32 changes: 11 additions & 21 deletions photon-client/src/components/cameras/CamerasView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,9 @@ const fpsTooLow = computed<boolean>(() => {
</script>

<template>
<v-card
id="camera-settings-camera-view-card"
class="camera-settings-camera-view-card mb-3 pb-3 pa-4"
color="primary"
dark
>
<v-card-title
class="pb-0 mb-2 pl-4 pt-1"
style="min-height: 50px; justify-content: space-between; align-content: center"
>
<div style="display: flex; flex-wrap: wrap">
<v-card id="camera-settings-camera-view-card" class="camera-settings-camera-view-card" color="primary" dark>
<v-card-title class="justify-space-between align-content-center pa-0 pl-6 pr-6">
<div class="d-flex flex-wrap pt-4 pb-4">
<div>
<span class="mr-4" style="white-space: nowrap"> Cameras </span>
</div>
Expand All @@ -69,23 +61,23 @@ const fpsTooLow = computed<boolean>(() => {
</span>
</v-chip>
<v-chip v-else label color="transparent" text-color="red" style="font-size: 1rem; padding: 0; margin: 0">
<span class="pr-1"> Camera not connected </span>
<span class="pr-1">Camera not connected</span>
</v-chip>
</div>
</div>

<div>
<div class="d-flex align-center">
<v-switch
v-model="driverMode"
:disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
label="Driver Mode"
style="margin-left: auto"
color="accent"
class="pt-2"
class="pt-2 pb-2"
hide-details="auto"
/>
</div>
</v-card-title>
<div class="stream-container pb-4">
<v-card-text class="stream-container">
<div class="stream">
<photon-camera-stream
v-if="value.includes(0)"
Expand All @@ -104,10 +96,8 @@ const fpsTooLow = computed<boolean>(() => {
style="max-width: 100%"
/>
</div>
</div>
<v-divider />
<div class="pt-4">
<p style="color: white">Stream Display</p>
</v-card-text>
<v-card-text class="pt-0">
<v-btn-toggle v-model="localValue" :multiple="true" mandatory dark class="fill" style="width: 100%">
<v-btn
color="secondary"
Expand All @@ -126,7 +116,7 @@ const fpsTooLow = computed<boolean>(() => {
<span class="mode-btn-label">Processed</span>
</v-btn>
</v-btn-toggle>
</div>
</v-card-text>
</v-card>
</template>

Expand Down
20 changes: 8 additions & 12 deletions photon-client/src/components/common/pv-camera-info-card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<script setup lang="ts">
import { PVCameraInfo } from "@/types/SettingTypes";

const { camera, showTitle } = defineProps({
const { camera } = defineProps({
camera: {
type: PVCameraInfo,
required: true
},
showTitle: {
type: Boolean,
required: false,
default: true
}
});

Expand All @@ -29,12 +24,6 @@ const cameraInfoFor: any = (camera: PVCameraInfo) => {

<template>
<div>
<div v-if="showTitle === true">
<h3 v-if="camera.PVUsbCameraInfo" class="mb-3">USB Camera Info</h3>
<h3 v-if="camera.PVCSICameraInfo" class="mb-3">CSI Camera Info</h3>
<h3 v-if="camera.PVFileCameraInfo" class="mb-3">File Camera Info</h3>
</div>

<v-simple-table dense :style="{ backgroundColor: 'var(--v-primary-base)' }">
<tbody>
<tr v-if="cameraInfoFor(camera).dev !== undefined && cameraInfoFor(camera).dev !== null">
Expand All @@ -45,6 +34,13 @@ const cameraInfoFor: any = (camera: PVCameraInfo) => {
<td>Name:</td>
<td>{{ cameraInfoFor(camera).name }}</td>
</tr>
<tr>
<td>Type:</td>
<td v-if="camera.PVUsbCameraInfo" class="mb-3">USB Camera</td>
<td v-else-if="camera.PVCSICameraInfo" class="mb-3">CSI Camera</td>
<td v-else-if="camera.PVFileCameraInfo" class="mb-3">File Camera</td>
<td v-else>Unidentified Camera Type</td>
</tr>
<tr v-if="cameraInfoFor(camera).baseName !== undefined && cameraInfoFor(camera).baseName !== null">
<td>Base Name:</td>
<td>{{ cameraInfoFor(camera).baseName }}</td>
Expand Down
Loading