Transparent buttons?

BlitzMax Forums/MaxGUI Module/Transparent buttons?

Marcell

(Posted 2013) [#1]

Hello,
what's the best way to make transparent buttons so that the background picture of a panel is shown through the buttons? Is this possible with standard buttons?

I'm new to BlitzMax; please include code example. Thanks!

jsp	(Posted 2013) [#2]

With standard buttons it would probably look quite ugly.

The way to go is to use another panel as a button.
You can switch on the sensitivity and get mouse and key events.

Too late for today to put an example together, sorry, maybe tomorrow.

With panels you can do quite a lot, I coded some SmartButtons in the past:
http://jsp.logiczone.de/downloads/SmartButtonDemo1.2.zip

Cruis.In

(Posted 2013) [#3]

Can't you set the alpha of an individual button? By setting the gadget alpha? I have no experience with BlitzGui tho, I use ifsogui.

jsp	(Posted 2013) [#4]

Here is a little example created quite quickly, but hope it helps to get the idea.

SuperStrict
Import MaxGui.Drivers

Local Window1:TGadget = CreateWindow("Window1",375,161,371,163,Null,WINDOW_TITLEBAR|WINDOW_RESIZABLE |WINDOW_STATUS |WINDOW_CLIENTCOORDS )
        'a panel for your background image
	Local BackGround:TGadget = CreatePanel(25,22,310,118,Window1,Null,"BackGround")
                'a panel for your button, of course normally with your button image on top
               'to get the events from this panel switch on the sensitivity via PANEL_ACTIVE flag, I switched on also the panel border otherwise it's difficult to find.
		Local PanelButton:TGadget = CreatePanel(24,21,80,80,BackGround,PANEL_BORDER|PANEL_ACTIVE,"PanelButton")

'wait event loop to process any events
Repeat
	WaitEvent()
	Select EventID()
		Case EVENT_WINDOWCLOSE
			Select EventSource()
				Case Window1	Window1_WC( Window1 )
			End Select

		Case EVENT_MOUSEDOWN  'checking for a mousedown event
			Select EventSource()    'from where does it come from
				Case PanelButton	PanelButton_MD( PanelButton , EventData() , Window1 )   'if from the panel-button call the function
			End Select

	End Select
Forever

Function Window1_WC( Window:TGadget )
	DebugLog "Window Window1 wants to be closed"
	End
End Function

Function PanelButton_MD( Panel:TGadget , MouseButton:Int , Window:TGadget=Null )
	DebugLog "Panel PanelButton detected Mouse Button "+ MouseButton +" pressed down"
        'the mousedown event from the panel-button should probably change the image of the panel I just change the background color to indicate the event reaction
	SetGadgetColor( Panel, Rnd(0,255),Rnd(0,255),Rnd(0255), True )
End Function

Marcell

(Posted 2014) [#5]

Thanks jsp!

I'm still having some trouble adding text into these panelgadgets.

If I add label that's size is same as the panel's size everything is ok, except that I can center the text only horizontally with label's LABEL_CENTER. If the size of the label isn't same as the panelgadget's, there is something wrong with the picture.

I also tried to use SetGadgetAlpha in order to make a standard button transparent, but at least in my system that didn't work.

The example code below show's the details:

Import MaxGui.Drivers

Strict

Global window:TGadget = CreateWindow("Window",40,40,250,330,Null,WINDOW_TITLEBAR|WINDOW_CLIENTCOORDS)
Global backgroundPanel:TGadget = CreatePanel(0,0,ClientWidth(window),ClientHeight(window),window)

'' If you want to try this with picture, remove comments from the next 2 lines and try the code with your own picture
' Global background:TPixmap=LoadPixmap("picturename.jpg")
' SetPanelPixmap(backgroundPanel,background,PANELPIXMAP_FIT)

SetGadgetColor backgroundPanel,60,180,100

Global gadgetPanel1:TGadget = CreatePanel(20,20,120,34,backgroundPanel,PANEL_BORDER)

' If the label is centered like this and the size of the label is same as backgroundPanel's,
' there's no garbage in the image, but the text is only horizontally centered
CreateLabel("PanelGadget 1",0,0,120,34,gadgetPanel1,LABEL_CENTER)

Global gadgetPanel2:TGadget = CreatePanel(20,80,120,34,backgroundPanel,PANEL_BORDER)

' This gives black border on the bottom of the gadget
CreateLabel("PanelGadget 2",0,7,120,27,gadgetPanel2,LABEL_CENTER)

Global gadgetPanel3:TGadget = CreatePanel(20,140,120,34,backgroundPanel,PANEL_BORDER)

' Now there's isn't black border, but if the backgroundPanel is picture,
' the label gives some kind of "border" to the picture with the label
Global label:TGadget = CreateLabel("PanelGadget 3",0,7,120,16,gadgetPanel3,LABEL_CENTER)

Global button:TGadget = CreateButton("Standard button",22,200,120,34,backgroundPanel)
SetGadgetAlpha button, 0.0	' At least in my system this doesn't work

Repeat

	WaitEvent()
	
	Select EventID()
	
		Case EVENT_WINDOWCLOSE, EVENT_APPTERMINATE
			End
						
	EndSelect

Forever

jsp	(Posted 2014) [#6]

Labels never center vertically, but horizontally only.

The wrong display of the label is because of the missing manifest.
Add:
Import MaxGUI.XPManifest
to use the standard manifest delivered with MaxGUI or take your own.

SetGadgetAlpha does not work really well, it's not cross platform and also switched off when a canvas is used. Actually I don't use it at all. If I remember correctly it was used for window gadgets.

Marcell

(Posted 2014) [#7]

Thanks! Now the labels look correct.