Hi, I am writing this post to start a discussion about the OctoPrint native user interface (UI). My focus is on the graphical design, but it also touches into the whole user experience (UX) area. I am currently using OctoPrint version 1.10.3 when writing this post.
The reason for my initiative is that I find the UI a bit dated. An old school look can be cool, but I think for most users a modern UI is preferred. It might be hard to attract new users if the system looks dated.
Some of the improvements I would have liked:
Better usability on mobile phone
Responsive design so the pages adapts to different desktop screen widths (now fixed width: 960px)
Adding dark mode
Reworking the two column layout to make a more "balanced" page, now the left part is very tall
Make the system "remember" my settings if I collapse or expands "widgets"
A more clean and decluttered UI, eg: less visible buttons everywhere (especially on the file widget)
and possibly more...
Please let me know if any of my claims are just me not knowing about configurations or options, in that case I will edit/correct my claims
The UI framework seems to be Bootstrap 2.2.2, it had EOL 2013-08-19, currently supported Bootstrap is version 5.
I know there are some plugins that can help with the UI. I have tried some of them, but for different reasons they have not worked out for me. I think plugins are great for adding features, but I think it's not the way to enable a better and more modern UI.
Reworking the UI on an established web app is a big job. Back-end developers might be negative to it since it does not add any "value" as in improving or providing new features. That is why software companies often have dedicated front end developers and people working on the UX area, because it's a critical part of the system to get satisfied end users and of course it's easier to sell somthing that looks modern and stylish
I would gladly help out, but since changing the UI is quite a big change I would guess "the top management" needs to be in the front seat here
As a bit of a counter argument, the OctoPrint UI is a tool that provides access to my 3D printer. If it is functional, then how it looks is unimportant to me.
There are plugins that can modify the look and feel already available if you wish to modify the default layout, UI Customizer is one.
The UI to looks fine, but maybe a few suggested changes. Some of these might already be implemented, it's just my own ignorance.
Do not make major changes to the GUI in one build. Spread it across multiple builds.
For simplicity of coding, move the very tall stuff on the left to it's own page.
Not sure what language it is written in but there should be a python classpath, jar, dll, etc... something out there to handle the different screen sizes. it's too common nowadays.
I can only speak for android, since you cannot make a shortcut after the last slash, allow the user to set a default tab when logged into.
SMTP works well for me, I see there is some development already using it. Text message when print is done.
All software companies steal ideas from other products and add-ons. With octoprint the challenge is maintaining the add-ins when created by some one else. Add the most commonly used and the ones not being maintained.
Simple buttons that be configured by the user would be very helpful. Every printer/configuration is different. Bash command, terminal, or both in one script would be cool. ie; one button calibrate.
Dark mode, great idea. Maybe a simple pallet to change the background too.
Go secure, https by default. When port forwarding to to the web it's pretty much needed.
Maybe a discord server for discussion. Not sure if it's an official site, but there is one out there; Discord
Make a more "autodetect" for cameras. Have seen quite a few people having a challenge.
Absolutely, and I have commented on it as well. it's an separate web app. not the same as I want. It is however a "proof" that the native UI is ready to be improved since alternatives are beeing made.
Thanks for the tips @b-morgan - I had actually not seen this plugin, and it is very nice!!! It allows me to fix several of my wishes: dark theme, more modern layout, able to position widgets, remembe widget close/open state, resize the files widget and it makes the pages responsive so they fit the screen width and they work great on mobile phone. It even improves the settings page, quite impressive!
I think the plugin does an fantastic job! I know from own experience how difficult it is to override an existing framework UI. This should be the native UI for OctoPrint
However, there are limitations to what this plugin can "fix". I can see some form elements are not properly sized, some colors are not possible to adjust (or used for both foreground and background elements).
The plugin includes Bootstrap Responsive addon for version 2. That is probably the best way to go as that is the version the framework is using. It's still an old framework though, as mentioned it had end of life in 2013. Old frameworks has normally known vulnerabilities, no exception with this one. An upgrade might eventually be needed, and the newer Bootstrap frameworks is responsive by default without an additional "plugin".
I still think the best solution would be to improve the OctoPrint native UI/UX, even if this plugin, and probably others, can do a decent job. For example: the page I have now setup (pic below) has almost 100 buttons/tabs visible when the files widget is full of files. I think the layout would have been much better if most of the buttons was hidden until mouseover. What I do most frequent is to add, print and delete files, and from time to time I end up deleting a file instead of starting a print, or the other way around.
Each column is resizable using UI Customizer, and you can select what widget to be shown in what column. I actually made the center part smaller than default to get left column and the file widget wider. It's a pretty neat solution
