Brainstorming A Photo Filter App

[psychman]

Hello. I am revisiting an idea to create a program with a user interface that will allow me to filter and display large amounts of photo and corresponding text data. The filters will not always be the same categories (see example below). I am not sure if such a thing already exists or if I am planning it the best way possible, so any help would be appreciated!

How It Would Work:

-example
I take maybe 1500 photos in and around a group of historic homes. I have taken notes for each photograph (ouch! my hand hurts). Now I want to give the photos/notes to the PR guy and have him be able to use this little app to create his own filtering categories to display the images to his client. He decides to filter by: address, room, brown things, close-ups of the brown things and even closer close-ups of brown things. He needs to be able to move individual images around on the screen with the mouse and have the selected image brought to the top of the z order when selected. He also needs to be able to interactively enlarge the selected image. The text data for that photo needs to show up somewhere on the page too (i.e. address, photographer, date taken, description, room, color and photo name).

What I Have Tried:

I created a little C# app that let me add new tags and data to the Metadata.xml file produced by Deep Zoom. I then took that new Metadata.xml file and used Kirupa's Deep Zoom filtering demo to filter all of the images, using the new tags as filtering criteria. It worked great, but there were some problems:
1) The projects use a webclient class, so they could not be displayed offline without installing a server like Apache on the computer running them.
2) Deep Zoom Composer had some limitations on the amount of photos I could use. Not sure where it stands now.
3) The amount of files for one of these large Deep Zoom collections was difficult to manage, even when zipping them.

What I Think Might Work:

1) Something already developed that does what I need *cross fingers*. I would be open to using Flash if something like this exists (haven't been able to find it yet).

2) I am thinking WPF would work for this since the project would always be displayed locally and I have seen some of the neat animation and object manipulation features it has. I do not know how it will handle displaying many images at once. I am also unsure of how I will set up the workflow. I am thinking of maybe using a Windows Form application for the data entry and have that create an XML file for the WPF UI to reference. Not sure...

Thanks

[kirupa]

Hi psychman,
For what you are trying to do, creating a custom WPF app would be easier. Deep Zoom would be overkill for what you are trying to create.

WPF will handle creating thumbnails of large quantities of images really well actually. You have good Bitmap manipulation APIs that will allow you to programmatically create thumbnails out of larger images. If you use databinding to display those images in a control such as ScrollViewer, you also get the advantage of virtualization for free: http://www.kirupa.com/net/ui_virtualization_pg1.htm

Also, you should be able to use WPF for everything. Having a separate WinForms app seems unncessary, for unless you are planning on using some of the controls that only WinForms has, anything relating to creating the XML can be done in C# in a WPF app itself.

:)

[psychman]

Thanks for the reply Kirupa. I am going to make this a WPF app for sure. That virtualization tutorial you created will come in handy! I will search for some info on how to programmatically create thumbnails too. Now time to start laying this out in Blend.

[psychman]

WPF will handle creating thumbnails of large quantities of images really well actually. You have good Bitmap manipulation APIs that will allow you to programmatically create thumbnails out of larger images.

Hello again. I have been working on this project and have made some good progress. The UI is designed, I have a browse folder dialog working properly to create an observable collection which is databound to a list box (temporary).

Now I am at the point where I want to, in effect, "throw" the images out on the UI and let the user start to manipulate them (drag, drop, rotate, etc). I have been able to track down some good info on object manipulation with WPF, but I am not so sure what the best approach is to displaying all of the thumbnail images. Will I need to programmatically save a thumbnail copy of each image I want to display? Then do I create an observable collection from the new thumbnails and finish by creating an instance of an image control for each thumbnail image in the collection and have them display on my canvas? I am learning as I go, so this has been a slow process as you can see!

Thanks