For the past year, the Microsoft MVP Program has been holding Twitter chats. The idea is that for a given date/time (usually a 1-2 hr window), you could be involved in a group conversation by following the #mvpchat hash tag. During the first conversation, as I watched the feed blow by at amazing speed, I realized that PivotViewer would offer a unique look into this type of data. So within a couple of weeks of the first event, MVPChat (http://mvpchat.net) was born.
Since then, we have recorded five separate events and they are all still available online. With each event, a newer version was created and the application continues to grow. With the last event, I was able to roll out a Silverlight 5 version using the newest PivotViewer. The latest version is actually an early beta of an upcoming product that I will be announcing soon. I have received a lot of interest in real-world examples of the PivotViewer, so I thought I would take some time to walk thru MVPChat and show PivotViewer in action.
Analyzing the Data
If you have heard me give a talk about PivotViewer, then you have heard me say that the key to creating a successful PivotViewer is to truly understand the data. (If you haven’t heard me talk on PivotViewer, then why not? ). That was the case here as well. The first attempt tracked very little data points. It was nothing more than the basics: author and date/time of post. While that was useful to a degree, it wasn’t all that useful. The next attempt really focused on the data in each Tweet. We pulled out hash tags, mentions, sources, and looked for a list of key words. While better, it simply didn’t get us where we needed to be.
The MVP Chat had a unique feature that really made this turn on it’s head. The moderator would throw out questions, marked with a #Q1,#Q2, etc. Then participants could respond using that same hash tag or some variant (which made data mining difficult to say the least). However, by adding a Question property to the PivotViewer, we could start to drill down into micro conversations with the entire event itself. This not only made the application fun to use to dig thru the data, but it is now useful from an informational perspective by allowing you to pull inter-related information.
Designing the Trading Cards
Now I have to admit, this is still a work in progress. However, if you take a look at the original version using PivotViewer v1, which is still live at http://mvpchat.championds.com, you will hopefully agree we have come a long way.
The first thing you will notice is that there is actually two cards being used. The smallest card is simply the thumbnail of the author. The larger card has the tweet itself, a date/time stamp, and some author information in it. An interesting challenge was the background. In an attempt to use the author’s profile background color to distinguish one card from another, I came across the problem of using appropriate colors of the Tweet box. The default is a white background, however, if the user’s background color was anywhere close to white, it all blended together.
After doing some research on color brightness and using the formula at http://maestric.com/doc/color_brightness_difference_calculator, I came up with a plan to test the color brightness and change the Tweet window accordingly. While not 100% of where I want it to be, it has allowed me to dynamically change the color based on the author’s profile color.
Customizing the PivotViewer
Now I couldn’t very well simply leave the PivotViewer alone, could I? That just doesn’t seem right for some reason. Any while again, not exactly finished, I’ve been happy with the major item of focus in my customizations.
The first minor change I did was to remove the detail pane. In this situation, there isn’t much that a detail pane could offer. That might actually change in future iterations, but for now, it was simply removed.
Then I moved on to my major challenge, the item adorner. I wanted to create a full card adorner that would allow the user to interact directly with the trading card. I won’t go into the details of how I accomplished this here, but you can read about it on my PivotViewer Basics: Custom Item Adorners post. After several unsuccessful attempts and a few choice words, I was able to get the basic concept working.
If you select an item in the PivotViewer, the first thing you will notice is a “Follow” button shows up that will redirect you to Twitter to allow you to follow that user. However, if you look more closely, you will notice that all of the mentions, hash tags, and the author’s handle are all links. Clicking on one of the links will change the filter and allow you to navigate around the PivotViewer. While I have plans for extending this adorner in the future, I was fairly happy with the results to this point.
The End Results
I would be lying if I told you I didn’t bump into any issues along the way. In fact, all of the issues I ran across I either have or will write about on the blog. However, overall I think the new Silverlight 5 PivotViewer stood it’s ground rather well. The new dynamic features really make a difference in building real world solutions.
As far as 3rd party controls, I only used one. The transitions between pages in the navigation are handled with Telerik’s Transition control. I have used Telerik’s controls on several projects and I have been really impressed with how they are written and perform.
You might remember me mentioning, at the beginning of this post, that this application is an early beta of a new product coming. And since it is, I was wondering if you could help me out. I have a few short (6 question) survey that I have posted in order to get some feedback on MVPChat. I would appreciate all of the feedback that I could get and wonder if you would mind filling it out after you played with MVPChat for a minute?
Below are the links to the application and the survey as well. I have several more posts queued up on PivotViewer, Silverlight, and Win8. Until then… Happy Pivoting…
Website : http://mvpchat.net