[PhotonClient] Vite and Typescript complete refactor

[srimanachanta]

• Updates build tool to use Vite instead of the vue-cli (SO MUCH FASTER NOW)
• Rewrites the entire UI to use the Composition API and Typescript
• Updates the frontend WebSocket to be much more robust and less error-prone
• Adds types for all DataExchanges types (from backend)
• Adds types for all Pipeline settings
• Removes the ThinClient, Websocket-based camera stream, and other unused/outdated stuff.

With this PR also comes a requirement for all future Pull Requests that if they change pipeline settings or other data exchange-related settings, their typing has to be updated in the frontend as well. This hasn't been done in the past leading to many bugs in the frontend due to it referencing backend data that didn't exist because it was removed or changed in a backend PR.

TODO

• Reimplement Color Picker
• Revert to the previous pipeline index when disabling driver mode (either from within the dashboard or when changing to the dashboard)
• Enable Driver Mode when swapping to the Camera Settings tab and swap back to the previous pipeline if and only if the dashboard previously wasn't on driver mode

[mcm001]

When trying to calibrate I get

[2023-07-29 14:51:46] [WebServer - Server] [DEBUG] Handled HTTP request of type OPTIONS from endpoint /api/calibration/end for host 127.0.0.1 in 4.7823 ms
[2023-07-29 14:51:46] [WebServer - RequestHandler] [INFO] Calibrating camera! This will take a long time...
[2023-07-29 14:51:46] [General - Calibrate3dPipeline] [INFO] Not enough snapshots! Only got 0 of 12 -- returning null..

I'm not able to reproduce. It has something to do with multi-cam

[mcm001]

There's also been a couple times where the camera dropdown on the right doesn't actually switch between cameras.

[srimanachanta]

When trying to calibrate I get

[2023-07-29 14:51:46] [WebServer - Server] [DEBUG] Handled HTTP request of type OPTIONS from endpoint /api/calibration/end for host 127.0.0.1 in 4.7823 ms
[2023-07-29 14:51:46] [WebServer - RequestHandler] [INFO] Calibrating camera! This will take a long time...
[2023-07-29 14:51:46] [General - Calibrate3dPipeline] [INFO] Not enough snapshots! Only got 0 of 12 -- returning null..

I'm not able to reproduce. It has something to do with multi-cam

This is the response when you try to end calibration, not start it? Did the UI click start or end calibration when this request was sent? For ending calibration, this is excepted response when there are 0/12 snapshots.

[srimanachanta]

Why does the resolution table change colors when I hover? reso

That is just how it was in the old UI too. See the CSS for hovering.

[srimanachanta]

When I connected a second camera, the dropdown in the cameras tab didn't update until I reloaded the webpage

Does the backend send new camera settings whenever it has a new camera updated? Else, the dropdown field's model might not have a reactive update causing it to not show the new camera's name.

[srimanachanta]

i was only able to accidentally get this error once

[WebSocket] Websocket Open [AutoReconnectingWebsocket.ts:72:14](http://localhost:5173/src/lib/AutoReconnectingWebsocket.ts)
[Vue warn]: Error in render: "TypeError: can't convert undefined to object"

found in

---> <ThresholdTab> at D:/Documents/GitHub/photonvision/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
       <VCard>
         <ConfigOptions> at D:/Documents/GitHub/photonvision/photon-client/src/components/dashboard/ConfigOptions.vue
           <DashboardView> at D:/Documents/GitHub/photonvision/photon-client/src/views/DashboardView.vue
             <VMain>
               <VApp>
                 <App> at D:/Documents/GitHub/photonvision/photon-client/src/App.vue
                   <Root> [vue.runtime.esm.js:4605:20](http://localhost:5173/node_modules/vue/dist/vue.runtime.esm.js)
TypeError: can't convert undefined to object
    averageHue ThresholdTab.vue:11
    VueJS 4
    render ThresholdTab.vue:115
    VueJS 46
[vue.runtime.esm.js:3049:16](http://localhost:5173/node_modules/vue/dist/vue.runtime.esm.js)
    VueJS 49

Not 100% sure but I think it is because averageHue is used in the page itself (CSS variable) and it tried to compute it when the camera settings were still undefined causing page rendering to crash and the thresholding tab to not show up. We could just check if hsvHue is undefined before calculating the average hue.

[mcm001]

we ball