A UI for navigating between cameras, toggling options, etc

[paularmstrong]

There are increasingly more options in the HTTP endpoints and they're tough to remember.

Has any thought been put into making a UI for this? What are the needs and wants?

[paularmstrong]

Posted this up without much context. In short, I'm actually looking for a project to keep me busy for this month, but wouldn't want to start without ensuring there's a direct want/need and making a plan about technology/framework used, etc.

[blakeblackshear]

It would be nice to have the landing page show a list of cameras and allow you to pick a camera and choose the overlay options. Maybe even show some stats for the camera. I do want to make sure it is compatible with the Ingress functionality in homeassistant so it can be the UI presented in the panel.

[paularmstrong]

There's no restriction with ingress, afaik. HA uses an <iframe/> to display.

[blakeblackshear]

Also something builtin to help with generating masks would be nice.

[paularmstrong]

That would be really great and really not too difficult to do – just means we should probably consider a reactive UI framework (react, preact, vue, web components, etc) to make it a bit easier

[paularmstrong]

Progress on masks & zones:

Screenflick.Movie.2.mp4

[paularmstrong]

Some people have asked for the ability to change settings via the UI link. I'm not sure what the feasibility of that is, as I haven't read any of the code yet – my guess is that we'd need to completely change the config, so at this time, maybe that's at least a full major release away

[blakeblackshear]

Yea. I really want to stay away from that at this point. I have a few things in the works like turning detection and clips on and off, but that's it. Unless there is a good use case for changing a setting a runtime, I want to avoid it. It gets complicated to try and track state against the config file. What happens on restart? Do the values reset?

[paularmstrong]

Totally agree. I love that the foundations of Frigate are really solid right now. Restarts are fast and really not a scary thing to do.

Maybe some day, settings in the UI would be helpful. For now though, we can concentrate on continuing the build a good foundation.

[paularmstrong]

@blakeblackshear Wanted to get something written out and have you and anyone else around comment and make a decision together. I don't think this has to be super complicated and like all software, anything can be reverted. However, I do want to make sure we're making a choice together and don't end up wasting a bunch of time up front if it doesn't even seem like a maintainable approach.

Proposal

Create a Single Page App (SPA) using Preact, available at / from the Frigate Flask HTTP endpoint. This SPA can build on top of the current HTTP endpoints without making any changes – using them as a web API to get data, images, mjpeg feeds, etc. The Flask HTTP route will respond with text/html of an "application shell" - essentially the barebones HTML document, pre-filled with camera information for the SPA to start rendering.

For consideration: move all current HTTP endpoints under a path namespace, like /api. This would allow future changes to allow the SPA to use URL routing to remember display state (eg, navigating to /<camera> would display the SPA with the context of that camera.

The SPA can use an open source CSS framework like tailwindcss, which is well documented, to build a responsible, usable, and good lookingUI.

For compiling the JavaScript, we can use a tool like Snowpack to enable fast and efficient compilation.

A DEV_PROXY=3000 environment flag (or similar) will need to be added to the Docker env. This will tell the Flask HTTP / route to proxy to the host port 3000 (or whatever value it is set to) instead of serving the pre-built HTML file.

For building the docker image, we will have the Dockerfile.base run npm run snowpack build. Without the DEV_PROXY flag, the Flask application will serve the built files directly.

Alternatives

Home Assistant uses Web Components (mostly LitElement). While these are a web standard and readily usable without any extra frameworks, they tend to have a steeper learning and building curve. Compared to preact, react, vue, and others – you need to write your own state management, context sharing, and much more.

React is a much heavier JavaScript byte cost with a very similar (nearly identical) API to Preact. It would be possible to migrate and switch to React from Preact, and vice-versa, with varying amounts of work, but not too much early on.

Vue is interesting and I'll admit that I don't have a lot of experience with it. What I do know, though, is that it's very AngularJS like. It uses attribute bindings for logic operators instead of pure JavaScript. This means that contributors will need to know more about Vue than JavaScript to make changes.

Open questions

• Are there recommendations or any documentation currently on developing? (or currently being written)

[TheSleepySlee]

I would like to have possibility to run this page out of HASS, which I don't use 👍
Similarly, having some kind of simple page which would list events/clips by camera outside of HASS would be good.

[paularmstrong]

I would like to have possibility to run this page out of HASS, which I don't use 👍

That's a given, with the way that home assistant addons work with ingress. You pretty much just expose a URL/port and Hass puts it in an iframe. Outside of home assistant, it's just like hitting a regular webpack at that same url/port.

[blakeblackshear]

This all sounds good with one exception. The container has nginx installed, so there is no need to have flask serve up the static files. We should be able to use nginx to serve up the static files instead. We will want to use a multistage docker build to generate all the static files and then simply copy them into the directory on the final container so there are no build dependencies in the final image.

[paularmstrong]

Ah I completely glossed over that. Sounds good to me.

We will want to use a multistage docker build to generate all the static files and then simply copy them into the directory on the final container so there are no build dependencies in the final image.

I'm less familiar with Docker, but the final result you mentioned here is definitely my intention.

Thanks!

[TheSleepySlee]

I don't really use the HASS addons, I thought they were completely tied to HASS, so did not even try.

[paularmstrong]

Got a start today. It's really not much, but the basic foundation is in place. I'd like to get it a bit more fleshed out before posting a PR to collaborate on next week.

[paularmstrong]

I've opened a draft pull request if anyone wants to take a look. #496