Fixes for new icons

[yw4z]

Code Changes

• [x] Sidebar / Parameter icons

Quality > Wall Generator > param_wall_generator.svg Quality > Walls and surfaces > param_wall_surface.svg Quality > Bridging > param_bridge.svg Quality > Overhangs > param_overhang.svg Strength > Support Tree > param_support_tree.svg Overhang Speed > param_overhang_speed.svg Speed > Jerk(X/Y) > param_jerk.svg

• [x] Filament Settings icons

Filament > Print Temperature > param_extruder_temp.svg Filament > Bed Temperature >param_bed_temp.svg Cooling > Cooling specific layer > param_cooling_specific_layer.svg Cooling > Part Cooling Fan > param_cooling_part_fan.svg Cooling > Auxiliary part cooling fan > param_cooling_aux_fan.svg Cooling > Exhaust Fan > param_cooling_exhaust.svg Multi Material > Wipe tower parameters > param_tower.svg Multi Material > Toolchange Parameters > param_toolchange.svg

• [x] Machine Settings icons

Basic Information > Printable Space > param_printable_space.svg Basic Information > Cooling Fan > param_cooling_fan.svg Basic Information > Extruder Clearence > param_extruder_clearence.svg Basic Information > Adaptive Bed Mesh > param_adaptive_mesh.svg Basic Information > Accessory > param_accessory.svg Multi Material > Single Extruder Multi Material Setup > param_multi_material.svg Multi Material > Wipe tower > param_tower.svg Multi Material > Single Extruder Multi Material Parameters > param_settings.svg Extruder > Size > param_extruder_size.svg Extruder > Layer Height Limits > param_layer_height.svg Extruder > Position > param_position.svg Extruder > Lift Z Enforcement > param_extruder_lift_enforcement.svg Extruder > Retraction when swithing material > param_retraction_material_change.svg Motion Ability > Jerk Limitation > param_jerk.svg

• [x] Placeholder icons

Timestamps > custom-gcode_time.svg (there is an icon existing but not compatible with current design this will fit better) Presets > Print Settings > process.svg Presets > Print Settings > Quality > custom-gcode_quality.svg Presets > Print Settings > Strength > custom-gcode_strength.svg Presets > Print Settings > Speed > custom-gcode_speed.svg Presets > Print Settings > Support > custom-gcode_support.svg Presets > Print Settings > Other > custom-gcode_other.svg Presets > Print Settings > Notes > custom-gcode_note.svg Presets > Filament Settings > Filament > custom-gcode_filament.svg Presets > Filament Settings > Cooling > custom-gcode_cooling_fan.svg Presets > Filament Settings > Setting Overrides > custom-gcode_setting_override.svg Presets > Filament Settings > Advanced > custom-gcode_advanced.svg Presets > Filament Settings > Multi Material > custom-gcode_multi_material.svg Presets > Filament Settings > Notes > custom-gcode_note.svg Presets > Printer Settings > Basic Information > custom-gcode_object-info.svg Presets > Printer Settings > Machine G-Code > custom-gcode_gcode.svg Presets > Printer Settings > Multi Material > custom-gcode_multi_material.svg Presets > Printer Settings > Extruder > custom-gcode_extruder.svg Presets > Printer Settings > Motion Ability > custom-gcode_motion.svg Presets > Printer Settings > Notes > custom-gcode_note.svg

• [x] Add ability to pulling icons from tabs for gCode Editor to show them in placeholders and compare window

• [x] Object list > Height range icons for layer menu item

• [x] Object list > Height range add / delete buttons (previous code uses add_filament / delete_filament)

before

after

• [x] Compare window > Updated undefined category icon with low resolution compatible one. Previous code used question icon that used for dialogs

Before	After

Fixes

• [x] Object list > Support / Seam painting icons ( previous ones not compatible with low resolution & Dark theme)

• [x] SVG and Emboss Gizmos > Changed warning icon with obj_warning.svg . because exclamation.svg is used for dialogs and not compatible with low resolution

Before	After

• [x] Updated warning icon on dialogs. Changed obj_warning.svg icon with exclamation.svg . because exclamation.svg designed for dialogs

Before	After

• [x] Combo Box icon size for dropdown arrow

