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.
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.
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:
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
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
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
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.
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'
@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.
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.
