1. Display a bitmap on screen.
2. Let the user scribble something on the image using a pen, mouse or touch.
3. Display the scribble while it is being made.
4. Let the user save a new bitmap with the scribble overlayed on top of the original.

1 through 3 were fairly easy to implement. In my case, a canvas with a bitmap background, handling pointer events and drawing some lines based on pointer positions being reported through the WinRT’s pointer API’s – that was it. It was #4 that required some work.

But before we get there – let’s take a look at the easy parts (#1,#2 and #3) . The XAML is trivial.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Canvas Height="535" Width="800" x:Name="inkCanvas"
            PointerMoved="inkCanvas_PointerMoved_1" 
            PointerPressed="inkCanvas_PointerPressed_1" 
            PointerReleased="inkCanvas_PointerReleased_1">
    <Canvas.Background>
      <ImageBrush ImageSource="/Assets/ChichenItza.jpg"/>
    </Canvas.Background>
  </Canvas>
  <Button x:Name="btnSave" Content="Save" 
          Tapped="btnSave_Tapped_1" Grid.Row="1" 
          HorizontalAlignment="Center" Margin="0,0,0,75"/>
</Grid>

The canvas with the ImageBrush as the background served as the “scribble” area. To keep things simple for this post, I just included the image in the app as a resource. The Button when tapped, initiates code to save the composite bitmap off.

Point _previousPosition = default(Point);
SolidColorBrush _stroke = new SolidColorBrush(Colors.Red);
bool _pressed = false;

private void inkCanvas_PointerPressed_1(object sender,
  PointerRoutedEventArgs e)
{
  _previousPosition = e.GetCurrentPoint(inkCanvas).Position;  
  _pressed = true;
}

private void inkCanvas_PointerReleased_1(object sender,
  PointerRoutedEventArgs e)
{
  if (_pressed)
    _pressed = false;
}

private void inkCanvas_PointerMoved_1(object sender,
  PointerRoutedEventArgs e)
{
  if (!_pressed) return;
  var positions = e.GetIntermediatePoints(inkCanvas).
    Select(ppt => ppt.Position);

  foreach (Point pt in positions)
  {
        
    inkCanvas.Children.Add(
      new Line() { X1 = _previousPosition.X, 
        Y1 = _previousPosition.Y, 
        X2 = pt.X, 
        Y2 = pt.Y, 
        Stroke = _stroke, 
        StrokeThickness = 2 } 
      );
    _previousPosition = pt;
  } 
}

Listed above is all the code we need to track the pointer and render the scribble. I start tracking every time the pointer is pressed down, and stop every time the pointer is released – keeping track using the _pressed variable. While the pointer is pressed, for each PointerMoved event,  I get all the positions that the pointer has traversed through between the last occurrence of this event and this one(reported through the GetIntermediatePoints() API), and draw a Line connecting each pair of positions starting with the last position that the pointer was at before this PointerMoved event. The _previousPosition variable keeps a track of the last position. In case you are wondering – GetIntermediatePoints() returns a collection of PointerPoint instances – so the Select() is to project them to a collection of Point instances.

Image below shows what’s rendered on screen.

Now on to the real issue at hand(#4) -  how to save this as a single bitmap.

Before we dive into the API’s let’s talk a little bit about bitmaps. A bitmap is essentially a matrix of pixels – so a  bitmap with a width of 400 and a height of 300 can be thought of as a matrix with 400 columns and 300 rows with each cell(row/column intersection) representing a pixel. Each pixel in turn represents a resultant color as some combination of the three basic colors (Blue, Green and Red) and an alpha channel(transparency) value. So in a 8 bit byte representation, each pixel can be thought of as a 4 byte integer with each of the 3 bytes representing a color value (from 0 – 255) and the 4th byte representing alpha (again 0 – 255). The order of these bytes can vary – so the bytes in a pixel could for instance be in the  BGRA order or the RGBA order – something you need to take into account when manipulating images.

Another thing to be aware of is that the pixel data in a bitmap can often be represented as a flattened array of pixels. The way this works in WinRT is by taking each row of pixels (starting with the topmost) and concatenating them together. So if we had a 3 x 3 bitmap (yes that’s mostly useless ) like so:

when flattened, the array would be [ P11,P12,P13,P21,P22,P23,P31,P32,P33].

Armed with this knowledge, I applied the following basic thinking to solve the problem – record all the positions that the pointer traverses. When the user tries to save, get the raw pixels for the background image, change the pixels that match the coordinates for the recorded pointer positions to a color value of your choice (like the red stroke I used to render) and then save the resultant bitmap – and presto !

For raw pixel manipulation, WinRT provides a BitmapDecoder and a BitmapEncoder type that prove out to be very useful. BitmapDecoder can take a bitmap and provide you with the array of pixels (flattened like we discussed before) for the bitmap, BitmapEncoder can accept an array of pixels and save it out as a bitmap and both types can work with most of the industry standard image compression schemes (JPEG, PNG, TIFF, BMP etc.).

[NOTE : These types have a fairly rich API and can be useful in many ways when it comes to image handling. I will only discuss the portions pertaining to this post – I do intend to detail their full functionality out in a future post soon. In the meantime, do read about them at the Windows 8 Dev Center].

So I changed my code (changes in bold) as below:

Point _previousPosition = default(Point);
SolidColorBrush _stroke = new SolidColorBrush(Colors.Red);
List<List<Point>> _allPoints = new List<List<Point>>();
bool _pressed = false;

private void inkCanvas_PointerMoved_1(object sender, 
  PointerRoutedEventArgs e)
{
  if (!_pressed) return;
  var positions = e.GetIntermediatePoints(inkCanvas).
    Select(ppt => ppt.Position);
  foreach (Point pt in positions)
  {
         
    inkCanvas.Children.Add(
      new Line() { 
        X1 = _previousPosition.X, 
        Y1 = _previousPosition.Y, 
        X2 = pt.X, Y2 = pt.Y, 
        Stroke = _stroke, 
        StrokeThickness = 2 } 
      );
    _previousPosition = pt;
  }
  _allPoints.Last().AddRange(positions);
}

private void inkCanvas_PointerPressed_1(object sender, 
  PointerRoutedEventArgs e)
{
  _previousPosition = e.GetCurrentPoint(inkCanvas).Position;
  _allPoints.Add(new List<Point>());
  _allPoints.Last().Add(_previousPosition);

      
  _pressed = true;
}

private async void inkCanvas_PointerReleased_1(object sender, 
  PointerRoutedEventArgs e)
{
  if (_pressed)
    _pressed = false;
}

private async void SaveBitmapAsync()
{
  List<byte> _pixelData = null;
  //convert the source bitmap to a pixel array
  var srcfile = await StorageFile.GetFileFromApplicationUriAsync(
    new Uri("ms-appx:///assets/ChichenItza.jpg"));

  BitmapDecoder decoder = null;
  using (IRandomAccessStream stm = 
    await srcfile.OpenAsync(FileAccessMode.Read))
  {
    decoder = await BitmapDecoder.CreateAsync(
      BitmapDecoder.JpegDecoderId, stm);
    _pixelData = (await decoder.GetPixelDataAsync()).
        DetachPixelData().ToList();
  }; 

  //do our pixel manipulation here

  //write it back
  var destfile = await KnownFolders.PicturesLibrary.CreateFileAsync(
    string.Format("{0}_signature.jpg", 
    DateTimeOffset.Now.ToString("MM_dd_yy_hh_mm_ss")), 
    CreationCollisionOption.ReplaceExisting);
  using (IRandomAccessStream stm = 
    await destfile.OpenAsync(FileAccessMode.ReadWrite))
  {
    BitmapEncoder encoder = await BitmapEncoder.CreateAsync(
      BitmapEncoder.JpegEncoderId, stm);
    encoder.SetPixelData(
      decoder.BitmapPixelFormat, 
      BitmapAlphaMode.Straight, 
      800, 535, decoder.DpiX, decoder.DpiY, 
      _pixelData.ToArray());

    await encoder.FlushAsync();
  };
}
 
private async void btnSave_Tapped_1(object sender, TappedRoutedEventArgs e)
{
  await SaveBitmapAsync();
} 

Every time the user lifts the pointer we can consider a “stroke” to be completed. So as the pointer is pressed I create a new List<Point> and add it to the tail of a List<List<Point>> representing my collection of strokes, and as the pointer  moves, I record the positions in the newly created list.

The SaveBitmapAsync() method is what gets invoked when the user taps the Save button. In there I start by creating a new BitmapDecoder (note the static creation method), load the image StorageFile (stored as a resource in my app), open the file to a random access stream, and use the decoder to get the pixel array (call GetPixelDataAsync() that returns a PixelDataProvider which in turn returns the flattened pixel array through a call to DetachPixelData()).   Once my pixel manipulation is done, I create a BitmapEncoder (again a static factory method to create), create a file (name it with the current date/time to avoid name collision) in the local Pictures folder, and save the manipulated pixel array into the file (actually a random access writeable stream obtained from the file) using the same pixel format and DPI settings as obtained for the original image via the decoder.

Now all that was left was to color the pixels based on my recorded pointer positions. I will not bore you with all my trials here, but I soon realized that there was an error in my basic thinking. Recording the pointer positions and applying them was not enough – since the WinRT pointer API’s do not report every pixel your pointer was traversing through ( and for good reasons since a) the UI thread will simply not be able to keep up with it and b) you simply do not need that kind of accuracy for any app specific input targeting). The image below shows the result of this erroneous thinking, in the faint dotted representation of my original scribble – since I only plotted the recorded pointer positions.

