PHP-GTK2 Newsletter

PHP-GTK2 Tips & Techniques
FREE Newsletter
by kksou



Sample Code 459: How to drag and drop between two thumbnail images using GtkIconView with GtkTreeModelFilter - Part 1 - left to right append?
Written by kksou   
Friday, 21 March 2008
Problem

This is in response to Wim Stockman's post titled "Drag Drop between 2 filtered GtkIconViews".

This solution is similar to that of How to drag and drop between two thumbnail images using GtkIconView - Part 1 - left to right append?

The only difference is that this one uses GtkTreeModelFilter on top of a GtkListStore. This allows filtering of selected thumbnail images in the GtkIconView as shown below.

In this Part 1, I'll show how to drag and drop images from left to right only. Also, in this example, the dropped images will be appended to the end of the dropped view. In Part 2, I'll show you how to insert image at the dropped location.

How to drag and drop between two thumbnail images using GtkIconView with GtkTreeModelFilter - Part 1 - left to right append?


Solution

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   
19   
20   
21   
22   
23   
24   
25   
26   
27   
28   
29   
30   
31   
32   
33   
34   
35   
36   
37   
38   
39   
40   
41   
42   
43   
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   
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   
<?php
$window = new GtkWindow();
$window->set_size_request(600, 400);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Drag and drop between two thumbnail images\n".
"using GtkIconView with GtkTreeModelFilter\n".
"            Part 1 - Left to right (append)");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 60);
$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();
$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');

$view[0]->drag_source_set(Gdk::BUTTON1_MASK, array( array( 'text/plain', 0, 0)),
    Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view[0]->connect('drag-data-get', 'on_drag');

$view[1]->drag_dest_set(Gtk::DEST_DEFAULT_ALL,
array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view[1]->connect('drag-data-received', 'on_drop');

$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) {
    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;
}

// process drag
function on_drag($widget, $context, $data, $info, $time) {
    $selection = $widget->get_selected_items();
    if (count($selection)==0) return;  // return if there's no selection
    $data->set_text(serialize($selection));
}

// process drop
function on_drop($widget, $context, $x, $y, $data, $info, $time) {
    // append the dragged item to the destination view
    $path_array = $widget->get_path_at_pos($x, $y); // note 3

    global $imagelist;
    global $model, $modelfilter, $view;
    $data = unserialize($data->data);
    $dest_model = $widget->get_model();
    $source_model = $view[0]->get_model();
    foreach($data as $img) {
        $i = $img[0];
        if (method_exists($source_model, 'append')) {
            $iter = $model[0]->get_iter($i); // note 1
  • 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

This example make use of the techniques from the following two articles:

What's new here:

  1. For iconview without filter, you can just get the iter with get_iter().
  2. For iconview with filter, Get the iter of the underlying base model.
  3. For gtk+ v2.10 and above, you need to use emit_stop_by_name('drag_data_received') to gobble up the 'drag_data_received' signal for an iconview with filter. Try commenting this line. You will get the following error message:
  4. Gtk-WARNING **: You must override the default 
    'drag_data_received' handler on GtkIconView when using models 
    that don't support the GtkTreeDragDest interface and enabling 
    drag-and-drop. The simplest way to do this is to connect to 
    'drag_data_received' and call g_signal_stop_emission_by_name() 
    in your signal handler to prevent the default handler from 
    running. Look at the source code for the default handler in 
    gtkiconview.c to get an idea what your handler should do. 
    (gtkiconview.c is in the GTK+ source code.) If you're using 
    GTK+ from a language other than C, there may be a more natural 
    way to override default handlers, e.g. via derivation.

    What a long error message!


Related Links
 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2012. kksou.com. All Rights Reserved