Building a Better User Experience

Asynchronous UI in WPF and Silverlight (and Windows Forms too)

2009-04-06T13:42:57.2290171-07:00

In a few hours I will be giving a new presentation to the Atlanta MS Professionals User Group. The topic for tonight is Asynchronous UI.

I will be talking about a number of common development patterns, along with discussion of the benefits and tradeoffs of each, and demos of the more mainstream approaches. I will also be covering a very simple and elegant solution that meets most async requirements – Jeffrey Richter’s AsyncEnumerator.

In advance of tonight’s presentation, I am posting my slides and code early. You can download them from this link. They may also become available as a download for members of the MSPros user group after the session.

Also, as a raffle prize, I am donating a one-year subscription to MSDN Premium with Visual Studio 2008 Team Suite Edition. If you were to buy it from Amazon, this subscription would cost over $10,000, so be sure to show up tonight if for nothing else than to win.

Excellent Free Sound Effects Resource

2008-06-19T11:17:48.4731938-07:00

I ran across SoundSnap today – what a great resource for finding free sound effects and music loops. For those participating in the GGMUG Silverlight Game Development Contest, this might come in handy for you, so please check it out!

http://www.soundsnap.com/

By the way, the GGMUG is a great venue to meet new people who are passionate about .NET development. If you live on the East side of town, and just can’t make it to those Alpharetta meetings held by the other user groups, then please check this new group out if you haven’t already.

A Simple Sound Effects Engine for Silverlight 2

2008-06-09T14:59:22.9864213-07:00

Audio support is all too often one of the last things a developer thinks of when it comes to building a user interface. Fortunately, Silverlight offers some basic building blocks that make it fairly trivial to add event-driven sounds to our applications. I have taken the built-in functionality one step further, and created a simple run-time audio engine that makes it even easier.

First, I will discuss the requirements that I had in mind when I created this engine. Second, I will discuss the ideal API for a complete solution. Third, I submit the simple effects engine that I developed in order to meet those requirements and API.

Sound Effects Engine Requirements

Must be able to play looping “background music” tracks.
Must be able to play smaller sound effects on demand.
Must support concurrent (and overlapping) sounds effects without interfering with already-playing audio.
Must adequately handle the possibility of download delays when pulling down external audio files.
Should cache audio files between playbacks.
Should allow serving of audio from high-bandwidth CDN such as Silverlight Streaming.

An Ideal Sound Effects API

Should be very approachable. If possible, only a single line of code to play any audio (similar to PlaySound() API).
Should support any formats supported by Silverlight.
Should be efficient.
Should offer download and playback completion callbacks (for chaining and synchronization).
Should support aggressive background pre-caching of audio files.

The SilverlightToolbox Solution

To address the simplicity requirements, this sound effects engine is implemented as a single static C# class that can be easily included into any Silverlight project. It can exist in a referenced class library, or can be linked directly into the main project.

To address looping background music, a single method SetBackgroundLoop() is supplied. This will begin playback of a single audio clip, and will automatically repeat it. Only one track can be played as the background loop – calling this method again will terminate the running track and start the new one. You can also pass String.Empty to stop all background music.

To address typical sound effect clips. two overloads of the PlaySoundEffect() method are supplied. The simpler of the two methods will simply play a clip once it has been downloaded. The extended version allows you to specify a callback for when the clip has been downloaded and started playing, and a second callback that can be used for notification that the clip has ended.

To address the scenario where multiple sound effects might be played at the same time, the engine internally maintains a queue of MediaElements. When a new sound needs to played, it pulls an unused element and puts it into service. Once the sound is finished, the element is returned to the queue. This allows Silverlight itself to handle media mixing, and by caching those MediaElements, it does so without placing undue stress on the environment.

To address the issue of download delays, the startedCallback and completedCallback parameters of PlaySoundEffect() were introduced.

To address caching of audio files, a WebClient is used (which in turn leverages the browser’s cache). Furthermore, the engine will reuse any downloaded file streams (and is smart enough to not re-queue the same file if it already queued for download).

