Build me a basic UI with video feeds, sensor and solenoid.

Hi,

I created a system managed with Raspberry Pi4, the goal of the system is to activate a linear solenoid with takin care of information of some devices and parameters set on UI.

I need a user interface to control the all this, please find a prototype : (you can easily cut loading and password page by clicking on it)
https://xd.adobe.com/view/cfb6ce82-9574-4dc8-b6f8-749dde0a31ce-9ae5/
On my opinion HTLM5 can be a good solution but you will tell if there is a better solution.

The sixth devices are a linear solenoid, a push-button, two cameras, a rangefinder and an induction sensor. All are wired connected to the raspberry.

Cameras :
– The full-size background of the UI is a live video feed on camera 1 (day light) or 2 (night – infrared light)
– You can switch from camera 1 to camera 2 with the button located on the upper left corner.

Counter :
– One important variable on my project is X, X is a whole digit, it is set by the user using « + » or « – » or directly set « 17 » or « 30 » in the middle right of the UI

Push-button / linear solenoid :
– UI get open or close position of the push button.
– When push button is pressed and UI set on semi, it activates 1 time during 0,2s the linear solenoid
– When push button is pressed and UI set on burst, it activates 3 times during 0,2s the linear solenoid (with 0,5s gap between each activation).
– When push button is pressed and UI set on full, it activates the linear solenoid time during 0,2s (with 0,5s gap between each activation) as many times that push button is kept pressed.
– When push button is pressed a small cross appear on the middle of the screen during 0,2s.

– If X=0 and push button is pressed no activation of the solenoid. For any mode (semi, burst, full).
– If induction sensor is activated and push button is pressed no activation of the solenoid. For any mode (semi, burst, full).
– For each time the solenoid is activated, the X number is decremented from 1.
– Semi, burst or full mode is selected by positioning as bigger (like on my abode XD prototype)

Rangefinder :
– UI gets a data from the rangefinder
– UI convert rangefinder data to show a distance (0.3-12m) on the upper right corner of the interface.
– UI adjust the size of a circle always present in the middle of the UI

Induction sensor :
– UI show message on the lowest middle part of the screen if X=0 and the induction sensor is constantly activated from more than 1s
– UI show another message on the lowest middle part of the screen if X is no =0 and the induction sensor is constantly activated from more than 1s

UI Specificity :
– UI needs to be full screen.
– UI needs to be operated with the touch screen from the raspberry.
– UI integrates an adjustment of its light intensity.
– UI get a light and dark mode (like iPhones) changing as changing camera.
– UI button is 50% transparent to allow a better comprehension of the video stream.
– UI can be lock and unlock with a password.
– UI show raspberry battery level in %.
– UI get recording button that active recording of the active video feed on a file on the raspberry destocks (optional).

So really basic interface, I would like something design but uncluttered. Something like the prototype would be perfect.

Have a good day.