420. How to place a background image in GtkWindow - Part 5 - align top left - using GdkDrawable draw_pixbuf?

Problem

This is in response to Andreas' Post titled "Possible to add not tiled backgrounds".

Suppose you want to have a single background image that always stayed at the top left corner of a GtkWindow (no matter how the user changes the window size) as shown below.

This article presents a more advanced and flexible solution that uses GdkDrawable::draw_pixbuf().

How to place a background image in GtkWindow - Part 5 - align top left - using GdkDrawable draw_pixbuf?


Solution

  • The concept is actually very simple: get the underlying GdkWindow (which is a subclass of GdkDrawable), and then draw the background image directly onto this GdkWindow!
  • However, for those we have tried this method before, the most challenging part is where do you put this piece of code — to have the background image shown, and yet without any program error!
  • It took me a couple of days of trials and errors to get this working! It's in the callback function of the expose-event!
  • I thought getting the GdkDrawable and GdkGC would be complicated. Take a look at the solution below. You'll be surprised how simple the solution turns out to be!

Sample Code

Note: The following image file is 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.

 sample6_150a.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   
 39   
 40   
 42   
 49   
 50   
 51   
 52   
 53   
 54   
<?php
$window = new GtkWindow();
$window->set_size_request(480, 240);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel(
"               Place a background image in GtkWindow\n".
"Part 5 - align top left - using GdkDrawable::draw_pixbuf()");
$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(new GtkLabel("Try enlarge the window."));
$vbox->pack_start(new GtkLabel("There's only one image."));
$vbox->pack_start(new GtkLabel(
    "And the background image stays at the same place!"));

// set background image
/*$pixbuf=GdkPixbuf::new_from_file("sample6_1920_br.png");
list($pixmap,$mask)=$pixbuf-> render_pixmap_and_mask(255);
$style = $window->get_style();
$style=$style->copy();
$style->bg_pixmap[Gtk::STATE_NORMAL]=$pixmap;
$window->set_style($style);*/

$window->connect('expose_event', 'expose_event'); // note 1
$window->show_all();
Gtk::main();

function expose_event($widget, $event) {
    $pixbuf = GdkPixbuf::new_from_file("sample6_150a.png"); // note 2
    $widget->window->draw_pixbuf($widget->style->bg_gc[Gtk::STATE_NORMAL], 
        $pixbuf, 0 ,0, 0, 0); // note 3

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

?>

Output

As shown above.
 

Explanation

  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. Surprised by this one-liner?! Yes, this is the line that sets the background image! I was quite surprised that this even works for the alpha/Gnope version!

Note

Try compare this method with that described in How to place a background image in GtkWindow - Part 3 - align top left - using GtkStyle? and you'll understand why this method is more advanced and seemingly "better":

  • Did you notice that this method supports transparencies in .png and .gif file?
  • As we're drawing each image directly onto the underlying GdkWindow, there's no issue of tiled images.
  • You can use the image file as-is. When using the GtkStyle method, you have to "pad" the image to 1920x1200.
  • You can position the image to the exact location you want, as we shall see in the next article.

Related Links

Add comment

Security code
Refresh