The Rain and The Shade

August 10, 2011

JIT implementation for PivotViewer featuring Flickr.Net

Filed under: Silverlight — ovaisakhter @ 2:01 pm

I saw a my first demo of PivotViewer by a friend of mine some months back I was very impressed at that time, but then I forgot all about it. Then I saw it again some days back and thought to explore it a bit. As a developer I was not interested in the Excel tools provided by Microsoft. Having interest in photography the first thought that came to my mind was that a Flickr implementation of the PivotViewer could be very exciting. I went on tried googling a Flickr implantation for PivotViewer so that I can download the code run it and call it a day. But to my surprise I was not able to find one. So I thought to try to make one for myself. 

So the question was where to start I knew that there is a very nice library available for accessing Flickr service. The Library can be found here

http://flickrnet.codeplex.com/

and now the part was how can I provide the information to PivotViewer at run time. After a little search I was able to get this information from the following location

http://www.silverlight.net/learn/data-networking/pivot-viewer/just-in-time-sample-code

The sample code comes with prebuilt providers, I really loved the one for Twitter it let you visualize your own twitter feed in a way that you have never imagined, that was the point I became more interested in PivotViewer.

image

so you can filter your twitter feed using the @Mentions that you have done in your tweets and the #hashtags you have used. It kind of gives you a full overview of your thought pattern over a period of time in a very user friendly way.

When you open the solution in the Visual Studio you notice that there are projects in the solution.

PivotServer: This is the web application used to host the Pivot JIT implementation

PivotServerTools: As the name suggests contains all the important Data Objects and tools used in the implementation

SilverlightPivotViewer: The Silverlight project used to host the Pivot.

CollectionFactories: This is the Project we are most concerned with, in the project we have the implementations for different data sources. This is where we will add our very own Flickr implementation.

The Flickr Factory

To start the implementation of a JIT provider first thing you need to do it a bit of thinking. i.e. What are the different dimensions you will like to view your information. These are the dimensions using which you will be able to filter and sort your items. Flickr provides a concept of “Set” where each photo can belong to a set. So I chose the sets to be one of the Dimensions. The other two dimensions are I choose are Date Uploaded and Date Taken. I would have loved to use some of the the exif information as Dimensions but there was not way to get all the pictures and their exif information in one call.

Next thing you will need is an API key from Flickr you can get it from http://www.flickr.com/services/ after logging in.

So now the planning is done. We are ready to make our provider.

First Add a class to the CollectionFactories project and inherit it from CollectionFactoryBase

public class FlickrCollection : CollectionFactoryBase

public   FlickrCollection()
       {
           this.Name = "FlickrPhotos";

           this.SampleQueries = new string[]{
               "flickrUserEmail=ovaisbutt@yahoo.com",
               "flickrUserEmail=daredeagle@yahoo.com",
               "flickrUserEmail=ssatif@yahoo.com"
              
           };
       }

In the constructor you will set the name of your collection and also some of the sample queries that your application can handle. This information will be used to generate the UI by the framework which we will see later on.

To provide the Collection Information you need to override a method of this class i.e. MakeCollection

Now let us get some data from Flickr

First we need to get a Flickr user by the email provided.

FoundUser foundUser;
            var flickr = new Flickr(ApiKey);

            try
            {
                foundUser = flickr.PeopleFindByEmail(emailofUser);
            }
            catch(Exception exception)
            {
                return ErrorCollection.FromException(exception);
            }

flickrCollection.Name = string.Format("photos of {0}",foundUser.FullName);

then we get all the sets of the user

var allsets = flickr.PhotosetsGetList(foundUser.UserId);

now we can iterate through all the sets get picture information in them and start creating the Collection Items

var flickrCollection = new Collection();

foreach (var set in allsets)
            {

                var allPhotosInSet = flickr.PhotosetsGetPhotos(set.PhotosetId,PhotoSearchExtras.DateTaken | PhotoSearchExtras.DateUploaded );               

                foreach (var photo in allPhotosInSet)
                {
                    if (allPhotos.Contains(photo.PhotoId))
                    {
                        continue;
                    }

                    allPhotos.Add(photo.PhotoId);

                    var facetsForFlickr = new List<Facet>
                                              {
                                                  new Facet("Set", set.Title),
                                                  new Facet("Title",photo.Title),
                                                  new Facet("Photo Description",photo.Description),
                                                  new Facet("WebLink",new FacetHyperlink("Link",photo.WebUrl)),
                                                  new Facet("Date Taken", photo.DateTaken),
                                                  new Facet("Date Uploaded", photo.DateUploaded)
                                             };

                  

                    var url = photo.DoesLargeExist ? photo.LargeUrl : photo.SmallUrl;

                    flickrCollection.AddItem(photo.Title, null, photo.Description, new ItemImage(new Uri(url)), facetsForFlickr.ToArray());                    
                    
                }           

            }

the most important thing in this code is the List of Facets this the meta information you will provide about the picture. Once all the items are added to the collection now we need to tell how we want out meta information to be used and displayed.

            flickrCollection.SetFacetDisplay("Set", true, true, false);
            flickrCollection.SetFacetDisplay("Date Taken", true, true, false);
            flickrCollection.SetFacetDisplay("Date Uploaded", true, true, false);
            flickrCollection.SetFacetDisplay("Title", false, true, false);
            flickrCollection.SetFacetDisplay("Photo Description", false, true, false);

 

and finally return the collection.

Run the application and navigate to the following page silverlightPivotViewerTestPage.aspx page and you will see your collection shown in the dropdown

image

 

select one of the options and the Pivot will be rendered for that user (If you have many pictures it may take a while).

Here are some views from the result.

image

 

image

 

image

 

you can see this in action at www.wisdom.pk

Create a free website or blog at WordPress.com.