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:
Solution
- We use exactly the same technique as outlined in How to place a background image in GtkEventBox - Part 2 - using GdkDrawable draw_pixbuf? i.e. by drawing the background image directly onto the underlying GdkWindow.
- We do the "titling" of images by manually repeating the drawing of the background images, first across the x-direction, then the y-direction.
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.
- Register for the signal 'expose_event'.
- Load the background image. This works with all standard image file format such as .gif, .jpg or .png.
- Start from the top left corner of the GtkEventBox.
- Draw the background image.
- Increment
$dest_x
by the width of the background image. - Increment
$dest_y
by the height of the background image.
Related Links
- How to place a background image in GtkEventBox - Part 1 - tiled background image?
- How to place a background image in GtkEventBox - Part 2 - using GdkDrawable draw_pixbuf?
- How to place a background image in GtkEventBox - Part 3 - with GtkTable and GtkTreeView?
- How to place a background image in GtkWindow - Part 2 - tiled background image?
- How to place a background image in GtkWindow - Part 3 - align top left - using GtkStyle?
- How to place a background image in GtkWindow - Part 4 - align bottom right - using GtkStyle?
- How to place a background image in GtkWindow - Part 5 - align top left - using GdkDrawable draw_pixbuf?
- How to place a background image in GtkWindow - Part 6 - align bottom right - GdkDrawable draw_pixbuf?
- How to change background image on the fly?
Read more...