492. How to have a start stop button in GtkTreeView - Part 3 - update parent?

Problem

This is in response to Giovanni's post titled "a button with an image in it in a Treeview".

In Part 1, I've showed a solution using GtkListStore.

In Part 2, we used a tree store instead of list store.

In this Part 3, we add a realtime total time elapsed to the project (which is the total sum of time elapsed for each individual activity) as shown below.

We also add the following enhancements:

  • There was a lag of 1 second after you click the start button. This has been fixed.
  • Fixed the bug in which the timers starts when you click on the button_blank32.gif that goes with a project.
  • Wrote a format_time() function so that it can now displays time greater than 24 hrs

How to have a start stop button in GtkTreeView - Part 3 - update parent?


Solution

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.

 button_start32.gif
 button_stop32.gif
 button_blank32.gif (note: this one looks empty, but there's a blank image there.
 I added a border so that you can see it.)

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   
 89   
 90   
 91   
 92   
 93   
 94   
 95   
 96   
 97   
 98   
 99   
100   
101   
102   
103   
104   
105   
106   
107   
108   
109   
110   
111   
112   
113   
114   
115   
116   
117   
118   
119   
120   
121   
123   
124   
126   
127   
128   
129   
130   
131   
132   
133   
134   
135   
136   
140   
141   
142   
147   
148   
149   
151   
152   
153   
154   
155   
157   
158   
159   
161   
162   
163   
164   
165   
167   
168   
169   
170   
171   
172   
173   
174   
175   
176   
177   
178   
179   
180   
181   
182   
183   
185   
186   
187   
188   
189   
190   
191   
192   
193   
198   
199   
200   
201   
202   
203   
204   
205   
206   
207   
208   
209   
210   
211   
212   
213   
214   
215   
216   
217   
218   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 400);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("          Start/Stop buttons in GtkTreeView\n".
"Part 3 - update total time elapsed in realtime");
$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);
$vbox->pack_start(new GtkLabel(), 0);

// the 2D table
$data = array(
array('Project 1',    0, 0, 0, 0, '', 0, 1, 0, 0),
array('Activity 1.1', 1, 0, 0, 0, '', 0, 2, 1, 0),
array('Activity 1.2', 1, 0, 0, 0, '', 0, 3, 1, 0),
array('Project 2',    0, 0, 0, 0, '', 0, 4, 0, 0),
array('Activity 2.1', 1, 0, 0, 0, '', 0, 5, 4, 0),
array('Activity 2.2', 1, 0, 0, 0, '', 0, 6, 4, 0),
array('Activity 2.3', 1, 0, 0, 0, '', 0, 7, 4, 0),
array('Activity 2.4', 1, 0, 0, 0, '', 0, 8, 4, 0),
);

display_table($vbox, $data);

$window->show_all();
Gtk::main();

function display_table($vbox, $data) {

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

    // Creates the list store
    if (defined("GObject::TYPE_STRING")) {
        $model = new GtkTreeStore( // note 1
            GObject::TYPE_STRING,  // col 0: column title
            GObject::TYPE_BOOLEAN, // col 1: boolean - 1 to display start/stop icon
            GObject::TYPE_BOOLEAN, // col 2: boolean - 0=stop 1=start
            GObject::TYPE_DOUBLE,  // col 3: start time in float
            GObject::TYPE_DOUBLE,  // col 4: time elapsed in float
            GObject::TYPE_STRING,  // col 5: time elapsed in string
            GObject::TYPE_LONG,    // col 6: timeout id
            GObject::TYPE_LONG,    // col 7: id of this item
            GObject::TYPE_LONG,    // col 8: parent id of this item
            GObject::TYPE_DOUBLE     // col 9: total time elapsed in float
            );


    } else {
        $model = new GtkTreeStore( // note 1
            Gtk::TYPE_STRING,  // col 0: column title
            Gtk::TYPE_BOOLEAN, // col 1: boolean - 1 to display start/stop icon
            Gtk::TYPE_BOOLEAN, // col 2: boolean - 0=stop 1=start
            Gtk::TYPE_DOUBLE,  // col 3: start time in float
            Gtk::TYPE_DOUBLE,  // col 4: time elapsed in float
            Gtk::TYPE_STRING,  // col 5: time elapsed in string
            Gtk::TYPE_LONG,    // col 6: timeout id
            Gtk::TYPE_LONG,    // col 7: id of this item
            Gtk::TYPE_LONG,    // col 8: parent id of this item
            Gtk::TYPE_DOUBLE   // col 9: total time elapsed in float
            );
    }

    // Creates the view to display the list store
    $view = new GtkTreeView($model);
    $scrolled_win->add($view);
    $view->connect('button-press-event', 'on_buttonpress', $model);

    // setup col 0
    $cell_renderer = new GtkCellRendererText();
    $column = new GtkTreeViewColumn('Project/Activity', $cell_renderer, 'text', 0);
    $column->set_cell_data_func($cell_renderer, 'format_col', 0);
    $view->append_column($column);

    // setup col 1 (the buttons)
    $cell_renderer = new GtkCellRendererPixbuf();
    $column = new GtkTreeViewColumn();
    $column->pack_start($cell_renderer);
    $column->set_cell_data_func($cell_renderer, 'format_col', 1);
    $column->set_title('Action');
    $view->append_column($column);

    // setup col 2
    $cell_renderer = new GtkCellRendererText();
    $column = new GtkTreeViewColumn('Time', $cell_renderer, 'text', 5);
    $column->set_cell_data_func($cell_renderer, 'format_col', 5);
    $view->append_column($column);

    // pupulates the data
    $nodes = array();
    $nodes[0] = null; // root
    for ($row=0; $row<count($data); ++$row) {
        $id = $data[$row][7];
        $parent = $data[$row][8];
        $values = array();
        for ($col=0; $col<count($data[$row]); ++$col) {
            $values[] = $data[$row][$col];
        }
        $nodes[$id] = $model->append($nodes[$parent], $values);
    }

    $view->expand_all();

    if (method_exists($view, 'set_enable_tree_lines')) $view->set_enable_tree_lines(1);

    $selection = $view->get_selection();
    $selection->set_mode(Gtk::SELECTION_NONE);
}

