Gold856 d7e536dda9 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:

![image](https://github.com/user-attachments/assets/409c7ddd-4b7d-4535-9f3f-3970d9dd85f8)

New dashboard:

![image](https://github.com/user-attachments/assets/587ac540-1d6d-40e5-9c6b-00697bab6cbc)

Old Camera tab:

![image](https://github.com/user-attachments/assets/2f1d50a1-131f-4fb7-8617-e1cb4dc5504c)

New Camera tab:

![image](https://github.com/user-attachments/assets/6d5581b7-faff-400a-8e34-e3abf00e0af6)

Old Calibration Info:

![image](https://github.com/user-attachments/assets/81133cc1-c861-4746-9b1e-8320312037de)

New Calibration Info:

![image](https://github.com/user-attachments/assets/0de5935c-84a7-4606-bbc1-8e6d227b7b60)

Old Log Viewer:

![image](https://github.com/user-attachments/assets/f2c32a10-3353-4781-93d7-8e0ffa8ca7fe)

New Log Viewer:

![image](https://github.com/user-attachments/assets/0aeee866-c182-4e80-9025-56bf383d714f)

Old Pipeline Creation Dialog:

![image](https://github.com/user-attachments/assets/a0eb368d-d9af-4cb3-8d9c-fcd12a5caf36)

New Pipeline Creation Dialog:

![image](https://github.com/user-attachments/assets/f05f34a3-f42e-4e8f-9ccd-171a48980b8f)

Old Factory Reset:

![image](https://github.com/user-attachments/assets/9c16a7f7-a454-4ee4-8574-98abf9b94e2d)

New Factory Reset:

![image](https://github.com/user-attachments/assets/fb67888c-c4f1-4e8e-9d02-6943e7a918eb)

Old Pipeline Change:

![image](https://github.com/user-attachments/assets/3acb215a-6639-4d50-a4e6-18b50c3ec1bd)

New Pipeline Change:

![image](https://github.com/user-attachments/assets/a2b18582-cdbd-407c-9690-f11aecf78c76)

Old Import Dialog:

![image](https://github.com/user-attachments/assets/ff43b0bd-3f99-44e5-97fa-c250cd331790)

New Import Dialog:

![image](https://github.com/user-attachments/assets/7ec46023-d47a-45d7-80b8-6881b812300e)

## 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
2025-07-12 00:02:23 -04:00
2025-04-20 05:35:27 -07:00
2025-04-20 05:35:27 -07:00
2024-11-21 04:42:30 +00:00
2024-11-21 04:42:30 +00:00
2020-03-21 01:00:34 +02:00
2024-06-30 16:10:12 -04:00

PhotonVision

Discord

PhotonVision is the free, fast, and easy-to-use computer vision solution for the FIRST Robotics Competition. You can read an overview of our features on our website. You can find our comprehensive documentation here.

The latest release of platform-specific jars and images is found here.

If you are interested in contributing code or documentation to the project, please read our getting started page for contributors and join the Discord to introduce yourself! We hope to provide a welcoming community to anyone who is interested in helping.

Authors

Documentation

Building

Gradle is used for all C++ and Java code, and NPM is used for the web UI. Instructions to compile PhotonVision yourself can be found in our docs.

You can run one of the many built in examples straight from the command line, too! They contain a fully featured robot project, and some include simulation support. The projects can be found inside the photonlib-java-examples and photonlib-cpp-examples subdirectories, respectively. Instructions for running these examples directly from the repo are found in the docs.

Gradle Arguments

Note that these are case sensitive!

  • -PArchOverride=foobar: builds for a target system other than your current architecture. Valid overrides are:
    • winx32
    • winx64
    • winarm64
    • macx64
    • macarm64
    • linuxx64
    • linuxarm64
    • linuxathena
  • -PtgtIP: Specifies where ./gradlew deploy should try to copy the fat JAR to
  • -Pprofile: enables JVM profiling
  • -PwithSanitizers: On Linux, enables -fsanitize=address,undefined,leak

If you're cross-compiling, you'll need the wpilib toolchain installed. This can be done via Gradle: for example ./gradlew installArm64Toolchain or ./gradlew installRoboRioToolchain

Out-of-Source Dependencies

PhotonVision uses the following additional out-of-source repositories for building code.

Additional packages

For now, using mrcal requires installing these additional packages on Linux systems:

sudo apt install libcholmod3 liblapack3 libsuitesparseconfig5

Acknowledgments

PhotonVision was forked from Chameleon Vision. Thank you to everyone who worked on the original project.

License

PhotonVision is licensed under the GNU General Public License.

Meeting Notes

Our meeting notes can be found in the wiki section of this repository.

Description
PhotonVision - FRC Vision Processing
Readme GPL-3.0 639 MiB
Languages
Java 56.5%
C++ 14.9%
Vue 9.2%
Python 7.9%
TypeScript 7.9%
Other 3.4%