Re: image layout questions

[zentara <zentara1 sbcglobal net>]

On Tue, 7 Aug 2007 19:03:04 +1200
"Johan Aberg" <abergster gmail com> wrote:

>I'm looking for a way to display images in a horizontal layout. I'm
>building a timeline displaying images from left to right. I'd like to
>be able to use set_reorderable(TRUE) to shuffle the images around left
>or right on this timeline.
>The TreeView seems to be a good candidate of doing this, but it seems
>to be design to show data in rows and columns in a vertical layout. I
>only want one row with lots of columns and I need to be able to access
>each cell to reorder them.
>Any suggestion what widget/class that could help me out here?

I wrote this thumbnail-previwer awhile ago. It uses the Gnome2::Canvas
for display. I display the thumbnails vertically, but you could
easily switch it to horizontal. Reordering them out to be easy too.
Anyways, just run the script in a directory
full of images.... it will find all images and recurse into sub-dirs.
As far as widgets go, for doing specialized things of your imagination,
it's hard to beat a Canvas.

#!/usr/bin/perl
use warnings;
use strict;
use Gtk2 '-init';
use Glib qw/TRUE FALSE/; 
use Gnome2::Canvas;


chdir '..';  #little hack to load any images in toplevel directory
             #otherwise only subdirs are shown at opening
	                   
#automatically put full file path to clipboards
#to paste menu
my $clipboard =  Gtk2::Clipboard->get(Gtk2::Gdk->SELECTION_CLIPBOARD);
#to mouse
my $clipboard1 =  Gtk2::Clipboard->get(Gtk2::Gdk->SELECTION_PRIMARY);

my $window = Gtk2::Window->new('toplevel');
$window->signal_connect('delete_event' => sub { Gtk2->main_quit; });
$window->set_border_width(5);
$window->set_default_size(600,400);

my $vbox = Gtk2::VBox->new(0,1);

#create a hbox to pack the information label
   my $hbox0 = Gtk2::VBox->new(FALSE,1);
   my $label_info = Gtk2::Label->new();
   $label_info->set_markup( &make_label('Filename','Dimensions','Size'));

 $hbox0->pack_start($label_info,FALSE,FALSE,1);	
 $vbox->pack_start($hbox0,0,0,0);

my $hbox = Gtk2::HBox->new(0,5);
#these vboxs will return the bulk of the gui
my $tbox = &ret_tree();  #the dir selector
$hbox->pack_start($tbox,0,0,0);

my ($cbox,$can) = &ret_can(); #thumbnail canvas
$hbox->pack_start($cbox,0,0,0);

my ($zbox,$can1) = &ret_can1(); #main image canvas
$hbox->pack_start($zbox,1,1,1);

$vbox->pack_start($hbox,1,1,0);

#add and show the vbox
$window->add($vbox);
$window->show_all();

