UI: Icons for Horizontal and Vertical Split #114433

Stefan Heinz · 2023-11-03T02:37:57+01:00

Stefan Heinz commented

2023-11-03 02:37:57 +01:00

Adding new icons to represent horizontal and vertical area splitting.

Hi! I always found these actions really confusing and never knew whether "horizontal" meant stacking the windows horizontally or putting the split in horizontally. I asked my friends and this confusion was shared. Even if many users have no problem with this, the icon I added doesn't hurt anybody.

I selected 2 icon spots in the atlas which feel fitting for these new icons. Added the icons in inkscape but didn't check the svg markup too closely. If there are any problems with the formatting let me know, but the icons seem to compile and show fine.

I do not know of any other places where these icons can be useful so I just added them here for now.

Before and after

Thanks for making blender!

PS: It seems like there are unused icons in the CMakeLists.txt file which cause problems on build. They're not referenced anywhere in the codebase and I had to manually remove these from the file so I can build.

Unused icons:

icon_lightprobe_cubemap
icon_lightprobe_planar
icon_lightprobe_grid

Their .dat seem to be committed to the repository but are not used and cause conflicts. When I run make icons, three new icon .dat files are created which are actually used in the code

Generated icons:

icon_lightprobe_plane
icon_lightprobe_sphere
icon_lightprobe_volume.dat

I just wanted to mention this in case anybody has problems building my icons. Those bugs are not introduced through my changes.

Adding new icons to represent horizontal and vertical area splitting. --- Hi! I always found these actions really confusing and never knew whether "horizontal" meant stacking the windows horizontally or putting the split in horizontally. I asked my friends and this confusion was shared. Even if many users have no problem with this, the icon I added doesn't hurt anybody. I selected 2 icon spots in the atlas which feel fitting for these new icons. Added the icons in inkscape but didn't check the svg markup too closely. If there are any problems with the formatting let me know, but the icons seem to compile and show fine. I do not know of any other places where these icons can be useful so I just added them here for now. Before and after ![image](/attachments/515bcb83-ce7c-4874-b8d7-f3e21dd3d045) ![image](/attachments/00c9e450-a2e5-4feb-b597-09fe44440645) Thanks for making blender! --- PS: It seems like there are unused icons in the `CMakeLists.txt` file which cause problems on build. They're not referenced anywhere in the codebase and I had to manually remove these from the file so I can build. Unused icons: - icon_lightprobe_cubemap - icon_lightprobe_planar - icon_lightprobe_grid Their .dat seem to be committed to the repository but are not used and cause conflicts. When I run `make icons`, three new icon .dat files are created which are actually used in the code Generated icons: - icon_lightprobe_plane - icon_lightprobe_sphere - icon_lightprobe_volume.dat I just wanted to mention this in case anybody has problems building my icons. Those bugs are not introduced through my changes.

image.png

23 KiB

image.png

24 KiB

👍 3 ❤️ 6 🎉 3

Stefan Heinz changed title from ~~Add icons for 'Horizontal Split' and 'Vertical Split' buttons on screen edge context menu~~ to UI: Icons: Add icons for 'Horizontal Split' and 'Vertical Split' buttons on screen edge context menu

2023-11-03 02:41:28 +01:00

Harley Acheson added this to the User Interface project 2023-11-03 07:52:50 +01:00

Harley Acheson requested review from Harley Acheson 2023-11-03 07:53:10 +01:00

Harley Acheson commented

2023-11-10 23:33:04 +01:00

I totally agree on the confusion of exactly what to expect with Vertical versus Horizontal split, so these icons make a lot of sense.

To my eye you have placement of the horizontal one perfect, but the vertical one is a bit too far to the right. The thickness of the outer borders is perfect but the line that separates them in half is too thick. Here is how they look in Inkscape with rules added that align with other characters in the grid:

These are designed on a 14x14 grid. Although you can have curves and such, vertical and horizonal members should be aligned to the grid and have a width that is a multiple of that 14th. When done this way the exported icons will be perfectly clear when the Blender scale is set to 1.0.

Being an even number of pixels, you can't get a perfect line dividing the halves. Your only choices are to have lines in the center and they will be blurry, or to make your halves asymmetrical. I'd probably just have those lines blurry.

