biochris has asked for the wisdom of the Perl Monks concerning the following question:

Dear Monks, What would be the best Perl/Tk widget to display images and thumbnails of those images? Any recommendation (and snippet) is welcomed :) Thank you very much.

2005-09-09 Retitled by Arunbear, as per Monastery guidelines
Original title: 'Display images'

  • Comment on Perl/Tk widget for displaying images and thumbnails

Replies are listed 'Best First'.
Re: Perl/Tk widget for displaying images and thumbnails
by pg (Canon) on Sep 09, 2005 at 15:54 UTC

    The first Module you want to look at is Tk::Photo. There also might be loaders for particular types, for example, Tk::JPEG. At present time, it only supports the following formats: GIF, XBM, XPM, BMP, JPEG, PNG and PPM/PGM.

    As for examples, you can check out my nodes: Slide view of pictures for Tk::Photo, and Re: clickable slide show perl for Tk::Thumbnail.

      With an experience of !19430! I will take your advice. Thank you so much pg :)

        You should learn to ignore XP - it's quite useless. ;-) For example, just take a look at TheDamian's XP, and compare with pg. Now, pg may indeed be a perl genius. Perhaps a 9 on a scale 1..10. But TheDamian knows more about perl than, well, I think perl does. :-) XP is just a number.

        That said, pg otherwise appears quite knowledgeable about Tk, so take his advice anyway. Do it because he's knowledgeable on the current subject, not because he's got more XP than :insert person:. :-)

      I tried your "Slide view of pictures" and is really great. I had to make the correction zertara recommended also. However, I have to start the script from a terminal. If I try to open it from another Perl/Tk app, it will open on the first jpeg image, and then it will stop altogether. Any suggestion? Thank you very much Chris
Re: Perl/Tk widget for displaying images and thumbnails
by marto (Cardinal) on Sep 09, 2005 at 15:53 UTC
    Hi,

    for the Thumbnail part, you may want to start looking at Tk::Thumbnail.
    There is example code on the Cpan link.

    Martin
      Thank you marto :)
Re: Perl/Tk widget for displaying images and thumbnails
by zentara (Cardinal) on Sep 09, 2005 at 16:23 UTC
    If you want to roll your own, you can use this, which simulates a browser.
    #!/usr/bin/perl use warnings; use strict; use Tk; use Tk::Pane; use Tk::JPEG; use Tk::PNG; use Tk::HList; use Tk::ItemStyle; use Imager; use File::Basename; use MIME::Base64; my $photo;#my $photo; my $image; my $h; #my HList; my %info; my $key_sel; my $mw = MainWindow->new(-bg=>'black'); $mw->geometry('800x700+100+15'); $mw->bind('<Control-c>', [sub{&save_it(); Tk::exit;}] ); my $topframe = $mw->Frame(-height =>30, -background=>'black') ->pack(-fill=>'both', -expand=>1); $topframe->Button(-text => "Exit", -activebackground =>'snow', -padx=>40, -relief=>'raised', -command => sub { exit; })->pack(); my $leftframe = $mw->Frame( -width =>25, -background=>'black', )->pack(-side => "left", -anchor => "n", -fill=>'both', -expand=>1); my $mainframe = $mw->Frame(-background=>'black') ->pack(-side => "right", -anchor => "n", -fill=>'both', -expand=>1); #default empty image $image = $mw->Photo(-file => '' ) or die $!; #fill leftframe with thumbnails HList2(); #fill mainframe with default screen setup_pane(); $mw->waitVisibility; load_thumbs(); MainLoop; ###################################################################### +### sub HList2 { $h = $leftframe->Scrolled( 'HList', -header => 1, -columns => 2, -width => 20, -height => 60, -takefocus => 1, -background => 'steelblue', -foreground =>'snow', -selectmode => 'single', -selectforeground => 'pink', -selectbackground => 'black', -browsecmd => \&browseThis, )->pack(-side => "left", -anchor => "n"); $h->header('create', 0, -text => ' THUMBNAIL ', -borderwidth => 3, -headerbackground => 'steelblue', -relief => 'raised'); $h->header('create', 1, -text => ' ID ', -borderwidth => 3, -headerbackground => 'lightsteelblue', -relief => 'raised'); my $font = '-Adobe-Courier-Bold-O-Normal--*-120-*-*-*-*-*-*'; } ############################################################# sub setup_pane{ my $pane = $mainframe->Scrolled('Pane', Name => 'Main Display', -width => 1000, -height =>1000, -background => 'black', -scrollbars => 'osoe', -sticky => 'n', )->pack(-side => "left", -anchor => "n", -fill=>'both',-expand=>1); $photo = $pane->Label(-image => $image, -background =>'black' )->pack(-side => 'top', -anchor => 'n', -fill => 'both', -expand => 1, ); } ############################################################## sub browseThis { my $ent = shift; $key_sel = $h->itemCget($ent, 1, '-text'); my $pic = $info{$key_sel}{'pic'} || ''; my $image = $mw->Photo(-file => "$pic"); $photo->configure(-image => $image ); $image->blank; $image->read($pic); } ############################################################ sub load_thumbs{ my @exts = qw(.jpg .png .gif); # list allowed extensions my @pics = <*.jpg *.gif *.png>; my $image = Imager->new(); foreach my $pic (@pics){ my ($basename,$path,$suffix) = fileparse($pic,@exts); $info{$basename}{'name'} = $basename; $info{$basename}{'pic'} = $basename.$suffix; $info{$basename}{'comment'} = 'nice'; $image->open(file=>$pic) or die $image->errstr(); # Create smaller version my $thumb = $image->scale(xpixels=>100); $thumb->write( data => \$info{$basename}{'thumbnail'}, type => 'jpeg', jpegquality => 30) or die $thumb->errstr; &add_key( $basename ); $mw->update; } } ################################################################### sub add_key{ my($key,$color) = @_; #color is for the IDcolor, defaults to lightsteelblue if(! defined $info{$key}{'color'}){ $info{$key}{'color'} = 'lightsteel +blue'}; my $textstyle = $h->ItemStyle('text', -justify => 'center', -bg => $info{$key}{'color'}, -selectforeground => 'green', ); my $e = $h->addchild("", -data => $info{$key}{'pic'}); #Tk needs data images base64 encoded my $content = encode_base64( $info{$key}{'thumbnail'} ); my $image = $mw->Photo(-data => $content ); $h->itemCreate ($e, 0, -itemtype => 'imagetext', -image => $image, -text => $info{$key}{'comment'}, ); $h->itemCreate($e, 1, -itemtype => 'text', -style => $textstyle, -text => $info{$key}{'name'}, ); if($e == 0){ #select first entry $h->selectionSet(0); browseThis(0); } } #############################################################

    I'm not really a human, but I play one on earth. flash japh
      Thank you very much :)
        You can also put "use Tk::PNG" in there to pick up those too.

        I'm not really a human, but I play one on earth. flash japh