If you are wondering why we do not see this in the first image – recall that when rendering on screen, we actually join the recorded positions with a Line – so any gaps are covered. So that brings me to the last piece of the puzzle. I needed to do in saving what I was doing in rendering(by drawing those lines). To do that I needed to interpolate extra points between each pair of recorded points to get enough “density” such that the scribble no longer looked that disjointed, and I decided to use linear interpolation.

[Note : Methods of interpolation used in the general problem of curve fitting vary in degrees of error (since they are in fact all approximations), and linear interpolation is considered to be a relatively less accurate method. However it is the easiest to implement, and since the difference between the boundary points that we were interpolating for were very small to begin with, linear interpolation seemed to work well in my case. You may consider advanced Interpolation methods (like spline interpolation) if you feel like being mathematically adventurous. ]

private void Interpolate(Point pFrom, Point pTo, 
  ref List<Point> results)
{
  var xDiff = Math.Abs((pTo.X - pFrom.X));
  var yDiff = Math.Abs((pTo.Y - pFrom.Y));

  if (xDiff < 1 && yDiff < 1) return; //we stop 

  if (yDiff > xDiff) //interpolate along the x-axis
  {
    Point p0 = pFrom.Y < pTo.Y ? pFrom : pTo;
    Point p1 = pFrom.Y < pTo.Y ? pTo : pFrom;

    double y = (yDiff / 2) + Math.Min(pFrom.Y, pTo.Y);
    Point newPt = new Point(p0.X + (y - p0.Y) * 
      ((p1.X - p0.X) / (p1.Y - p0.Y)), y);
    results.Add(newPt);
    Interpolate(pFrom, newPt, ref results);
    Interpolate(newPt, pTo, ref results);
  }
  else //interpolate along y-axis
  {
    Point p0 = pFrom.X < pTo.X ? pFrom : pTo;
    Point p1 = pFrom.X < pTo.X ? pTo : pFrom;

    double x = (xDiff / 2) + Math.Min(pFrom.X, pTo.X);
    Point newPt = new Point(x, p0.Y + (x - p0.X) * 
      ((p1.Y - p0.Y) / (p1.X - p0.X)));
    results.Add(newPt);
    Interpolate(pFrom, newPt, ref results);
    Interpolate(newPt, pTo, ref results);
  }
}

