PHP-GTK2 Newsletter

PHP-GTK2 Tips & Techniques
FREE Newsletter
by kksou



Sample Code 85: How to create a round button - Part 1?
Written by kksou   
Saturday, 04 November 2006
Problem

You want to create a round button as shown below:

How to create a round button - Part 1?


Solution

Sample Code

Note: The following image file is required by the sample code below. Please save a copy of the image file and put it in the same directory where you store the sample code.

 button_play1.png

1   
2   
3   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
17   
20   
21   
22   
23   
24   
31   
32   
33   
34   
35   
36   
37   
38   
<?php
$window = new GtkWindow();
$window->set_size_request(200, 100);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$vbox = new GtkVBox();
$window->add($vbox);

$pixbuf=GdkPixbuf::new_from_file("button_play1.png");
list($pixmap,$mask)=$pixbuf->render_pixmap_and_mask(255);

$eventbox = new GtkEventBox();
$vbox->pack_start($eventbox);

$style = $eventbox->get_style();
$style=$style->copy();
$style->bg_pixmap[Gtk::STATE_NORMAL]=$pixmap;
$eventbox->set_style($style);

$eventbox->connect('button-press-event', 'on_button_press');
$eventbox->shape_combine_mask($mask, 0, 0);

$window->show_all();
Gtk::main();

function on_button_press($button) {
    print "button_pressed!\n";
}

?>
Explanation

You might be tempted to use GtkButton. Try it. You will see some lines by the edges. Think it's inherent for a button. That's why I ended up using GtkEventBox.

Note that you can use any image format that is supported by php-gtk, as long as the image format supports transparent background (e.g. png, gif). The transparent background will be become the mask to produce the round button.


Note

In this example, I try to simplify the codes so that it's easier to see the fundamentals for displaying a round button.

In the next article, I will expand on this to show a more complete example - with button click state and rollover effect.


Related Links

User reviews   Average user ratings:    4.0   (from 7 users)
  1. Adam from US
    January 31, 2007 8:57pm

    i think it may be faster to just set the EventBox window to invisible,

    $win = new GtkWindow();
    $window->set_size_request(200, 100);
    $window->connect_simple('destroy', array('Gtk','main_quit'));
    $img = GtkImage::new_from_file('/path/to/the/image.png');
    $eventbox = new GtkEventBox();
    $eventbox->add($img);
    $eventbox->connect('button_press_event', 'event');
    $eventbox->set_visible_window(FALSE);
    $vbox = new GtkVbox();
    $vbox->add($eventbox);
    $win->add($vbox);
    $win->show_all();

    function event(){
    print 'clicked';
    }
    gtk::main();

  2. kksou
    January 31, 2007 10:14pm

    The difference is that the above example masks out the area outside the circle. In your example, try clicking on some area within the eventbox rectangle but outside the circle, the button click will still respond. In the example above, the user has to click within the circle.

  3. Adam from US
    February 03, 2007 12:51am

    i see, thanks for pointing that out.

  4. Marc Quinton from France
    July 01, 2007 1:46am

    Here is a more object oriented version of this piece of code : http://php-gtk.pastebin.ca/598373

    I'm working on a fully transparent button object class using popup window allowing funny things on your desktop using php-gtk.

  5. Marc Quinton from France
    July 01, 2007 1:49am

    on my example below, need to comment line 34 to seen some thing on window. (sorry)

  6. Kwak HyunMin
    March 25, 2008 10:33pm

  7. Miguel Eduardo Barrios Canache
    August 01, 2008 10:22am

Note: You have to be a registered member to leave a comment. Free registration here.

 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2009. kksou.com. All Rights Reserved