program HowToUseButton; uses SwinGame,sgTypes,sgUserInterface; procedure ChangeColor(c : LongWord ); begin GUISetBackgroundColor(c ); GUISetForegroundColor(c ); end;procedure Main(); var p2 : Panel; p1 : Panel; begin OpenGraphicsWindow('How To Use Button ' ,320 ,240 ); LoadDefaultColors(); p1 := LoadPanel('buttonPanel1.txt' ); ShowPanel(p1 ); p2 := LoadPanel('buttonPanel2.txt' ); ShowPanel(p2 ); PanelSetDraggable(p1 ,false ); PanelSetDraggable(p2 ,false ); ChangeColor(ColorBlue ); repeat ProcessEvents(); if RegionClickedId() = 'Button1' then ChangeColor(RandomColor() ); DrawInterface(); UpdateInterface(); RefreshScreen(); until WindowCloseRequested() or (RegionClickedId() = 'Button2' ); ReleaseAllResources(); end; begin Main(); end.
How To Use Button
This how to will demonstrate how to use button with multiple panel to change the background color using SwinGame’s User Interface.
Read these firstHow To Move A Panel
In SwinGame’s User Interface a panel is a component that can be used to store other component such as button, radio button, list box etc. For the purpose of this how to we will create two panels, one panel represent the background of the screen and the other panel will act as a control panel with a button on top of it at a click of a button it will change the color of the background of the screen.
Before we can draw a button on screen we need to create two image that represent the button active and inactive stage then it setting will need to be write to a text file that are stored in Resources\panels folder. Since we have to create two panels hence it is logical to have one text file setting for each panel. Below is a snipshot of each panel’s text file.
// Panel 1 // Panel data: x: 0 y: 0 w: 320 h: 180
// Panel 2 // Panel data: x: 0 y: 180 w: 320 h: 60 //active bmp a: buttonActive.png // Background Image b: button.png //inactive bmp i: button.png //Draggable d: true v: false // Region data // Format: r: x, y, w, h, kind r: 29, 14, 102, 32, Button, Button1 r: 189, 14, 102, 32, Button, Button2 // Region data // Format: r: x, y, w, h, kind //r: 10, 10, 80, 20, Label, Label1, courierSmall, l, Hello World
In order for a button to be register for input RegionClickedId() is required. In this how to program when users click on Button1 (which have been declared from the text file called ‘buttonPanel2.txt’) it calls ChangeColor procedure to change the panel color randomly.
On the upper right area of the page is a video showing the program created from the code below.
If there is a useful hint you will find it in a box like this
Suggested projects will appear here.