So, who out there already knew what a coworker and I just learned via trial and (mostly) error?

Jim and I were working on a simple Silverlight audio player with a couple of tracks, nothing elaborate whatsoever. It runs great on Windows. Yet, it failed to play audio on Mac OSX, regardless of browser.

After a bit of voodoo, standing on one foot and other meaningless postulates, Jim says, “Hey, can you move the player back onto the screen so we can see the trace statements?” I was using CSS to position the player off the screen, as it has no user interface. Jim was showing trace events in a simple textblock.

As soon one pixel of the Silverlight control existed inside the visible browser viewport, the audio would play on our Macbook Pro. Move it off the screen, then no audio for you.

But wait there’s more! Setting CSS visibility to hidden works in Mac/Safari, but still fails in Mac/Firefox. To play in all browsers, the Silverlight player must have at least one visible pixel on the screen. I didn’t try layering it behind another element because a single dot on our page was invisible on the edge.

Uhg.

I'm digging the http://www.nbcolympics.com site in Silverlight. I can see sports and interviews that I'm interested in and review close plays as much as I like. I've shown this to the wife and the extended family over the weekend.

One thing that really keeping this from being the best thing ever is the user experience. For example, the Control Room is a place where I can select up to four videos to watch at once; one large and three side videos. That's really cool. However, the extended family was the real test; and they were a little frustrated.

The sucky part of the Control Room is the search interface. Here, I'm given a tiny up/down arrow at the bottom of the thumbnail stack. This is something visitors will do many times, every time they visit the site to see the next six or previous six videos in the stack. Why not make this click experience really easy to hit with big, phat arrow overlay icons? Maybe even advertise key strokes that do this. Its just really frustrating for non-technical people to use.

There's too many obfuscated clicks like this in the app. Just a few slight UX improvements would have gone a long way here. NBC Silverlight team, I give you a straight B here. Good job on the insight to give us what we want (choice in viewing Olympic events), but a "meh" job in giving me to the tools to make that choice.

I was fortunate enough to pop up to a special event on Silverlight at Microsoft in Redmond, WA today. Mithun Dhar, Laurence Moroney, Arturo Toledo, Adam Kinney, Ernie Booth and Jesse Liberty gave us some sweet tips on building apps and organizing a good workflow between developers and designers.

Arturo is an awesome graphical designer. Oddly, or perhaps not, I liked his presentation the best. He made the Expression products fly and gave me (a developer) good tips on working efficiently with my design team. Jesse was a close second with his fundamentals presentation - he really clicks well with developers.

The crowd was mixed with about 60% developers and 40% graphic artists. I saw the ScottGu blog post this morning announcing that Silverlight 1.1 is now named Silverlight 2.0 - between that and the hints dropped at today's meeting, it feels like Silverlight is getting ready to explode. I think I'll still remember this day very well in three to five years.

I was working with a web service client that talked to SharePoint this week. I wrote a quick Silverlight app that extracted a list of tasks out of a SharePoint list. I love how simple this is to tap into:

http://sharepoint.yourcompany.com/_vti_bin/lists.asmx

The previous URL will show the path to one of the web services provided out-of-the-box by SharePoint. This particular web service provides several methods for dealing with SharePoint lists. I just needed to call the GetListItems() method and pass in the list name and view name as parameters in order to get my data.

This worked fine on my local machine, but when I migrated the solution to a staging server, the SharePoint web service refused to send me the data. After a bit of finagling, I realized the web service was happy to talk to my laptop, but it politely declined the remote web server's request as I lacked the proper credentials. I even was running the web solution with impersonation enabled because I wanted to pass along my Windows credentials during the call from the web server to the remote SharePoint server. I forgot that this is just simply not possible.

For security reasons, the web server does not hold on to my credentials "just in case" I might want to use them later. In this scenario, I do need them - but no dice. This particular list in SharePoint is locked down tight.

I didn't have the proper credentials when my web service client fired off a request to SharePoint. When I was running on my local machine, using Casinni, my credentials were readily available. On a remote web server, the credentials vanish. This is called a "Double Hop" problem - the hops are from the browser, to the web server, to another remote web server. The second hop tanked. It was a silly mistake on my part, but hopefully by writing this down now will help me remember sooner next time.

The code below shows how I solve this problem by manufacturing a credential on-the-fly and then fire off a request to SharePoint. There are multiple ways of solving this problem; I just happened to chose this one.

         MySharePoint.Lists list = new ProjectBoard.MySharePoint.Lists();

         list.Credentials = new System.Net.NetworkCredential(

            ConfigurationManager.AppSettings["Credential.Username"],

            ConfigurationManager.AppSettings["Credential.Password"],

            ConfigurationManager.AppSettings["Credential.Domain"]);

         XmlNode listItemsNode = list.GetListItems(

            ConfigurationManager.AppSettings["LoremIpsum.Guid"], 

            ConfigurationManager.AppSettings["LoremIpsum.View.Guid"], 

            null, null, "100", null, null);

         XmlNode dataNode = listItemsNode.ChildNodes[1];

         foreach (XmlNode rowNode in dataNode.ChildNodes)

         {

           // extract values here

         }

