Drawing image with transparent background?

[WilliamL]

With the new 2d drawing modes would it be possible to create an image with a transparent background? For example would it be possible to draw the LED below without having to fill-in the background with the box() command?

[see working code below)

[Fred]

You should be able to create a 32 bit and to use the alpha channel to do the transparent color.

[WilliamL]

Ok, that sounds promising. Now, what is Alfa channel and how is it used?

I was hoping that my code could be modified to show how alfa channel was used and point me in the right direction.

[jamirokwai]

You should be able to create a 32 bit and to use the alpha channel to do the transparent color.

Hi,

but how do we create a transparent image?
This won't work as the black background is somewhat sticky

Code: Select all

OpenWindow(0,10,10,100,100,"")
CreateImage(0,50,50,32)
StartDrawing(ImageOutput(0))
 DrawingMode(#PB_2DDrawing_Transparent)
 Box( 0, 0,25,25,RGBA(127,127,127,0)) ; I assume the error sits here?
 DrawText(0,25,"jo")
StopDrawing()
ImageGadget(0,0,0,100,100,ImageID(0))
MessageRequester("!","!")

[Fred]

Here we go:

Code: Select all

OpenWindow(0,10,10,100,100,"")
CreateImage(0, 50, 50, 32)
StartDrawing(ImageOutput(0))
  DrawingMode(#PB_2DDrawing_AlphaChannel)
  Box(0, 0, 25, 25, RGBA(0, 0, 0, 0)) ; I assume the error sits here?
StopDrawing()
ImageGadget(0,0,0,100,100,ImageID(0))
MessageRequester("!","!")

You can modify the last parameter of RGBA() to act on the transparency (255 levels).

[jamirokwai]

Here we go:

Code: Select all

DrawingMode(#PB_2DDrawing_AlphaChannel)
  Box(0, 0, 25, 25, RGBA(0, 0, 0, 0))

You can modify the last parameter of RGBA() to act on the transparency (255 levels).

Hm. I think I tried that, but didn't succeed. Thank you very much!

[Fred]

Well, it does work on Windows, so it doesn't on OS X, we have a problem.

[WilliamL]

So, is this correct (below), and it doesn't work? [edit] Events are fine.

see next post

[WilliamL]

This gives a transparent background but the red does not show up (it is black). It almost works!

[see below]

[freak]

You have to switch to #PB_2DDrawing_AlphaBlend mode to draw the circle. The #PB_2DDrawing_AlphaChannel only modifies the alpha values (no colors)

[WilliamL]

Ok, this works but it appears that the alphachannel values works fine after using DrawingMode(#PB_2DDrawing_AlphaBlend) so I'm a little confused as to why they have to be called at all. Doesn't using RGBA() with the color values and the channel value suffice?

Code: Select all

Enumeration
    #ledon
    #ledoff
EndEnumeration

#ledwnd=1
#ledbutton=1

#red=$0000FF
#black=0
#white=$FFFFFF

ledsize=10
If CreateImage(#ledon, ledsize, ledsize, 32)
    StartDrawing(ImageOutput(#ledon))
        DrawingMode(#PB_2DDrawing_AlphaChannel)
        Box(0,0,ledsize,ledsize,RGBA(0,0,0,0)) ; background
        DrawingMode(#PB_2DDrawing_AlphaBlend)
        Circle(ledsize/2,ledsize/2,ledsize/2-1,RGBA(255,0,0,255)) ; <<< not red!
        DrawingMode(#PB_2DDrawing_Outlined)
        Circle(ledsize/2,ledsize/2,ledsize/2-1,RGBA(0,0,0,255)) ; black line around red
    StopDrawing()
EndIf

If CreateImage(#ledoff, ledsize, ledsize, 32)
    StartDrawing(ImageOutput(#ledoff))
        DrawingMode(#PB_2DDrawing_AlphaChannel)
        Box(0,0,ledsize,ledsize,RGBA(0,0,0,0)) ; background
        DrawingMode(#PB_2DDrawing_AlphaBlend)
        Circle(ledsize/2,ledsize/2,ledsize/2-1,RGBA(0,0,0,255))
    StopDrawing()
EndIf

If OpenWindow(#ledwnd, 100, 100, 500, 300, "Led on and off")
    ImageGadget(#ledbutton,5,5,ledsize,ledsize,ImageID(#ledon))
    
    Repeat
        event=WaitWindowEvent()
        Select event
        Case #PB_Event_Gadget
            Select EventGadget()
            Case #ledbutton
                toggle=1-toggle
                If toggle
                    SetGadgetState(#ledbutton,ImageID(#ledon))
                    Debug "on"
                Else
                    SetGadgetState(#ledbutton,ImageID(#ledoff))
                    Debug "off"
                EndIf
            EndSelect
        EndSelect
    Until event = #PB_Event_CloseWindow
  
EndIf

Well, I suppose, after the manual is updated, it will be clearer what the commands mean.

[jamirokwai]

Well, it does work on Windows, so it doesn't on OS X, we have a problem.

This works fine, and produces an 20x16-image with transparency, "test" written in black, and is used as a SysTrayIcon

Code: Select all

CreateImage(0,20,16,32)
StartDrawing(ImageOutput(0))
 DrawingMode(#PB_2DDrawing_AlphaChannel|#PB_2DDrawing_Transparent)
 Box(0, 0, 25, 25, RGBA(0,0,0,0))
 DrawText(1,1,"test",RGBA(255,255,255,255)) ;   DrawText(1,1,Text$,RGBA(0,0,0,255)) also works. I assume because of the transparency?
StopDrawing()

Great work, Fred and team!

[WilliamL]

Oops, looks like '2Ddrawing.pb' (Alphachannel demo) in the 'v440_examples' folder (came with beta 2) shows most of this.

This is a 'must see' example.

I'm not sure if 'Default' and 'AlphaClip' are working correctly, they are both blank.
[edit]
a line in '2DdrawingAlpha.pb' needs to be changed so that 'Default' and 'AlphaClip' can be seen.

Line(25, y, 400, 0, RGBA(0, 0, 255, 255-i))
to
Line(25, y, 400, 1, RGBA(0, 0, 255, 255-i))