UI: Transparency Checkerboard behind File Browser Thumbnails #108554

Harley Acheson · 2023-06-02T17:52:23+02:00

Harley Acheson commented

2023-06-02 17:52:23 +02:00

For thumbnails of image file types in the File Browser use the
checkerboard pattern as background to help indicate that the image
could contain transparency.

For many operating systems and programs preview thumbnails of images will use white or black in place of transparent pixels. Blender does this better in that our preview images will have the same transparency as the original image. However this means that when viewing such a thumbnail the body of the image will differ depending on the Blender theme, because the background color bleeds through. The following shows the same thumbnail on dark and light themes:

This PR just draws the background with our checkerboard pattern before placing the image. The following shows the same image, although this time showing it in two different sizes:

And of course they look similar on a light background. But note that the colors of the checkerboard are in the theme.

But at least it is obvious that the outer portion of the image is transparent in both cases.

For thumbnails of image file types in the File Browser use the checkerboard pattern as background to help indicate that the image could contain transparency. --- For many operating systems and programs preview thumbnails of images will use white or black in place of transparent pixels. Blender does this better in that our preview images will have the same transparency as the original image. However this means that when viewing such a thumbnail the body of the image will differ depending on the Blender theme, because the background color bleeds through. The following shows the same thumbnail on dark and light themes: ![image](/attachments/930f69ba-7105-4136-8de6-5c7bf1bb80d1) This PR just draws the background with our checkerboard pattern before placing the image. The following shows the same image, although this time showing it in two different sizes: ![image](/attachments/3b587dab-1ce4-45b7-9d90-a3f44908a4ce) And of course they look similar on a light background. But note that the colors of the checkerboard are in the theme. ![image](/attachments/ed512ac5-7459-459d-a774-1d7819db9a79) But at least it is obvious that the outer portion of the image is transparent in both cases.

image.png

101 KiB

image.png

140 KiB

image.png

101 KiB

❤️ 2

Harley Acheson added 1 commit 2023-06-02 17:52:35 +02:00

6b8dba7e7f UI: Transparency Checkerboard behind File Browser Thumbnails

For thumbnails of image file types in the File Browser use the
checkerboard pattern as background help indicate that the image could
contain transparency.

Harley Acheson added this to the User Interface project 2023-06-02 17:52:52 +02:00

Harley Acheson requested review from Pablo Vazquez 2023-06-02 17:53:01 +02:00

Harley Acheson requested review from Julian Eisel 2023-06-02 18:01:25 +02:00

Pablo Vazquez approved these changes 2023-06-02 18:07:21 +02:00

Pablo Vazquez left a comment

Nice catch! Never noticed it was missing.

No idea code-wise but +1 for UI.

Nice catch! Never noticed it was missing. No idea code-wise but +1 for UI.

Jesse Yurkovich reviewed 2023-06-02 22:47:26 +02:00

source/blender/editors/space_file/file_draw.cc Outdated

						
				@ -425,1 +425,4 @@

				  if (!is_icon && file->typeflag & FILE_TYPE_IMAGE) {

				    /* Draw checker pattern behind image previews in case they have transparency. */

				    imm_draw_box_checker_2d((float)xco, (float)yco, (float)(xco + ex), (float)(yco + ey));

Jesse Yurkovich commented

2023-06-02 22:47:26 +02:00

For c++ files, these casts should be "functional style" e.g. float(xco) and float(xco + ex) etc.
https://wiki.blender.org/wiki/Style_Guide/C_Cpp#C.2B.2B_Type_Cast

For c++ files, these casts should be "functional style" e.g. `float(xco)` and `float(xco + ex)` etc. https://wiki.blender.org/wiki/Style_Guide/C_Cpp#C.2B.2B_Type_Cast

Harley marked this conversation as resolved

Harley Acheson added 1 commit 2023-06-02 23:00:10 +02:00

8937115f5e Functional casts

Harley Acheson commented

2023-06-02 23:00:55 +02:00

@deadpin - Thanks!

Harley Acheson merged commit e9e12015ea into main

2023-07-01 00:23:26 +02:00

Harley Acheson deleted branch ThumbnailTransparency

2023-07-01 00:23:28 +02:00

Harley Acheson referenced this issue from a commit

2023-07-01 00:23:28 +02:00