Re: Perl/Tk widget for displaying images and thumbnails
by scmason (Monk) on Sep 09, 2005 at 16:45 UTC
    Another roll your own technique would be to use a canvas and add the 'thumbnails' as embedded widgets. Here is an example (excerpt) that creates a 'static' sort, but you can imagine adding arbitrary images dynamically. This example also show how to associate callbacks when the 'thumbnails' are clicked.
    my ($img_config,$img_control,$img_help,$img_vocabulary); $img_config=$panel_canvas->Photo(-file=>LIB_PATH."/Perlbox/pixels/conf +ig.gif"); $img_control=$panel_canvas->Photo(-file=>LIB_PATH."/Perlbox/pixels/con +trol.gif"); $img_help=$panel_canvas->Photo(-file=>LIB_PATH."/Perlbox/pixels/help.g +if"); $img_vocabulary=$panel_canvas->Photo(-file=>LIB_PATH."/Perlbox/pixels/ +vocabulary.gif"); $lbl_control=$panel_canvas->Label(-text=>"Control",-bg=>'#ffffff',-fg= +>'#2c6997',-relief=>'flat'); $panel_canvas->createWindow(15,65, -window=>$lbl_control, anchor=>'nw' +,-width=>54,-height=>15); $lbl_vocabulary=$panel_canvas->Label(-text=>"Vocab",-bg=>'#ffffff', -f +g=>'#2c6997', -relief=>'flat'); $panel_canvas->createWindow(15,145,-window=>$lbl_vocabulary, -anchor=> +'nw',-width=>54,-height=>15); $lbl_config=$panel_canvas->Label(-text=>"Config",-bg=>'#ffffff', -fg=> +'#2c6997' ,-relief=>'flat'); $panel_canvas->createWindow(15,225, -window=>$lbl_config, -anchor=>'nw +',-width=>54,-height=>15); $lbl_help=$panel_canvas->Label(-text=>"Help",-bg=>'#ffffff', -fg=>'#2c +6997' ,-relief=>'flat'); $panel_canvas->createWindow(15,305, -window=>$lbl_help, -anchor=>'nw', +-width=>54,-height=>15);

    For the full source, download Perlbox-Voice from Perlbox.org

    "Never take yourself too seriously, because everyone knows that fat birds dont fly" -FLC
Re: Perl/Tk widget for displaying images and thumbnails
by gri6507 (Deacon) on Sep 09, 2005 at 16:53 UTC
    Image::Magic is a very powerful module to manipulate images. It may be of help to you. As an example, I use the following script to generate HTML formatted thumbnails from a directory of pictures. You can surely use the same concept in Tk.

    use strict; use English; use Warnings; use Image::Magick; use Image::Magick::Thumbnail; opendir(DIR,$ARGV[0]) || die "Can't open directory: $!\n"; open(FIL,">$ARGV[0]/index.html") || die "Can't write html file: $!\n"; print FIL "<html><body><center><table border=1 cellpadding=3 cellspaci +ng=3><tr>"; mkdir("$ARGV[0]/Thumbnails") unless (-d "$ARGV[0]/Thumbnails"); mkdir("$ARGV[0]/Reduced") unless (-d "$ARGV[0]/Reduced"); my $i=1; foreach (sort grep {/jpg$/i} readdir(DIR)){ if (/Censored/){ print "skipping $_\n"; next; } print "reading $_\n"; my $img = new Image::Magick; $img->Read("$ARGV[0]/$_"); my ($thumb,$x,$y) = Image::Magick::Thumbnail::create($img,640); $thumb->Write("$ARGV[0]/Reduced/$_"); ($thumb,$x,$y) = Image::Magick::Thumbnail::create($img,100); $thumb->Write("$ARGV[0]/Thumbnails/$_"); print FIL "<td><center><a href=\"Reduced/$_\"><img src=\"Thumbnails/ +$_\"></a><br><font face=\"Times New Roman\" size=\"2\"><a href=\"$_\" +>Lrg</a></font></center></td>"; if (!($i++ % 6)) {print FIL "</tr><tr>";} } print FIL "</tr></table></center></body></html>"; close(FIL); closedir(DIR);