Is there any way to customize the Octoprint Web Page on my browser (On the PC) The display seems to be designed for 4:3 aspect ratio displays. It would be handy to be able to move the blocks of display stuff around as tiles to use the full width of the page and make it more usable. Example shown below shows what a modified one could possibly look like, In this example you can see all of the connection details and more of the uploaded file list... (This was just an image created in Paint Shop Pro)
That does a couple things ok, but not what I wanted, I also found DragonOrder but that only lets you move headers up and down on the left column, Like putting the uploaded files list at the top for example. It does not let you create a new column like my image is depicting. I was hoping to have the fully expanded print/cancel panel and the file/folders uploaded list visible at the same time since there is plenty of room on the web page area to do that.
So the following code appears to work, but will break with some plugins (ie themeify). In reality this should be done with a complete UIPlugin mixin implementation.
// main content adjustments
$('div.container.octoprint-container').addClass('row-fluid');
$('div.container.octoprint-container.row-fluid > div.row').css({'margin-left':'20px','padding-right':'20px'});
// sidebar adjustments
$('div.container.octoprint-container > div.row > div.accordion.span4').removeClass('span4').addClass('span3');
$('#files div.row-fluid.upload-buttons > span.btn.btn-primary.fileinput-button.span6:nth-child(2) > span').text('Upload SD');
// tabs adjustments
$('div.container.octoprint-container > div.row > div.tabbable.span8').removeClass('span8').addClass('span6');
// add new right sidebar
$('div.container.octoprint-container > div.row').append('<div class="accordion span3" id="right_sidebar"></div>');
// move panels to right sidebar
$('#connection_wrapper').appendTo('#right_sidebar');
$('#state_wrapper').appendTo('#right_sidebar');
wrap that code into a plugin's self.onAllBoundcallback so all the bindings are established prior to trying to move stuff around. Not really sure if that's necessary, but doesn't hurt. I tested by copying/pasting it into the developer console and this is what it looks like for me.
I have no idea how to do what you are suggesting.I do not know
how to write code nor do I know where to put it. I have themeify
but I do not care if I have to get rid of it, it does not do much
anyway... I have no clue what " wrap that
code into a plugin's self.onAllBoundcallback" means.
Thanks for trying to help, but you have exceeded my geek
threshold...lol
Scott Pearce
this makes designing rocket motors seem easy...
No worries. Give me a couple of days and I can wrap it up into a plugin for you. I'll need to add some stuff like a settings section to allow you to pick which panels go to the right side since this has to be done programmatically and I don't think I'll be able to get DragonOrder to integrate.
Here is the plugin form of the above. No guarantees it works completely for you, but in my testing with just this plugin and the bundled ones installed in OctoPrint it seems to work as expected. There are some tweaks that I may do down the road for this to make the settings interface a little better as it seemed that when adding items to the right side panel in settings they were still showing in the list of available ones until I restarted. Process is as follows, install the plugin using the URL below, open settings and in the OctoPrint-WideScreen section press the + button next to the panes you want to move to the right panel and then restart OctoPrint. As it loads up it should in theory move those items over to the right.
just came across this, and looks great, can you move the entire Left bar all the way to the right? or even better hide it all with in another tab, I am using a 7inch touchscreen and the webpage is just too wide.
No, unfortunately it actually adds a second sidebar on the right for widescreens. My consolidated tabs plugin will allow you to merge tabs onto one, but still doesn't get rid of the sidebar. I personally just installed OctoDash on my 7" touch screen and it's working great. I had previously used it on my hyperpixel 4 touch screen and it works just as good on the larger screen.
