Thanks to @foosel for the initial Proof of Concept in OctoPrint On Air #18. Modified slightly to also widen the overall area of the UI and put the two combined tabs side by side. The one issue I ran into was the settings_overlay didn't seem to play nice with my already re-ordered tabs in config.yaml, so had to take those out and then add a hack to hide the temp and control tab links that were stubbornly remaining in view.
You can install using the url below in plugin manager. Please leave feedback here and if you run into issue post to the issue tracker on the github repository here.
I've just noticed that newer un-released branches (aka future version) will probably break this plugin. Causes the webcam to not stay enabled and the hack I implemented to hide the default control and temperature tabs no longer works due to visibility binding via knockout.
@foosel; Will there be a way to override the hasAnyPermissionKo on these tabs in order to hide those default tabs again? Maybe implement some sort of "hidden" collection in appearance > component section of config.yaml that we could use in the __plugin_settings_overlay__ call?
Believe it or not, the-printer-manufacture-who-must-not-be-named paid a contractor to consolidate the standard set of tabs into one big page. As a result of this... and then losing that contractor... they got stuck on v1.3.6 of OctoPrint because nobody there could unwrangle the spaghetti-JavaScript in that plugin. What's funny is that the guy there wanted me to then PUT THE TABS BACK IN. Unfortunately, the head of software development there doesn't have enough experience to size a development job. He probably expected that it would take an hour to just... :animated hand-waving: ...you know, that thing you coders do. He actually stopped by my desk in an hour and seemed upset that it wasn't done.
A seasoned manager would have pulled OctoPrint back into the fork, commented-out most everything from the cosmetic plugin and then built back in the styling.
So yeah, I'm familiar with the let's-consolidate-this mentality.
Yeah, it seems if you wanted to do a full ui change the uiplugin mixin would be the way to go, I just don't have the time to figure out a full redesign and how to integrate it. Big shout out to @BillyBlaze for what he's done with touchui without using that mixin.
Hi @jneilliii,
looks great. See the images.
But I have on issue. When printing and I am sitting on my desk next to the printer, I have the gcode tab opened.
As you can see, this view is now screwed up a little. If you could adjust the gcode_canvas to the parent containert, this would be gread.
//Edit
and the octoprint-container class should display the browser scrollbars on the right side allways. If you open one of the items on the left menu, the layout wiggles a little when enabling the scrollbars
//Edit No. 2
I found an other issue.
When I leave the octoprint browser tab with the "Command & Control" Tab on top, ant than switch back to octoprint, the webcam-stream is disabled. I need to switch to an other octoprint tab and than back to "Command & Control" to activate the cam.
I think I've already fixed your 2nd update related to tab on top probably after you installed. If you reinstall and force a refresh (ctrl+f5) that should work as expected. As for the other tabs, yes I should have mentioned it would stretch all of them so could have odd results. I'll have to look to see if there is a way around that, potentially wrap the containers the way I'm doing on the new combined tab. I'll play with it and see what I can come up with. I didable the gcode tab so didn't even notice.
Webcam issue solved!
The gcode-tab looks better now (but still not perfect)
I liked the full width of the informations on this tab.
But the left oriented gcode-area looked strange.
Could you just center this gcode-canvas?
I think possibly themify may be introducing some conflict here for some of this.
@OutsourcedGuru, useful for what specifically? I'm just appending bootstrap class names and wrapping elements with same; utilizing it's responsive stuff.
Link is to same image as the gcode viewer tab...if it's what I think it is, the whole contents of the tab will scale with the scaling of the page. So the narrower you go with your window, the temp and control widgets will scale to 1/2 the size of the tab.
Here's what I mean about Themify causing issues...this is the gcode tab without themify...
Thanks. In the meantime, I just pushed some updates to the dev branch that forces a min-width property to the page-container. That resolves any of the squishing stuff, with the side effect of forcing a width, which is not perfect. It's hard building flexible UIs...
Unfortunately, the head of software development there doesn't have enough experience to size a development job. He probably expected that it would take an hour to just... :animated hand-waving: ...you know, that thing you coders do. He actually stopped by my desk in an hour and seemed upset that it wasn't done.