More progress-centric print job status screen

[supersebbo]

Describe the solution you'd like
The current print job status screen is not optimized for status checking. More space is given to controls (heat/fan) than is given to progress elements, which means it is hard to read from a distance. Also the progress elements are split above (time) and below (layers) the control elements making the screen seem disjointed.

My hypothesis is that people spend more time looking at this screen from a distance to check on the progress of their build than they do adjusting parameters during a build, therefore I'd like to propose a screen that is designed more towards monitoring progress - especially from distance.

I have created a couple of mock-ups of how this could look. One with preview image and one without.

I tried to get this going myself but I just cannot get my head around Angular!

[UnchartedBull]

I would suggest creating a custom theme for that (you don't need Angular knowledge for that). There already is a theme you can use that as inspiration and look up a few things: https://github.com/UnchartedBull/OctoDash/tree/master/themes/NOX.

[UnchartedBull]

Wrong button sorry

[supersebbo]

I would suggest creating a custom theme for that (you don't need Angular knowledge for that). There already is a theme you can use that as inspiration and look up a few things: https://github.com/UnchartedBull/OctoDash/tree/master/themes/NOX.

Thanks @UnchartedBull ! A couple of questions if you'll indulge me.

1. Can themes be updated 'on the fly' into a running version of OctoDash or does it require to be re-built? How do you activate them?
2. I notice that the NOX theme still uses the circular dials rather than a progress bar. Can you actually change the elements using the Theme styling or is it limited to repositioning/sizing/coloring the existing elements?

[UnchartedBull]

Themes can be updated on the fly. Just restart OctoDash and the new theme should be applied. No need to rebuild anything. You can activate them once v2 is released. I'll make sure to put some instructions in the custom_themes folder. But basically you just copy over the .css file into your configuration folder and that's it. OctoDash will pick up the theme automatically then.

You can do everything you can with CSS, so mainly repositioning / sizing / coloring yes. But you can also add text with ::before and ::after and there probably also is a way to create a progress bar.

[thegarbz]

@supersebbo FYI I love this idea. Did you ever get anywhere with a custom theme? If so can you share? If not... well I have no other plans this weekend.

[thegarbz]

@UnchartedBull I gave this a go but failed miserably. If there was a HTML progress bar element already hidden on the page somewhere which we could unhide via CSS then I may have had a chance, but right now it looks like doing this is beyond the possibility of themes which is a shame, a linear progress bar would be nice.

[UnchartedBull]

I'll have a look at this once I'm back. I might be able to create the circle with CSS only so you can just 'straighten' the bar in your theme.

[thegarbz]

Honestly this problem gave me the nudge I needed to actually try forking a github project and playing with it myself (hence the PR from earlier today which was me learning my way around github). Maybe I can add a html element to the underlying codebase that is hidden by default which could be easily enabled in a theme, that would prevent turning the theme into a major mess.

[UnchartedBull]

Sure go ahead, I'm just holding back on the other PR to wait on noxhirsch. Feel free to create a PR for the hidden HTML element, Shouldn't be a huge performance issue and will most definitely work just fine :)

[UnchartedBull]

Once the linked PR is merged a "normal" progress bar is available, while viewing the preview, this should enable one of you guys to create a theme to match the mockup there :)

[thegarbz]

Sigh, there goes my upcoming weekend :-)
Thanks for that. I have spent a bit of time trying to figure out how to get a progress bar implemented, but all I've succeeded in doing was causing the damn software to display a blank screen.

I'll give it a go as a theme now that the element is available.

[thegarbz]

@UnchartedBull

Hey quick progress report:

Unfortunately my knowledge is too limited to make this universal. If you hide the thumbnail the percentage doesn't move:

Got a bit more fine tuning to do, but are you happy for me to add a pull request for this along with a note that this theme is really only suitable for horizontal progress?
I also intend to crank out two other themes: one for fat fingers (bigger scroll bars)
And one based on the NOX theme but with this horizontal bar along with some other tweaks.

[UnchartedBull]

as long as it's stated in the README that the horizontal scrollbar is needed for this theme everything is fine 👍

[thegarbz]

Actually the easiest solution to this would be to have 2 percentage elements, the former tied to the circular bar (as it already is) and the latter tied to horizontal bar.
I couldn't figure out how to make a horizontal bar, but I'll have a play with the code on the weekend to see if I can figure out how to add a second percentage indicator. That would make the theme dependent on a future version, but it would also be neater.