A good way to see how you are doing is to export the SVG from Inkscape to PNG at 602x640. Then examine it in a bitmap program like Gimp. If you do so you will see how that horizontal one has a perfect border while the vertical one gives a blurry result. And it shows that middle bar well too:

I totally agree on the confusion of exactly what to expect with Vertical versus Horizontal split, so these icons make a lot of sense. To my eye you have placement of the horizontal one perfect, but the vertical one is a bit too far to the right. The thickness of the outer borders is perfect but the line that separates them in half is too thick. Here is how they look in Inkscape with rules added that align with other characters in the grid: ![image](/attachments/297c55b1-1901-4486-8d12-5baea54e251b) These are designed on a 14x14 grid. Although you can have curves and such, vertical and horizonal members should be aligned to the grid and have a width that is a multiple of that 14th. When done this way the exported icons will be perfectly clear when the Blender scale is set to 1.0. Being an even number of pixels, you can't get a perfect line dividing the halves. Your only choices are to have lines in the center and they will be blurry, or to make your halves asymmetrical. I'd probably just have those lines blurry. A good way to see how you are doing is to export the SVG from Inkscape to PNG at 602x640. Then examine it in a bitmap program like Gimp. If you do so you will see how that horizontal one has a perfect border while the vertical one gives a blurry result. And it shows that middle bar well too: ![image](/attachments/f7ff0f5b-2b26-4eaf-b2c3-7885dfec3d27)

image.png

32 KiB

image.png

27 KiB

Stefan Heinz force-pushed feat/split-icons from 869fbfc2e7 to a375337fd8

2023-11-14 03:43:38 +01:00

Compare

Stefan Heinz commented

2023-11-14 03:46:17 +01:00

Thanks for the review. I adjusted the SVG to properly align both icons. I think double middle bar looks good on my screen; The line is always clearly visible even when it's downscaled to even lower resolution.

Harley Acheson commented

2023-11-14 17:17:55 +01:00

I adjusted the SVG to properly align both icons. I think double middle bar looks good on my screen; The line is always clearly visible even when it's downscaled to even lower resolution.

Yes, they look perfect. And the double-width middle bar is a good choice. Exported at our smallest size it is flawless:

I'll have to now take a look at the current state of these icons and dat files. But thanks for working on this!

> I adjusted the SVG to properly align both icons. I think double middle bar looks good on my screen; The line is always clearly visible even when it's downscaled to even lower resolution. Yes, they look perfect. And the double-width middle bar is a good choice. Exported at our smallest size it is flawless: ![image](/attachments/4967067b-cef0-4ff7-b7ad-8fa4d120700b) I'll have to now take a look at the current state of these icons and dat files. But thanks for working on this!

image.png

19 KiB

Harley Acheson force-pushed feat/split-icons from a375337fd8 to bf0b0bb529

2023-11-15 20:11:10 +01:00

Compare

Harley Acheson commented

2023-11-15 20:13:17 +01:00

I moved the new icons around a bit on the sheet. The groupings are a bit loose, but I'd like to keep those empty slots in "buttons", which is used for Properties editor icons.

Thanks for this!

I moved the new icons around a bit on the sheet. The groupings are a bit loose, but I'd like to keep those empty slots in "buttons", which is used for Properties editor icons. Thanks for this!

Harley Acheson approved these changes 2023-11-15 20:13:33 +01:00

Harley Acheson changed title from ~~UI: Icons: Add icons for 'Horizontal Split' and 'Vertical Split' buttons on screen edge context menu~~ to UI: Icons for Horizontal and Vertical Split

2023-11-15 20:14:13 +01:00

Harley Acheson commented

2023-11-15 20:16:23 +01:00

I fixed the icon conflicts in #114874

Harley Acheson merged commit 153dd76d22 into main

2023-11-15 20:16:58 +01:00

Harley Acheson referenced this issue from a commit

2023-11-15 20:16:59 +01:00

UI: Icons for Horizontal and Vertical Split

Harley Acheson referenced this pull request

2023-11-15 20:32:03 +01:00

UI: Add Area Split Icons to Header Context Menu #114935