I was changed icon resolution on combo box code on previous commit and resolution of arrow icon set for it. reverted icon res back to 16x16

Before	After

• [x] Gizmos > Keyboard cheat sheet icon resolution fix

Icon appears on > Variable Layer Height, Cut, Support Painting, Seam Painting, Color Painting, Measure Problem with this icon they defined 30, 22 resolution on GLGizmosManager.cpp but gizmos uses ImVec2(font_size * 1.8, font_size * 1.3) for resolution. Resolution ratio is not matching and using font size as a different ratio is not a good choose Let me know if you have simpler solution

• [x] Notifications > Swapped collapse / expand arrow directions

Problem is notifications expands bottom to top and collapse button icon not looks right I was used directions from original source but they already set wrong. so changed that in this commit

Before	After

• [x] Gizmos > Vertically centered icons rendered blurry / pixelated this should fix more. included to this commit because its already a orca change. i can this as separate commit if its not

Before	After

Icon updates

• [ ] Toolbar > Auto Orient
• [ ] Plate > Auto Orient
• [ ] Toolbar > Lay on surface
• [x] Toolbar > Variable Layer height
• [x] Top Bar > Calibration tab icon (Matched icon name that used on code)
• [x] Checkboxes > matched disabled color and fixed an alignment problem

New icons

• [x] Cross Hatch fill pattern

Deleted this icons from source (they are leftovers from previous icons commit). i will send them as separate commit

cut_circle_dark.svg cut_circle.svg cut_triangle_dark.svg cut_hexagon.svg cut_hexagon_dark.svg cut_square.svg cut_square_dark.svg cut_triangle.svg measure_edit.svg mesh_boolean_a.svg mesh_boolean_b.svg mesh_boolean_difference.svg mesh_boolean_difference_dark.svg mesh_boolean_intersection.svg mesh_boolean_intersection_dark.svg mesh_boolean_keep.svg mesh_boolean_subtract.svg mesh_boolean_union.svg mesh_boolean_union_dark.svg param_default-pattern.svg param_search.svg topbar_blank.svg

[GlauTechCo]

Hello, there seems to be a problem with the icon in the picture, it would be nice if you edit it, thank you. @yw4z yw4z

[yw4z]

@olcayoren this fixed in this commit, is that screenshot from your compiled source from my branch?

[GlauTechCo]

@olcayoren this fixed in this commit, is that screenshot from your compiled source from my branch?

I tried Pr-5239.

[yw4z]

@olcayoren thats for color fixes not includes this fixes. can you try this one

[GlauTechCo]

@olcayoren thats for color fixes not includes this fixes. can you try this one

Thanks

[yw4z]

@yw4z As previously mentioned the arrows to expand / collapse the Daily Tips are mixed up.

Should be pointing up:

Should be pointing down:

@discip i checked icon and i used same directions (with original source) for notifications arrows . can you swap names of these icons and test notification_expand.svg notification_collapse.svg

[discip]

@yw4z

i checked icon and i used same directions (with original source) for notifications arrows .

The original state was already wrong. 😊

It should work as this was already reported on March 9th: https://github.com/SoftFever/OrcaSlicer/pull/4368#discussion_r1518417369 https://github.com/SoftFever/OrcaSlicer/pull/4368#discussion_r1518417541

[yw4z]

@discip done. let me know if there are another problems

[discip]

@yw4z

Thank you! 👍

Will do, should I encounter any.

[discip]

@yw4z Maybe the following one could be interesting:

The marked value can't be changed as soon as Reverse only internal perimeters is checked. So it would make sense to hide the entire entry when the checkbox above is checked.

@igiannakas Is my observation correct or did I miss here something?

[igiannakas]

@yw4z Maybe the following one could be interesting:

The marked value can't be changed as soon as Reverse only internal perimeters is checked. So it would make sense to hide the entire entry when the checkbox above is checked.

@igiannakas Is my observation correct or did I miss here something?

The value can be changed but it’s not really recommended to deviate from the default 0%

[discip]

@igiannakas

The value can be changed but it’s not really recommended to deviate from the default 0%

No, as mentioned above: As soon as Reverse only internal perimeters is checked, the value always changes back to 0%. Regardless what value or unit and even under which OS (Manjaro | Windows).

Maybe macOS is an exception here. If I remember correctly, you're using macOS right?

