Updated UI

[andycb]

Creating a discussion thread to continue discussion an updated UI based on the conversation started on #39.

[Gaweringo]

First mockup of the status page

This design would show everything that is changing on the main status page. (As mentioned by @orangevan in #32 the print head position and used filament could also be displayed)

Clicking on the name, or maybe a link next to it could reveal the 'static' information about the printer, like the Version, Serial Number or Model.

For printers that don't have a camera built in like the Adventurer 3 Lite the space where the camera would normally be placed could be taken up by the static information.

I'm not entirely satisfied with this as it leaves a lot of blank space.

And should we add a settings page to disable the camera? With just one setting this page would be very empty, so I'm not sure what we should do here.
Maybe reordering the header would also be a good idea then

With this wider design, the other pages would look like this

In my opinion, the print page doesn't look too bad like this.

The text on the about page should definitely be constrained in its width.

The same with the debug page.

[andycb]

Love this.

Agreed that showing more information in the camera area for more printers with no camera is perhaps not ideal, as it means the app had two different views based on the type of printer its connected to.

Question: The window is resizable, do you have some thoughts to how to handle the window being made smaller? Would the camera feed get smaller / move as the window was made narrower.

[Gaweringo]

Yeah, maybe the camera could get smaller, but at some stage, it would probably be best to put it under the Information.
Maybe like this:

Smallest the camera should be

Then put the camera under the information and center everything

And I think it would be smart to set a min-width for the application that still fits what's needed.

And if another section like settings is added I think there would be a need for an overflow menu

[Gaweringo]

#26 could be implemented like this