-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Redesign of all icons / UI improvements #4368
Conversation
Replaced with wider and a bit bigger ones • Used a bigger toolhead for printer icon on device tab
• Bed plate > Lock Enabled (Dark & Light Mode) > Hover > Used brighter background color • Bed plate > Settings (Changed status) (Dark & Light Mode) > Hover > Used brighter background color
• Redesigned modifier icons • Added some of notification icons
• Added Sidebar collapse button with simpler design • Sidebar Printing Preset Section > Added "Advanced" Icon with atom like design • Sidebar Printing Preset Section > Improved "Support Filament" Icon .filaments tip supports an object now • Notifications > Corrected image sizes • Notifications > Corrected icon placements
• Updated warning dialog icon • added plate stats images for multiple plate slicing • added icon for info dialog
• updated volumetric speed icon • improved readability of preset compare button
• Updated paint height range icon • Added paint triangle icon • Added multi material paint icon for toolbar
• updated titlebar file icon as square to increase similarity with other icons • redesigned toolbaar icons for painting (support, seam, color) they are sharing same design language now • updated sidebar icons wall, top/bottom shell, seam, support • added icons for compare window. (equal, not equal, spool, undefined, node_dot,cog,support) • Added confirm button icon for search boxes for toolbar popups
• Added new icons for project page • Added a loading icon to all sliced plates stats icon while slicing process continues • Updated lock and plate setting icons for plate buttons • Added new icons for cut modifier (cut_ / cut_connector)
• Reworked network / wifi icon • Reworked bed adhension icon • Reworked raft icon • Reworked layer height and width icons • Added new icons to replace generic / missing icons on sidebar (param_overhang, param_bridge, param_wall_surface, param_overhang_speed, param_jerk) • Updated Edit, Save, Delete, Search icons on sidebar • Used a brighter color for all icons. they are more visible now on dark mode. #949494() color has better balance between dark / light theme • Sidebar > Improved readability of Support Material icon • Sidebar > Improved readability of compare icon. again
• Added height_range_modifier.svg for context menu • Edited Placeholder > Lock icons. just increased heights to match with other icons • Edited slowdown for overhangs • Edited Object sinking icon • Reworked Add copies button • Updated add button
Thank you!!! |
• Updated Sidebar > Temperature icon • Reworked image of about page
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:
|
@discip ofc everyone can share their thoughts and ideas about this
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 |
• Updated orca slicer logo with custom made font
I think this is going to be fixed by @Noisyfox. |
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 |
Branch has not in sync with original branch. so i added manually Original commit SoftFever#4294
• Updated Sidebar > Flush volumes icon • Updated Toolbar > Emboss & Measure icon (Shifted them 1 px to fixing minor placement mistake)
• Minor change on L letter on logo • Slightly changed proportions on text
• Updated Tab bar > Device icon with added a tiny pixel for presenting fan. • Updated Sidebar > Device icon with bigger toolhead. added a tiny pixel for presenting fan. it matches with tab icon now • Updated Sidebar > Overhangs icon • Added new icons for missing placeholder items. Quality, Strenght, Other, Setting Overrides, Multi Material and many others. added them to tasklist
Fix compilation error produced by GCC 13: /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeshBoolean.cpp:306: error: no match for call to ‘(Slic3r::GUI::GLGizmoMeshBoolean::on_render_input_window(float, float, float)::<lambda(wchar_t, bool, ImVec2, ImVec2, std::string&)>) (const wchar_t&, bool, ImVec2&, ImVec2&, std::string)’ 306 | if (tab_button( | ~~~~~~~~~~~~~~~ 307 | m_is_dark_mode ? ImGui::MeshBooleanUnionDark : ImGui::MeshBooleanUnion, | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 308 | m_operation_mode == MeshBooleanOperation::Union, | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 309 | tab_size, | ~~~~~~~~~ 310 | tab_padding, | ~~~~~~~~~~~~ 311 | _u8L("Union") | ~~~~~~~~~~~~~ 312 | )){ | /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeshBoolean.cpp:214: note: candidate: ‘Slic3r::GUI::GLGizmoMeshBoolean::on_render_input_window(float, float, float)::<lambda(wchar_t, bool, ImVec2, ImVec2, std::string&)>’ (near match) 214 | auto tab_button = [this](const wchar_t icon, bool selected, ImVec2 size, ImVec2 tab_padding, std::string& tooltip) { | /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeshBoolean.cpp:214: note: conversion of argument 5 would be ill-formed: In file included from /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoBase.hpp:11, from /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeshBoolean.hpp:4: /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/I18N.hpp:7:54: error: cannot bind non-const lvalue reference of type ‘std::string&’ {aka ‘std::__cxx11::basic_string<char>&’} to an rvalue of type ‘std::string’ {aka ‘std::__cxx11::basic_string<char>’} 7 | #define _u8L(s) Slic3r::GUI::I18N::translate_utf8((s)) | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^~~~~ /home/dbuzdyk/packages/3d/OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeshBoolean.cpp:311: note: in expansion of macro ‘_u8L’ 311 | _u8L("Union") |
fix build with gcc13
@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 |
@yw4z Should be pointing up: Should be pointing down: |
To be honest, new icons are welcome but I prefer some old icons. Because some old icons are very intuitive while some new icons are over-designed. Icons should be straight-forward, explaining itself with great readablity |
@xros you can give some examples instead just throwing a comment. so we have an idea about which icons you pointing |
I agree with this. Some examples from the top bar:
I have a lot more criticism but to keep it short and to the point, almost every other icon on the top bar is either:
In addition to all that, now users have a whole set of new icons to learn. Maybe a small thing but those migrating from Bambu Studio will have a more difficult time adjusting and the change doesn't seem worth it, to me. I don't mean to discourage you but it's my opinion that this was not an improvement overall. I would love an option to keep the old icons. |
@kvnper i guess you misunderstood this point. Orca slicer is not copycat of bamboo studio or prusa. this project experiments on new printing techniques and deserves a unique design language on UI. Making UI "easy to migrate" should not be priority. just give a time and you will get used to overtime if you use regularly |
I don't think I misunderstood, I think it's you that's misunderstanding. And that's only one of the points I made, which is the lesser of the points.
Sure I can get used to a worse design (for me) when I have no other choice, but it's still a worse design for me, it's still harder for me to use than the previous.
…On Tue, Jun 11, 2024, 4:34 AM yw4z ***@***.***> wrote:
@kvnper <https://github.com/kvnper> i guess you misunderstood this point.
Orca slicer is not copycat of bamboo studio or prusa. this project
experiments on new printing techniques and deserves a unique design
language on UI. Making UI "easy to migrate" should not be priority. just
give a time and you will get used to overtime if you use regularly
—
Reply to this email directly, view it on GitHub
<#4368 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ALKJ3ALGXHLFRQ6VHYZOVF3ZGXWU3AVCNFSM6AAAAABEL25J4WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJZGAZTSOJRGQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
that looks like personal preference to me. sorry but there is no way to make everyone happy. also if you did indicate few points i could understand but you pointing whole changes as negative. i cant do much about it |
Exactly, personal preference. I was voicing my opinion on this open discussion of an open source matter. |
Let's focus going forward on the points you could understand, because pointing to this whole changes as negative was again, the lesser point of what I said after pointing out many other things that you could have commented on - which would shift it from negative to positive. |
I'll give my point of view since I'm subscribed to this issue, like others I imagine, to track further progress after release. Without some proper explanations, possibly with screenshots and suggestions for change, it's hard to grasp what you want to convey and you're just turning it into a discussion. Points like "too detailed", "less readable", "changed for sake of change" do very little in providing factual evidence for what you are suggesting. |
And what about the points above those, which are detailed and provide factual evidence? |
Really nice new look, @yw4z. Clean, consistent, and maintains a design language with the previous UI. Job well done. |
@kvnper glad to see you back with positive comment. like i said new look requires some time. colorful one is most easy to use one but it made UI so "fancy" / colorful. @SoftFever can you check colorful versions i didnt shared before maybe i can add it to new if approved by everyone. but i prefer to keep current design it look nice :) |
I only comment in the best interest of the quality of the software |
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
What's left
To-Do list for Round 2
OVERALL PREVIEW
Expand // Explanation of changes and decisions
TITLE BAR
Expand // Explanation of changes and decisions
TAB BAR
Expand // Explanation of changes and decisions
Old vs New
TOOLBAR
Expand // Explanation of changes and decisions
i recommend this order for for icons for best grouping

GIZMOS
PAINT (COLOR, SUPPORT, SEAM)
Expand // Explanation of changes and decisions
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
Old vs New

Updated Search boxes

Expand // Explanation of changes and decisions
Expand // Explanation of changes and decisions
OVERALL
WORTH TO MENTION
*** = Nothing special / It explains itself
** = Explained Above
COMMON ICONS
PRINTER SETTINGS
Basic Information
Machine G-Code
Multi-Material
Extruder
Motion Ability
Notes
FILAMENT SETTINGS
Filament
Cooling
Setting Overrides
Advanced
Multi Material
Notes
PARAMETERS
Quality
Strength
Speed
Support
Others
PLATE
Expand // Explanation of changes and decisions
PLACEHOLDER
Expand // Explanation of changes and decisions
MODIFIER / OBJECT LIST ICONS / CONTEXT MENU
Expand // Explanation of changes and decisions
Context Menu
Object List

CONTEXT MENUS
Expand // Explanation of changes and decisions
MENUBAR
FILL PATTERNS
Expand // Explanation of changes and decisions
LOGO USAGES
HELP > ABOUT
Expand // Explanation of changes and decisions
DIALOGS
Expand // Explanation of changes and decisions
SPLASH SCREEN
Expand // Explanation of changes and decisions
LAYER VIEW MODE BUTTON
Expand // Explanation of changes and decisions
NOTIFICATIONS
Expand // Explanation of changes and decisions
LAYER SLIDER PAUSE/GCODE/REMOVE ICONS
Expand // Explanation of changes and decisions
|||||||||||||||||||||||||||||||||||||||||||||||||||||||| 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
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
Expand // Screenshot
Expand // Screenshot
Expand // Screenshot
Color related
Other (Not related with Icon changes but related with UI)
REQUESTS / SUGGESTIONS ( *** HELP NEEDED *** )
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
Expand // Details
OrcaSlicer/src/slic3r/GUI/Tab.cpp
Line 3097 in 8801c50
Expand // Details
OrcaSlicer/src/slic3r/GUI/Tab.cpp
Line 3500 in 8801c50
Expand // Details
https://github.com/SoftFever/OrcaSlicer/blob/8801c50aa04b2855b3cfc0785dda721a8169b853/src/slic3r/GUI/EditGCodeDialog.cpp
Expand // Details
OrcaSlicer/src/slic3r/GUI/ObjectDataViewModel.cpp
Lines 75 to 77 in 8801c50
OrcaSlicer/src/slic3r/GUI/ObjectDataViewModel.cpp
Line 246 in 8801c50
OrcaSlicer/src/slic3r/GUI/ObjectDataViewModel.cpp
Line 235 in 8801c50
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
Expand // Details
OrcaSlicer/src/slic3r/GUI/UnsavedChangesDialog.cpp
Line 2237 in 8801c50
• Updated icon for undefined category. question.svg is used for dialogs and not compatible with low res. used new icon undefined.svg
Expand // Details
OrcaSlicer/src/slic3r/GUI/GUI_Factories.cpp
Line 661 in b736a0b
Expand // Details
OrcaSlicer/src/slic3r/GUI/GUI_ObjectLayers.cpp
Lines 34 to 35 in b736a0b
Expand // Details
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoMeasure.cpp
Line 1917 in b736a0b
OrcaSlicer/src/slic3r/GUI/ImGuiWrapper.cpp
Line 88 in b736a0b
OrcaSlicer/src/imgui/imconfig.h
Lines 202 to 204 in f3b3e92
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
Expand // Details
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoEmboss.cpp
Line 3166 in b736a0b
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoEmboss.cpp
Line 1545 in b736a0b
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoEmboss.cpp
Line 167 in b736a0b
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoSVG.cpp
Line 400 in b736a0b
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoSVG.cpp
Line 1442 in b736a0b
OrcaSlicer/src/slic3r/GUI/Gizmos/GLGizmoSVG.cpp
Line 140 in b736a0b
Expand // Details
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
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
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
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
• topbar_store.svg
OrcaSlicer/src/slic3r/GUI/BBLTopbar.cpp
Line 272 in db2f50b
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