By using a MediaElement for playback, audio tracks are automatically supported from streaming sources and Content Delivery Networks, and can be of any type supported by Silverlight.

To support chaining of audio effects, and to support synchronization of UI with audio, the PlaySoundEffect() method accepts callback events that are fired when the clip has been downloaded, and again when it has completed playback. To further help with UI synchronization, a second utility class is provided (DelayedAction) which provides a simple wrapper for BackgroundWorker that can be used to easily delay execution of a block of code after a specified amount of time.

To support pre-caching of audio files, the PreloadMedia() method can be used.

Typical usage:

In order for the sound effects engine to function properly, it must be provided with a top-level XAML container (MediaElement currently will not perform playback without a parent object). This is done by calling the Initialize() method, typically from your program’s startup code:

SoundEffects.Initialize(this.LayoutRoot);

After this has been done, background music can be played, and we can also queue up some sound effect clips for later:

SoundEffects.SetBackgroundLoop("cautious-path.wma");
SoundEffects.PreloadMedia("pop1.wma");

Then, at various points throughout the application, we can play the sound effect (for example, in response to a control event):

SoundEffects.PlaySoundEffect("pop1.wma");

If at any point we need to delay the sound effect slightly, we can control this be introducing a short delay:

DelayedAction.Execute(2.0, () => SoundEffects.PlaySoundEffect("pop1.wma"));

Complete Source Code for DelayedAction.cs:

                           1:
              using System;
                           2:
              using System.ComponentModel;
                           3:
              using System.Threading;
                           4:  
                           5:
              namespace Wintellect.SilverlightToolbox
                           6: {
                           7:
              public
              class DelayedAction
                           8: {
                           9:
              class DelayedCallback
                           10: {
                           11:
              public TimeSpan
Delay { get; set; }
                           12:
              public Action
Callback { get; set; }
                           13: }
                           14:  
                           15:
              public
              static
              void Execute(double seconds,
Action callback)
                           16: {
                           17: BackgroundWorker
Delay = new BackgroundWorker();
                           18: Delay.DoWork
+= (s, e) =>
                           19: {
                           20: DelayedCallback
DelayCallback = (DelayedCallback)e.Argument;
                           21: Thread.Sleep(DelayCallback.Delay);
                           22: e.Result
= DelayCallback.Callback;
                           23: };
                           24: Delay.RunWorkerCompleted
+= (s, e) =>
                           25: {
                           26: Action
Callback = e.Result as Action;
                           27: Callback();
                           28: };
                           29: Delay.RunWorkerAsync(new DelayedCallback
                           30: {
                           31: Delay
= TimeSpan.FromSeconds(seconds),
                           32: Callback
= callback
                           33: });
                           34: }
                           35: }
                           36: }
          

