Image Presenter

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Image Presenter

Oli Bye-3
I've displayed a single image in a window using:

ImagePresenter show: 'Basic Image' on: (OLEPicture fromFile: 'bla.jpeg')

I'd like to display multiple pictures in a grid, to make a thumbnail view.

What's going to be the simplest way to do this.

Oliver Bye


Reply | Threaded
Open this post in threaded view
|

Re: Image Presenter

Louis Sumberg-2
Oli,

> I'd like to display multiple pictures in a grid, to make a thumbnail view.

It may not be the simplest but here's something to chew on *s*.  This
example uses Ian's MultipleFileOpenDialog to populate filenames, but you can
do that by hand and skip the first line.

"Prompt for filenames and figure out size of grid."
filenames := MultipleFileOpenDialog showModal asOrderedCollection.
rows := filenames size sqrt asInteger.
columns := (filenames size / rows) asInteger + 1.

"Open shell and assign layout manager."
shellview := Shell show view.
shellview layoutManager:
    (GridLayout new
        rows: rows;
        columns: columns;
        verticalGap: 5;
        horizontalGap: 5).

"Add subviews."
filenames do: [:e |
    view :=ImageView new.
    shellview addSubView: view.
    ImagePresenter new
        view: view;
        model: (OLEPicture fromFile: e);
        view viewMode: #scaleToFit].

Note that the images are not actually resized so if you're bringing in lots
of large files (e.g., 20 files with resolution 1600x1200), you might run
into trouble, e.g., the system might hang.

-- Louis


Reply | Threaded
Open this post in threaded view
|

Re: Image Presenter

Bill Schwab-2
> "Open shell and assign layout manager."
> shellview := Shell show view.
> shellview layoutManager:
>     (GridLayout new
>         rows: rows;
>         columns: columns;
>         verticalGap: 5;
>         horizontalGap: 5).
>
> "Add subviews."
> filenames do: [:e |
>     view :=ImageView new.
>     shellview addSubView: view.
>     ImagePresenter new
>         view: view;
>         model: (OLEPicture fromFile: e);
>         view viewMode: #scaleToFit].

Another way would be to create one new DIBSection of the correct size
(figuring that out in advance is probably the hardest part unless you give
each image a fixed size regardless of aspect ratio), get a #canvas on it,
and then ask the would-be thumbnails to draw themselves (there are variants
on #drawOn:[] that will stretch/shrink) in a grid.  Having done that, you
can use one ImagePresenter to show the whole thing.

Have a good one,

Bill

--
Wilhelm K. Schwab, Ph.D.
[hidden email]


Reply | Threaded
Open this post in threaded view
|

Re: Image Presenter

Oli Bye-3
Thanks,
I've got the first suggestion going, and I'll have to consider the
DIBSection when I start running short on memory.

Maybe I could do some crude resampling using the DIBSection.


Reply | Threaded
Open this post in threaded view
|

Re: Image Presenter

Christopher J. Demers
In reply to this post by Oli Bye-3
Oli Bye <[hidden email]> wrote in message
news:[hidden email]...
> I've displayed a single image in a window using:
>
> ImagePresenter show: 'Basic Image' on: (OLEPicture fromFile: 'bla.jpeg')
>
> I'd like to display multiple pictures in a grid, to make a thumbnail view.
>
> What's going to be the simplest way to do this.

Others have offered a good starting point, I am going to share some
experience I have had with this sort of thing.

I wrote something similar recently, I was working with jpeg photos with an
average size of 3.5 mb.  I found that after a scrolling through a few pages
of photos my program was using a few hundred megs or ram.  To lessen the
total memory consumption I send free to the images that have scrolled off
the display.  If the image was created from a file it can reload itself as
needed (the next time it needs to display).  Also note that images do not
appear to consume much memory until the first time they are displayed.

I used a FlowLayout and a scroll view.  My window size determines the number
of columns of photos it displays, and the scroll view will only scroll down.
I had to do some extra calculations to set the size of the view in the
scroll view as needed.  A similar effect can probably be accomplished with
the grid layout using slightly different calculations.

One additional thing to be aware of is the maximum view size limit, 32767
appears to be the maximum height any view can be.  If you are displaying a
lot of photos at a moderate size this could be an issue.

I was very impressed with the high level of functionality I was able to
quickly implement by compositing a few MVP elements.  It should work well
for you.

Good luck,
Chris