#our main event-loop
Gtk2->main();
###################################################################
sub make_label{
my ($name, $dimensions, $size) = @_;
return  
"<span background = 'yellow' foreground= 'black' size ='10000'><i> $name  </i></span>".
"<span background = 'black' foreground= 'green' size ='20000'><i> $dimensions  </i></span>".
"<span background = 'blue' foreground= 'red' size ='20000'><i> $size  </i></span>";
}
#################################################################
sub ret_tree {
my $vbox = Gtk2::VBox->new(FALSE,5);
	#create a scrolled window that will host the treeview
	my $sw = Gtk2::ScrolledWindow->new (undef, undef);
    		$sw->set_shadow_type ('etched-out');
		$sw->set_policy ('automatic','always');
		$sw->set_placement('top-right');
		$sw->set_size_request (200, 300);
        	$sw->set_border_width(0);

       	my $tree_store = Gtk2::TreeStore->new(qw/Glib::String/);

        my %tree = %{ hashdir() };

	#fill it with data
	foreach my $key (sort keys %tree ) {
		#the iter is a pointer in the treestore. We
		#use to add data.
                my $iter = $tree_store->append(undef);
		$tree_store->set ($iter,0 => $key);
		
                #need recursive sub here to nest subdirs
                &recurse($tree_store, $tree{$key} , $iter );
         }

            #this will create a treeview, specify $tree_store as its model
	    my $tree_view = Gtk2::TreeView->new($tree_store);
		
	    #create a Gtk2::TreeViewColumn to add to $tree_view
	    my $tree_column = Gtk2::TreeViewColumn->new();
		
	    $tree_column->set_title('Select');
			
	   #create a renderer that will be used to display info
	   #in the model
	   my $renderer = Gtk2::CellRendererText->new;
	   #add this renderer to $tree_column. This works like a Gtk2::Hbox
	   # so you can add more than one renderer to $tree_column			
	   $tree_column->pack_start ($renderer, FALSE);
		
	   # set the cell "text" attribute to column 0   
	   #- retrieve text from that column in treestore 
	   # Thus, the "text" attribute's value will depend on the row's value
	   # of column 0 in the model($treestore),
	   # and this will be displayed by $renderer,
	   # which is a text renderer
	  $tree_column->add_attribute($renderer, text => 0);
	
	   #add $tree_column to the treeview
	  $tree_view->append_column ($tree_column);
	
	 $sw->add($tree_view);

         $tree_view->get_selection->signal_connect(
                changed =>\&cell_selected,$tree_store ); 

         #$tree_view->expand_all;
	 # expand only first level
	 $tree_view->expand_row (Gtk2::TreePath->new(0),0);
         
$vbox->pack_start($sw,1,1,0);
$vbox->show_all();
return $vbox;
}
######################################################################
sub ret_can {
 
  my $vbox = Gtk2::VBox->new(FALSE,5);
	#create a scrolled window that will host the treeview
	my $sw = Gtk2::ScrolledWindow->new (undef, undef);
    		$sw->set_shadow_type ('etched-out');
		$sw->set_policy ('automatic', 'always');
		$sw->set_placement('top-right');
		$sw->set_size_request (130, 300);
        	$sw->set_border_width(0);

        my $canvas   = Gnome2::Canvas->new_aa;
        $canvas->set_scroll_region( 0,0,10,2000);

        my $black = Gtk2::Gdk::Color->new (0x0000,0x0000,0x0000);
        $canvas->modify_bg('normal',$black);
	$canvas->set_center_scroll_region (FALSE);
  
        $sw->add($canvas);

   $vbox->pack_start($sw,TRUE,TRUE,0);
   $vbox->show_all();
return ($vbox,$canvas);
}
######################################################################
sub ret_can1{
 
  my $vbox = Gtk2::VBox->new(TRUE,5);
	#create a scrolled window that will host the thumb canvas
	my $sw = Gtk2::ScrolledWindow->new (undef, undef);
    		$sw->set_shadow_type ('etched-out');
		$sw->set_policy ('always', 'always');
		$sw->set_placement('top-right');
		$sw->set_size_request (300, 300);
        	$sw->set_border_width(0);

        my $canvas   = Gnome2::Canvas->new_aa;
        $canvas->set_scroll_region( 0,0,2000,2000);

        my $black = Gtk2::Gdk::Color->new (0x0000,0x0000,0x0000);
        $canvas->modify_bg('normal',$black);
	$canvas->set_center_scroll_region (FALSE);

    $sw->add($canvas);

$vbox->pack_start($sw,TRUE,TRUE,0);
$vbox->show_all();
return ($vbox,$canvas);
}
######################################################################
sub recurse{            
  my ( $tree_store, $hashref , $iter ) = @_;
  
     my %hash = %{$hashref};
  
     foreach my $key (sort keys %hash ){	
        
       my $iter_child = $tree_store->append($iter);                    
       if( scalar (keys %hash == 0 ) ){  
	     $tree_store->set ($iter_child,0 => $key );
	 }else{
	    $tree_store->set ($iter_child,0 => $key );
	   &recurse($tree_store, $hash{$key}, $iter_child);
	 }
   }
}
###################################################################

sub cell_selected{
       my ($tree_selection,$model ) = @_ ;

       my $sel = $tree_selection->get_selected_rows;
       my $value='';
       if( defined $sel ){
          my $path = $sel->to_string;
          my @path_ele = split /:/, $path;
        #reconstruct filesystem path from model path         
	 while( @path_ele ){
	    $path = join ':', @path_ele;
	    #print "path $path\n";
	    my $iter = $model->get_iter_from_string($path);
	    my $val = $model->get($iter,0);
	    $value = $val.'/'.$value;
	    pop @path_ele;
	   }
      }  
#print "$value\n";
add_dir_contents("./$value");

return FALSE;
}
#############################################################

