Transparent (png) icons in custom grasshopper component

Hello,

I am attempting to create a transparent icon for a custom grasshopper component built in SharpDevelop. We have succesfully added icons as a resource to the project and return the icon as a property override. However, the file comes in as a bitmap even though we save it as a .png file.

Does anyone know the process to create a transparent icon, so that the whitespace of our icon becomes the color of the component behind it, whether the component is grey, red, or orange at the time? Our work around thus far has been to match our icon background to the grey component color, but this looks pretty silly when the component is red or orange.

We also attempted using the following with no luck.

Protected Overrides ReadOnly property internal_icon_24x24 As System.drawing.Bitmap
         Get
Return myResources.myIcon.MakeTransparent(System.Drawing.Color.White)
         End Get
        End Property

Any suggestions are much appreciated.

Replies to This Discussion

Permalink Reply by David Rutten on December 11, 2011 at 1:41pm

Hi Ben,

most unfortunate. I add all my icons as png files to the resources and they come out again as 32bit-per-pixel ARGB System.Drawing.Bitmaps. I do not have SharpDevelop installed here so I cannot test this quickly.

ps. Note that Internal_Icon_24x24 is obsolete (and has been for a while). You should override the Icon property instead, but that probably won't make a difference in terms of alpha-channel.

David Rutten

david@mcneel.com

Poprad, Slovakia

Permalink Reply by David Rutten on December 11, 2011 at 2:13pm

Well, I just installed SharpDevelop but I must be stupid. I can't access the bitmaps stored in a resx file. The "execute custom tool" doesn't seem to do anything and trying to construct a ResourceManager fails every time...

David Rutten

david@mcneel.com

Poprad, Slovakia

Permalink Reply by Ben Silverman on December 11, 2011 at 3:01pm

David,

I wrote a blog post on the steps to adding a resource file for my a course at the Product Architecture Engineering Lab. You can find the post on the course blog here: http://www.architexted.com/blog/2011/11/14/icons-resources-in-sharp...

Ben

Permalink Reply by David Rutten on December 12, 2011 at 4:03am

Ok, so I finally got it to work (why doesn't the Execute Custom Tool just fold out to provide a list of all custom tools?) and I had no problem with the alpha channel.

Are you creating these icon png files with Photoshop or Illustrator per chance? I've noticed before that Adobe software uses some exotic form of alpha encoding that isn't readily understood by other applications. You could try Paint.NET (which is what I use to assign drop shadows to my Xara icons), it's free.

David Rutten

david@mcneel.com

Poprad, Slovakia

Permalink Reply by Ben Silverman on December 12, 2011 at 7:07am

They were created in illustrator and saved as .png's. Another part of the problem may be that i dont know what an alpha channel is or how to operate on it. Is the alpha channel the transparency layer/aspect of the image? What should it be set to for transparent images?

Thanks David,

Ben

Permalink Reply by David Rutten on December 12, 2011 at 9:43am

Images that do not have transparency store 3 values per pixel*; Red, Green & Blue. Images with transparency carry an extra channel, the Alpha channel**, which stores the opacity/transparency of each and every pixel. We call these types of images ARGB, for AlphaRedGreenBlue.

PNGs are capable of storing 256 different levels of transparency per pixel, just as it can store 256 different levels of green per pixel. You just need to make sure that you export PNGs with this alpha channel intact.

* This is not the whole story though, images can be paletted, they can be greyscale or defined in some colour space other than RGB.

** Again, this is not the whole story. Transparency is sometimes defined as a specific colour (most often pure magenta), or sometimes it's stored as a single bit mask.

David Rutten

david@mcneel.com

Poprad, Slovakia

Permalink Reply by Ben Silverman on December 14, 2011 at 7:00pm

Cool! Thanks for the explanation David.

RSS