290. How to display directory tree using GtkTreeView - Part 4 - add tooltips?

Problem

This is in response to Alain's comments with regards to displaying tooltips in a directory tree.

You have displayed a directory tree using a GtkTreeView in How to display directory tree using GtkTreeView - Part 2 - add folder icon?

Now you would like to add tooltips to display the fullpath information when the user hovers the mouse over a node as shown below:

How to display directory tree using GtkTreeView - Part 4 - add tooltips?


Solution


Sample Code

Note 1: If you select "C:\", the program will run, but it will take a long time. You will see the processing, though, in the command window.

Note 2: On windows, you may see a warning "Gtk-WARNING: Could not find the icon 'stock_unknown'. The 'hicolor' theme was not found either, perhaps you need to install it." This is from the GtkFileChooserButton. It's just a warning. You may ignore it, or go ahead and install it.

Note 3: 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.

 folder_open.gif
 folder_closed.gif

1   
 2   
 3   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 17   
 18   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
 28   
 29   
 31   
 32   
 33   
 34   
 35   
 36   
 37   
 38   
 39   
 40   
 41   
 42   
 43   
 44   
 45   
 46   
 47   
 52   
 53   
 54   
 55   
 56   
 57   
 58   
 59   
 60   
 62   
 63   
 64   
 65   
 66   
 68   
 69   
 70   
 71   
 72   
 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   
102   
103   
104   
105   
106   
107   
108   
109   
110   
111   
112   
113   
114   
115   
116   
117   
120   
121   
122   
123   
124   
125   
126   
127   
128   
129   
130   
131   
132   
133   
134   
135   
136   
137   
138   
139   
140   
141   
142   
143   
144   
145   
146   
147   
148   
149   
150   
151   
152   
153   
154   
155   
156   
157   
158   
159   
160   
161   
162   
163   
164   
165   
166   
167   
168   
169   
170   
171   
172   
173   
174   
175   
176   
177   
178   
179   
180   
181   
182   
183   
184   
185   
186   
187   
190   
191   
192   
193   
196   
197   
198   
199   
200   
201   
202   
203   
204   
205   
206   
207   
208   
209   
210   
211   
212   
213   
214   
215   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Display folder contents in GtkTreeView\n".
"                 Part 4 - add tooltip");
$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($hbox = new GtkHBox());
$hbox->pack_start(new GtkLabel('Click to select a folder: '), 0, 0);

// set up model
if (defined("GObject::TYPE_STRING")) {
    $model = new GtkTreeStore(GObject::TYPE_STRING, GObject::TYPE_STRING); // note 1
} else {
    $model = new GtkTreeStore(Gtk::TYPE_STRING, Gtk::TYPE_STRING); // note 1
}

// set up file chooser button
$file_chooser_button = new GtkFileChooserButton('Select the Folder',
    Gtk::FILE_CHOOSER_ACTION_SELECT_FOLDER);
$file_chooser_button->set_size_request(320, -1);
$file_chooser_button->connect('selection-changed', 'on_selection_changed');
on_selection_changed($file_chooser_button);
$hbox->pack_start($file_chooser_button, 0, 0);

// set up scroll window
$scrolled_win = new GtkScrolledWindow();
$scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC,
    Gtk::POLICY_AUTOMATIC);
$vbox->pack_start($scrolled_win);

// set up treeview
$view = new GtkTreeView($model);
$scrolled_win->add($view);
$view->set_size_request(400, 320);
$tooltips = new TreeviewTooltips($view); // setup tooltip

//set up treeview columns
$column = new GtkTreeViewColumn();

// for image
$cell_renderer = new GtkCellRendererPixbuf();
$column->pack_start($cell_renderer, false);
$cell_renderer->set_property('pixbuf-expander-open',
    GdkPixbuf::new_from_file('folder_open.gif'));
$cell_renderer->set_property('pixbuf-expander-closed',
    GdkPixbuf::new_from_file('folder_closed.gif'));

// for filename
$cell_renderer = new GtkCellRendererText();
$column->pack_start($cell_renderer, true);
$column->set_attributes($cell_renderer, 'text', 0);

$view->append_column($column);
$column->set_title('Folders / Files');

//display it
$window->show_all();
Gtk::main();

function on_selection_changed($button) {
    $folder = $button->get_current_folder();
    echo "new folder: $folder\n";
    populate_tree($folder);
}