sub hashdir {
    my $dir = shift || '.';
    opendir my $dh, $dir or die $!;

    my $tree = {}->{$dir} = {};

    while ( my $file = readdir($dh) ) {
        next if $file =~ m[^\.{1,2}$];

         my $path = $dir . '/' . $file;

      if(-d $path){ 
       $tree->{$file} = hashdir($path); 
      }else{ next }
    }

return $tree;
}
#########################################################
sub add_dir_contents {
    my $path   = $_[0];

  #this decode utf8 routine is used so filenames with extended
   # ascii characters (unicode) in filenames, will work properly
   use Encode;
   opendir my $dh, $path or warn "Error: $!";
   my @files = grep !/^\.\.?$/, readdir $dh;
   closedir $dh;
   @files = map { decode( 'utf8', "$path/".$_  ) } sort @files;
     
    my @thumbs=();
    
    foreach my $file (@files) {
        $file =~ s|//|/|g;
       (my $text = $file ) =~ s|^.*/||g;
      if( $file =~ /.*\.(png|jpg|gif)$/ ){ push @thumbs, $file }
    }

#print "@thumbs\n";
load_thumbs( \ thumbs );

}
###############################################################
sub load_thumbs{
my $thumbsref = shift; 

#clean out old thumbs 
foreach my $item ( @{$can->{'temp'}} ){ $item->destroy; }
@{$can->{'temp'}} =();

my $root = $can->root;
my $count = 0;

foreach my $file( @$thumbsref ){
        
        my $pixbuf_t = Gtk2::Gdk::Pixbuf->new_from_file_at_scale($file,100,100,1);
	my $image = Gnome2::Canvas::Item->new ($root,
					       'Gnome2::Canvas::Pixbuf',
					       pixbuf => $pixbuf_t,
					       x      => 2.0,
					       y      => $count * 108,
					       width  => 100,
					       height => $pixbuf_t->get_height,
					       anchor => 'nw',
					       );
       
        $image->{'filepath'} = $file; #data rider to hold path

        $image->signal_connect (event => sub {
                my ($item, $event) = @_;
		if( $event->type eq 'button-press' ){
		     &display_image( $image->{'filepath'}  );
		   }
         });
         
       my $line = Gnome2::Canvas::Item->new ($root,
	       'Gnome2::Canvas::Line',
	        points => [0.0, $count * 108, 130.0, $count * 108],
            fill_color => '#ff0000',
            width_units => 6.0,
       );


   push @{$can->{'temp'}}, $image; #list to delete on refresh
   push @{$can->{'temp'}}, $line;
   $count++;
 }
#print @{$can->{'temp'}},"\n";
#display_image( ${$can->{'temp'}}[0]  );  #display first image in list
$can->set_scroll_region (0, 0, 10, $count * 108);
$can->scroll_to (0, 0); 
}
##############################################################
sub display_image{
  if( ref $can1->{'temp'} eq 'Gnome2::Canvas::Pixbuf' ){
                  $can1->{'temp'}->destroy}

  my $im = Gtk2::Gdk::Pixbuf->new_from_file( $_[0] );
  my $x = $im->get_width;
  my $y = $im->get_height;
  my $image = Gnome2::Canvas::Item->new ($can1->root,
				       'Gnome2::Canvas::Pixbuf',
                                           pixbuf => $im,
					   x      => 5.0,
					   y      => 5.0,
					   width  => $x,
					   height => $y,
					   anchor => 'nw',
					   );

 $can1->{'temp'} = $image;
 $can1->set_scroll_region (0, 0, $x + 10, $y + 10);
 $can1->scroll_to (0, 0); 

 # set to clipboard for menu or mouse paste
 $clipboard->clear;
 $clipboard1->clear;
 $clipboard->set_text($_[0]);
 $clipboard1->set_text($_[0]);

 my $filebase = substr ($_[0], rindex ($_[0], "/") + 1);
 $label_info->set_markup( &make_label( $filebase, "$x x $y" , (stat $_[0] )[7] ));
}
##################################################################

__END__
zentara
-- 
I'm not really a human, but I play one on earth.
http://zentara.net/japh.html