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.

Level

Advanced

Read these first

How To Move A Panel

Details

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.

Source Code Widget

  • 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.
    Download Now"
  • #include 
    #include "SwinGame.h"
    void change_color(uint32_t  c) 
    {
    
        guiset_background_color(c );
        guiset_foreground_color(c );
    }int main() 
    {
        panel  p2;
        panel  p1;
        open_graphics_window("How To Use Button " ,320 ,240 );
        load_default_colors();
        p1 = load_panel("buttonPanel1.txt" ) ;
        show_panel(p1 );
        p2 = load_panel("buttonPanel2.txt" ) ;
        show_panel(p2 );
        panel_set_draggable(p1 ,false );
        panel_set_draggable(p2 ,false );
        change_color(color_blue );
        do 
        {
            process_events();
            if ( region_clicked_id() == "Button1"  )
                change_color(random_color() );
            draw_interface();
            update_interface();
            refresh_screen();
        }
        while ( ! (window_close_requested() || (region_clicked_id() == "Button2" ) ) );
        release_all_resources();
        return 0;
    }
    
  • Source Code Coming Soon

  • Source Code Coming Soon

  • Source Code Coming Soon

If there is a useful hint you will find it in a box like this

Possibilities

Suggested projects will appear here.