Round buttons in PowerBuilder???

Can’t be done, you say?? You’d love to have the professional look and feel of, say, the iTunes interface with its cute round buttons, but your GUI is restricted to those boring, old RECTANGULAR commandbuttons??

PB 11.5 and its support for the Portable Network Graphics (.PNG) image format is here to save you!

One of the great features of the .PNG image format is that it supports transparency. It does this by creating the image in “layers” or “channels”. In a standard image, there’s a Red, Green, and Blue layer, but with .PNG files, you can create a special “alpha” channel.  Any color found in the alpha channel will appear transparent when the image is displayed. There are several open source graphics editors out there that allow you to manipulate images with this level of detail. My favorite right now is Gimp 2.6. This is a pretty sophisticated program, so if you’re graphically challenged like me, you may find it a little daunting. There’s good news though – for images in datawindows, you don’t need to create an alpha channel in the image itself.  I’ll show you a new datawindow painter feature that allows you to designate any color in the image as “transparent”.

In my TipsnTricks sample, I’ve created four separate image files from a screen shot of the iTunes™ application. These are just the start and pause round buttons. I pasted them into Gimp, then cropped them down to just the image itself. Then I filled the blank corners with solid red. These are iTunes_start.png and iTunes_pause.png. These images have no alpha channel.

Then, I edited those same two images in Gimp. I added an alpha channel, selected the red corners, and placed them into that channel. This made them transparent right in the image themselves. These are iTunes_start2.png and iTunes_pause2.png. If you look at them in Windows Explorer, you can see the difference.

 In the sample app, the user object uo_round_button_sample has three standard controls on it – a picturebutton, a picture object, and a datawindow containing a picture object.  They each have their advantages and disadvantages…   For each example, I wrote code that effectively toggled the image from start to pause as you click it. 

Picturebutton
This object is still essentially a button, and wants to have square edges, even if you choose “FlatStyle”.  I also wrote one line of code in the constructor event to get the backcolor property to match that of its parent userobject.

Picture Control
This control looks and acts great, but I think there may be a bug in the graphic rendering engine, because the transparent corners are showing white as the image itself is toggled. 

Note:  This was solved with a simple workaround.  Wrapping the clicked event script with parent.setRedraw() calls forces the userobject to get repainted.  PH

Datawindow
This one works almost perfectly – and has the benefit of not needing the special “alpha” channel images.  In fact, it doesn’t even need a PNG image file!  Drop a picture control onto the datawindow, and select an image file for it.  When you right-click the image, one of the available menu options is “Make Color Transparent”.  The RBG value of the pixel you click on goes into the “Transparent Color” property of the image.  In the image below, I’ve selected the red corners as the transparent color, so they disappear when the datawindow is previewed.

 

And the finished product looks like this:

Enjoy!
-Paul-