Sample Code 123: How to display a list of thumbnail images using GtkIconView? |
|
Written by kksou
|
|
Tuesday, 19 December 2006 |
|
Problem You want to display a list of thumbnail images for selection as shown below:
Solution You can display a list of images or icons easily with the use of GtkIconView. A GtkIconView is very similar to a GtkTreeView. You store the data in a GtkListStore. Then instead of displaying it using GtkTreeView, we use a GtkIconView. The GtkIconView will display the image in a grid format with a label below each image.
Note that the GtkIconView supports "rubberband selection" of multiple images by dragging the mouse pointer as shown below.
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.
 | square_red.jpg |
 | square_yellow.jpg |
 | square_green.jpg |
 | square_blue.jpg |
 | square_blue2.jpg |
 | square_blue3.jpg |
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
| <?php
$window = new GtkWindow();
$window->set_size_request(400, 240);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());
// display title
$title = new GtkLabel("Display thumbnail images using GtkIconView");
$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, 0);
$vbox->pack_start(new GtkLabel(), 0, 0); // add a small gap
// Set up a scroll window
$scrolled_win = new GtkScrolledWindow();
$scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC);
if (defined("GObject::TYPE_STRING")) {
$model = new GtkListStore(GdkPixbuf::gtype, GObject::TYPE_STRING); // note 1
} else {
$model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING); // note 1
}
foreach(array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg',
'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg') as $img) {
$pixbuf = GdkPixbuf::new_from_file($img); // note 2
$model->append(array($pixbuf, $img)); // note 3
}
|
- 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
- Create the list model.
- Load each image using GtkImage::new_from_file (img_file).
- Populate the model.
- Create a new icon view.
- Enable multiple selection.
- GtkIconview::set_columns(): sets the number of columns in the icon view. Here we put 0 to let php-gtk automatically determine the number of columns based on window width. Try changing the window size, you will see that the number of columns will be adjusted automatically.
- GtkIconview::set_item_width(): sets the width of each column.
Related Links
User reviews Average user ratings:  4.0 (from 8 users) Note: You have to be a registered member to leave a comment. Free registration here. |
March 01, 2007 6:59am
Got another question. Is there any way to change the icon of a PHP-GTK application when running? On windows, we get the PHP icon and on linux, we get the empty GTK box. It'd be great to display our own XPM in its place.
March 01, 2007 9:16am
For winxp, open a file explorer. Select the Tools menu - Folder options - File Types. Look for the php extension, click on it, and then click the "Advanced" button. You will see the "Change Icon" button here.I don't use linux that often. Believe they should have similar stuff in KDE or GNOME to change the application icons. Any linux users to shed some light?
November 20, 2007 4:29am
Thanks.! for the sample
I have a question, after developed this how can i select an image using double clicked. What is the signal that should emit to detect a double clicked event on an image.
November 20, 2007 8:37pm
The signal to detect double-click is 'item-activated'. If you need a sample code, here it is:
http://www.kksou.com/php-gtk2/articles/select-a-thumbnail-image-using-double-click-in-GtkIconView.php
April 14, 2008 10:18am
Hi,
I've tried this example (I've to be honest... translating it into Python!) using some images with various size.
The result is that I see the images in their real size. Whit this line: view.set_item_width(120)
I expected all images to be resized to 120 pixel, but it's not so :(
The complete code is here: http://pastebin.ca/984820
I hope you can help me anyway :)
Thanks!
April 14, 2008 9:23pm
Hi Andrea,
Please refer to the following sample code:
Sample Code 478: How to display a list of thumbnail images using GtkIconView - Part 4 - with auto scaling to a max width of 24?
Regards,
/kksou
April 14, 2008 9:26pm
Please refer to the following sample code:
Sample Code 478: How to display a list of thumbnail images using GtkIconView - Part 4 - with auto scaling to a max width of 24?
Regards,
/kksou
August 20, 2008 10:25pm