[Request] "Moveable" PROGRESS BAR position

[bolsoncerrado]

OctoPrint/OctoPrint#4846

Is your feature request related to a problem? Please describe.

I run a farm where I open multiple Octoprint tabs in a single browser.

With the recent addition of slicer thumbnails I have to scrolldown past the thumbnails to find out a "quick way" to see the print progress of each printer.

Describe the solution you'd like

It would be great a setting to determine the position of the PROGRESS BAR, for example BEFORE the thumbnails would be great!

Describe alternatives you've considered

Tried to look for plugins but no joy.

Additional alternatives

Perhaps adding a VERTICAL progress bar sideways with the thumbnail like "Prusaconnect" does? :P

[jneilliii]

I won't get into flipping to vertical or anything like that, but did a quick test in developer tools of the browser and think this might be a plausible option...

to test yourself, open browser's developer tools (F12 on keyboard typically) and in the console tab copy/paste this and hit enter.

$('#state > div > div.progress.progress-text-centered').css({'margin-bottom': 'inherit'}).insertBefore('#prusaslicer_state_thumbnail').after('<hr>');

[jneilliii]

another alternative would be this plugin, and it would put the progress in the title of the browser.

https://plugins.octoprint.org/plugins/progress_title/

[bolsoncerrado]

I won't get into flipping to vertical or anything like that, but did a quick test in developer tools of the browser and think this might be a plausible option...

You mean you could code this permanent and add a setting option? If so, that could do for me too.

The progress title one is not as visual since it's text based... ;)

[bolsoncerrado]

Looks cool indeed! ;)

[jneilliii]

You mean you could code this permanent and add a setting option?

Yes, this is the idea. I just wanted to confirm before putting the work in to make this change that it was acceptable.

[jneilliii]

Added in above commit and released as version 1.0.3rc1. Switch the plugin's release channel in OctoPrint's Software Update settings to Release Candidate and update when prompted.

[bolsoncerrado]

Thanks!

[bolsoncerrado]

And now that you're at it what about adding a second HR after the thumbnail for "cleanness" view ;)

Before:

After:

:)

[jneilliii]

I could do that for images that are 100% only, because with UI Customizer and a wider left panel with scaled down image would mess up with the hr.

[bolsoncerrado]

If you mean this

then it works for me ;)

[jneilliii]

added in the above commit and will be release as version 1.0.3rc2 shortly. you can do a force check for updates from OctoPrint's Software Update settings at the top.

[bolsoncerrado]

Gorgeous!!

👍