[igiannakas]

@igiannakas

The value can be changed but it’s not really recommended to deviate from the default 0%

No, as mentioned above: As soon as Reverse only internal perimeters is checked, the value always changes back to 0%. Regardless what value or unit and even under which OS (Manjaro | Windows).

Maybe macOS is an exception here. If I remember correctly, you're using macOS right?

AH yes you're right. Forgot how I implemented it! Indeed, it can be hidden; but then the user may wonder what is going on :)

[igiannakas]

@yw4z A few of suggestions to consider:

1. Using light grey for the icons is a bit ambiguous as typically grey icons mean disabled - also we are using some icons with the Orca accent colour (teal) and others without. I've caught myself thinking that an icon is disabled because of this -

Here for example you can see the search icon being a bit more "bold" than the save and delete icons.

I know this won't be ideal but we should look at adding an accent colour to the icons that are at a clickable state - with grey being reserved for UI elements that are disabled. Also grey icons are a bit of a usability nightmare - grey against grey is not very visible if any users have any visual difficulties.

2. There is a small inconsistency in the icons between the auto arrange in the top tool bar and the auto arrange on the current plate

3. The colour painting - fill icon is slightly confusing. Usually the "universal" fill icon is a bucket, but I may be too old school for this :)

[yw4z]

@igiannakas

1

• Edit icons repeating too much on filaments section or gizmos and it increases contrast too much • It changes contrast ratios for sidebar titlebar and its contents and it increases separation between that areas • With same contrast ratio ui elements starts to mix together • This icons for controls / inputs. thats the reason i didnt add color to them to reduce clutter • about disabled state of icons, they are elements of input boxes if input box is not disabled you can use it. just give a time you will get used to over time

here is comparison with opacity vs without opacity

You can try to increase opacity of that icons for experiment. just open svg with text editor and change opacity value icons > delete.svg, edit.svg, save.svg, search.svg

Search icon is rounded and i used less opacity on that because of anti aliasing. it will be rendered differently on every system there is no solution to fix it. also you can change opacity value for search icon but you cant get a better balance between dark / light theme

2

that icons still work in progress already changed in this commit. you can build from my branch

3

also this icon still work in progress. we are discussing with softever. but we couldnt decide final usage yet here latest changes • badge icons smaller • used brush icons for seam and support painting • used spray for color painting but will try bucket

[igiannakas]

Thank you for the reply🙏🏻

maybe try using it for a bit with light mode? Dark mode has inherently more contrast which doesn’t show the “issue” I’m seeing as prominently..

Maybe bumping up the opacity for icons globally when in light mode may be a way forward? For example the BBL icons are way more contrasty than our latest revision, improving usability in my view.

On point 1 - at least explore uniformity. All clickable icons should be grey for example - having some grey and some colored implies a difference from a UX perspective.

[yw4z]

@SoftFever what is your opinion on contrast of icons with @igiannakas 's comments. i have to change all icons if there is a problem with contrast. also requires some changes on code side to swap icon colors for dark / light theme

[igiannakas]

@SoftFever what is your opinion on contrast of icons with @igiannakas 's comments. i have to change all icons if there is a problem with contrast. also requires some changes on code side to swap icon colors for dark / light theme

Yeah I’m sorry to be a pain about this - as they are right now they are closer in opacity to the background elements (ie drop down border color for example) which indicates them as not clickable - see below for what I mean. There is very little visual distinction that the icon is enabled which also isn’t helped by the search icon being a bolder shade - it indicates that the save and delete icons are disabled and the search one is enabled. And also having the disabled slider next to them also in grey but bolder amplifies this.

maybe it’s just a handful that need tweaking - just the edit, save etc icons in the side bar and printer and filament settings?

I’m sure we can get used to them in the long run - just being picky as it’s one of the things that was a bit jarring from a “new user” to the new icon set. Besides that they are very good actually and a significant improvement over the existing icon set!!!

[yw4z]

@igiannakas zip file contains 4 icon sets. each one with different opacities. 0.6 (currently used), 0.7, 0,8, 0.9

if we want to increase visibility of buttons 0.8 is best fit in my opinion because titlebars has darker background and this shows icon color darker. so using icons with opacity gives them a balance

