Odd Transparency behavior in VB.Net Panel
-
I have a small clock/calendar Applet that lives on my desktop, since (for at least some purposes) I like to have an analog clock. I recently decided to clean up the Panel that displays the clock to make the square background to the round clockface transparent, so that the clock face would just 'float' over the desktop. I discovered that this was not simply a matter of making the relevant area in the source image transparent, since the transparency 'disappears' when the image is loaded into the Panel. However, the following load code almost works when the panel is displayed:
Private Function ConvertImageToRGBFormat(img As Image) As Image Dim temp As New Bitmap(img.Width, img.Height, System.Drawing.Imaging.PixelFormat.Format32bppRgb) Dim g As Graphics = Graphics.FromImage(temp) g.DrawImage(img, New Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel) g.Dispose() temp.MakeTransparent(temp.GetPixel(1, 1)) ' pixel(1,1) is part of the transparent area Return temp End FunctionI say that it 'almost' works because the square background of the displayed image is, indeed, transparent, except for a very thin green 'halo' round the clock. I typically use bright green as the guide color for image areas that I am going to make transparent, so I initially thought that the feathering at the edges of the clock had caused this, and changed the color for the transparent area to a dark gray (similar to the background color on my desktop), so that there was no green anywhere in the image (or in its color palette). Notwithstanding this change, the green halo persists. This is how the Panel appears on the desktop, and this is the source image. Does anyone have any idea what is going on?
-
PixelFormat.Format32bppRgb
With black and white you can get by with 8 bits.
It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it. ― Confucian Analects: Rules of Confucius about his food
Yes. I was reusing old code which allowed color images. I wasn't the original author, so I didn't change anything that I didn't think absolutely had to be changed, and I wasn't sure whether any of the other reused code implicitly assumed the specified format. Indeed, experimentation since you raised the issue showed that using other formats (including indexed and grayscale ones) does cause other problems.
-
It could also be in the image itself if it was created with antialiasing turned on.
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave KreskowiakSince writing my last message, I 'un-antialiased' the source image and tried again. Even though there are only three colors of pixels in the new source image (pure black, pure white, and the very dark gray used for the area to be rendered as transparent), the panel appears exactly the same when displayed on the desktop - with the thin green 'halo' round the clock. The new source image can be found here. It really does look as if the false color aliasing is happening when the image is created/initialized.
-
Yes. I was reusing old code which allowed color images. I wasn't the original author, so I didn't change anything that I didn't think absolutely had to be changed, and I wasn't sure whether any of the other reused code implicitly assumed the specified format. Indeed, experimentation since you raised the issue showed that using other formats (including indexed and grayscale ones) does cause other problems.
In general, Windows (10) recommends against bit maps because they don't scale well. Use (font) icons and vector graphics. Segoe UI MDL2 assets can be overlayed, reversed and rotated. The .NET shape classess provide circles, polygons, etc. In your case, I would try overlaying the outter problem area with an ellipse / circle (black stroke, transparent fill) for a quick fix.
It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it. ― Confucian Analects: Rules of Confucius about his food
-
In general, Windows (10) recommends against bit maps because they don't scale well. Use (font) icons and vector graphics. Segoe UI MDL2 assets can be overlayed, reversed and rotated. The .NET shape classess provide circles, polygons, etc. In your case, I would try overlaying the outter problem area with an ellipse / circle (black stroke, transparent fill) for a quick fix.
It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it. ― Confucian Analects: Rules of Confucius about his food
Well, that was very interesting! Doing as you suggested does not solve the problem. If you use a sensible sized pen (fairly small), nothing visible happens, and the 'halo' looks just as before, though there is a suggestion of it disappearing at the points where the drawn circle overlaps the edges of the original image (the top, bottom, and two sides). If you use a thicker pen, it is more obvious that the 'halo' is gone at the overlapped edges, but it is just pushed out to the edge of the drawn circle over the rest of the rendered image - it still always appears where a 'transparent' pixel was adjacent to one of another color, whether that pixel was part of the original bitmap or subsequently drawn on the Graphic. Presumably, therefore, it is an artefact of the [Bitmap].MakeTransparent() Function, but I have no idea why it has not (as far as I can tell) been described before Parenthetically, I now see that that function forces the Bitmap on which it is invoked to 32bppRgb mode, since that format has the alpha channel which it needs, so any attempt to use a different format would be pointless.
-
Since writing my last message, I 'un-antialiased' the source image and tried again. Even though there are only three colors of pixels in the new source image (pure black, pure white, and the very dark gray used for the area to be rendered as transparent), the panel appears exactly the same when displayed on the desktop - with the thin green 'halo' round the clock. The new source image can be found here. It really does look as if the false color aliasing is happening when the image is created/initialized.
I did something similar, though not transparent, a couple decades ago. Instead of using an image like that, I just drew the entire clock face when needed.
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave Kreskowiak -
I did something similar, though not transparent, a couple decades ago. Instead of using an image like that, I just drew the entire clock face when needed.
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave KreskowiakSince the clock face is invariant, it seemed to me to make sense to use a static image. My other experiments, described in the other 'branch' of this thread, would also suggest that your approach would not solve the haloing problem with transparency.
-
Since the clock face is invariant, it seemed to me to make sense to use a static image. My other experiments, described in the other 'branch' of this thread, would also suggest that your approach would not solve the haloing problem with transparency.
I think no matter what color you pick for the chroma key, you're going to have the same problem. It comes down to the key color you pick isn't the resulting key color when the black of the clock face and the key color are blended together. I don't think there's going to be any solution to the problem while using a chroma key.
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave Kreskowiak -
Well, that was very interesting! Doing as you suggested does not solve the problem. If you use a sensible sized pen (fairly small), nothing visible happens, and the 'halo' looks just as before, though there is a suggestion of it disappearing at the points where the drawn circle overlaps the edges of the original image (the top, bottom, and two sides). If you use a thicker pen, it is more obvious that the 'halo' is gone at the overlapped edges, but it is just pushed out to the edge of the drawn circle over the rest of the rendered image - it still always appears where a 'transparent' pixel was adjacent to one of another color, whether that pixel was part of the original bitmap or subsequently drawn on the Graphic. Presumably, therefore, it is an artefact of the [Bitmap].MakeTransparent() Function, but I have no idea why it has not (as far as I can tell) been described before Parenthetically, I now see that that function forces the Bitmap on which it is invoked to 32bppRgb mode, since that format has the alpha channel which it needs, so any attempt to use a different format would be pointless.
I think your problem is part of Windows Forms. I do a lot of graphics in UWP and WPF and never have any issues I can't overcome. e.g. WPF and snap to pixels:
Quote:
You can set this property to true on your root element to enable pixel snap rendering throughout the UI. For devices operating at greater than 96 dots per inch (dpi), pixel snap rendering can minimize anti-aliasing visual artifacts in the vicinity of single-unit solid lines.
It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it. ― Confucian Analects: Rules of Confucius about his food
-
I think no matter what color you pick for the chroma key, you're going to have the same problem. It comes down to the key color you pick isn't the resulting key color when the black of the clock face and the key color are blended together. I don't think there's going to be any solution to the problem while using a chroma key.
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave KreskowiakI am not sure what you mean by 'chroma key' in this context. The placeholder 'color' I am using for the transparent area is a very dark gray - the entire palette of the image is grayscale. If you blend black, white, and a pure grey in any proportions, you shouldn't get bright green!
-
I am not sure what you mean by 'chroma key' in this context. The placeholder 'color' I am using for the transparent area is a very dark gray - the entire palette of the image is grayscale. If you blend black, white, and a pure grey in any proportions, you shouldn't get bright green!
The "chroma key" is the color chosen to be replaced by "transparent", or "green screen".
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave Kreskowiak -
The "chroma key" is the color chosen to be replaced by "transparent", or "green screen".
Asking questions is a skill CodeProject Forum Guidelines Google: C# How to debug code Seriously, go read these articles.
Dave KreskowiakThat's what I thought you meant, hence my comment that blending white, black, and gray shouldn't give you green!