Now that I've got this little prototype functional, I can encrypt the credentials in the web.config file by using DPAPI, an encryption tool that makes it easy to protect sensitive information. Since I'm creating new credentials here, I can avoid the Double Hop problem and get on with my prototype.

I'm working on a solution that requires a special type of chart to visualize results from some elaborate number crunching algorithms. Dundas Chart for .Net has an implementation of the standard polar chart.

That's the closest "buy" option I could find and it might very well do the job. I'm a big fan of using existing software when it can solve a significant portion of the problem domain. When you find a good off-the-shelf option, they're often inexpensive and supported (by someone other than me), two big wins right off the bat. The ultimate solution has a few features that are difficult or impossible in the "buy" option, however they might be deemed insignificant. So the "buy" option might very well win out during the upcoming evaluation of my solution, but as part of my due diligence I had to see what the "build" option could offer me.

When I first envisioned the solution, I had ideas of 3D modeling like the work described by Tim Huckaby at InterKnowlogy for the Scripps Research Institute. They built a cancer research application called the Collective Molecular Environment.

Researchers from around the world can review the same model, zoom in, rotate models and insert annotations of their observations. The screenshot to the left shows one of the sample molecule views that comes with the demo. Spinning the molecule around with your mouse is pretty cool.

It's written in C# using Windows Presentation Foundation. SharePoint tracks the collaboration on the back end, but its invisible to the user. Researchers just launch the application and start clicking on cells in 3D.

Download a demo of the WPF application and twirl cells around on your own computer. The thing that floors me is that the proof of concept took only six weeks to build. WPF and SharePoint were really put to good use here.

Independently, Ben Waldron reminded me of MusicPlasma.com. You enter a band name and it shows related music artists in a 2D model using Flash. The mash-up pulls information from Amazon.com. When you click on another artist, the map adjusts and they become the new "center of the universe". Its a cool way of visualizing relational data.

Then I thought about the specific challenges I would have to solve in order to build the solution myself. I knew my data would have a central point and other points around it at various distances. Related points would have a line connecting them — not all points are related to each other. Each point would also display a short keyword or phrase.

So, to put it in mathematical terms, I had a center point at (0,0) that was surrounded by multiple invisible circles. The solution had to plot an unknown number of points on the appropriate circle. The size of each point could vary between 40 pixels and 4 pixels in size. The unique phrase beside each point could remain the same size. Finally, related points need a line connecting them.

I selected Silverlight for my proof-of-concept vehicle. Its a technology that can extend a web page and draw shapes or play video, like Adobe Flash. I first heard of this technology a while back at the MIX06 conference in Vegas. Silverlight runs on Windows and Mac OS X today and they've announced plans to support Linux so there's no worries about the supported platforms.

I use XAML or Extensible Application Markup Language to express how the Silverlight component appears on the page. The XAML used in Silverlight is a subset of the XAML used in WPF applications since Silverlight is browser based while WPF apps can take advantage of the full Windows platform. Just like a new version of the Adobe Flash player, you have to download and install the Silverlight component the first time. Then any page on the Internet that uses Silverlight can take advantage of the plugin. It takes less than 60 seconds on standard machine to download the 1MB file and install it. Here's the button created with 100% XAML just by launching Visual Studio and clicking File, New Project, Silverlight Project. With just pure XML, Silverlight can draw a fancy glossy button. Pretty cool.

Now my problem was the math. How could I calculate the points on a circle? So I headed straight to The Wife; a number crunching machine with more degrees than that Nick Lachey's boy band.

The Wife taught reminded me about some fundamental principles of algebra and geometry. As she tells it, this is sophomore/junior level high school stuff. First, I needed to calculate the central angle between two consecutive points. We'll call that theta. As it turns out, it doesn't matter where the points are, providing they lie on the same circle. For starters, I just wanted an even distribution, so if "n" equals the number of points on the circle then (2pi)/n gives me theta.

Next, I need to start calculating the exact (x,y) coordinates of the points on the circle. The first point is easy, its just (r,0) where "r" is the radius of the circle.

The second point is a little tougher as it gets into sine and cosine. These are just names for ratios in a triangle. The mnemonic SOHCAHTOA helps you remember this on quiz day. Let's look at a following right triangle.

• Sine is calculated as "opposite over hypotenuse", or the "SOH" part of the mnemonic
• Cosine is calculated as "adjacent over hypotenuse", or the "CAH" part of the mnemonic
• Just for good measure, the tangent is "opposite over adjacent", the "TOA" part

