Adding a transparent gif to a button

dalecooper

New Member
Hello,

Forgive a possibly ignorant newbie here. I have supported an OpenEdge product for many years, but was never formally trained as a developer on it. I got more and more into reading code over time, then after a job change, started writing some basic utilities for my new employer. Current project is the most advanced thing I've tried to write so far and it's going well, except that I can't figure out how to do one thing: overlay an image with a transparent background on a button, and have the transparency work.

The gifs I've saved as button icons all have transparent backgrounds, but when I run the program, I see a bright white square centered on top of a gray button. Curiously, if I insert a different transparent gif on one of the same buttons, it appears with a bright yellow background instead (I didn't make the test gif, so I'm not sure what image editor created it or why it's different from mine). In this test I'm putting a different image on the same button, in the same line of code, which makes me think that some inherent property of the images is triggering Progress to assign different colors where the transparent pixels are. I just don't understand how it selects the color or why it doesn't match my gray button in either case.

I don't see a property for DEFINE BUTTON that lets me set the image color or transparency. If I define an image widget instead with the TRANSPARENT attribute, it works and the gif is correctly transparent on the frame. Once I saw that, I thought I'd get smart and overlay an image widget on top of a button, but Progress won't allow that and stacks the button on top instead.

Any suggestion? The code for it, at this point at least, is simple. Here's one sample, but they all look like this with different button names and file paths:

DEFINE BUTTON btnADD LABEL "" IMAGE FILE "bmps\menu\e-pushpin.gif":U TOOLTIP "Move selected program (right) to selected spot in favorites (left)." SIZE 6 BY 6.

Here's my test image widget, referencing the same image:

DEFINE IMAGE imgADD TRANSPARENT FILE "bmps\menu\e-pushpin.gif".
 

Osborne

Active Member
I am not sure that what you want to do is possible with a standard OpenEdge button.

I suppose one option is maybe make the image mimic a button and set the following trigger for it:
Code:
ON MOUSE-SELECT-CLICK OF imgADD
DO:
   ...
END.

Another possible option is use a .NET button instead which allows the settings of colors and a basic example of using in OpenEdge is here:


The problem with this method is you have to embed the OpenEdge window onto a .NET form so a bit of extra coding required just to get the button working as you want.
 

dalecooper

New Member
Bummer, but thank you! I think I've found a workable solution by scaling all my button images to the size of the button and filling in the background with a matching gray. It looks perfect in its inactive state, and outlined in blue on mouseover, which is not quite as nice as the default behavior (where the whole button turns blue), but it'll do.

Turning the image into a button is a fascinating idea that I may come back to on another project. Seems like it would take extra fuss to make it look and act like a button--not too much, but more than I am willing to put in today. :)
 
Top