457. How to setup a filtered list of thumbnail images using GtkIconView with GtkTreeModelFilter?

Problem

You have displayed a list of thumbnail images using GtkIconView as shown below:

Suppose you would like to allow users to do some filtering such that only the blue and green images are displayed as shown below:

How to setup a filtered list of thumbnail images using GtkIconView with GtkTreeModelFilter?


Solution

We make use of exactly the same technique as outlined in the article How to selectively display rows in GtkTreeView with GtkTreeModelFilter - Part 1? with the use of GtkTreeModelFilter.

Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.10. For windows, please refer to How to install php gtk2 on windows? You may also want to take a look here to see some of the new exciting PHP-GTK2 Functionalities.


Sample Code

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   
31   
32   
33   
34   
35   
36   
37   
38   
39   
40   
41   
42   
44   
45   
46   
47   
48   
49   
50   
51   
52   
53   
54   
55   
56   
57   
58   
59   
60   
61   
62   
63   
64   
65   
66   
67   
68   
69   
70   
71   
72   
73   
74   
75   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(425, 300);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("    Display filtered list of thumbnail images\n".
"using GtkIconView with GtkTreeModelFilter");
$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);

$radio1 = setup_radio(null, 'display all', 'all');
$radio2 = setup_radio($radio1, 'display blue/green only', 'filter1');
$vbox->pack_start($radio1, 0);
$vbox->pack_start($radio2, 0);

// 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, GObject::TYPE_BOOLEAN); // note 1
} else {
    $model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING, Gtk::TYPE_BOOLEAN); // note 1
}

$modelfilter = new GtkTreeModelFilter($model); // note 2
$modelfilter->set_visible_column(2); // note 2

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);
    $flag = (preg_match('/blue/', $img) || preg_match('/green/', $img)) ? 1 : 0;
    $model->append(array($pixbuf, $img, $flag));
}

$view = new GtkIconView($model);
$view->set_pixbuf_column(0);
$view->set_text_column(1);
$view->set_selection_mode(Gtk::SELECTION_MULTIPLE);
$view->set_columns(0);
$view->set_item_width(120);
$view->set_reorderable(1);

$scrolled_win->add($view);
$vbox->pack_start($scrolled_win);
$window->show_all();
Gtk::main();

function setup_radio($radio_button_grp, $button_label, $button_value) {
    $radio = new GtkRadioButton($radio_button_grp, $button_label);
    $radio->connect('toggled', "on_toggle", $button_value);
    return $radio;
}

function on_toggle($radio, $value) {
    global $view, $model, $modelfilter;
    $label = $radio->child->get_label();
    $active = $radio->get_active();
    if ($active) {
        echo "radio button pressed: $label (value = $value)\n";
        if ($value=='filter1') {
            $view->set_model($modelfilter); // note 3
        } else {
            $view->set_model($model); // note 4
        }
    }
}
?>

Output

As shown above.

 

Explanation

The above sample code is based on How to display a list of thumbnail images using GtkIconView?.

We also make use of the code from How to display and process grouped radio buttons? to display and process the radio buttons.

What's new here:

  1. Remember to add one Gtk::TYPE_BOOLEAN field as a flag to let php-gtk know whether to show or hide a particular icon.
  2. Here we create a new GtkTreeModelFilter, and inform php-gtk that the flag column is field #2.
  3. Display the filtered list.
  4. Display the entire list.

Related Links

Add comment


Security code
Refresh