gCode Legend & Viewer Improvements

[yw4z]

CHANGES

For decreasing window width and increasing visible screen space for model
• Header > Used % instead "Percent" and removed "%" from types
• Header > Used "Usage" instead "Filament usage". Requires translation
• Removed spaces between [Length][Unit] and [Weight][Unit]
• Used eye icon and removed "Display" from header
• Removed "color scheme" text to compact frame width. Writing on different line can be an alternative method instead hiding

QOL improvements
• Added button for toggling gCode editor. Fixes #3136
• Increased Combo box's dropdown menu height to prevent scrolling to reach last elements of list. Fixes #4486 #6359
• Stored window width to keep Expand/Collapse button on same position to prevent mouse movement requirement while toggling

Visual Improvements
• Removed background color for expand/collapse button
• Added new icons for Expand/Collapse/gCode Viewer Toggle
• Removed darker rectangle on top. That gave more clean look imo
• Added window radius to match style a bit with gizmos. That gave more modern look imo
• Added a small gap between main toolbar and legend
• Added a small gap between legend and gcode viewer
• Fixes some of problems that related scaling

TODO

• Add scroll ability to gcode editor

COMPARISON

before

After - Width of legend is smaller %15 percent and allows for more screen space

before

after - Dropdown height increased to fit all contents. This prevents unnecessary scrolling

before

after

before - expand button changes position that requires unnecessary mouse movements

after - expand/fold button stays at same position

before

after - added gaps between windows that shows UI more organized and modern

Side by side

[buzzhuzz]

My question is not directly related to this PR, but have you ever considered making G-code inspector colors similar to the main widgets themes? Somewhat similar to the gizmo tool bar.

[yw4z]

thanks for indicating that point. i will look what i can do

[discip]

@yw4z
First of all:
Thank you for taking on this work! 😊
Most of the changes you make seem to make sense while some are not so understandable.

For example, why did you decide to replace the checkbox with an eye icon whose state can only be determined by the color, while the checkbox lets you know immediately if it has been checked or not, even if you cannot distinguish between colors?

The main goal of every single change should be to improve usability.

I once read a quote in another repo that went something like this:
"good UI is invisible"

However, this particular change (eye icon) makes it a bit harder to use for some than before.

In this case, please either keep the checkboxes, or make the difference between the "selected" and "unselected" states more obvious, e.g. by representing the unchecked state by a closed eye.
I prefer the checkboxes however.

kind regards

[kekkodance]

this looks nice.

[yw4z]

hi @discip
i'm not trying to remove everything. Just removing unnecessary things to get more cleaner/modern look.
I assume "Less is more" is better fits if you find a quote.
Main goal is reducing area of legend since not everyone uses 24+inch monitor.
gCode viewer toggle button also for that so people can easily hide it to get more space when it needed. Especially placed it near to expand/collapse button since their purpose is similar

here is an alternative. used boxes on non-visible items.

as you know eye icon already represents visibility on most UI's. Let's hear what people think

[buzzhuzz]

@yw4z , could you please try crossed-out gray eye for disabled items?

[discip]

@yw4z

i'm not trying to remove everything. Just removing unnecessary things to get more cleaner/modern look.

This is not what I wrote. 😊
The only thing I addressed was the eye icon.

Main goal is reducing area of legend since not everyone uses 24+inch monitor.

Yes, on that one we are on the same page. And that's one of the things I thanked you for.

here is an alternative. used boxes on non-visible items.

Mixing these themes doesn't look right, as you would expect either an empty box & one with a check mark in it, or an opened eye and a closed one. These are completely different concepts.

[yw4z]

@buzzhuzz

@discip here is example from adobe. Using boxes not completely unrelated because guides users to a clickable area or shows them as unchecked

[igiannakas]

haven't tested yet but does it adapt for a larger width when multi material prints are displayed?

[yw4z]

@igiannakas didnt saw issues when using 2 material but didnt tested further. Window width determined by bottom content and dynamic. i assume it shouldnt be a problem

Whats your opinion about icon usage on display section? shared few examples above

[igiannakas]

Awesome!

The "eye" / "not eye" I think is more consistent. It conveys the meaning of "visible" and not visible when it is greyed out. Mixing tick box and the eye icon is less continuous from a user experience. We shouldn't be changing the type of box I feel.

Hence, I vote for this one:

[igiannakas]

Also maybe ever so slightly higher spacing between the time/percent/usage columns would be a good idea for the ones with less good eyesight :)

[yw4z]

@igiannakas i didnt touched these spacings because it broke many placement when i changed before

[yw4z]

@buzzhuzz btw which os you use? eye icon looks blurry on your image on #8294 (comment)
or is that caused by screenshot quality? i draw icons with code instead svg icons. maybe i have to switch to vector icons