Complete Source Code for SoundEffects.cs:

                           1:
              using System;
                           2:
              using System.Collections.Generic;
                           3:
              using System.IO;
                           4:
              using System.Net;
                           5:
              using System.Windows;
                           6:
              using System.Windows.Controls;
                           7:
              using System.Windows.Media;
                           8:  
                           9:
              namespace Wintellect.SilverlightToolbox
                           10: {
                           11:
              public
              static
              class SoundEffects
                           12: {
                           13:
              static Panel
Root;
                           14:
              static MediaElement
BackgroundLoop = new MediaElement();
                           15:
              static WebClient
EffectDownloader = new WebClient();
                           16:  
                           17:
              static Queue
AvailableSoundEffectGenerators = new Queue();
                           18:
              static Dictionary<string,
Stream> DownloadedEffects = new Dictionary<string,
Stream>();
                           19:
              static Queue<string>
PendingDownloads = new Queue<string>();
                           20:
              static Queue
PendingEffects = new Queue();
                           21:
              static Dictionary PendingStartupCallbacks = new Dictionary();
                           22:
              static Dictionary PendingCompletionCallbacks = new Dictionary();
                           23:  
                           24:
              enum TargetType
                           25: {
                           26: BackgroundMusic,
                           27: SoundEffect,
                           28: }
                           29:  
                           30:
              class QueuedEffect
                           31: {
                           32:
              public
              string MediaName
{ get; set; }
                           33:
              public TargetType
Target { get; set; }
                           34:
              public Action
StartedCallback { get; set; }
                           35:
              public Action
CompletedCallback { get; set; }
                           36: }
                           37:  
                           38:
              public
              static
              void Initialize(Panel
root)
                           39: {
                           40: Root
= root;
                           41: InitializeTarget(root,
BackgroundLoop);
                           42: EffectDownloader.OpenReadCompleted
+= (s, e) =>
                           43: {
                           44: DownloadedEffects[(string)e.UserState]
= e.Result;
                           45: DownloadEffects();
                           46: PlayEffect();
                           47: };
                           48: }
                           49:  
                           50:
              static
              void DownloadEffects()
                           51: {
                           52:
              if (PendingDownloads.Count
== 0)
                           53:
              return;
                           54:
              string MediaName
= PendingDownloads.Dequeue();
                           55: EffectDownloader.OpenReadAsync(new Uri(MediaName,
UriKind.Relative), MediaName);
                           56: }
                           57:  
                           58:
              static
              void InitializeTarget(Panel
root, MediaElement target)
                           59: {
                           60: target.Width
= 0;
                           61: target.Height
= 0;
                           62: target.Visibility
= Visibility.Collapsed;
                           63: root.Children.Add(target);
                           64: target.AutoPlay
= false;
                           65: target.MediaOpened
+= (s, e) =>
                           66: {
                           67: MediaElement
Target = s as MediaElement;
                           68: Target.Volume
= 0.35;
                           69: Target.Play();
                           70:
              if (PendingStartupCallbacks.ContainsKey(Target))
                           71: {
                           72: Target.Dispatcher.BeginInvoke(PendingStartupCallbacks[Target]);
                           73: PendingStartupCallbacks.Remove(Target);
                           74: }
                           75: };
                           76: target.MediaEnded
+= (s, e) =>
                           77: {
                           78: MediaElement
Target = s as MediaElement;
                           79: Target.Stop();
                           80:
              if (s
== BackgroundLoop)
                           81: Target.Play();
                           82:
              else
            
                           83: AvailableSoundEffectGenerators.Enqueue(Target);
                           84:  
                           85:
              if (PendingCompletionCallbacks.ContainsKey(Target))
                           86: {
                           87: Target.Dispatcher.BeginInvoke(PendingCompletionCallbacks[Target]);
                           88: PendingCompletionCallbacks.Remove(Target);
                           89: }
                           90: };
                           91: }
                           92:  
                           93:
              static MediaElement
GetUnusedEffectGenerator()
                           94: {
                           95:
              if (AvailableSoundEffectGenerators.Count
> 0)
                           96:
              return AvailableSoundEffectGenerators.Dequeue();
                           97:
              else
            
                           98: {
                           99: MediaElement
Result = new MediaElement();
                           100: InitializeTarget(Root,
Result);
                           101:
              return Result;
                           102: }
                           103: }
                           104:  
                           105:
              static
              void PlayEffect()
                           106: {
                           107:
              lock (PendingEffects)
                           108: {
                           109:
              if (PendingEffects.Count
== 0)
                           110:
              return;
                           111: QueuedEffect
Effect = PendingEffects.Dequeue();
                           112:
              if (DownloadedEffects.ContainsKey(Effect.MediaName))
                           113: {
                           114: MediaElement
TargetElement = null;
                           115:
              switch (Effect.Target)
                           116: {
                           117:
              case TargetType.BackgroundMusic:
                           118: {
TargetElement = BackgroundLoop; break; }
                           119:
              case TargetType.SoundEffect:
                           120: {
TargetElement = GetUnusedEffectGenerator(); break;
}
                           121: }
                           122:
              if (Effect.StartedCallback
!= null)
                           123: PendingStartupCallbacks.Add(TargetElement,
Effect.StartedCallback);
                           124:
              if (Effect.CompletedCallback
!= null)
                           125: PendingCompletionCallbacks.Add(TargetElement,
Effect.CompletedCallback);
                           126: TargetElement.SetSource(DownloadedEffects[Effect.MediaName]);
                           127: }
                           128:
              else
            
                           129: {
                           130: PendingEffects.Enqueue(Effect);
                           131: }
                           132: }
                           133: }
                           134:  
                           135:
              static
              void PlaySound(TargetType
target, string mediaName, Action startedCallback,
Action completedCallback)
                           136: {
                           137:
              if (target
== TargetType.BackgroundMusic)
                           138:
              if (BackgroundLoop.CurrentState
!= MediaElementState.Stopped)
                           139: BackgroundLoop.Stop();
                           140:  
                           141:
              if (mediaName
!= String.Empty)
                           142: {
                           143:
              lock (PendingEffects)
                           144: {
                           145:
              if (!DownloadedEffects.ContainsKey(mediaName))
                           146: {
                           147: PendingDownloads.Enqueue(mediaName);
                           148: }
                           149: PendingEffects.Enqueue(new QueuedEffect
                           150: {
                           151: MediaName
= mediaName,
                           152: Target
= target,
                           153: StartedCallback
= startedCallback,
                           154: CompletedCallback
= completedCallback
                           155: });
                           156: }
                           157: DownloadEffects();
                           158: PlayEffect();
                           159: }
                           160: }
                           161:  
                           162:
              public
              static
              void SetBackgroundLoop(string mediaName)
                           163: {
                           164: PlaySound(TargetType.BackgroundMusic,
mediaName, null, null);
                           165: }
                           166:  
                           167:
              public
              static
              void PlaySoundEffect(string effectName)
                           168: {
                           169: PlaySound(TargetType.SoundEffect,
effectName, null, null);
                           170: }
                           171:  
                           172:
              public
              static
              void PlaySoundEffect(string effectName,
Action startedCallback, Action completedCallback)
                           173: {
                           174: PlaySound(TargetType.SoundEffect,
effectName, startedCallback, completedCallback);
                           175: }
                           176:  
                           177:
              public
              static
              void PreloadMedia(string mediaName)
                           178: {
                           179:
              if (!DownloadedEffects.ContainsKey(mediaName))
                           180: {
                           181: PendingDownloads.Enqueue(mediaName);
                           182: DownloadEffects();
                           183: }
                           184: }
                           185: }
                           186: }
          

