Redesign of all icons / UI improvements

[yw4z]

I will try to add screenshots of latest design with less clutter as much as possible.

I will continue to send commits so they are not final images

Added an expandable section every title for further information

Every design changes are not in this post. There're 400+ icon changes

will edit this post over time

GOALS

• Make UI to easier to use with better presented icons
• Improving UI consistency
• Make them unique to Orca Slicer
• Making all icons to pixel perfect
• Completing missing ones and replacing generic icons

PROGRESS

Recreation of files	Designing elements	Reviews & Revisions	Fixes	Testing

What's left

• More ideas to integrate icon designs

Add some waves or ocean related elements to improve branding and uniqueness

• Perfecting icons and adding some unique details (It will take time. i will send minor changes over time)
• Updating designs of gizmos
• Coding side changes (Need help on this. there is a task list below)
• Related bug fixes (Need help on this. there is a task list below)

To-Do list for Round 2

• Web based configuration screens etc. (I'm planning to do this in separate commit. because it also needs CSS & HTML editing)
• Sidebar improvements

OVERALL PREVIEW

Expand // Explanation of changes and decisions

• Mostly tried to build all designs with 1px lines instead of fills. UI will look more modern with this way
• Made all icons pixel perfect
• Tried to fill icon frame as much as possible. This makes them looks like at similar sizes and show UI a bit more organized
• Mostly used 2 color design on icons. Gray / Turquoise. Orange used for warning and Red for critical on related icons
• Changed gray code on icons to #949494 . It has best balance between dark / light theme
• Tried to balance contrast on some parts using opacity instead of color change
• Used same icons on related functions to improve UI consistency. Like preferences, material related etc..

TITLE BAR

Expand // Explanation of changes and decisions

• Used a document icon on for file button. Used as rectangle shape because it will fit better with other designs
• Used a list / menu icon for second dropdown menu
• I recommend removing icons from this 2 menus. First one is "File" but not sure what can be use for title for second one
• Redesigned save button
• Used a simpler design for undo and redo
• Redesigned calibration button to make it pixel perfect
• Simplified window buttons
• Used "File" and "More" for drop down menus

Old vs New

TAB BAR

Expand // Explanation of changes and decisions

• Redesigned home button with lines. it fits better with other icons now
• Made Prepare and Preview icons pixel perfect. didn't change designs on these
• Changed design of Device button. Previous one has many small details. Just used a box toolhead and plate. Its easier to identify now
• Made Project icon pixel perfect. Added an extra row to catch perfect fit on pixels
• Used same Calibration icon for its icon. This will require a change on code
• Added new icon for debug tab
• Added new icon for calibration tab

Old vs New

TOOLBAR

Expand // Explanation of changes and decisions

• Overall > Main goal on toolbar icons fitting icon frame as much as possible. previous designs not using icon frame fully and this causes an ugly / irregular design
• Overall > Changing order of items is recommended with shared order below. it will make toolbar easier to use and easier to remember places of buttons
• Add > Used an isometric box on add button and added a + badge to present add object
• Add Plate > Used a plate on front and 2 plates on back to present button related with multiple plates. didnt add plus badge because it makes design complicated
• Emboss > Simplified icon design and added a simple 3D effect to present emboss function
• Transform > Used a centric design on Move, Rotate, Scale. All shares same box on center and different shapes around object to present function. This will increase relation between them. Move uses horizontal and vertical arrows, Rotate uses a big rotating arrow, Scale uses diagonal arrows to point a bigger box's corners to indicate object will be scaled
• Auto Orient / Lay on Surface > This 2 functions is very similar. One works automatically other one is selective. Used an asterisk on auto and used a target icon on selective one. Used box at 45 degree to increase simplicity
• Auto Arrange > Its very similar to previous design. All shapes highlighted instead of one while hovering compared to previous one. this makes sense because it arranges all objects. Added different shapes to increase indication of works with multiple different objects / shapes.
• Mesh Boolean > Just updated file to make it pixel perfect. Most of apps using same design so no need to change design
• Cut > Increased visibility of dashed line compared to old design with removing parallel lines
• Split to Objects / Parts > Used same design language on them. Used 4 different circles to indicate split will create different objects. Used a big rounded rectangle that sliced to 4 parts to indicate object will be sliced to parts
• Assemble > Used same puzzle logic from precious design but used them together to fill icon frame. This will looks much more simple
• Paint > Used same design language on paint functions to increase relation between them. Using isometric cube to indicate functions related 3D painting also it will create a relation with add file icon. Used a spray on badge to present painting function because its easier to read at this resolution. Used similar design for support painting only difference applied it to a 3D cube. Used a vertical zig zag to present seam. Used waves and bubbles on cubes to present color painting also using waves and bubble will increase branding for orca slicer
• Variable Layer Height > Used lines instead of rectangles and changed how highlighting works on icon. Fits better with other icons now
• Measure > Used a caliper instead of a ruler. This fills icon frame better and looks cooler in my opinion

New vs Old

i recommend this order for for icons for best grouping

GIZMOS

PAINT (COLOR, SUPPORT, SEAM)

Expand // Explanation of changes and decisions

• Reworked Tool / Brush icons. mostly tried to use flat design
• Circle > Just a circle
• Sphere > Added reflections to present sphere
• Triangle > just used simple mesh with 2 triangles and highlighted 1 of them
• Height Range > Used lines to present layers and highlighted a range with turquoise color
• Fill > Added 2 different shapes to present fill function. didn't fully painted because it starts to looks like mesh face painting and not presents function properly
• Gap Fill > Just leaved small blank areas on layers to present gaps. added a line to gaps with turquoise color to highlight gaps
• Reworked button shape of tool / brush types
• Reworked filaments section. Used button shape as square. Changed spacings. Background will automatically resized to filament button count
• Used radio buttons for vertical / horizontal draw direction buttons instead checkboxes to save some vertical spacing

Old vs New

EMBOSS

Expand // Explanation of changes and decisions

Reworked Icons
• Simplified them as much as possible to give modernish look

Reworked layout
• Moved style to top. Fitted to window width. Used title and input box on same line to reduce window height
• Used height and depth at same line. Used icons for Height and Depth text to save some place
• Moved alignment to top and used at same line with bold / italic icons
• Used operation and its radio buttons on same line to reduce window height
• Made many changes how it scales on different languages

Improvements
• Surface related values only visible if emboss used as modifier
• Reworked stepper buttons. Looks more modern now
• Reworked advanced expansion. Simplified and removed text
• Hidden surface related settings if there is no relations with objects to save some vertical space

UI consistency improvements
• Used text > revert > input order for components line on sidebar
• Revert icon and title used orange color if values edited like on sidebar
• Used orca color on sliders, radio buttons
• Removed border and other decorations on edit buttons of sliders

Fixes
• Moved warning icon a bit up to prevent overlapping with text preview box border

Old vs New

MEASURE

Expand // Explanation of changes and decisions

• Used selection values with multiline. Window size highly reduced with this layout
• Moved restart selection to bottom. like on other gizmos mostly at bottom. this will also reduce vertical spacing
• Aligned measure type texts vertically to "copy to clipboard" button
• Updated style of copy to clipboard button
• Updated dimension value edit box on viewport. Values are much more readable now

Old vs New

MESH BOOLEAN

Expand // Explanation of changes and decisions

• Used icons on tabs and matched style
• Moved remove selection button to left of selection's name. so position of button stays same
• Used "Apply" term on confirm button to reduce size changes for button
• Replaced "Part 1" / "Subtract from" text with icons. Used icons will change with selected mode
• Moved delete input checkbox to bottom to reduce window size
• Updated button styles

Old vs New

CUT

Expand // Explanation of changes and decisions

• Matched elements order with sidebar. Title > Revert button > Controller
• Moved "Cut to Parts" checkbox to same line with "After Cut". This reduces vertical height and seems logical
• Used slider for cut height controller
• Used regular text color for build volume, groove, connector
• Revert buttons only visible if value changed like on other UI sections
• Removed shapes for "Upper Part" and "Lower Part". Used colored text instead
• Matched radio button styles
• Matched slider styles
• Moved "Add Connector" and "Reset Cut" buttons to bottom to reduce vertical height
• Connectors > Used icons for shapes
• Connectors > Used regular button for "Remove connectors"
• Connectors > Used radio buttons for connector style instead combo box

Old vs New

SVG

Expand // Explanation of changes and decisions

• Matched elements order with sidebar. Title > Revert button > Controller
• Slightly decreased preview size
• Used Combo box for filename related dropdown
• Surface related features will not show if there is no surface relation
• Matched radio button styles
• Matched slider styles

Old vs New

ARRANGE

Old vs New

VARIABLE LAYER HEIGHT

Old vs New

ASSEMBLY VIEW BOTTOM

NEW vs OLD

TRANSFORM (MOCKUP / WIP)

SIMPLIFY (MOCKUP / WIP)

G-CODE VIEW LEGEND (MOCKUP / WIP)

UI COMPONENTS

SIDEBAR

Expand // Explanation of changes and decisions

• Corrected many alignment related problems
• Delete filament button hides itself if there is only one filament
• Corrected unequal spacing between icons
• Updated toggle styles
• Decreased opacity of edit, save, delete, search to balance contrast on sidebar
• Added many missing icons for parameters
• Added some missing side texts for parameters

Old vs New

Updated Search boxes

Expand // Explanation of changes and decisions

• Title > Preferences > Used 2 sliders. looks more modern compared to cog
• Title > Printer > Used multi color version of icon designed for device tab
• Printer > Connectivity > Redesigned icon to make it pixel perfect
• Title > Filament > Used a similar icon with previous design
• Add / Remove filament > Added filament icon on near to +/- to improve relation. It will make easier to identify buttons related with which function
• Title > Process > Used a similar icon with previous design
• Process > Object Settings > Preferred to use a list icon because it opens a window
• Process > Compare > Used A / B to present compare
• Edit > Used a similar design. Used pen as a shape instead of a straight line. Old one is over minimal in my opinion
• Save > Updated design to make it pixel perfect
• Delete > Changed remove button with a dash in a rectangle instead of a X. This will improve relation with neighbor elements (Input box, Dropdown menus, edit, save, delete)
• Search > Used a bigger circle and added a line to improve 3D effect of lens

Expand // Explanation of changes and decisions

OVERALL

• Used multi color to highlight important elements on icons
• Designed new icons for generic items or missing ones. Added required changes on code to to-do list
• These ones sharing same designs with different highlighting. "Top/Bottom Layers", "Walls", "Walls and Surfaces". also matched infill direction with normal infill icon

• Toolhead related icons sharing same design with little changes to improve consistency

• Added 1px line to bottom if there is a relation with bed plate

WORTH TO MENTION

Used a turtle on "Slowdown on Overhangs". Used a snail previously but changed to turtle, living in ocean and they are slow . It fits nicely

Used a Lighthouse for prime tower. Its not fully presents function but its better then using a simple rectangle

*** = Nothing special / It explains itself
** = Explained Above

COMMON ICONS

Advanced > Used an atom to present advanced. Looks more attractive and modern compared to cog

G-code / Scripts > Used < / > to present code. Looks better compared to G or a cog

PRINTER SETTINGS

Basic Information

Printable Space > Created an isometric view of printer chamber with toolhead and highlighted a volume inside of it

Advanced > **

Cooling Fan> Tried to shape fan looks like an octopus on top view also looks like fan. We can use this with out a fan frame

Extruder Clearance > **

Adaptive Mesh > Added probe points and highlighted some of them to indicate its adaptive

Accessory > **

Machine G-Code

All > ***

Multi-Material

Single Extruder Multi Material Setup > Just added multiple spools to show multi material

Wipe Tower > ***

Single Extruder Multi Material Parameters > **

Extruder

Size > ***

Layer Height > ***

Position > **

Retraction > **

Lift Z Enforcements > **

Retraction when Switching Material > **

Motion Ability

Advanced > **

Speed Limitation > **

Acceleration Limitation > **

Jerk Limitation > I struggled to present vibration at this resolution but quite happy with result

Notes

Notes > **

FILAMENT SETTINGS

Filament

Basic information > **

Print Chamber Temperature > **

Print Temperature > **

Bed Temperature > **

Volumetric Speed Limitation > **

Cooling

Cooling for Specific Layer > **

Part Cooling Fan > **

Auxiliary part cooling fan > **

Exhaust Fan > **

Setting Overrides

Retraction > **

Advanced

G-Codes / Scripts > All > ***

Multi Material

Wipe Tower > All > ***

Tool change parameters with single extruder MM printers >

Notes

Notes > **

PARAMETERS

Quality

Layer Hight > **

Line Width > **

Seam > **

Precision > **

Ironing > **

Wall Generator > **

Walls and Surfaces > **

Bridging > **

Overhangs > **

Strength

Walls > **

Top / Bottom Shells > **

Infill > **

Speed

Initial Layer Speed > **

Other Layer Speed > **

Overhang Speed > **

Travel Speed > **

Acceleration > **

Jerk(XY) > **

Support

Support > **

Raft > **

Support Filament > **

Others

Bed Adhesion > **

Prime Tower > **

Flush Options > **

Special Mode > **

G-code Output / Post processing scripts > **

PLATE

Expand // Explanation of changes and decisions

• lock/unlock and plate settings button changes background color on active state. its easier to identify while dealing with many plates
• Mouse hover changes icon and border color instead of changing background

PLACEHOLDER

Expand // Explanation of changes and decisions

• Added many missing items to replace generic / missing ones. there is list of them on to-do list

MODIFIER / OBJECT LIST ICONS / CONTEXT MENU

Expand // Explanation of changes and decisions

Context Menu

• Tried to make icons easy to identify
• Add Part, Add Negative Part, Add Modifier uses same shape. this will make context menu more simplified
• Add Part > Used badge with a (+) sign on a rectangle. rectangle present box / shape
• Add Negative Part > Used badge with a (-) sign on a rectangle
• Add Modifier > Used an asterisk for modifier
• Support Blocker > Used same support icon previously used and subtracted an X on support. Tried many alternatives for this one but this one is lookin best and simple
• Support Enforcer > Used a box without connection with bed and added 2 supports bottom side. Didn't fully filled with supports to show support will be used on specific positions
• Height Range Modifier > Used lines to present layers and highlighted middle ones with turquoise color. Also added arrows for indicating its a range

Object List

• Text > Used T letter. Added +,-,* as a badge
• SVG > Used an arc with control points for SVG to present vector graphics. Added +,-,* as a badge
• Cut > Used same icon on toolbar
• Cut Connectors > Kept similar design with cut icon on this. added a pin to present connectors
• Paint Icons > This ones simplified versions of toolbar icons. Currently code uses toolbar image. added low res compatible icons to make them easier to read. Added these to to-do list. Also no icon used for seam painting but there is an
• Object Sinking > Used orange color on this to indicate its a warning. Also used a ocean wave instead of a straight line
• Warning > Its appearing if geometry has problems but used wrong texture for this icon on code. added this to to-do list

CONTEXT MENUS

Expand // Explanation of changes and decisions

• Added new icons for all sub menus
• Didn't add all icons on main menu because it looks too crowded. here is preview of it

MENUBAR

FILL PATTERNS

Expand // Explanation of changes and decisions

• Used multi color on icons to improve branding
• Made all pixel perfect
• Didn't used some patters with an angle to improve readability compared to original
• Concentric > Used a part of orca logo on to improve branding
• Aligned Rectilinear > Used 2 parallel lines with different colors to present how it works
• Octagram Spiral > Improved readability
• Honeycomb > Used different shape for 3D honeycomb. Original files uses same icon with normal honeycomb
• Cubic > Used different shape for adaptive and supportive cubic. Original files uses same icon with normal cubic on all
• Tri-Hexagon > Used star shape at center. It's easier to identify now

LOGO USAGES

HELP > ABOUT

Expand // Explanation of changes and decisions

• Designed a new font for orca slicer and implemented to design
• Corrected some alignment and frame margins
• Used orca color for github link
• Used separate images for dark and light mode to improve compatibility with dark mode
• Background of version and "based on.." text should be removed on code. Added this to to-do list

DIALOGS

Expand // Explanation of changes and decisions

• Added ocean waves as a branding element
• Used rounded corners. I guess all platforms can use rounded corners. instead of circle or rectangle. Using same icon on all platform will improve consistency
• Changed this files to updated icons on dialogs. i will update all icons that has logo if design approved

OrcaSlicer.svg (Used on Most dialogs)
OrcaSlicer_192px_grayscale.png (Used on file not found error. connection error etc..)

SPLASH SCREEN

Expand // Explanation of changes and decisions

• Designed a new font for orca slicer and implemented to design
• Improved support for dark mode. Logo unreadable on previous design for dark mode on previous design
• Splash screen now formed by SVG that using %100 of height and weight. This will allow easier to implement new visual designs for future

LAYER VIEW MODE BUTTON

Expand // Explanation of changes and decisions

• Size of icon increased around %150. here is comparison of size change. new vs old
  
• Removed size change on hovered images. used color change instead

NOTIFICATIONS

Expand // Explanation of changes and decisions

• Added an orca to all alert type icons to improve branding
• Slicing > Used shape of top sign (octagon) on cancel button. Used orange for normal state and used red color for hovered state

LAYER SLIDER PAUSE/GCODE/REMOVE ICONS

Expand // Explanation of changes and decisions

• Old icons impossible to read so i tried to simplify icons as much as possible
• Used / on custom code. its much easier to read compared G
• Used red on delete button to reduce accidental clicks

|||||||||||||||||||||||||||||||||||||||||||||||||||||||| END OF DESIGNS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||

RELATED / FOUND BUGS ( *** HELP NEEDED *** )

I have navigated all UI to find related icons and here is my findings

Bugs

• Toolbar icons blurry 4328

• Toolbar > Emboss > Style > Edit buttons rendered with wrong color ( this might be related with toolbar position )
  

• Printer Network Connection > Test icon rendered with wrong color if button disabled. button is turns disabled while ip input box empty
  

• Expand arrows not following dark theme also there is no svg for this icon
  

• Sidebar > Process > Objects List > Add a margin between Cut modifier and Add / Negative part icons. Currently has no margin
  

UI inconsistencies

• Process > Objects > Search close button not uses "im_text_search_close.svg". and icons don't uses given colors
  
• Process > Objects > Search > Search button and close button not visible on light theme
  
• Filament Settings > Advanced > Placeholders > Search close button not uses "im_text_search_close.svg". and icons don't uses given colors
  
• Toolbar > Cut > Revert button always visible. It will only show up if value changed on other parts of UI
• Toolbar > Cut > Add connectors > plug / Snap > revert / reset buttons always visible
• Toolbar > Variable Layer Height > Icon not uses colored version while popup active. All other toolbar buttons switches to active state while related popups visible

Other (Not related with icons, mostly UI inconsistencies)

I didn't add screenshots to this section to reduce clutter

• Sidebar > Process > Objects > Edit in parameter table > value / input boxes not visible until click

• Clicking other toolbar button not closes variable layer height popup. also clicking outside not closing popup

• Object list > SVG add/negative/modifier > Edit SVG not visible on context menu. But there is "Edit Text" for Text objects. Using context menu for SVG object on viewport also has an "Edit SVG"

OrcaSlicer/src/slic3r/GUI/GUI_Factories.cpp

Line 1150 in b736a0b

void MenuFactory::append_menu_item_edit_svg(wxMenu *menu)

Expand // Screenshot

• Object list > SVG / Text Object > Move Edit SVG / Text item to top for improving accessibility. Already on top for Text modifiers > Edit Text

Expand // Screenshot

• Window resize icon right bottom is not compatible with dark theme on Windows OS. Only appears on Compare and Network window. Already hidden in Filament settings, Printer settings, Object list , setup printer / filament

Expand // Screenshot

• There are many alignment related problems on UI. i can create mockups for proper alignments of icons if someone want to fix this

Color related

• Filament settings > multi material > ramming settings > button not styled with dark theme
• Filament settings > multi material > ramming settings > popup window not works with dark theme
• Sidebar > Set filaments to Use > System filaments tab under line not uses Turquoise color

Other (Not related with Icon changes but related with UI)

• Text is not visible on Linux 3667
• Dark mode toggle not visible on Linux 3882

REQUESTS / SUGGESTIONS ( *** HELP NEEDED *** )

• Noticed this order would be better for toolbar icons
  
• Sidebar > Process > Replace advance text with new atomic (advanced) icon
  
• Toolbar > Scale > Not uses world coordinates term for XYZ axes. Also removing world coordinates text from Move and Rotate will make their popups smaller
• Printer / Filament Settings > Move Edit window for gcode to end of title bar it will save too much vertical space. especially on printer gcodes tab. Here is comparison
  
  
• Don't use system colors on lists. Every OS uses different colors for this. I saw orange for Linux and red for macOS on some user shared screenshots. I'm using windows and picked colors from it. Also using custom colors for this will increase readability for icons and consistency on UI. Here is best colors for selected item colors with comparison
  
• Updated Color and Support painting icons on object list but there is no icon used for Seam painting. Adding icon would be nice to show there is a seam painting on object. I added image with low res support for Seam painting (objlist_seam_painting.svg)

FIXES / IMPROVEMENTS / COMPLETED TASKS

• Small change on toolbar order. Moved Emboss to next of Color point to group paint buttons 4581

• Adding missing / generic icons on sidebar parameters with newer ones

Expand // Details

OrcaSlicer/src/slic3r/GUI/Tab.cpp

Line 1954 in 8801c50

void TabPrint::build()

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

• Adding missing / generic icons on filament settings with newer ones

Expand // Details

OrcaSlicer/src/slic3r/GUI/Tab.cpp

Line 3097 in 8801c50

void TabFilament::build()

Multi Material > Wipe tower parameters > param_tower.svg
Toolchange Parameters > param_toolchange.svg
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

• Adding missing / generic icons on printer settings with newer ones

Expand // Details

OrcaSlicer/src/slic3r/GUI/Tab.cpp

Line 3500 in 8801c50

void TabPrinter::build_fff()

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

• Adding missing / generic icons on placeholders window with newer ones

Expand // Details

https://github.com/SoftFever/OrcaSlicer/blob/8801c50aa04b2855b3cfc0785dda721a8169b853/src/slic3r/GUI/EditGCodeDialog.cpp

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

• Added new icons for Color painting(objlist_color_painting.svg) and Support painting (objlist_support_painting.svg) on object list . They are compatible with low resolution. Currently they look blurry because lack of compatibility

Expand // Details

OrcaSlicer/src/slic3r/GUI/ObjectDataViewModel.cpp

Lines 75 to 77 in 8801c50

	{ InfoItemType::CustomSupports, {L("Support painting"), "toolbar_support" }, },
	//{ InfoItemType::CustomSeam, {L("Paint-on seam"), "seam_" }, },
	{ InfoItemType::MmuSegmentation, {L("Color painting"), "mmu_segmentation"}, },

OrcaSlicer/src/slic3r/GUI/ObjectDataViewModel.cpp

Line 246 in 8801c50

m_support_icon = create_scaled_bitmap("toolbar_support");

OrcaSlicer/src/slic3r/GUI/ObjectDataViewModel.cpp

Line 235 in 8801c50

m_color_icon = create_scaled_bitmap("mmu_segmentation");

• Help > About > Improved layout and color related fixes

Expand // Details

• Removed "Orca slicer" string to cleanup
• Removed "Based on". already writes on bottom
• Changed background color of version text to transparent
• Changed github link color to turquoise
• Aligned link text with other texts

• Compare window > Updated Undefined category icon

Expand // Details

OrcaSlicer/src/slic3r/GUI/UnsavedChangesDialog.cpp

Line 2237 in 8801c50

m_tree->Append(opt_key, type, "Undef category", "Undef group", opt_key, left_val, right_val, "question");

• Updated icon for undefined category. question.svg is used for dialogs and not compatible with low res. used new icon undefined.svg

• Added height_range_modifier.svg for context menu "height range modifier" item and object list should be appear in this places

Expand // Details

OrcaSlicer/src/slic3r/GUI/GUI_Factories.cpp

Line 661 in b736a0b

return append_menu_item(menu, wxID_ANY, _L("Height range Modifier"), "",

• Process > Objects > Object list > Add height range > Layers > uses add_filament.svg / delete_filament.svg instead of add.svg / delete.svg or it can use just regular + / -

Expand // Details

OrcaSlicer/src/slic3r/GUI/GUI_ObjectLayers.cpp

Lines 34 to 35 in b736a0b

	m_bmp_delete = ScalableBitmap(parent, "delete_filament"/*"cross"*/);
	m_bmp_add = ScalableBitmap(parent, "add_filament");

• Toolbar > Measure > a button appears for "copy to clipboard" after measuring but it uses "notification_arrow_right.svg". on dark theme instead of using copy_menu_dark.svg . Light theme uses copy_menu.svg without problem

Expand // Details

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeasure.cpp

Line 1917 in b736a0b

if (m_imgui->image_button(m_is_dark_mode ? ImGui::ClipboardBtnDarkIcon : ImGui::ClipboardBtnIcon, _L("Copy to clipboard"))) {

OrcaSlicer/src/slic3r/GUI/ImGuiWrapper.cpp

Line 88 in b736a0b

{ImGui::ClipboardBtnDarkIcon , "copy_menu_dark" },

OrcaSlicer/src/imgui/imconfig.h

Lines 202 to 204 in f3b3e92

	const wchar_t ClipboardBtnDarkIcon = 0x0836;
	const wchar_t PrevArrowBtnIcon = 0x0836;

• Context menu added new icons for sub menus

Expand // Details

• All added icons compatible with low res
• Updated icons of split sub menu
• Added new icons for modifier objects submenus. load, cube, cylinder, sphere, disc, torus, text, svg
• Added new icons for mirror sub menu items

• Emboss and SVG popups uses exclamation.svg instead of obj_warning.svg . exclamation.svg used for dialogs and not supports low resolution

Expand // Details

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoEmboss.cpp

Line 3166 in b736a0b

"exclamation.svg",

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoEmboss.cpp

Line 1545 in b736a0b

draw(get_icon(m_icons, IconType::exclamation, IconState::hovered));

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoEmboss.cpp

Line 167 in b736a0b

exclamation,

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoSVG.cpp

Line 400 in b736a0b

"exclamation.svg", // exclamation

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoSVG.cpp

Line 1442 in b736a0b

draw(get_icon(m_icons, IconType::exclamation, IconState::hovered));

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoSVG.cpp

Line 140 in b736a0b

exclamation,

• Toolbar > Emboss > Advanced > Alignment buttons blurry ( this might be related with toolbar position )

Expand // Details

• Toolbar > Emboss > Style Buttons and bold/ italic buttons centered vertically to height of dropdown menu. If height is odd number then start point will be decimal number and cause blurry icons

Expand // Details

• Toolbar > Popup windows > Keyboard cheat sheet icon is blurry

• Delete preset and Revert button visible while search is active. Process > Global> Search & Filament Settings > Search

Expand // Details

• Updated splash screen with bigger image. This will allow easier to implement new visual designs

• Toolbar > Emboss > Height and depth not uses step value box. they use + / - buttons but other parts of UI uses step boxes

COLOR RELATED FIXES

• Radio buttons not using default style on this areas Toolbar > Cut > Add connectors and Object > Add Text Modifier > Join / Cut

Expand // Details

• Multiple sliced plates > selected plate thumbnail border not using Turquoise color

• Multiple sliced plates > All plate stats text not using Turquoise color

• Preview > Layer slider text not uses Turquoise color

• Context menu > Simplify Model > Detail level slider not uses Turquoise color

• Context menu > Simplify Model > Color of Apply button is not Turquoise while hovering. is green (bamboo studio color)

• Toolbar > Support Painting / Seam painting / Color painting > Brush type selection radio button border not uses Turquoise background for active button

Expand // Details

OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMmuSegmentation.cpp

Lines 523 to 528 in b736a0b

	ImGui::PushStyleColor(ImGuiCol_Button, m_is_dark_mode ? ImVec4(43 / 255.0f, 64 / 255.0f, 54 / 255.0f, 1.00f) : ImVec4(0.86f, 0.99f, 0.91f, 1.00f)); // r, g, b, a
	ImGui::PushStyleColor(ImGuiCol_ButtonHovered, m_is_dark_mode ? ImVec4(43 / 255.0f, 64 / 255.0f, 54 / 255.0f, 1.00f) : ImVec4(0.86f, 0.99f, 0.91f, 1.00f));
	ImGui::PushStyleColor(ImGuiCol_ButtonActive, m_is_dark_mode ? ImVec4(43 / 255.0f, 64 / 255.0f, 54 / 255.0f, 1.00f) : ImVec4(0.86f, 0.99f, 0.91f, 1.00f));
	ImGui::PushStyleColor(ImGuiCol_Border, ImVec4(0.00f, 0.68f, 0.26f, 1.00f));
	ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0);
	ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 1.0);

• Toolbar > Support Painting / Seam painting / Color painting > Light theme not uses colored versions of icons. i added second color with opacity but prefer using turquoise color like on dark theme

Expand // Details

• Title bar buttons not uses Turquoise background while hover

• Active tab highlight not using Turquoise color. This highlight color should be only change when a value edited. Tabs appear in these places

Expand // Details

Sidebar > Process > Global > Tabs
Sidebar > Process > Objects > Tabs
Sidebar > Filament setting edit window
Sidebar > Printer settings edit window

• Toolbar > Emboss > Advanced expansion button not uses Turquoise background while hover
• Toolbar > Emboss > Advanced > Sliders not uses Turquoise background for thumb

COULDNT FIND THIS ICONS IN UI ( *** HELP NEEDED *** )

Not sure how to get this notification messages
• notification_preferences.svg
• notification_right.svg
• notification_documentation.svg
• notification_eject_sd.svg

Plate related images but couldn't see them in UI
• go_next_plate.svg
• go_last_plate.svg

Other ones

Expand // File List

• color_picker_border
• flush_volumes.svg
• monitor_network_wired.svg
• open_project.svg
• open_in_browser.svg
• replace_arrow_right.svg
• replace_arrow_down.svg
• replace_arrow_left.svg
• step_ok.svg
• step_thumb.svg
• single_little_photo_dark.svg
• single_little_photo.svg
• toolbar_arrow.svg
• toolbar_settings.svg
• reduce_triangles.svg (probably context menu icon but removed)
• retraction.svg

UNUSED IMAGES

i guess there are many unused images in images folder. there is many calibration related png images but UI not contains them. they take about 4-5MB space. Also there are many for store or account related images but orca not using these features

Store / Account / Online features related ones

Expand // File List

• topbar_account.svg
• topbar_publish.svg (top bar share / upload functions on bamboo studio)
• topbar_publish_disable.svg (top bar used by share / upload functions on bamboo studio)
• score_star_dark.svg (appears on monitor screen to asking to rate print file on bamboo studio)
• score_star_light.svg (appears on monitor screen to asking to rate print file on bamboo studio)
• mall_control_refresh.svg
• mall_control_back.svg
• mall_control_forward.svg

Probably leftover

Expand // File List

• toolbar_settings.svg
• toolbar_modifier_cylinder.svg
• toolbar_modifier_cone.svg
• toolbar_modifier_cube.svg
• toolbar_modifier.svg
• tab_presets_active.svg
• tab_presets_inactive.svg
• lock_hover.svg (there is no hover effect on icons)
• unlock_hover.svg
• cross_focus.svg
• cross_focus_large.svg
• obj_unprintable.svg (appears on object list in bamboo studio but replaced with checkbox in orca)
• obj_printable.svg (appears on object list in bamboo studio but replaced with checkbox in orca)

Leftover

Expand // File List

• topbar_open.svg

OrcaSlicer/src/slic3r/GUI/BBLTopbar.cpp

Line 227 in db2f50b

//wxBitmap open_bitmap = create_scaled_bitmap("topbar_open", nullptr, TOPBAR_ICON_SIZE);

• topbar_store.svg

OrcaSlicer/src/slic3r/GUI/BBLTopbar.cpp

Line 272 in db2f50b

/*wxBitmap model_store_bitmap = create_scaled_bitmap("topbar_store", nullptr, TOPBAR_ICON_SIZE);

THESE RESOURCES SHOULD MOVED TO RELATED PLACES

There are many bamboo lab AMS and monitor related icons. its better to keep them in separate folder to reduce clutter
This ones bamboo lab bed textures. they should be in \resources\profiles\BBL

Expand // File List

• bbl_bed_ep_bottom.svg
• bbl_bed_ep_left.svg
• bbl_bed_pc_bottom.svg
• bbl_bed_pc_left.svg
• bbl_bed_pei_bottom.svg
• bbl_bed_pei_left.svg
• bbl_bed_pte_bottom.svg
• bbl_bed_pte_left.svg
• bbl_cali_lines.svg
• bbl-3dp-logo.svg

[Eldenroot]

Thank you!!!

[discip]

@yw4z

First of all thank you for putting all the effort into improving this side of OrcaSlicer. 😃👍🚀

If I'am allowed to add my 2 cents here:

Some observations I made:

1. Did you intentionally design the icons so that they are not centered on themselves?
2. Is there a reason to revert the PNG optimization of Optimized PNG files #4294?
3. Some of the current icon designs are more intuitive and would only need to be adapted without a complete redesign (e.g. the resize icon). If you don't mind I would look through them and make some kind of a list of what should be kept.

[yw4z]

@discip ofc everyone can share their thoughts and ideas about this

1. if you ask notification close buttons. i tried to reduce job on coding side. if you ask it for 16x16px images, i used 15x15px to get perfect center of icon. otherwise small icons will be pixelated with anti aliasing
2. i guess that's my mistake, i have started project a time ago. i will replace file on my source if its correct way to solve. let me know if there is an better way to solve this. because i'm still trying to learn how to use commit system
3. I tried to increase similarity between transform icons. All formed around on a simple box object. So user can identify / find transform section on toolbar easier. Move icon has horizontal / vertical arrows, rotate has a simple circular arrow, scale has diagonal arrows that shows a bigger box also arrows matches corners between them
   
   also there is an alternative version that i draw before
   

I tried to add a logic on every icon design. Ofc there is many ways to skin the cat. I tried to add the logic on icons on previous post but main post turned too much cluttered. so i didn't add this one. Dont hesitate to share your ideas or comments. this commit still in work in progress and this designs are not 100% final

And one more point. prusa / bamboo lab / ... and there is many more sharing similar designs. Using different designs will be better to making orca unique

[discip]

1. I don't know what exactly you mean 😊, but almost every SVG looks like this:

   

2. You could sync your fork:

   

3. I thought about something like this:

   

[yw4z]

i guess this will explain

but i will choose using full of 16x16px if i use icons with 2px line width

here is a preview of your suggestion for transform icons, i have to draw dashed lines manually later to improve quality

Comparison with other transform icons

[discip]

i guess this will explain

but i will choose using full of 16x16px if i use icons with 2px line width

I think this is going to be fixed by @Noisyfox.

[yw4z]

no that bug related with wrong placement of toolbar and not related with this. this one is much more how pixels work with anti aliasing

[yw4z]

@StuSerious thanks for your comment. still there are many things to do. its just beginning :) i hope we can merge without hustle

@SoftFever i will rework that icons. i guess you want to keep simple as much as possible and not liking fancy stuff. like @discip 's suggestion, problem is icon is not visible on dark background

here is an alternative design. also tried to simplify typeface of logo

[SoftFever]

here is an alternative design. also tried to simplify typeface of logo

This looks great!

@SoftFever i will rework that icons. i guess you want to keep simple as much as possible and not liking fancy stuff. like @discip 's suggestion, problem is icon is not visible on dark background

Hehehe, yeah, I prefer to keep icons simple and intuitive. They should be easy to memories and differentiate from each other.
This is especially true for the toolbar icons as we don't display name for this tools

[just-trey]

I applaud your efforts here, as this is a big undertaking. I want to add a few comments that would improve this.

I agree with others that some of the icons can be kept the same and are more intuitive the way they are. I think alternatives should be looked at for split objects and parts. I don't like the originals much either, but teh way you have them, they may be less intuitive.

The other thing I noticed is that I am seeing some color contrast issues that will hurt accessibility for visually challenged users. The grey-on-grey here does not pass accessibility guidelines. I suggest increasing the contrast.

The active modified state of this icon also has contrast issues that should be addressed.

I am also willing to help some here, but the coding items are not something I can probably help with.

[yw4z]

@SoftFever
There is still too much things on my list but i guess its on a good point to start testing / reviewing and wondering your comments on code changes.
I'm not waiting for full code review but if you take a look quickly. you will get idea. I'm sure some changes could be integrate better
About code changes looks like there is enough people maintain UI related things. What's your thought about this?

I'm planning to split this to smaller commits after it completely done. perhaps this will make it easier to review

[yw4z]

@just-trey
Can you use this about a week? wondering your comments after long term usage. Maybe you should check your contrast setting on your monitor if you struggled to see edit icons. you will start to loose details on your monitor with contrast setting above 70. btw i dimmed them slightly with purpose. They repeating too much on UI on some sections like Emboss gizmo / filaments. this will tire eye

[SoftFever]

@yw4z
As discussed on Discord, I've solved the conflicts and reverted code changes in this PR so that we can focus on icons here.
I'm going to merge this pull request (PR), thank you for your fantastic work!
The new icons look really good 🥇

[yw4z]

@SoftFever appreciated. always love to support good work. also some of icons requires code changes for activation then i will send a separate commit for them

[discip]

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

Should be pointing up:

Should be pointing down:

[yw4z]

@discip send problems to this commit #5221