426. How to place a background image in GtkEventBox - Part 4 - tiled background image with transparencies?

Problem

I've showed you how to set up an eventbox with tiled background image in How to place a background image in GtkEventBox - Part 1 - tiled background image?

However, as noted in that article, using the method of GtkStyle does not allow you to have background image with transparencies.

In this article, I will show you how to have tiled background image with transparencies for GtkEventBox as shown below:

How to place a background image in GtkEventBox - Part 4 - tiled background image with transparencies?


Solution


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.

 disc_green.png
 disc_blue.png

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
17   
18   
19   
20   
21   
22   
23   
24   
25   
26   
30   
31   
32   
33   
34   
35   
36   
37   
40   
41   
42   
43   
44   
45   
46   
47   
48   
49   
59   
60   
61   
62   
63   
64   
65   
66   
67   
68   
69   
70   
71   
72   
73   
74   
75   
76   
77   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 460);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("         Place a background image in GtkEventBox\n".
"Part 4 - tiled background image with transparencies");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0);
$vbox->pack_start(new GtkLabel(), 0);

$vbox->pack_start($vbox2 = new GtkVBox());

$eventbox_top = new GtkEventBox();
$vbox2->pack_start($eventbox_top);
$eventbox_top->add($vbox_top = new GtkVBox());
$vbox_top->pack_start(new GtkLabel("This is top eventbox.\n"));
$vbox_top->pack_start(new GtkLabel("The green disc is the background image."));
$vbox_top->pack_start(new GtkLabel("Notice the transparencies in the background image."));

$eventbox_top->connect('expose_event', 'expose_event', "disc_green.png"); // note 1

$eventbox_bottom = new GtkEventBox();
$vbox2->pack_start($eventbox_bottom);
$eventbox_bottom->add($vbox_bottom = new GtkVBox());
$vbox_bottom->pack_start(new GtkLabel("The is bottom eventbox.\n"));
$vbox_bottom->pack_start(new GtkLabel("The blue disc is the background image."));
$vbox_bottom->pack_start(new GtkLabel("Notice the transparencies in the background image."));
$eventbox_bottom->modify_bg(Gtk::STATE_NORMAL, GdkColor::parse("#BAFFB3"));
$eventbox_bottom->connect('expose_event', 'expose_event', "disc_blue.png"); // note 1

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

function expose_event($widget, $event, $img) {
    $pixbuf = GdkPixbuf::new_from_file($img); // note 2
    $w = $pixbuf->get_width();
    $h = $pixbuf->get_height();

    $dest_x = $dest_y = 0; // note 3
    while ($dest_y < $widget->allocation->height) {
        while ($dest_x < $widget->allocation->width) {
            $widget->window->draw_pixbuf( 
                $widget->style->bg_gc[Gtk::STATE_NORMAL], 
                $pixbuf, 0, 0, $dest_x, $dest_y); // note 4
                $dest_x += $w; // note 5
        }
        $dest_x = 0;
        $dest_y += $h; // note 6
    }

    if($widget->get_child() != null)
    $widget->propagate_expose($widget->get_child(), $event);
    return true;
}

?>

Output

As shown above.
 

Explanation

The above makes use of the code from How to place a background image in GtkEventBox - Part 2 - using GdkDrawable draw_pixbuf?

We also make use of the code from How to align GtkEntry fields - Part 2? to set up the contents for the top eventbox, and the code from How to display a 2D array in GtkTreeView - Part 5 - get user selection? to set up the contents for the bottom eventbox.

  1. Register for the signal 'expose_event'.
  2. Load the background image. This works with all standard image file format such as .gif, .jpg or .png.
  3. Start from the top left corner of the GtkEventBox.
  4. Draw the background image.
  5. Increment $dest_x by the width of the background image.
  6. Increment $dest_y by the height of the background image.

Related Links

Add comment


Security code
Refresh