Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-27 02:01:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

General UI Refinements (#1678)

Browse Source 
Does the following:
- Adjusts the shade of red buttons and banners to increase readability
and reduce eye strain

![image](https://github.com/user-attachments/assets/7f741a9e-dc1e-4394-b87d-580e189245b1)

![image](https://github.com/user-attachments/assets/b23202f1-4cf6-46c1-aca5-2455a09259cd)

- Cleans up factory reset and camera deletion modals

![image](https://github.com/user-attachments/assets/e6564732-d578-43da-bc83-729ec6fdbc5e)

![image](https://github.com/user-attachments/assets/9c5a1cba-f4fd-47ea-811c-abbabe5fa3a4)

- Removes matchCamerasOnlyByPath as it is no longer used and throws
errors in the console

![image](https://github.com/user-attachments/assets/77043993-26a2-4de4-8e98-702e7f285dc6)

- Limits the criteria to flag a camera mismatch in Camera Matching to
only what is necessary based on camera type and highlights differences
in table properties (testing on this is appreciated)

![image](https://github.com/user-attachments/assets/cfbd96c1-09dd-414a-8177-693fc054b26f)

- Only displays both saved vs. current info in camera matching if there
is a difference between the two

![image](https://github.com/user-attachments/assets/6223ffc8-4cff-464f-8b54-720c3222a5d5)

- Some general code cleanup (reduced unnecessary padding/margin/row-col
statements, style="display:flex;" -> class="d-flex", etc.
- Moves Compact Mode button to the bottom away from all the menu items
(cleaner imo, open to thoughts)
- Establishes a general spacing format for cards and pages and applies
this to existing cards and pages to create a consistent look and feel to
the UI (e.g. keeping things in line and less erratic spacing/placement
of UI elements)

![image](https://github.com/user-attachments/assets/1ab0ca4b-303e-436d-97b3-da72d46c4fcb)

![image](https://github.com/user-attachments/assets/82ba9e53-f854-4309-bc00-7b5d0bad58b7)

![image](https://github.com/user-attachments/assets/18aa6ca4-e6fa-4125-8a0a-e6a007a0337d)

![image](https://github.com/user-attachments/assets/77043993-26a2-4de4-8e98-702e7f285dc6)


- Delete protection for camera matching modules
- Anti-backend-spam for activate/deactivate/delete modules to hopefully
prevent any odd behavior from button spamming
- Enforces a common camera stream size on camera matching view (NEEDS
MORE TESTING)

![image](https://github.com/user-attachments/assets/9032783d-1edf-4c6e-ba7b-00e5f20280df)

https://private-user-images.githubusercontent.com/29715865/400783758-dc99c151-b8a7-4367-a173-74c2fc5b2666.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYyNTc3NzEsIm5iZiI6MTczNjI1NzQ3MSwicGF0aCI6Ii8yOTcxNTg2NS80MDA3ODM3NTgtZGM5OWMxNTEtYjhhNy00MzY3LWExNzMtNzRjMmZjNWIyNjY2Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTA3VDEzNDQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMwOWM1MDc2ZTVlOWZhM2MxYjAwZjAyZTc2MTYyZTk1ZTVmOGFhZmVkMzlmODRlZTk1ODVlOTk2ZGQzZmM0Y2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ovtRnObwbkEfljr9d5fqaory0nH91LWJSSkmrUUe_4Y
This commit is contained in:
Devon Doyle
2025-01-07 08:45:39 -05:00
committed by GitHub
parent fa2034d30b
commit 484e8d4298
34 changed files with 1098 additions and 965 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
photon-client/src/components/settings/MetricsCard.vue
View File

@@ -2,7 +2,6 @@
import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
import { computed, onBeforeMount, ref } from "vue";
import { useStateStore } from "@/stores/StateStore";
import PvIcon from "@/components/common/pv-icon.vue";
interface MetricItem {
header: string;
@@ -121,67 +120,134 @@ onBeforeMount(() => {
</script>
<template>
<v-card dark class="mb-3 pr-6 pb-3" style="background-color: #006492">
<v-card-title style="display: flex; justify-content: space-between">
<span>Stats</span>
<pv-icon icon-name="mdi-reload" color="white" tooltip="Reload Metrics" hover @click="fetchMetrics" />
<v-card dark class="mb-3" style="background-color: #006492">
<v-card-title class="pl-6" style="display: flex; justify-content: space-between">
<span class="pt-2 pb-2">Stats</span>
<v-btn text @click="fetchMetrics">
<v-icon left class="open-icon">mdi-reload</v-icon>
Last Fetched: {{ metricsLastFetched }}
</v-btn>
</v-card-title>
<v-row class="pt-2 pa-4 ma-0 ml-5 pb-1">
<v-card-subtitle class="ma-0 pa-0 pb-2" style="font-size: 16px"> General Metrics </v-card-subtitle>
<v-simple-table class="metrics-table">
<v-card-text class="pa-6 pt-0 pb-3">
<v-card-subtitle class="pa-0" style="font-size: 16px">General Metrics</v-card-subtitle>
<v-simple-table class="metrics-table mt-3">
<thead>
<tr>
<th v-for="(item, itemIndex) in generalMetrics" :key="itemIndex" class="metric-item metric-item-title">
<th
v-for="(item, itemIndex) in generalMetrics"
:key="itemIndex"
class="metric-item metric-item-title"
:class="{
tl: itemIndex === 0,
tr: itemIndex === generalMetrics.length - 1,
t: 0 < itemIndex && itemIndex < generalMetrics.length - 1
}"
>
{{ item.header }}
</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="(item, itemIndex) in generalMetrics" :key="itemIndex" class="metric-item">
<td
v-for="(item, itemIndex) in generalMetrics"
:key="itemIndex"
class="metric-item"
:class="{
bl: itemIndex === 0,
br: itemIndex === generalMetrics.length - 1,
b: 0 < itemIndex && itemIndex < generalMetrics.length - 1
}"
>
{{ item.value }}
</td>
</tr>
</tbody>
</v-simple-table>
</v-row>
<v-row class="pa-4 ma-0 ml-5">
<v-card-subtitle class="ma-0 pa-0 pb-2" style="font-size: 16px"> Hardware Metrics </v-card-subtitle>
<v-simple-table class="metrics-table">
</v-card-text>
<v-card-text class="pa-6 pt-4">
<v-card-subtitle class="pa-0 pb-1" style="font-size: 16px">Hardware Metrics</v-card-subtitle>
<v-simple-table class="metrics-table mt-3">
<thead>
<tr>
<th v-for="(item, itemIndex) in platformMetrics" :key="itemIndex" class="metric-item metric-item-title">
<th
v-for="(item, itemIndex) in platformMetrics"
:key="itemIndex"
class="metric-item metric-item-title"
:class="{
tl: itemIndex === 0,
tr: itemIndex === platformMetrics.length - 1,
t: 0 < itemIndex && itemIndex < platformMetrics.length - 1
}"
>
{{ item.header }}
</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="(item, itemIndex) in platformMetrics" :key="itemIndex" class="metric-item">
<td
v-for="(item, itemIndex) in platformMetrics"
:key="itemIndex"
class="metric-item"
:class="{
bl: itemIndex === 0,
br: itemIndex === platformMetrics.length - 1,
b: 0 < itemIndex && itemIndex < platformMetrics.length - 1
}"
>
<span v-if="useSettingsStore().metrics.cpuUtil !== undefined">{{ item.value }}</span>
<span v-else>---</span>
</td>
</tr>
</tbody>
</v-simple-table>
</v-row>
<div style="text-align: right">
<span>Last Fetched: {{ metricsLastFetched }}</span>
</div>
</v-card-text>
</v-card>
</template>
<style scoped lang="scss">
.metrics-table {
border-collapse: separate;
border-spacing: 0;
border-radius: 5px;
margin-bottom: 10px;
border: 1px solid white;
width: 100%;
text-align: center;
}
.t {
border-top: 1px solid white;
border-right: 1px solid white;
}
.b {
border-bottom: 1px solid white;
border-right: 1px solid white;
}
.tl {
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-top-left-radius: 5px;
}
.tr {
border-top: 1px solid white;
border-right: 1px solid white;
border-top-right-radius: 5px;
}
.bl {
border-bottom: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom-left-radius: 5px;
}
.br {
border-bottom: 1px solid white;
border-right: 1px solid white;
border-bottom-right-radius: 5px;
}
.metric-item {
font-size: 16px !important;
padding: 1px 15px 1px 10px;