As I mentioned in my previous post, I’ll be writing entries about various components I’m creating for a personal project I’m working on in my spare time called Zimba.
One of the features of Zimba are various versions of live tag clouds. If you don’t know what a tag cloud is, read this post from Smashing Magazine to get a definition and see some examples. The difference between most tag clouds and Zimba’s is that our tag cloud is live. You see, Zimba is an internet enabled application allowing other users to execute searches against a pre-configured portfolio of stock photography you’ve imported into the application. Your photography will have been tagged with keywords to make the photos available to the rest of the Zimba network and photo buyers will search for media by specifying keyword tags as the search criterion. When the buyer executes a search, the search tags are broadcast to all photographers on the Zimba network. If you have photos matching the search tags you return results, if not, you ignore the request.
Even though many requests will be ignored doesn’t mean we can’t do something useful with the search terms querying against us. One of the things we do with the request is compile a list of search keywords and the frequency with which they are searched on in order to display a tag cloud of search tags to the photographer. Viewing a live cloud of search terms allows the photographer to see a live picture of the hot tags being searched on at that moment in time. This is what this demo illustrates.
Other tag clouds I may make available to the photographer later is a cloud of tags from their own portfolio to illustrate diversity of their images, a cloud of search tags they were able to fulfill with results and a cloud of tags they were not able to fulfill thus informing the photographer of the types of pictures missing from their portfolio they should consider adding.
What’s It Look Like?
What does a live tag cloud look like in WPF? Here’s one low-res version:
It’s much more fun to watch in full resolution. Download the source code or binary to watch it in action live and play around with it.
What you just watched was a mock live tag cloud. “Mock” because I simulate peer search requests coming into the application every 300 milliseconds which are then added to the list of tags searched on. The number of times a tag is searched on, the “incidence count”, is stored along with the keyword tag itself. If a tag has already been searched on in the past, rather than adding it to the list again, we simply increment the Incidence Count on the existing item in our list, otherwise we add the new non-existing tag to our list with an Incidence Count of 1. The displayed tag is scaled based on the incidence count of the tag. Each time someone searches on a tag already existing in your list of previously searched tags, it’s incidence count is increment and thus it’s scale is larger. In other words, the more times the tag has been searched on, the bigger it is displayed. Also, I’ve created 5 RangeName buckets each tag falls into based on how high it’s incidence count is compared to all the other tags in the list: Very Low, Low, Medium, High, Very High.
- Very Low tags are in the bottom 15 percentile of all tags searched. They don’t even show up on the screen thanks to a style trigger collapsing Very Low keywords.
- Low incidence tags show up in between the 15 and 40 percentile of all tags searched on. They are displayed light grey and at 90% opacity.
- Medium incidence tags lay between the 40 and 70 percentile range of all terms searched and are displayed dark grey at 80% opacity.
- High incidence tags show up between the 75 and 95 percentile of all tags searched and are displayed orange at full opacity.
- Finally, Very High incidence tags are in the top 5% of all tags searched based on incidence count and are displayed red at full opacity.
Watch the video again to see this in action.
How is it done?
Honestly, it’s simple. WPF makes things unbelievably simple once you wrap your head around how to use it.
We make use of the following items in this WPF demo:
- A dependency object we create called KeywordTag containing a couple of dependency properties: IncidenceCount and RangeName
- A custom observable collection of said KeywordTags disallowing duplicates to be added, but rather incrementing the IncidenceCount of attempted duplicates.
- A value converter to provide a scale of a displayed KeywordTag which is used in a ScaleTransform
- A C# 3.0 extension method to allow a KeywordTag item to calculate it’s own RangeName based on the maximum incidence count from the collection
Other than that we use a DispatcherTimer to randomly add search terms from a pool of available tags and we style a listbox of tags with a DataTemplate and custom Style. We scale the KeywordTag items with a slider in the lower right corner of the window whose value is bound to our value converter. See? Nothing scary going on here.
Also, just for added fun we make use of Dan Crevier’s panel layout animator to put things in place. Thanks for the great blog Dan!
Have fun!
The source code is heavily commented. There’s probably more comments than code so have a look through it to see the nitty gritty details. Feel free to drop me a line if you have any questions. As a fun little diversion and a testament to the speed of WPF, try changing the timer interval to something ridiculously fast, saaay 1 millisecond and watch the words fly!
Again here are the pertinent downloads:
Binary
Source Code