Browser UI Overhall

Development
#1

TL:DR The frontend of OctoPrint doesn't look the best and from what I can read Themeify is more of a plaster than a fix. Are their projects to rewrite? Should I not even bother?

So I'm a big nooby noob too printing and I am so glad that OctoPrint is a thing because it makes life so much easier. However the browser UI is clearly made by backend devs and not frontend.

I have seen in the depth of these forums that its has been attempted before but the code ended up looking a bit like our fav pasta. I also am aware of Themeifiy and will download and take a look at it when my printer eventually fails its print. From the looks though it looks like the same solution that reddit used to have with its subreddits (super modded CSS), but I think that it could be done better.

Are their any active repos rewriting this frontend in something like Angular/Blazor that I can contribute too or is this something that should be kept at the end of a 10ft pole?

#2

A complete UI re-write is in the works, although development hasn't started yet. Gina's mentioned it on several OctoPrint-On-Air videos recently. It is possible to make a plugin utilising the UiPlugin mixing that can replace the entire UI. Its difficult to do, since it has to be either backwards compatible, or offer a migration period for plugins. See also the migration from Python 2 to Python 3 recently...

If I remember right, the idea will be to create a UI 2.0 plugin, that will coexist alongside the current UI, until it is polished & plugins are compatible.

#3

Oh nice! Where can I find the OctoPrint-On-Air videos?

#4

Youtube playlist: https://www.youtube.com/playlist?list=PL9j2DtsIPVkOFIMRrnnbXsnXtQmwj1IId

They go out monthly, and are announced on the OctoPrint Blog too.

1 Like
#5

Yeah, there have been several discussions in regard to this. There are a few plugins that mod the UI (some of mine included) that are also more of a patch to get things to work the way I wanted them. The biggest endeavor was the Consolidated Tabs plugin, which allows you to move all the tabs into a single tab/view. It's not perfect, but works for me for what I was trying to achieve. It along with Themeify is fairly powerful IMO, but it is still not modern day UI design.

image
image1920×939 487 KB

Right now the front-runners for the 2.0 UI is react and vue.js but the endeavor will be a long one and the final decision on the architecture to be used has not been made yet.

As Charlie mentioned, you have the power to write your own UIPlugin mixin implementation and incorporate all the API/webhook stuff to make it functional right now, so if you want to design your own UI you can and are encouraged to do so.

1 Like
#6

A v2 of the dashboard plugin is being worked on which will use the UIplugin mixin to replace the UI. It is planned to be a fully featured UI able to replace Octoprint's UI and also be 100% user customizable.
It is based on a widget layout, widgets can contain any information and controls and can be edited and re-arranged by the user.
I am also using vue.js and material design components for the frontend so it will have a modern design.
Will check back here when I have more progress.

2 Likes
#7

Looking forward to being able to test this out @j7126 hit me up if you need some beta testing. I'm very interested in how you are going to handle plugins, if at all. I know @foosel will be super happy that someone is finally getting around to using this mixin implementation. I do know that vue.js was one of the libraries that she was considering for the OctoPrint redesign.

#8

+1 if you need some beta testing. Like I said before I'm pretty new to 3D printing so if you need a fresh set of eyes testing, more than happy to help

#9

That does make me extremely happy :smiley:

2 Likes
#10

It is very early in the cycle but j7126 and Willmac16 are working hard on implementing some of the concepts, ideas and feedback from this thread: Dashboard v2 ideas but with a more modern framework as a starting point. It is very exciting i.m.o.

Developing this as a plugin first makes a lot of sense as it gives a lot of opportunities to try different approaches without breaking the existing OP UI or plugins. We have discussed different approaches to make it developer/plugin friendly so plugins can provide their own widgets and views (possibly also hook in to existing widgets/views) but nothing is set in stone. The idea is to experiment and develop something to demonstrate and discuss with the community first.

#11

I am currently getting into the Vue Composition API.
I have written some vue components with svg gui elements which should be then usable :smiley: