|
Problem You have created a round button in Part 1.
Now you would like to add in button click state and rollover effect as shown below:
Solution
- First display the round buttons using the technique as explained in Part 1.
- Use the signal enter-notify-event to detect when a mouse hovers over the button.
- Use the signal leave-notify-event to detect when a mouse leaves the button.
Sample Code Note: The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.
 | button_rew1.png |
 | button_rew2.png |
 | button_play1.png |
 | button_play2.png |
 | button_ff1.png |
 | button_ff2.png |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <?php
$window = new GtkWindow();
$window->set_size_request(400, 200);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$vbox = new GtkVBox();
$window->add($vbox);
// create a hbox to hold the buttons
$vbox->pack_start($hbox = new GtkHBox());
$buttons2 = new RoundButtons($hbox, array(
array('button_rew1.png', 'button_rew2.png'),
array('button_play1.png', 'button_play2.png'),
array('button_ff1.png', 'button_ff2.png')));
class RoundButtons {
function RoundButtons($container, $buttons) {
$button_id = 0;
$this->button_count = count($buttons);
foreach($buttons as $button_img) {
$this->create_round_button($container, $button_id,
$button_img[0], $button_img[1]);
$this->button_state[$button_id] = 0;
++$button_id;
}
}
function create_round_button($container, $button_id, $image0, $image1) {
$pixbuf[0]=GdkPixbuf::new_from_file($image0);
list($this->pixmap[$button_id][0],
$this->mask[$button_id][0]) =
$pixbuf[0]-> render_pixmap_and_mask(255);
$pixbuf[1]=GdkPixbuf::new_from_file($image1);
list($this->pixmap[$button_id][1],
$this->mask[$button_id][1]) =
$pixbuf[1]-> render_pixmap_and_mask(255);
$eventbox = new GtkEventBox();
$this->eventbox[$button_id] = $eventbox;
$eventbox->set_size_request(100, -1);
$container->pack_start($eventbox, 0, 0);
$style = $eventbox->get_style();
$style=$style->copy();
$style->bg_pixmap[Gtk::STATE_NORMAL]=$this->pixmap[$button_id][0];
$eventbox->set_style($style);
$eventbox->shape_combine_mask($this->mask[$button_id][0], 0, 0);
$eventbox->connect('button-press-event',
array(&$this, 'on_button_press'), $button_id);
$eventbox->connect('enter-notify-event',
array(&$this, 'on_enter_leave'), $button_id, 1); // note 1
$eventbox->connect('leave-notify-event',
array(&$this, 'on_enter_leave'), $button_id, 0); // note 1
}
function on_button_press($widget, $event, $button_id) {
|
- 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.
Explanation
- We detect whether the mouse is over the button, and set the image accordingly.
- We use the array
$button_state[$button_id] to keep track of the state of the button. If it's pressed, hovering and leaving the button should not change the image.
Related Links
User reviews Average user ratings:  0.0 (from 2 users) Note: You have to be a registered member to leave a comment. Free registration here. |
November 25, 2007 10:26am
it's much simpler to play with states.
NORMAL=button1
ACTIVE=button2
and you just have to change the state of your widgets with set_state rather than re-doing the pixmap/style stuff.
my 2 cents :)
November 28, 2007 7:12pm
Hi Laurent, yes, it's indeed much cleaner and more elegant to use set_state(). Thanks for highlighting this. Have created another article using set_state() as you've suggested: How to create a round button - Part 3 - using set_state()