449. How to dynamically scale a bar graph using scrollbars - Part 5 - x and y directions with one scrollbar?

Problem

This is in response to Paamayim's post titled 'smooth scrolling for a gtkimage drawing'.

He has set up a bar graph and wants to allow the user to dynamically change the scale of the x-axis and y-axis through the scrollbars as shown below.

As there are quite a number of techniques involved, to make it easier to follow, I've spread the techniques over 5 parts:

  • Part 1 - adds the vscrollbar
  • Part 2 - aligns the graph to bottom left
  • Part 3 - adds the hscrollbar
  • Part 4 - adds both vscrollbar and hscrollbar
  • Part 5 (this article) - use only one scrollbar to control scaling of both axis

Part 5: After playing with the code from Part 4 for a while, I find that it might be more convenient for the user to have only one scroll bar to scale both the x- and y-axis together as shown below:

How to dynamically scale a bar graph using scrollbars - Part 5 - x and y directions with one scrollbar?


Solution

  • Please refer to Part 2 for the set up of vscrollbar.

Sample Code

1   
2   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
18   
19   
20   
21   
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   
56   
57   
58   
59   
60   
61   
62   
68   
69   
70   
72   
73   
74   
75   
76   
77   
79   
80   
81   
84   
86   
88   
89   
90   
91   
92   
93   
94   
95   
96   
<?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("Dynamically scale a bar graph using scrollbars\n".
"Part 5: x- and y-directions with only one scrollbar");
$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);
$title->set_justify(Gtk::JUSTIFY_CENTER);
$alignment = new GtkAlignment(0.5, 0, 0, 0);
$alignment->add($title);
$vbox->pack_start($alignment, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0);

setup_bargraph($vbox);

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

function setup_bargraph($vbox) {
    global $img;
    $vbox->pack_start($hbox = new GtkHBox());
    $hbox->pack_start($vbox2 = new GtkVBox());
    $img = new GtkImage();
    $vbox2->pack_start(new GtkVBox());
    $vbox2->pack_start($hbox2 = new GtkHBox(), 0);
    $hbox2->pack_start($img, 0);

    $adj = new GtkAdjustment(0.87, 0.87, 2, 0.1, .5);
    $vscrollbar = new GtkVScrollbar($adj);
    $vscrollbar->connect('value-changed', 'on_value_changed');
    $hbox->pack_start($vscrollbar, 0);
    $adj->set_value(1);
    $adj->value_changed();

    $hbox->set_size_request(600, 400);
}

function draw_bargraph($x_scale, $y_scale) {
    global $img;
    $max_width = 360 * $x_scale;
    $max_height = 200 * $y_scale;
    $margin = 40;
    $im = imagecreate($max_width, $max_height);
    $white = imagecolorallocate($im,255,255,255);
    $black = imagecolorallocate($im,0,0,0);
    $blue = imagecolorallocate($im,0,0,255);

    $data = array('120','160','300','240');
    imageline($im, 10, 5, 10, $max_height-$margin, $black );
    imageline($im, 10, $max_height-$margin,
                $max_width-$margin, $max_height-$margin, $black );
    imagestring($im,6,100*$x_scale,25,"Simple Bar Graph", $black);

    // what next draw the bars
    $x = 30;
    $y = $max_height - $margin;
    $w = 40*$x_scale;
    // get into some meat now, cheese for vegetarians;
    for ($i=0;$i<count($data);$i++){
        $y_ht = ($data[$i]/max($data))* 100 * $y_scale;
        imagerectangle($im,$x,$y,$x+$w,($y-$y_ht),$blue);
        imagestring($im,2,$x+10*$x_scale*$x_scale,$y+3,$data[$i],$black);
        $x = $x+$w+40*$x_scale;
    }
    $pixbuf = GdkPixbuf::new_from_gd($im);
    $img->set_from_pixbuf($pixbuf);
}

function on_value_changed($adj) {
    $val = $adj->get_value(); // note 1
    echo "on_value_changed. val = $val\n";
    draw_bargraph($val, $val); // note 2
}

?>

Output

As shown above.

 

Explanation

The above code is a modification of the codes from Part 4.

  1. Get the value of the vscrollbar and use this for both the scaling of the x- and y-axis.
  2. Redraw the bar graph.

Note

This example serves mainly to illustrate the use of GtkAdjustment and GtkVScrollbar. I will leave it to you to optimize and polish the gd2 portion (for the display of the bar graph).

Related Links

Add comment


Security code
Refresh