The Interpolate() method takes in two points and recursively interpolates points in between. At each recursion level it checks the distance between the points, and interpolates along the axis that will result in the largest sample size. It also stops recursion when the points in question have a difference of less than 1 logical pixel along both coordinates. To understand this better, please visit the hyperlink earlier on linear interpolation.

Now my SaveBitmapAsync() method looks like this:

private async void SaveBitmapAsync()
{
  List<byte> _pixelData = null;
  //convert the source bitmap to a pixel array
  var srcfile = await StorageFile.GetFileFromApplicationUriAsync(
    new Uri("ms-appx:///assets/ChichenItza.jpg"));

  BitmapDecoder decoder = null;
  using (IRandomAccessStream stm = 
    await srcfile.OpenAsync(FileAccessMode.Read))
  {
    decoder = await BitmapDecoder.CreateAsync(
      BitmapDecoder.JpegDecoderId, stm);
    _pixelData = (await decoder.GetPixelDataAsync()).
        DetachPixelData().ToList();
  }; 

  //do our pixel manipulation here
  List<Point> all = _allPoints.Select(stroke =>
  {
    var interpolationresults = stroke.SelectMany((pt, idx) =>
    {

      List<Point> result = new List<Point>();
      if (idx + 1 == stroke.Count) return result;
      Interpolate(stroke[idx], stroke[idx + 1], ref result);
      return result;
    }).ToList();
    return stroke.Concat(interpolationresults).ToList();
  }).SelectMany(list => list).ToList();



  foreach (Point p in all)
  {
    int idx = (int)(800 * ((int)p.Y - 1) + p.X) * 4;
    _pixelData[idx] = Colors.Red.B;
    _pixelData[idx + 1] = Colors.Red.G;
    _pixelData[idx + 2] = Colors.Red.R;
    _pixelData[idx + 3] = Colors.Red.A;
  }
  //write it back
  var destfile = await KnownFolders.PicturesLibrary.CreateFileAsync(
    string.Format("{0}_signature.jpg", 
    DateTimeOffset.Now.ToString("MM_dd_yy_hh_mm_ss")), 
    CreationCollisionOption.ReplaceExisting);
  using (IRandomAccessStream stm = 
    await destfile.OpenAsync(FileAccessMode.ReadWrite))
  {
    BitmapEncoder encoder = await BitmapEncoder.CreateAsync(
      BitmapEncoder.JpegEncoderId, stm);
    encoder.SetPixelData(
      decoder.BitmapPixelFormat, 
      BitmapAlphaMode.Straight, 
      800, 535, decoder.DpiX, decoder.DpiY, 
      _pixelData.ToArray());

    await encoder.FlushAsync();
  };
}