Gem Blaster entered into "RIA Run" contest

2008-05-31T22:30:38.9418884-07:00

As a follow-up to the previous post, I have entered Gem Blaster into a game development contest held by the Microsoft RIA Development Center Portal web site. I am happy to say that it has made it into the Finalists group of 6 games that are being showcased for the next few weeks on the RIA web site:

http://www.devx.com/RIA/Door/37728

The final judging is done based on popularity among visitors there. They basically track number of visits to each game, as well as how long people stay there, whether they come back and revisit, etc. So if you like it, please pass the link around to your friends and ask them to check it out too.

Gem Blaster updated and enhanced for Silverlight 2

2008-05-13T14:37:56.7273941-07:00

I finally got around to updating my Gem Blaster game from Silverlight 1.1 alpha to the 2.0 beta bits. Since there were very heavy changes to the control model and other aspects of the managed runtime, I had to rewrite a lot of the original code (this was fully expected by the way). While I was in there, I also took the opportunity to add a number of other new features such as a simple sound FX engine, a self-playing "demo mode", and a bunch of other improvements.

I intend to update CodePlex soon with the new source code, but for now you can try out the game here (embedded below). It is hosted on the Silverlight Streaming service, so feel free to pass the link around (it won't kill *my* servers). If you like, you can also directly embed the game using the following embeddable HTML snippet:

"http://silverlight.services.live.com/invoke/5683/GemBlasterV2/iframe.html" scrolling="no" frameborder="0" style="width:800px;
height:625px">

Now that this project has been updated for Silverlight 2, I can move on to my next game project idea which (I am hoping) should really push the runtime to its limits :)