here is file for who want to compare icon_test.zip

[discip]

AH yes you're right. Forgot how I implemented it! Indeed, it can be hidden; but then the user may wonder what is going on :)

No, I don't think so, because most likely users will think that their build is flawed in the sense that they cannot change that specific value, and sooner or later someone is going to report that 'issue'. 😊

@yw4z After that is cleared, would you mind implementing the corresponding suggestion? https://github.com/SoftFever/OrcaSlicer/pull/5221#issuecomment-2098483964

[igiannakas]

@igiannakas zip file contains 4 icon sets. each one with different opacities. 0.6 (currently used), 0.7, 0,8, 0.9

if we want to increase visibility of buttons 0.8 is best fit in my opinion because titlebars has darker background and this shows icon color darker. so using icons with opacity gives them a balance

here is file for who want to compare icon_test.zip

Tested both 0.8 and 0.9. They both look good - cannot pick one for definite as better than the other. See below. Maybe the 0.9? But I'm reviewing them in a brightly lit room which affects contrast perception so cannot tell for sure.

In any case, both ones convey a better "meaning" to the buttons that they are indeed active.

Thank you very much for this, this is good!

0.9:

0.8:

[SoftFever]

@SoftFever what is your opinion on contrast of icons with @igiannakas 's comments. i have to change all icons if there is a problem with contrast. also requires some changes on code side to swap icon colors for dark / light theme

@igiannakas raised a very good point. We can make the current line color darker? Good thing is we are using SVG, we can search & replace the color

[yw4z]

@SoftFever i have tried codes on bitmapcache but they didnt work? is there another place for that feature

[SoftFever]

@SoftFever i have tried codes on bitmapcache but they didnt work? is there another place for that feature

Yes, this is the place. But it can't replace opacity IIRC. Or you can also directly search/replace in the SVG files itself as they are ASCII files.

[yw4z]

tried again, compiled and it didnt worked

bitmapcache.cpp > wxBitmap* BitmapCache::load_svg

    if (dark_mode) {
        replaces["\"#262E30\""] = "\"#EFEFF0\"";
        replaces["\"#323A3D\""] = "\"#B3B3B5\"";
        replaces["\"#808080\""] = "\"#818183\"";
        //replaces["\"#ACACAC\""] = "\"#54545A\"";
        replaces["\"#CECECE\""] = "\"#54545B\"";
        replaces["\"#6B6B6B\""] = "\"#818182\"";
        replaces["\"#909090\""] = "\"#FFFFFF\"";
        replaces["\"#00FF00\""] = "\"#FF0000\"";
        replaces["\"#009688\""] = "\"#00675b\"";
        replaces["\"#949494\""] = "\"#FF0000\""; // NEW LINE FOR REPLACE
    }

All icons uses #949494 color but they didnt turn red (#FF0000) when i switch to dark mode. am i missing some thing or there some thing different with my exported SVG's

EDIT: it starts to work after removing escape characters but not sure that will give a negative side effect. i guess # only used for colors on SVG but not sure replaces["#949494"] = "#FF0000";

my exported SVGs not contains quotes for colors that was the problem

[yw4z]

@igiannakas kept same icon color for dark mode

last commit • Increases contrast of icons on light theme • Removes opacity from edit, delete, search... icons • Fixes different color for advanced toggle on dark mode • Fixes checkboxes not aligned with other boxes • Style fixes for checkboxes

@SoftFever you may want to check changes on BitmapCache.cpp. also please check my previous comment that describes problem

[igiannakas]

Awesome thank you very much! I’ll merge the Pr in my dev branch and give it a go. Thank you for this!!

[yw4z]

@igiannakas icons could be a bit more dark but secondary color (ORCA) loses visibility when it gets darker you can make them darker from BitmapCache.cpp > line 342 replaces["#949494"] = "#7C8282"; // ORCA replace icon line color for light theme

[igiannakas]

@igiannakas icons could be a bit more dark but secondary color (ORCA) loses visibility when it gets darker you can make them darker from BitmapCache.cpp > line 342 replaces["#949494"] = "#7C8282"; // ORCA replace icon line color for light theme

Merged your PR in my dev branch - it looks SO much better, thank you for this!

[SoftFever]

@yw4z I noticed a small artefact on plater icons