Note the portion in bold. We run a query through our collection of strokes (with each stroke being a collection of Points), and for each pair of points in each stroke, we interpolate intermediate points using the Interpolate() method. We finally create a flattened collection of all the points – including the points originally recorded, and the points we interpolated. Now for each of these Points, we find the corresponding pixel in the flattened pixel array (note how we find the index – since we know the width of the image to be 800 and each pixel is actually 4 bytes), and we change the 4 bytes representing the pixel to reflect the color Red (using a BGRA order). Here is a final saved image:

Better – right ? You may still notice the stroke to be a little thinner – that is because while rendering I was using a stroke thickness of 2. If you want to implement a stroke thickness greater than 1,you can change the pixel manipulation code to color immediately neighboring pixels as well.

Note that this solution is still fairly immature and has a lot of room for improvement. The pixel manipulation and interpolation code is embarrassingly parallelizable, and should be. You might also consider implementing this in C++ (and use  C++ AMP) to not only parallelize but do so on the GPU. Also handling stroke thicknesses, higher resolution images (more processing –>more reason to parallelize) etc. can add to the complexity.

But hopefully this will give you a starting point if you face a similar problem. More next time !!

- Jit

It has been a long hiatus from blogging for me. So here goes another attempt to restart the process.

Quite a bit has changed in the past few years, but a lot remains unchanged. I am still at Microsoft, still working for Developer Evangelism and still loving every minute of it. Technologically speaking though, my focus has shifted quite a bit. When I made the last entry to this blog, I was focused on digital media technologies and solutions, specifically client side video centric experiences utilizing technologies like Silverlight and video streaming using Smooth Streaming. While my interest in video continues, for the past 18 months or so I have been able to go back to working with and evangelizing my original “love” – the Windows Client platform, related developer technologies and application design and development.

So for the next period of activity on this blog (for however long that might continue), I will be sharing my experiences of working with Windows 8, especially related to developing Metro style applications. I am more conversant with XAML,C# and C++ than I am with the HTML5, JavaScript family of technologies – so when it is about code (which it is mostly going to be) – my samples will be using the former set of languages and markup syntax.

I look forward to sharing with you all as I myself learn more about this wonderful new platform !!

Enjoy,

- Jit

If interested please send your resume to tfrench@origindigital.com directly. Please do not send them to me, or respond to this entry with your resume.

The WMMetadataReader class (in WMMetadataReader.h) now has a public method like below:

System::Collections::Generic::List<SMPTETimeCodeRange^>^ GetSMPTERanges(String^ FilePath, int StreamIndex);

This allows you to explicitly get the time code ranges, for a specific video stream in a WMV file. If you want all the metadata, the GetStreamMetadata() method on the same class, now also calls the above method internally, and returns the time code ranges packaged in the WMStream.TimeCodeRanges property. The SMPTETimeCodeRange type is shown below.

