Any gadget allowing transparent background?

[Kukulkan]

Hello,

I want to make some custom gadgets, but using ImageGadget() does not allow me to make parts transparent. For example, if there is a disabled ImageGadget in the Background, I want my custom gadgets to have transparent areas which are showing the background image. Imagine a custom button gadget with round button shape. I need transparent corners. Also, it needs to be plattform independent (Win, Lin, Mac).

More and more customers want me to make skinned form and set the window background to be a inconspicuous texture (image). I can use a disabled ImageGadget() as background (which works fine so far), but I can no longer use TextGadget() etc. because of the missing transparent background. And I'm stuck in doing my own cross plattform custom gadgets if I can not have transparency in any gadget. The benefit of using an existing gadget would be the standard event handling which I prefer.

Is there a cross plattform way to make ImageGadget() or CanvasGadget() transparent? Or any other gadget type?

Kukulkan

[idle]

on windows you should be able to use regions on a gadget and linux by using pixbufs perhaps
http://www.gtk.org/api/2.6/gdk/gdk-Pixbufs.html

[Kukulkan]

Hello idle,

on windows you should be able to use regions on a gadget

You mean to use regions to draw the gadget on? Is that allowing me alpha channel to underlying gadgets? As far as I know, this is only for shapes (but not allowing me to do a real shaddow by using alpha channel). Or am I wrong?

linux by using pixbufs

If I read documents about pixbufs, it sounds like a canvas area to me. Maybe the same like the Canvas Gadget? Is that allowing me alpha channel to underlying gadgets?

Is someone having some good examples for using pixbufs in PureBasic?

Thanks,

Kukulkan

[idle]

I guess for cross platform it'd be easier to use an image gadget and fake the alpha transparency by a mask image and combining the background
the problem then is how to get the background of the window.

[IdeasVacuum]

Using the Canvas gadget to draw your own gadgets could be the answer. There are already a few gadgets coded on the forum, here is one:

http://www.purebasic.fr/english/viewtop ... =5&t=48784

[StarWarsFan]

And what _is_ the answer now?
Don't get me wrong, but a summarization would be fine.
I ask because I can only find unfinished stuff and "perhaps" and "could be"

[Julian]

The original question was regarding having a transparent background on an imagegadget, if thats what you are looking for [EDIT] then imagegadget will allow transparency but it doesnt allow much functionality for events, so you probably want to use canvasgadget.

However if you want to use a canvasgadget instead of an imagegadget then you can just grab a snapshot of the background where you are about to place the canvasgadget down then use that as the background for the canvasgadget faking the fact that its transparent.

I did this on my BetterButtons library here http://www.forums.purebasic.com/english ... 12&t=62328

See button 12 for an example, the source code is in the zip near the bottom of the first post.

Let me know here if you have any Q's about it.

[RASHAD]

Hi Kukulkan
First of all I do not know much about Linux & Mac and I do not care

1- The ImageGadget do not resize the included image
so Create an ImageGadget with the minimal size
2- Use a transparent PNG image with the proper size for the Gadget
3- Use the Hot Area tech. for Mouse & Keyboard events

Good Luck

[Kukulkan]

Hi,

I have not found a rock solid cross platform way to get a transparent gadget background. I try to get the background colour from the window and use this, but it is not working if the background is a gradient or image. Thus, I gave up.

I know there are some API-solutions for Windows, but I was not interested as I need cross-platform and, at least for GTK, there seem no way to do this. Transparent PNG's do not really work as the dialogues of PB do not really respect it on Linux:
http://www.purebasic.fr/english/viewtop ... 86#p465711

Kukulkan

[Little John]

I want to make some custom gadgets, but using ImageGadget() does not allow me to make parts transparent. For example, if there is a disabled ImageGadget in the Background, I want my custom gadgets to have transparent areas which are showing the background image. Imagine a custom button gadget with round button shape. I need transparent corners. Also, it needs to be plattform independent (Win, Lin, Mac).

It looks to me that ImageGadget() does support transparency, see the following code:

Code: Select all

; PB 5.42 beta 2

EnableExplicit