function populate_tree($folder) {
    global $model;
    $model->clear();
    $root = $folder;
    $dir_list = array($root);
    $nodes = array();
    $nodes[$root] = null;
    while(count($dir_list)>0) {
        $dir = array_shift($dir_list);
        echo "folder = $dir\n";

        // add the directories first
        if ($handle = opendir($dir)) {
            while (false !== ($file = readdir($handle))) {
                if ($file != "." && $file != "..") {
                    $fullpath = $dir.'/'.$file;
                    if (is_dir($fullpath)) {
                        $nodes[$fullpath] = $model->append($nodes[$dir],
                            array($file, $fullpath)); // note 2
                        array_push($dir_list, $fullpath);
                    }
                }
            }
            closedir($handle);
        }

        $num_files = 0;
        // then add the files
        if ($handle = opendir($dir)) {
            while (false !== ($file = readdir($handle))) {
                if ($file != "." && $file != "..") {
                    $fullpath = $dir.'/'.$file;
                    if (!is_dir($fullpath)) {
                        $nodes[$fullpath] = $model->append($nodes[$dir],
                            array($file, $fullpath)); // note 2
                        ++$num_files;
                    }
                }
            }
            closedir($handle);
        }

        if ($num_files==0) $nodes[$fullpath] = $model->append($nodes[$dir],
            array('', ''));
    }
}

// the class to display tooltips in treeview
class TreeviewTooltips {

    function TreeviewTooltips($view) {
        // create the tooltip window
        $this->tooltip_window = new GtkWindow(Gtk::WINDOW_POPUP);
        $this->tooltip_window->set_name('gtk-tooltips');
        $this->tooltip_window->set_resizable(False);
        $this->tooltip_window->set_border_width(4);
        $this->tooltip_window->set_app_paintable(True);
        $this->tooltip_window->connect('expose-event',
            array(&$this, 'on_expose_event'));

        $label = new GtkLabel('');
        $label->set_line_wrap(True);
        $label->set_alignment(0.5, 0.5);
        $label->set_use_markup(True);
        $label->show();
        $this->tooltip_window->add($label);

        $this->set_view($view);
        $this->hidden = 1;
    }

    function set_view($view) {
        $view->connect('motion-notify-event', array(&$this, 'on_motion'));
        $view->connect('leave-notify-event', array(&$this, 'on_leave'));
    }

    function on_motion($view, $event) {
        $scroll_win_pos = $view->get_pointer();
        if ($scroll_win_pos[1]<=25) {
            $this->tooltip_window->hide();
            $this->hidden = 1;
            return true;
        } else {
            if ($this->hidden) $this->tooltip_window->show();
            $this->hidden = 0;
        }

        $path_array = $view->get_path_at_pos($event->x, $event->y);

        if (count($path_array)==0) return true;

        $path = $path_array[0]; // note 3
        $col = $path_array[1];
        $col_title = $col->get_title();

        if ($col!=null) {
            $size = $this->tooltip_window->size_request();
            // set the location of the tooltip
            $this->tooltip_window->move($event->x_root - $size->width/2,
                $event->y_root + 12);
            global $model;
            $iter = $model->get_iter($path); // note 4
            if ($iter!=null) {
                $fullpath = $model->get_value($iter, 1); // note 5
                $fullpath = str_replace("\\", '/', $fullpath);
                $this->tooltip_window->child->set_text($fullpath); // note 6
                $this->tooltip_window->show();
            }
        }
    }

    function on_leave($view, $event) {
        $this->tooltip_window->hide();
    }

    function on_expose_event($tooltip_window, $event) {
        $size = $tooltip_window->size_request();
        $tooltip_window->style->paint_flat_box($tooltip_window->window,
            Gtk::STATE_NORMAL,
        Gtk::SHADOW_OUT, null, $tooltip_window, 'tooltip', 0, 0,
            $size->width, $size->height);
    }
}

?>

Output

As shown above.
 

Explanation

The above sample code is based on How to display directory tree using GtkTreeView - Part 2 - add folder icon?.

We also make use of the code from How to display tooltips in GtkTreeView - Part 2? to display the tooltips in a treeview.

What's new here:

  1. Note that we have added one more column of data here to store the fullpath information.
  2. Populate the treeview, including the fullpath information.
  3. For listview, we use $path_array[0][0]. For treeview, we use $path_array[0].
  4. Get the iter from the path.
  5. Get the fullpath information
  6. And display the tooltip!

Related Links

Add comment

Security code
Refresh