Awesome tool for Media Center - Lifextender

2008-04-03T15:46:12.2060492-07:00

I have been running a Media Center PC as the hub of my home media network for a few years now - first MCE 2005 and then VMC (Vista Media Center) once it became available. In fact, I am about to install my 3rd XBOX 360 in my house (I use those as media extenders wherever I have a TV). I love my media setup - and more importantly - so does my wife.

I pretty much just let things run and don't think too often about it... but this week I ran across this completely awesome application which makes my setup even better... Lifextender.

Lifextender has a very simple premise, which is stated on the home page of it's website: "Lifextender is a dead-simple commercial-removal application". The program basically runs in the background where it monitors your system for new recordings. It then analyzes those recordings and removes any commercial pods that it finds. It is pretty good - I would say the success rate is about 95%. When it makes it mistake, it seems to always err on the side of caution and has never removed something I didn't want it to. The modified recordings are about 75% of the size of of the originals - which means it is literally giving me back 15 minutes of my life for every "hour" of commercial-infested programming that I watch.

And oh did I mention - It's also FREE (free as in beer)!

Atlanta Code Camp 2008

2008-03-02T19:16:11.6642668-07:00

We are happy to announce that the 2008 Atlanta Code Camp is coming up soon. We have confirmed the event date of Saturday, March 29th, and it will be held at the Devry University campus in Decatur (this is the same place as last year).

We are actively seeking speaker submissions for the event. You can get the speaker form from our speakers page. We are also looking for volunteers to help on the day of the event. If you are interested in volunteering, please sign up here.

Attendee Registration is not open yet, but check back often because it is likely to fill up quickly once opened.

Speaking at the Atlanta Cutting Edge / Atlanta MS Professionals Tomorrow

2008-03-02T19:06:33.3334683-07:00

Monday night, March 3rd (tomorrow), I am lined up to present on the topic of "Surviving the Multi-core Revolution". This presentation focuses on the concepts and skills needed to bring scalability and performance to server-based processing.

Heading to MIX this year

2008-02-27T19:11:59.0355084-07:00

This year I will be heading to MIX in Vegas along with thousands of other UX enthusiasts. I have always had a deep interest in all things related to User Experience, and for the past couple years have wished I could attend a MIX event, and finally this year I get to go!

What will I be doing at MIX? Well I will certainly be soaking up any and all information related to Silverlight and WPF. I will also stick my head into some of the designer-oriented sessions. It's a good thing to see how the other half lives. In between sessions I am hoping to meet all kinds of people who are also passionate about UX. And of course this is Vegas, so I am sure I will lose a few dollars in a casino at some point and drink more booze than is healthy.

Joining me will be a number of Wintellectuals including Steve Porter, Sergio Loscialo, Rik Robinson, Sara Faatz, and Todd Fine. I know of a number of other local Atlanta folks will be making the trip as well: Sean Gerety, Doug Turnure, and Shawn Wildermuth to name a few. Are you going too? If so, let me know and we can get together for a cup of coffee or a beer.

Slides and Code from Alabama Code Camp 6

2008-02-24T17:20:18.0676317-07:00

I have uploaded my slides and associated source code that was demonstrated, for the benefit of those who were not able to attend my session, or for those who have asked for copies of the code and slides.

I understand that these will be made available from the Alabama Code Camp web site, but I am also making them available for download from my server as well: http://www.mindfusioncorp.com/weblog/content/binary/AlabamaCC6-Silverlight-KeithRome.zip

Heading to Alabama Code Camp 6

2008-02-22T09:15:08.7914793-07:00

I am packing my bags and heading out to Huntsville AL tonight. In the morning I will be kicking off the Silverlight Track at the Alabama Code Camp with a presentation titled "Tapping into the power of Silverlight 1.0". My goal with this presentation is to show that although 2.0 will indeed be a phenomenal release of the Silverlight platform, the currently shipping version is still very powerful and offers a tremendous amount of value.

If you are planning on attending this Code Camp event, please stop by and listen in!