Procedure.i TransparentImage (width.i, height.i, color.i)
   ; -- creates a 32 bit image with transparent background
   ;    color: foreground color in RGBA format
   Protected ret.i
   
   ret = CreateImage(#PB_Any, width, height, 32, #PB_Image_Transparent)
   If ret = 0
      ProcedureReturn 0
   EndIf
   If StartDrawing(ImageOutput(ret)) = 0
      FreeImage(ret)
      ProcedureReturn 0
   EndIf
   
   DrawingMode(#PB_2DDrawing_AlphaBlend)
   Box(0, 0, 10, 10, color)                ; just an example
   StopDrawing()
   
   ProcedureReturn ret
EndProcedure


#Width  = 40
#Height = 20
#Color  = $FF0000FF

Define.i img

img = TransparentImage(#Width, #Height, #Color)

OpenWindow  (0, 50, 50, 80, 80, "Demo")
ImageGadget (0, 10, 10,         #Width,    #Height, ImageID(img))
CanvasGadget(1, 10, #Height+10, #Width+20, #Height)

If StartDrawing(CanvasOutput(1))
   DrawingMode(#PB_2DDrawing_AllChannels)
   DrawImage(ImageID(img), 0, 0)            ; unwanted result
   StopDrawing()
EndIf

Repeat
   Select WaitWindowEvent()
      Case #PB_Event_Gadget
         If EventType() = #PB_EventType_LeftClick
            Debug EventGadget()
         EndIf
         
      Case #PB_Event_CloseWindow 
         End
   EndSelect      
ForEver

Result (on Windows 10):



But there is a serious problem with the CanvasGadget. The documentation for DrawingMode(#PB_2DDrawing_AllChannels) reads:

The drawing operations will modify the color channels and the alpha channel of the drawing output. The content of the channels is replaced by the drawing operation without any blending. [...] If the drawing output has no alpha channel then this mode is equivalent to the #PB_2DDrawing_Default mode.

But in my example, the white background of the CanvasGadget is not replaced with the transparent background of the image. Instead, the resulting background is black. IMHO this is either a bug, or maybe the CanvasGadget does only support 24 bit images, but not 32 bit images? Is this point documented somewhere?

<edit>
In the meantime I found a post by freak, where he wrote:

The CanvasGadget is a 24bit drawing output. It has no alpha channel.

</edit>

I try to get the background colour from the window and use this, but it is not working if the background is a gradient or image.

Yes, I understand.
However, Julian's suggestion

However if you want to use a canvasgadget instead of an imagegadget then you can just grab an snapshot of the background where you are about to place the canvasgadget down then use that as the background for the canvasgadget faking the fact that its transparent.

seems to be versatile, and sounds promising to me.

[Kukulkan]

Try setting background-color of window using this line directly after OpenWindow() function.

Code: Select all

WindowColor(0, RGB(155,255,155))

Does it still work?

[Little John]

Does it still work?

Yep:

Code: Select all

[...]

OpenWindow  (0, 50, 50, 80, 80, "Demo")
SetWindowColor(0, RGB(155,255,155))
ImageGadget (0, 10, 10,         #Width,    #Height, ImageID(img))
CanvasGadget(1, 10, #Height+10, #Width+20, #Height)

[...]

[Kukulkan]

For me, on Kubuntu 14.04, it looks like this (I switched the box with circle):



As I work on Kubuntu as my main system and we develop everything cross-platform, it does not work for me. It looks like GTK simply uses the system default colors for filling the background of the ImageGadget. But as soon as you change the background to not fit the system color, you are lost. My customer wanted to have a white window background and I can not use images any more. Need to paint them to the window directly to get it. But I use XMLDialog and this seems to make it even more worse

[Little John]

Oh, I see! That's bad.

Out of curiosity, I made a test on Linux Mint 17.3 x64 with PB 5.41 LTS. This is the result:


I tested with the default subsystem GTK3, and also with subsystem GTK2: Same result in both cases.

So the problem is not caused reliably by GTK, but seems to depend on some details which we currently don't know.

[Kukulkan]

We still run 5.24 LTS, as we compile several commercial products which do not compile on current new LTS version. Therefore, we stay on 5.24 for a while until we find the time to investigate (I think it is because we link libcurl and now PB also links it and this is making problems. As Fred is not giving access to all CURL functions, and we need to be flexible for libcurl updates, we need to stay...).

Maybe it turns out that the transparency issue is fixed in new 5.4x versions? This would be good news