[UI Customizer] New plugin - Test/feedback/ideas wanted

Hey I created a plugin trying to fix the things that annoyed me the most - I would love some feedback and ideas.

My primary focus was on making it mobile/tablet friendly and make a more usefull layout options - like adding a webcam widget that can be see while looking at the gcode viewer in sync etc.

Tried to show the fixes done for mobile/tablets in this small recording: https://youtu.be/BTiI6i1Rc5c

I was thinking about making different layout models/design options for mobile, tablet and desktop. So one can have custom layouts prioritizing the important stuff for each platform.

But let me know what you guys think.

Very interesting. I see I need to update bits of my plugins to properly shrink, like the image preview in Octolapse as well as some text overflow/ellipsis in ArcWelder.

Overall I really like it! Nice job. Since you asked for feedback:

One thing I would love to see is that the webcam popup be centered vertically in the browser window, not centered on the page height. Vertical centering is yucky to do though....

Another is the collapsed menu in the upper right. Personally (this is just me), I'd rather see it drop down and not extend the header:

The 'span' class width in the new settings is a bit odd, but I see why when looking at the div with the 'tab-content span9' class applied. Would be nicer as a span 12, but not sure how to achieve that. Also, due to a bunch of padding being added to the modal body and some other elements, a span12 would yield a scroll-bar, which is not ideal either. Anyway, perhaps there is some small room for improvement there. Here is what that tab looks like as a span12 with the extra margin/padding removed:

Finally, and this looks like it might just be a themeify thing, but the menu color/edge transition feels off in some of the themes:

But looks nice with themes disabled:

Again, great work! I like having more room :slight_smile:

Thank for the great feedback!

The centered webcam is fixed in next release.
The extending of the header is default bootstrap stuff - will look into it.
In general im using all the standard bootstrap theme and stuff - not all themify themes are not that well implemented. Bootstrap is complex to skin :slight_smile:

I'm not blaming this on all plugin developers but alot plugins uses span8, span5 etc. without noticing the total width of the grid then becomes more than 12 and causes layout overflow etc.

Im working on more fixed but im beginning it might be easier just write an entire new UI in bootstap 4.5 :wink:

1 Like

+1 nice plugin, particularly like seeing GCode viewer and web cam at the same time.

This is one of my ambitions for the long run, I want to do this too :slightly_smiling_face:

If you could find a way to sandbox/provide compatibly for BS2 you'd be on to something.

I too would love to use a newer bootstrap. I am willing to reskin my plugins for this as long as I had enough time to do it (and it would be a lot of work).

There is support for replacing the entire UI in the view models etc. - but the time needed is intense and yes alot of plugins will need a rewrite.

But I have tried a bit and its not impossible - I would need to use alot of wrappers/container but the "main" content layout in BS4.5 is not that different from 2 - and the speedup in not having shadows and gradients done the "heavy way" would really speed up the UI.

So, perhaps a plugin hook is needed (supported bootstrap versions) that could send some view data to the plugin. It would be nice if we could separate the jinja2 templates into the various bootstrap versions to keep them clean, then we could just trigger loading a different set of templates? A class could also be added to the plugin containers in case there is some kind of backwards compatibility css? Anyway, just spitballing here. I wouldn't want to support two sets of views for very long though, so I'd expect this to be integrated with OctoPrint itself somehow

Yearh or maybe the UI could be in one branch and the backend in another :slight_smile:

FYI for @Laze (and @FormerLurker if you don't already know) there is planned to be a UI rewrite, undecided on frameworks etc. but the plan would be for it to exist as a UI plugin, and a sort of 'transitition' period where it gets tested, updated, plugin compatibility is sorted etc. At the moment I don't think Gina has decided on a framework, but if you wanted to make a 'core UI' that was bootstrap 4 then the UI plugin would be the way. Plugins can also expose 'helpers' that other plugins can use, might be a way of signalling compatibility.

That's a good idea, but I also see merit in doing what FormerLurker mentioned and sub-classing the bootstrap2 stuff for plugin view models. I'm not well versed in bootstrap's js side enough to know what all it does and how that could be achieved though.

New version out now:

@FormerLurker most of your ideas have been implemented :slight_smile:

1 Like

I've received reports of crazy weird blacked out screens when using my Bed Level Visualizer and your plugin together. Haven't had the chance to look to see what's going on and file a proper issue, but figured I would throw that out here for now...

Strange - And Bed Level Visualizer is completely broken when installing on my installation - i cant remove it or reinstall it. Tried removing all the files but somehow how get this everytime:

2020-12-02 19:25:42,349 - octoprint.plugin.core - ERROR - Could not locate plugin bedlevelvisualizer
Traceback (most recent call last):
  File "/home/pi/oprint/lib/python3.7/site-packages/octoprint/plugin/core.py", line 1212, in _import_plugin_from_module
    location, spec = _find_module(module_name)
  File "/home/pi/oprint/lib/python3.7/site-packages/octoprint/plugin/core.py", line 62, in _find_module
    spec = imp.find_module(name)
  File "/home/pi/oprint/lib/python3.7/site-packages/octoprint/vendor/imp.py", line 288, in find_module
    raise ImportError(_ERR_MSG.format(name), name=name)
ImportError: No module named 'octoprint_bedlevelvisualizer'

with python 3 you have to install a system dependency, listed in known issues on the repo. that might be at play here.

Thanks that fixed it. My printer doesn't have a probe is there anyway to try it without?

@Laze, the new version looks great! It works well in chrome, but there is some performance issue in Firefox for windows you should look into. At first I thought it was caused by a high refresh rate on my cam, but it persisted after disabling the webcam. Probably some on_refresh update somewhere that is getting called over and over in firefox. I actually wasn't able to get the debug console open to test, but I will try that after work.

Will look later. Haven't used Firefox in ages :see_no_evil:

Yeah, if you enable virtual printer and connect to it you can either print the gcode file linked below or copy/paste it's contents into the plugin's settings and then use the update mesh button.


Tried now - it behaves perfect on my pc - there is no problems - a bit of lag when resizing but thats all