// self-defined function to display alternate row color
function format_col($column, $cell, $model, $iter, $col_num) {
    $path = $model->get_path($iter);
    if ($col_num==1) {
        if ($model[$iter][8]!=0) {
            if ($model[$iter][2]==0) {
                $pixbuf = GdkPixbuf::new_from_file("button_start32.gif");
            } else {
                $pixbuf = GdkPixbuf::new_from_file("button_stop32.gif");
            }
        } else {
            $pixbuf = GdkPixbuf::new_from_file("button_blank32.gif");
        }
        $cell->set_property('pixbuf', $pixbuf);
    }
}

function on_buttonpress($view, $event, $model) {
    if ($event->button==1 && $event->type==4) {
        // get the row and column
        $path_array = $view->get_path_at_pos($event->x, $event->y);
        $path = $path_array[0];
        $col = $path_array[1];
        $col_title = $col->get_title();
        if ($col_title!='Action') return false;
        if ($model[$path][8]==0) return false; // note 2
        if ($model[$path][2]) {
            $model[$path][2] = 0;
            $elapsed_time = microtime(1) - $model[$path][3];
            $model[$path][4] += $elapsed_time;
            Gtk::timeout_remove($model[$path][6]);
        } else {
            $model[$path][2] = 1; // col 2: 1=start
            $model[$path][3] = microtime(1); // col 3: start time in float
            update_time($model, $path); // note 3
            $model[$path][6] = Gtk::timeout_add(1000, 'update_time',
                $model, $path);
        }
        $view->queue_draw();
        return true;
    } elseif ($event->button==2) {
        return false;
    } elseif ($event->button==3) {
        return false;
    }
}

function update_time($model, $path) {
    $elapsed_time = microtime(1) - $model[$path][3];
    $elapsed_time += $model[$path][4];
    $model[$path][5] = format_time($elapsed_time);
    $model[$path][9] = $elapsed_time; // note 4
    update_parent($model, $path);
    return true;
}

function format_time($elapsed_time) { // note 5
    $elapsed_time_hr = intval($elapsed_time / 3600);
    $elapsed_time_min = intval($elapsed_time / 60);
    $elapsed_time_sec = $elapsed_time % 60;
    return str_pad($elapsed_time_hr, 2, '0', STR_PAD_LEFT).':'.
        str_pad($elapsed_time_min, 2, '0', STR_PAD_LEFT).':'.
        str_pad($elapsed_time_sec, 2, '0', STR_PAD_LEFT);
}

function update_parent($model, $path) {
    $iter = $model->get_iter($path);
    $parent = $model->iter_parent($iter); // note 6
    $model[$parent][9] = 0;

    $iter = $model->iter_children($parent);
    while ($iter!=null) {
        $model[$parent][9] += $model[$iter][9]; // note 7
        $iter = $model->iter_next($iter);
    }

    $model[$parent][5] = format_time($model[$parent][9]); // note 8

}

?>

Output

As shown above.
 

Explanation

  1. Note that we added column 9 to store the total time elapsed for each activity.
  2. This line takes care of clicking on the button_blank32.gif on the project.
  3. Show the time immdiately after the user clicks on the button - so that it feels more responsive.
  4. Updates the total time elapsed into column 9 - this will make it easier when we calculate the total time elpased of the project.
  5. This is the new function that formats the time so that it can display time greater than 24 hours.
  6. Get the parent iter (which is the corresponding project).
  7. Sum up all the time elapsed of each individual activity.
  8. Update the total time elapsed for the project into column 5, so that it gets automatically displayed by the treeview.

Related Links

Add comment

Security code
Refresh