Programmer Payback

The new Silverlight PivotViewer control provides a cool and powerful way to visualize and filter data straight out of the box. If you have some data with a few dozen records or more and have images associated with each record, I urge you to give it a spin and build a quick Silverlight PivotViewer app to show off and enable users to search and filter that data. The whole affair won’t take you more than an hour or two and in the end you’ll have a great looking, fun and powerful window into our data.

All you need to do is generate some special files that contain the data you want to show, create a Silverlight app that hosts the new Silverlight PivotViewer control, and point it at your data.

Here is a proof of concept that I built using data from PuzzleTouch, my online jigsaw puzzles application, that shows off all the stock puzzles available and allows them to be filtered by category, popularity, and difficulty (based on user stats).

Click here to view

Here’s a quick walk-through demonstrating how to build your very own PivotViewer app…

Step 1: Generate the data. This is where most of the work is (but that isn’t saying much). In the end you will end up with a number of Xml and deep zoom image files. Depending on the data, the easiest way may be to use the Pivot Collection Tool for Microsoft Excel. This is an Excel Addin that allows you to toss all your data in a spreadsheet and the addin will generate the Pivot data files from it. However, because I was gathering my data from a handful of different sources and because I find programmatically generating the data to be more interesting, I decided to forego Excel and generate it from code using the Pivot Collection Tool (a.k.a. Pauthor) open source C# library. This library provides an extremely simple API that has everything you need to easily generate all the data that the Silverlight Pivot control needs. All you need to do is add the PauthorLib project to your solution and away you go…

PivotCollection items = new PivotCollection();
items.Name = "Online Jigsaw Puzzles by PuzzleTouch";
items.BrandImage = new PivotImage("http://puzzletouch.com/logo.png");
items.Icon = new PivotImage("http://puzzletouch.com/favicon.ico");
items.FacetCategories.Add(new PivotFacetCategory("Category", 
PivotFacetType.String));
items.FacetCategories.Add(new PivotFacetCategory("Difficulty", 
PivotFacetType.Number));
items.FacetCategories.Add(new PivotFacetCategory("Popularity", 
PivotFacetType.Number));

foreach (var puzzle in StockPuzzles)
{
    PivotItem item = new PivotItem(puzzle.PuzzleId, items);
    item.Description = puzzle.Description;
    item.Name = StripExtension(puzzle.Filename);
    item.Href = string.Format("http://puzzletouch.com/?puzzle={0}",
 puzzle.PuzzleId);
    item.Image = new PivotImage
(string.Format("C:\\PuzzleTouch\\Images\\{0}.png", puzzle.PuzzleId));
    item.AddFacetValues("Category", puzzle.Category.ToString());
    item.AddFacetValues("Difficulty", puzzle.Difficulty);
    item.AddFacetValues("Popularity", puzzle.Popularity);

    items.Items.Add(item);
}

PivotCollectionBuffer source = new PivotCollectionBuffer(items);
LocalCxmlCollectionTarget target = new LocalCxmlCollectionTarget(
"C:\\PuzzleTouch\\PivotData\\puzzles.cxml");
DeepZoomTargetFilter targetFilter = new DeepZoomTargetFilter(target);
targetFilter.Write(source);

Here I am creating a PivotCollection object to store my data. I tell it which fields I want to support filtering by (called a FacetCategory), and then I loop through my records and create a  new PivotItem for each. Each PivotItem needs a name, href, and image, as well as a value for each FacetCategory.

Once I’m done populating my PivotCollection object, I export it to the file system (which produces all the files required for the pivot control to function). There are other formats you can export to and from, but for my purposes I just wanted to generate from code and produce a local copy of the Pivot data all ready to go. Note: The coolest part here is that all the deep zoom images will be created automatically from the source images! No separate tools or typing in command lines are necessary!

Please refer to the Pauthor documentation for more details on the Pauthor library.

Step 2: Upload. Once you have the pivot data files created, upload them. I chose to upload my data to Amazon S3 because it is cheap and scalable but you could easily put it in any HTTP accessible location. Just remember to drop a clientaccesspolicy.xml file in the root of the domain if the data is hosted somewhere other than where you will be hosting your Silverlight app from.

Step 3: Create your Silverlight app. This is almost too easy…

• Download the Silverlight PivotViewer control.
• Add a reference to System.Windows.Pivot and System.Windows.Pivot.SharedUI

• Insert the following xaml into your main page:

xmlns:pivot="clr-namespace:System.Windows.Pivot;
assembly=System.Windows.Pivot"

<pivot:PivotViewer x:Name=“PivotViewer” />

• In the code behind, load the PivotViewer control with the url of the .cxml file that you uploaded to your web site:

PivotViewer.LoadCollection("http://puzzletouch.s3.amazonaws.com/
puzzles.cxml", string.Empty);

That’s it!!! You now have an application that can view your pivot data collection in all it’s glory. Deep zooming, filtering, searching…etc is all built in and working.

From there, you can go forth and customize the experience all you want but with very little work you’ll have a fully functional Pivot viewing application that will give your users a lot of powerful abilities straight out of the box.