This time a little tutorial on how to use images as buttons in BlitzMax with MaxGUI module.

For beginners the most important thing is to understand the event loop.

The image buttons are made with panels that have background graphics. The source below clarifies the rest.

In order to try the code, download the following images:

 

 

Save the images to the same folder where you save the code below. In order to get the code working with images, name the violet background picture as “demobg.png” and the blue “Button” labeled images as “button1.png” and “button2.png” and the rest “Button” labeled images as “button1sel.png” and “button2sel.png”.

The code uses gadget sensitivity to change the button images when touched with the mouse.

Import MaxGui.Drivers
Import MaxGUI.XPManifest

Strict

Global background:TPixmap=LoadPixmap("demobg.png")

Global gfxButton1:TPixmap = LoadPixmap("button1.png")
Global gfxButton2:TPixmap = LoadPixmap("button2.png")

Global gfxButton1Sel:TPixmap = LoadPixmap("button1sel.png")
Global gfxButton2Sel:TPixmap = LoadPixmap("button2sel.png")

Global window:TGadget = CreateWindow("Image Buttons Demo",40,40,304,228,Null,WINDOW_TITLEBAR|WINDOW_CLIENTCOORDS|WINDOW_CENTER)
Global panel:TGadget

panel=CreatePanel(0,0,ClientWidth(window),ClientHeight(window),window)
SetPanelPixmap(panel,background)


Local pnlButton1:TGadget = CreatePanel(98,40,107,47,panel,PANEL_ACTIVE,"PanelButton1")
Local pnlButton2:TGadget = CreatePanel(98,100,107,47,panel,PANEL_ACTIVE,"PanelButton2")

Local lblButtonPressed:TGadget = CreateLabel("",20,20,100,34,panel)

SetPanelPixmap(pnlButton1, gfxButton1)
SetPanelPixmap(pnlButton2, gfxButton2)

SetGadgetSensitivity(pnlButton1,EVENT_MOUSEENTER|EVENT_MOUSELEAVE)
SetGadgetSensitivity(pnlButton2,EVENT_MOUSEENTER|EVENT_MOUSELEAVE)

Repeat

	WaitEvent()

	Select EventID()
	
		Case EVENT_WINDOWCLOSE, EVENT_APPTERMINATE
			End
		
		Case EVENT_MOUSEENTER
			Select EventSource()
				Case pnlButton1
					SetPanelPixmap(pnlButton1, gfxButton1Sel)
					SetGadgetText lblButtonPressed,""

				Case pnlButton2
					SetPanelPixmap(pnlButton2, gfxButton2Sel)
					SetGadgetText lblButtonPressed,""

			End Select
		
		Case EVENT_MOUSELEAVE
			Select EventSource()
				Case pnlButton1
					SetPanelPixmap(pnlButton1,gfxButton1)
				Case pnlButton2
					SetPanelPixmap(pnlButton2,gfxButton2)
			End Select
			
		Case EVENT_MOUSEUP              'checking for a mouseup event
			Select EventSource()    'where does it come from
				Case pnlButton1
					SetGadgetText lblButtonPressed,"Button 1 pressed."
					
				Case pnlButton2
					SetGadgetText lblButtonPressed,"Button 2 pressed."
					
			End Select
			
	EndSelect

Forever

Feel free to use this code.