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:
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.
- Get the value of the vscrollbar and use this for both the scaling of the x- and y-axis.
- 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
- How to draw a simple bar graph using GD2?
- How to dynamically scale a bar graph using scrollbars - Part 1 - y direction?
- How to dynamically scale a bar graph using scrollbars - Part 2 - align bottom left?
- How to dynamically scale a bar graph using scrollbars - Part 3 - x direction?
- How to dynamically scale a bar graph using scrollbars - Part 4 - x and y directions?
Read more...