Note that the RangeNumber property stores the index of the range, in case the file has multiple time code ranges. The Start and the End property are of type string, and exposes the time code in the standard “hh:mm:ss:ff” format. To manipulate these time codes, convert them to absolute times or to otherwise work with them, you can use the very excellent TimeCode class from John Deutscher.

I have uploaded a new zip with the modified code here.

Rob and I worked hard on updating this for SL 3. If you do happen to purchase it, please let us know if you like the format, the topics and any thoughts on how we can improve. We are about to start early work on the next edition for Silverlight 4 – your feedback will be highly appreciated.

Enjoy!!

The Format SDK exposes its functionality in COM and requires you to write your code in C++. The nice thing about Visual C++, is that the C++ compiler allows you to author mixed mode assemblies i.e. one assembly containing both CLR types as well as code that is completely unmanaged, both authored in C++. Using this feature you could author a set of CLR targeted wrappers in C++ that interact with the Format SDK to expose select metadata to the managed world. Once you are done with that step, you can host this code in a Windows Service, a WCF service or some other form of server side component accessible over HTTP/TCP, and then have your Silverlight code interact with that service to get the metadata over the wire.

Attached is some code that I authored recently, that allows you to get started in that direction. You will find the code here.

In the rest of the post I will give you some details on the code. To better understand (and modify if necessary) the source, you may need some familiarity with authoring managed code with C++, the basics of COM in C++, and the Windows Media Format SDK.

Windows Media Files contain a lot of information in the header. The requests I have most often encountered are for the following:

• File Level Metadata Attributes and Per Stream Metadata Attributes: A Windows Media file can contain multiple streams of different types including video streams, audio streams, text streams etc. The header may contain metadata attributes defined for the entire file, as well for each individual stream in the file.
• Frame Rate for the video streams in the file
• Embedded SMPTE Timecode ranges for the video streams

In the attached solution, you will find three projects – the WMShim and the WMShimManagedClasses projects produce assemblies that you will need to reference in your code to extract the metadata from the file. The third project named WMShimTestHarness contains a simple WPF application that shows you how to extract metadata using the classes in the previous two assemblies.

