You want to create a round button as shown below:

• Load the button image with GdkPixbuf::new_from_file.
• Get the pixmap and mask with GdkPixbuf::render_pixmap_and_mask.
• Set the property GtkStyle::bg_pixmap to show the button image.
• Now make it a round button by setting the mask with GtkWidget::shape_combine_mask().

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

• Note that this is only 70% of the sample code. You have to be a registered member to see the entire sample code. Please login or register.
• Registration is free and immediate.
• Have some doubt about the registration? Please read this forum article.

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.

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.

• How to create a round button - Part 2?
• How to create a round button - Part 3?

User reviews   Average user ratings:    4.0   (from 7 users)

1. Adam from US
   January 31, 2007 9: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 11: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 1:51am
   
   

   i see, thanks for pointing that out.

4. Marc Quinton from France
   July 01, 2007 2: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 2:49am
   
   

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

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

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

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