Problem
You have displayed a filtered list of thumbnail images using GtkIconView and GtkTreeModelFilter in How to setup a filtered list of thumbnail images using GtkIconView with GtkTreeModelFilter?
Suppose you would like to have two such filtered lists thumbnail images, one on the left and the other on the right, as shown below.
Note: if you're new to PHP-GTK, this is also a good example that shows you how we can handle two sets of radio buttons with just one single signal handler.
Solution
We make use of the technique as outlined in the article How to setup a filtered list of thumbnail images using GtkIconView with GtkTreeModelFilter? to display the filtered list of thumbnail images using GtkIconView and GtkTreeModelFilter.
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 | |
ball_red.png | |
ball_yellow.png | |
ball_blue3.png | |
ball_blue3a.png | |
ball_green3.png | |
ball_green4.png |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 21 22 23 26 27 28 29 32 33 34 35 36 37 38 39 40 41 44 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <?php $window = new GtkWindow(); $window->set_title($argv[0]); $window->set_size_request(600, 400); $window->connect_simple('destroy', array('Gtk','main_quit')); $window->add($vbox = new GtkVBox()); // display title $title = new GtkLabel("Display two filtered lists 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); // add a small gap // Set up a scroll window $hpane = new GtkHPaned(); // note 1 $vbox->pack_start($hpane); $imagelist[0] = array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg', 'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg'); $imagelist[1] = array('ball_red.png', 'ball_yellow.png', 'ball_blue3.png', 'ball_blue3a.png', 'ball_green3.png', 'ball_green4.png',); $left_vbox = setup_iconview(0, 'left'); $right_vbox = setup_iconview(1, 'right'); $hpane->add1($left_vbox); $hpane->add2($right_vbox); $view[0]->set_size_request(300, -1); $window->show_all(); Gtk::main(); function setup_iconview($id, $label) { // note 2 global $imagelist, $model, $modelfilter, $view; if (defined("GObject::TYPE_STRING")) { $model[$id] = new GtkListStore(GdkPixbuf::gtype, GObject::TYPE_STRING, GObject::TYPE_BOOLEAN); } else { $model[$id] = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING, Gtk::TYPE_BOOLEAN); } $modelfilter[$id] = new GtkTreeModelFilter($model[$id]); $modelfilter[$id]->set_visible_column(2); foreach($imagelist[$id] as $img) { $pixbuf = GdkPixbuf::new_from_file($img); $flag = (preg_match('/blue/', $img) || preg_match('/green/', $img)) ? 1 : 0; $model[$id]->append(array($pixbuf, $img, $flag)); } $view[$id] = new GtkIconView($model[$id]); $view[$id]->set_pixbuf_column(0); // col 0 of the model $view[$id]->set_text_column(1); // col 1 of the model $view[$id]->set_selection_mode(Gtk::SELECTION_MULTIPLE); $view[$id]->set_columns(0); $view[$id]->set_item_width(120); $vbox = new GtkVBox(); $radio1 = setup_radio(null, 'display all', $label.'_all', $id); $radio2 = setup_radio($radio1, 'display blue/green only', $label.'_filter1', $id); $vbox->pack_start($radio1, 0); $vbox->pack_start($radio2, 0); $vbox->pack_start($view[$id]); return $vbox; } function setup_radio($radio_button_grp, $button_label, $button_value, $id) { $radio = new GtkRadioButton($radio_button_grp, $button_label); $radio->connect('toggled', "on_toggle", $button_value, $id); return $radio; } function on_toggle($radio, $value, $id) { // note 3 global $view, $model, $modelfilter; $label = $radio->child->get_label(); $active = $radio->get_active(); if ($active) { echo "radio button pressed: $label (value = $value)\n"; if (preg_match('/filter1/', $value)) { $view[$id]->set_model($modelfilter[$id]); } else { $view[$id]->set_model($model[$id]); } } } ?> |
Output
As shown above.
Explanation
The above sample code is based on How to setup a filtered list of thumbnail images using GtkIconView with GtkTreeModelFilter?.
What's new here:
- We use a GtkHPaned to hold the two views - one on the left and the other on the right.
- Note how we're able to create two iconviews using the same function.
- Note how we're able to handle the radio buttons click on the left and right views with just one single signal handler.
Related Links
- How to setup a filtered list of thumbnail images using GtkIconView with GtkTreeModelFilter?
- How to selectively display rows in GtkTreeView with GtkTreeModelFilter - Part 1?
- How to display a list of thumbnail images using GtkIconView?
- How to display and process grouped radio buttons?
- How to drag and drop between two thumbnail images using GtkIconView - Part 1 - left to right append?
- How to drag and drop between two thumbnail images using GtkIconView - Part 2 - left to right insert?
- How to drag and drop between two thumbnail images using GtkIconView - Part 4 - prevent drag and drop to same view?
- How to display a list of thumbnail images using GtkIconView?
- How to select thumbnail images with drag and drop using GtkIconView - Part 1 - left to right?
- How to select thumbnail images with drag and drop using GtkIconView - Part 2 - in both directions?
- How to drag and drop between 2 GtkTreeViews - Part 1 - left to right?
- How to drag and drop between 2 GtkTreeViews - Part 2 - in both directions?
Read more...