[SoftFever]

@yw4z
These are awesome improvements.
Thank you!

[yw4z]

Updated visuals on first post with latest changes and added more comparisons

@SoftFever
i assume thats all i can improve right now. reduced code changes as much as possible and added detailed comments for each change

Only i couldnt figure out how to add scrolling support to gcode viewer section. that could be a nice addition. it's same thing using slider on bottom but with scrolling on viewer

Also this commit #8294 will give another fix for longer translations of "Usage". you can find more information on that commit

I marked commit as ready. let me know your thoughts

[GlauTechCo]

Hello, macbook m1 2020 13.3 inc

Default screen resolution( 1440x900 )

Screen resolution( 1680x1650 )

Screen resolution( 2560x1600 )

[yw4z]

@GlauTechCo can you test with latest commit. corrected scaling for top buttons and visible/hidden icons. there are many scaling related issues exist probably i will try to fix them in future

[GlauTechCo]

@GlauTechCo can you test with latest commit. corrected scaling for top buttons and visible/hidden icons. there are many scaling related issues exist probably i will try to fix them in future

Thnx

[afmenez]

I liked all the changes, except for the removal of the '%' on the 3rd column. The size gain is minimal, but the data is less clear without it. Note that all other columns have a unit too.

[discip]

From a consistency perspective I agree with @afmenez.

[yw4z]

removing spaces between units(m/g) and numbers was minimal change too but applying all together saves good amount space

1. 4m32s  32.4  0.60  1.79  eye               
2. 4m32s  32.4  0.60m  1.79g  eye         
3. 4m32s  32.4%  0.60m  1.79g  eye 
4. 4m32s  32.4%  0.60 m  1.79 g  eye 

1. also tried removing m/g but it makes unreadable
2. current
3. added % symbol. this symbol has full width letter size. wider than any letter
4. without any changes

header already says its % why want to see that in content?

[afmenez]

I don't want to look up on the column name to understand what is the data. You could also argue that the 'm' and 'g' are redundant, but it is quicker to understand when they are there on each line.
Thinking of it now, the column could have an abbreviation like "Perc." instead of just "%".

[TomPcz]

• Removed spaces between [Length][Unit] and [Weight][Unit]

Please revert this change. Numerical values and unit symbols should be separated by a space (see ISO 31-0). Also, could you please correct the same issue in the time column and the total time?

Regarding the percentage (there should be a space as well, by the way), I would prefer to include the unit symbols, as it makes the table much easier to read.

[yw4z]

@afmenez @TomPcz i recommend you both to build and use it for while

[TomPcz]

I have tried. Honestly, I have no need to save space on my screen :)

I understand that users with smaller screens might have an issue, but they can always hide the legend. That shouldn't be an excuse for ignoring the ISO standard. As a physicist, I can say that not having space between the number and the unit just feels wrong and unnatural.

Moreover, readability is far more important than saving a few pixels. Those numbers are crucial when optimizing a printing profile (for speed/weight). In my opinion, having all those values so close together makes them harder to read.

I have found an issue with the "eye" icon. It does not scale properly when I use screen scaling (Linux openSUSE Tumbleweed, KDE, Wayland). This is at 120 % (here only the left part of the icon is clickable):

And at 150 % (here even the show/hide gcode icon is cropped):

[yw4z]

@TomPcz not every users uses 4k monitor on their printer farms

probably you didnt pull latest commit that solves scaling issue on buttons

but still item_spacing and window_padding not scales on current code that's why your columns so close and that makes hard to read. Scaling item_spacing will make it easier to read and will fix your issues

[discip]

3. 4m32s 32.4% 0.60m 1.79g eye

The 3rd Option is best!
No need for spaces between value and units. In this case, the screen-space is more valuable than compliance with standards.
Perhaps you could use a different color for the units to improve readability.

Aligning the various values ​​on the right would also help:

[afmenez]

Almost perfect, I would add a leading zero on "5m08s".

[discip]

Almost perfect, I would add a leading zero on "5m08s".

Since there is no decimal separator the leading 0 can be omitted.

more space = better readability 😊

[yw4z]

• adding leading zero is easy will give a shot for that
• colorizing units might requires too much change on code but still its a good suggestion
• I'm thinking same on ISO standards. its good for technical stuff but not always works on UI design
• I will try to increase spaces between columns again. i have tried it before but every time it broke code

[yw4z]

sent new changes for
• fixed some of scaling related issues
• increased spacing between columns to improve readability
• reduced required code changes for hiding "Display" header

increased window width a bit but readability increased. its a trade off and window width still less then original code
make a test and share your thoughts