Now that I have all the ingredients, I can bake my pi. Ha! Ok, onto the task of plotting the points. The second and subsequent (x,y) values of my points are calculated by the following formulas.

• P₀ = (r,0)
• P₁ = (r(cos(θ), r(sin(θ))
• P₂ = (r(cos(2θ), r(sin(2θ))
• P₃ = (r(cos(3θ), r(sin(3θ))

For the "x" coordinate, I multiply the radius by the cosine of theta. The cosine of theta is "b" divided by "c". For the "y" coordinate, I multiply the radius by the sine of theta. The sine of theta is "a" divided by "c". In case its not obvious,  the P₂ and subsequent points need multiples of theta, so the formula has that minor adjustment.

To apply this information, I created a simple XML file with some elements that define the number of points to draw and some supporting information. I'll just focus on a single circle or level for now. If I can make one, I can make more really fast.

Next, I created a simple ASP.Net page that reads the XML file and outputs the necessary XAML that will allow Silverlight to draw the chart. My C# code iterates over the list of elements in the XML file can calculates the (X,Y) coordinates using the previous formulas. Just to keep things simple, I linked all the points to the center for now. Later on, it'll be easy enough to link other points together with lines as I have already calculated all of the necessary (X,Y) values. You can download my solution through the link at the bottom of the post.

This XAML block produces the following output in Silverlight shown below. As you can see, XAML is just a special XML syntax that is pretty easy to pick up.

To draw an ellipse shape, you add the <ellipse /> element. To draw a line on the canvas, you add an <line /> element. Of course there is tooling available to abstract these details away, but its important to have a fundamental understanding of the work going on under the covers.

Silverlight translates the XAML markup into pretty images as shown below.

If this "build" solution turns out to be a winner, we'll be able to apply nice gradients to the images, add click() events to the bubbles so more information is available through a pop-up and maybe even add the "wet floor" look the feels so cliche these days. These are easy enough in Silverlight, so I didn't spend anytime on the glossy extras just yet.

So, my entire exploration of the "build" option in Silverlight took about two hours, including the time spent with The Wife — time well spent, indeed. It'll be interesting to see how the evaluation of my solution options pan out. Can you tell I love my job?

Download the solution described in this blog post.

There are tons of blog entries like this one explaining how to get intellisense for WPF/e using the February 2007 CTP. The SDK for that release has a file named wpfe.xsd and you drop it into your VS.Net schema folder here:

C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas

I'm using the Silverlight 1.1 alpha bits, and the 1.1 SDK doesn't have a file named wpfe.xsd, so I was baffled for a minute. The Silverlight 1.1 SDK is laid out quite differently and comes in a handy zip file instead of a chunky MSI file like its predecessor.

Perhaps its just too early on a Sunday morning, but it took me a few minutes to realize that (A) the 1.1 SDK does have a file named Silverlight.xsd and (2) dropping Silverlight.xsd into my VS.Net schema folder does the trick. I'm going back to bed.

Yep. I had a feeling. My buddy, Kelly, just called fro MIX07 where they just announced the 1.0 beta and the 1.1 alpha of Silverlight today.

The 1.1 alpha has the sweet C# code inside it. I can't wait to get started. It also has ominous "for developers only" text next to the download link. Who else would come to this page?

For no particular reason, I decided to make this weekend a Silverlight Cram Session. Two of my fellow developers are on a plane (and perhaps have already started the party) at MIX07.

From everything that's been said in the prior two weeks, I expect some pretty sweet announcments at MIX. My friend, Erik, is also getting ramped up on Silverlight. He presented at Innotech and is giving v2 at the PDX Code Camp.

So, I downloaded the Feb 2007 Silverlight SDK and the Feb 2007 CTP Sample Pack. For some odd reason, I feel that they are already obsolete. However, they served their purpose quite well. The WPF/E Quickstart that comes with the SDK rocks - you should just block out some time and go through it. The author of this content did an spectacular job of explaining new technology in a way that just worked. I can't recall anything that was more well written. Its just brilliant.

I bit it off in 30 minute chunks and devoured the entire Quickstart samples on Saturday afternoon. I started writing each example manually, and then by the middle, I succumbed to the clip-board inheritence methodology.

It's weird to think back to Friday when I had just a conceptual idea of what WPF and Silverlight does from various podcasts on Channel9, Hanselminutes, DotNetRocks and DNRTV. Now, after doing it for several hours, I get it.

Sweet.

This is one of the biggest reasons to love my job; and boy, do I. Good stuff like this gives you the will to come back for more, day after day, week after week.

I'm still in a mode where NotePad2 or VS.Net 2005 is my best friend for XAML. Perhaps I'll shed that kinship and move on to Expressions later. For now, I'll just bask in the glory of learning something new and wondering how I can implement various types of media experiences with lines, rectangles, elipsi (pural?), polygons, polylines, and paths.