Customizing Octoprint Display

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)

Modified:

Hello @Zaphod!

Have a look here: Pimp my web interface

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.

jneilliii,

      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.

jneilliii,

Cool, Thank you,

Scott

(Fixed that for you.)

1 Like

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.

https://github.com/jneilliii/OctoPrint-WideScreen/archive/master.zip

Thanks @OutsourcedGuru. In case you appreciate the amount of work I put in to making this for you @Zaphod you could shoot me a tip here.

2 Likes

jneilliii's too nice. I'd be like: "okay... I could do that but it would come at the cost of all the other cool things I'm working on right now..." :laughing:

jneilliii,

      Just installed the plugin. works great...

  Scott

Glad it worked out, thanks for the tip.

1 Like

This worked great!!! thanks!

is there any way to make the nav bar wide as well?

I'll have to make an update for that, but yes, it is possible.

1 Like

Nice!
I'll keep an eye on this thread to check if you decide to make the update.

Just pushed a new version that makes the navbar full width.

1 Like

You are the man!!!

Worked flawless!

Thanks! The original was was awesome, and then you made it better! KUDOS