The class diagram below shows  the managed types that I use to define the metadata that the C++ code extracts (these types are defined in C#, in the MetadataDataContracts.cs file, in the WMShimManagedClasses project). Since the goal is to extract the metadata and have it be accessible remotely, these types are defined as data contracts to make them easily serializable.

The WMMetadataAttribute type defines a single metadata attribute and its value. The Name property contains the actual Windows Media metadata field name, and Label (where possible) contains a more friendly name explaining the field. The PropertyType contains string name for the CLR type that is best suited to represent the Value in managed code, and the Unit (where applicable) contains a string literal defining the unit of measurement(like bps for bitrate).

The WMStream type defines a stream, and the Attributes property returns a collection of WMMetadataAttribute instances for a specific stream or at the file level.

• StreamType  contains one of the following values : “File”, “Video”, “Audio”, “Text”, “Script”, “Image”, “File Transfer” or “Unknown”. Each of these string literals are meant to represent a valid media type or subtype as described by the Format SDK (see http://msdn.microsoft.com/en-us/library/dd757532(VS.85).aspx ) that can be used to define a stream type. The exceptions are the values “File” used to describe file level metadata (it is not actually a stream, I just reuse the WMStream type – too lazy to build another type to represent a file) and the value “Unknown” in case there is some weird stuff going on.
• FrameRate & TimeCodeRanges are meaningful only for video streams
• For file level metadata BitRate, FrameRate, TimeCodeRanges are not meaningful, and StreamIndex and StreamNumber are set to 0.

The primary C++ class that is central to the extraction functionality is named WMMetadataReader, defined in WMMetadataReader.h in the WMShim project.

public ref class WMMetadataReader
  {
  public:
    WMMetadataReader(void){} 
    /** 
    Get the number of streams in a media file
    FilePath: Absolute file path 
    Return: Stream count
    **/
    unsigned int GetStreamCount(String^ MediaFilePath);
    /** 
    Get the metadata for a specific stream in a media file
    FilePath: Absolute file path
    RFCLangIdentifier: string literal for the language identifier - "en-us" etc.
    StreamIdx: 1 based Stream Index, Pass 0 for file level metadata
    Return: WMStream instance
    **/
    WMStream^ GetStreamMetadata(String^ FilePath,String^ RFCLangIdentifier, unsigned int StreamIdx);
    /** 
    Get the framerate for a video stream
    FilePath: Absolute file path 
    StreamIdx: 1 based Stream Index
    Return: Frame rate, 0 for non-video streams
    **/
    double GetFrameRate(String^ FilePath, unsigned int StreamIndex);
  }

The code above shows the public methods on WMMetadataReader- the code comments will tell you what each method does. The easiest way to extract metadata for a media file is to call the GetStreamCount() method to get the # of streams, and then call GetStreamMetadata() once for each Stream. Remember to pass a 1 based StreamIdx value for the actual streams, and pass 0 to get the file level metadata. The C# code snippet below will give you an idea – as we loop through the streams and get the metadata for each, we just add them to a List named streams, that we will use eventually else where in our code.

WMShim.WMMetadataReader rdr = new WMShim.WMMetadataReader();
int StreamCount = (int)rdr.GetStreamCount(FilePath);
List<WMStream> streams = new List<WMStream>(StreamCount + 1);
for (int idx = 0; idx <= StreamCount; idx++)
{
  streams.Add(rdr.GetStreamMetadata(ofd.FileName, "en-us", (uint)idx));
}

Below are screen shots from the WPF test harness that is also in the attached code. The above C# code snippet is actually from that app. The two screen shot shows the video stream metadata and the file level metadata from a wmv file named Dust_To_Glory.wmv.

If you look through the code you will notice that I do not supply any code to extract SMPTE Timecode ranges yet. I am still finalizing that code – I will have another post with an attachment here in a few days.

A few notes about the attached code:

- The code was built on 64 bit Windows 7 using Visual Studio 2008

- The WMShim C++ project was built targeting the x64 platform. So do make sure that you have the x64 compilers and tools for C++ installed as a part of your VS 2008 installation. If you want to retarget WMShim to a 32 bit platform instead, just change the platform to Win32 in your Project|Properties dialog and recompile.

- If you want to run the code on Windows Server, you will need to enable the “Desktop Experience” feature. This puts the necessary windows media components on the server (they are not there by default – unlike the Windows client desktop OS platforms).

Until the next post then !!

To install and try out IIS Media Services 3.0 , download it via the Web Platform Installer here.

So what’s in IIS Media Services 3.0 ?

Smooth Streaming and Live Smooth Streaming for adaptive streaming of media over HTTP

Bit Rate Throttling for controlling bandwidth spent in delivering media

Web Playlists for controlled and sequenced delivery of media

Advanced Logging for logging both on the client and the server

Application Request Routing to provide edge caching.

Another notable bit of software that was just put out there (albeit still in beta) is the Smooth Streaming Player Development Kit. If you are a Silverlight developer, and are looking to extend the same programming model of the Silverlight MediaElement to the world of Smooth Streaming, then the SmoothStreamingMediaElement (SSME) component contained in this kit will make your life really easy. The SSME exposes a ton of additional rich functionality to take advantage of the Smooth Streaming platform and file formats – do check it out !!

I will be blogging more on some of this stuff in the coming weeks – ta for now !!

Learn more and download at http://silverlight.net/GetStarted/

Enjoy!!

ARCHITECT COUNCIL | Pragmatic Patterns for Architects

“Cloud computing will supersede traditional IT”, “SOA will enable business agility”, “my way or the highway”, etc. We’ve all heard this type of proclamations before, as many look to the “next big things” in technology to exact sweeping changes and solve many issues; truth is, technologies and tools aren’t as instrumental in influencing progress, as the design and discipline in applying them to specific issues. When used appropriately, technologies and tools can be powerful enablers that bring about change.

One of the things we hear a lot working with the community is a desire for more guidance about how to use the technology instead of just talking about features and functions.  To address this, our team has put together a series of live webcasts on June 9^th – 11^th which will focus on guidance and patterns for some of today’s hottest topics. 

DAY 1 – June 9, 2009 at Noon PST

Patterns for Moving to the Cloud

Larry Clarkin & Wade Wegner

Everything that you read these days seems to suggest that you should be moving to the cloud. But where do you start? Which applications and services should be moving to the cloud? How do you build the bridge between on-premises and the cloud? And more importantly, what should you be looking out for along the way? In this session, learn architectural patterns and factors for moving to the cloud. Based on real-world projects, the session explores building block services, patterns for exposing applications, and challenges involving identity, data federation, and management. This session provides the tools and knowledge to determine whether cloud computing is right for you, and where to start.

DAY 2 – June 10, 2009 at Noon PST

Building Silverlight & WPF Applications with Prism

David Hill

Prism provides guidance, via design patterns, to help you build robust, flexible and modular Silverlight and WPF applications. These patterns support unit testing, separation of concerns, loose coupling and the ability to share application logic between Silverlight and WPF applications. Prism includes source code for the library itself, extensive documentation, and a sample application that shows how the patterns work together in a real-world application. It also includes a Visual Studio add-in to help you easily share code between WPF and Silverlight. This session provides an overview of Prism, and shows how you can use Prism to design and build composite Silverlight applications.

DAY 3 – June 11, 2009 at Noon PST

Patterns for Parallel Computing

David Chou

With recent advances in cloud computing, service-oriented architectures, distributed computing, server virtualization, multi-core processors; we are now seeing parallel computing techniques being implemented across the spectrum. It’s moving towards mainstream applications such as internet-scale web applications, massive data processing, graphics rendering, but the myriad of choices also present a number of questions on when and how to utilize parallel computing. This session explores the architectural patterns and trade-offs between different forms of parallel computing including: approaches for utilizing them to improve application performance, optimizing the use of existing infrastructure, and applying concurrency towards day-to-day enterprise information processing needs.

WEBCAST AGENDA

REGISTER

To register, please click on the link below for each day:

We will email you with the LIVEMEETING information and log-in detail a few days before the actual event. We will use the email address you provide in the registration. Thanks!

SPEAKER BIOS

Larry Clarkin - SR ARCHITECT EVANGELIST, Microsoft

Wade Wegner - SR ARCHITECT EVANGELIST, Microsoft

Architect in the Developer & Platform Evangelism division at Microsoft, tasked to collaborate with organizations in the advanced and emergent areas of enterprise architecture, SOA, Web 2.0, and cloud computing, as well as to support decision makers on defining technology adoption strategies. You can reach Wade at his blog http://www.architectingwith.net/ or through twitter at https://twitter.com/wadewegner.

David Hill – PRINCIPAL ARCHITECT, Microsoft Patterns & Practices Team

David Chou – ARCHITECT, Microsoft

Architect in the Developer & Platform Evangelism organization at Microsoft, focused on collaborating with enterprises and organizations in many areas such as cloud computing, SOA, Web, RIA, distributed systems, security, etc., and supporting decision makers on defining evolutionary strategies in architecture. Drawing on experiences from his previous jobs at Sun Microsystems and Accenture, David enjoys helping customers create value from using objective and pragmatic approaches to define IT strategies, roadmaps, and solution architectures.

It was exhausting working the booth, standing on my feet all day, talking to so many people over the course of four days, but it was so exciting at the same time. We showed many cool things at the Microsoft booth, including Silverlight 3, IIS 7 Smooth Streaming, our Fast search engine, our Advertising solutions, a ton of solutions from our partners, and last but not the least – some very interesting open source starter kits that my team built, and that I will blog about in coming posts.

But I am especially excited about a specific application I was directly involved in.

Viacom/MTV announced a web based Digital Asset Management Workflow application completely built in Silverlight 3 (of course using the beta bits for now) and .Net 3.5. This is very cool, not just because it is an early adoption of Silverlight 3, but because :

- It is a great proof point that Silverlight is not just for consumer facing scenarios on the web, but is equally suited for more rigorous applications in broadcast media workflow.

- It is one of the first production applications to use the h.264 playback capabilities being enabled in Silverlight 3. MTV creates all their proxies as QuickTime .mov files, with the essence encoded using h.264 compression, either in SD or in HD resolutions. Since QT is essentially a variant of the MP4 container structure, and SL 3 supports parsing MP4 and decoding h.264 natively, we could playback all of MTV’s QT content natively in SL3, without any further transcoding. This was a huge win-win for all involved both from a time and cost perspective.

I provided some of the necessary technology guidance to a joint team from Microsoft, Vertigo and MTV in implementing the solution.

You can read more about the general press release from Viacom CIO Joe Simon here and about the specific case study here.