About Visual Studio MSDN

As Soma announced, we just shipped VS2010 Beta1. This includes dump debugging support for managed code and a very cool bonus feature tucked in there that I’ll blog about today.

Dump-debugging (aka post-mortem debugging) is very useful and a long-requested feature for managed code.  The downside is that with a dump-file, you don’t have a live process anymore, and so property-evaluation won’t work. That’s because property evaluation is implemented by hijacking a thread in the debuggee to run the function of interest, commonly a ToString() or property-getter. There’s no live thread to hijack in post-mortem debugging.

We have a mitigation for that in VS2010. In addition to loading the dump file, we can also interpret the IL opcodes of the function and simulate execution to show the results in the debugger.

Here, I’ll just blog about the end-user experience and some top-level points. I’ll save the technical drill down for future blogs.

Consider the following sample:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Reflection;

public class Point
{
    int m_x;
    int m_y;
    public Point(int x, int y)
    {
        m_x = x;
        m_y = y;
    }
    public override string ToString()
    {
        return String.Format("({0},{1})", this.X, this.Y);
    }

    public int X
    {
        get
        {
            return m_x;
        }
    }
    public int Y
    {
        get
        {
            return m_y;
        }
    }
}

public class Program
{
    static void Main(string[] args)
    {
        Dictionary<int, string> dict = new Dictionary<int, string>();
        dict[5] = "Five";
        dict[3] = "three";

        Point p = new Point(3, 4);

    }

    public static int  Dot(Point p1, Point p2)
    {
        int r2 = p1.X * p2.X + p1.Y * p2.Y;
        return r2;
    }

}

Suppose you have a dump-file from a thread stopped at the end of Main() (See newly added menu item “Debug | Save Dump As …”; load dump-file via “File | Open | File …”).

Normally, you could see the locals (dict, p) and their raw fields, but you wouldn’t be able to see the properties or ToString() values. So it would look something like this:

But with the interpreter, you can actually simulate execution. With the IL interpreter, here’s what it looks like in the watch window:

Which is exactly what you’d expect with live-debugging.  (In one sense, “everything still works like it worked before” is not a gratifying demo…)

The ‘*’ after the values are indications that they came from the interpreter.  Note you still need to ensure that property-evaluation is enabled in “Tools | options | Debugging”:

How does it work?
The Interpreter gets the raw IL opcodes via ICorDebug and then simulates execution of those opcodes. For example, when you inspect “p.X” in the watch window, the debugger can get the raw IL opcodes:

.method public hidebysig specialname instance int32
        get_X() cil managed
{
  // Code size       12 (0xc)
  .maxstack  1
  .locals init ([0] int32 CS$1$0000)
  IL_0000:  nop
  IL_0001:  ldarg.0
  IL_0002:  ldfld      int32 Point::m_x
  IL_0007:  stloc.0
  IL_0008:  br.s       IL_000a
  IL_000a:  ldloc.0
  IL_000b:  ret
} // end of method Point::get_X

And then translate that ldfld opcode into a ICorDebug field fetch the same way it would fetch “p.m_x”. The problem gets a lot harder then that (eg, how does it interpret a newobj instruction?) but that’s the basic idea.

Other things it can interpret:

The immediate window is also wired up to use the interpreter when dump-debugging. Here are some sample things that work. Again, note the ‘*’ means the results are in the interpreter and the debuggee is not modified.

Simulating new objects:
? new Point(10,12).ToString()
“(10,12)”*

Basic reflection:
? typeof(Point).FullName
“Point”*

Dynamic method invocation:
? typeof(Point).GetMethod(”get_X”).Invoke(new Point(6,7), null)
0×00000006*

Calling functions, and even mixing debuggee data (the local variable ‘p’) with interpreter generated data (via the ‘new’ expression):
? Dot(p,new Point(10,20))
110*

It even works for Visualizers

Notice that it can even load the Visualizer for the Dictionary (dict) and show you the contents as a pretty array view rather than just the raw view of buckets. Visualizers are their own dll,  and we can verify that the dll is not actually loaded into the debuggee. For example, the Dictionary visualizer dll is  Microsoft.VisualStudio.DebuggerVisualizers.dll, but that’s not in the module list:

That’s because the interpreter has virtualized loading the visualizer dll into its own “virtual interpreter” space and not the actual debuggee process space. That’s important because in a dump file, you can’t load a visualizer dll post-mortem.

Other issues:

There are lots of other details here that I’m skipping over, like:

1. The interpreter is definitely not bullet proof. If it sees something it can’t interpreter (like a pinvoke or dangerous code), then it simply aborts the interpretation attempt.
2. The intepreter is recursive, so it can handle functions that call other functions. (Notice that ToString call get_X.)
3. How does it deal with side-effecting operations?
4. How does it handle virtual dispatch call opcodes?
5. How does it handle ecalls?
6. How does it handle reflection

Other advantages?

There are other advantages of IL interpretation for function evaluation, mainly that it addresses the ”func-eval is evil” problems by essentially degenerating dangerous func-evals to safe field accesses.

1. It is provably safe because it errs on the side of safety. The interpreter is completely non-invasive (it operates on a dump-file!).
2. No accidentally executing dangerous code.
3. Side-effect free func-evals. This is a natural consequence of it being non-invasive.
4. Bullet proof func-eval abort.
5. Bullet proof protection against recursive properties that stack-overflow.
6. It allows func-eval to occur at places previously impossible, such as in dump-files, when the thread is in native code, retail code, or places where there is no thread to hijack.

Closing thoughts

We realize that the interpreter is definitely not perfect. That’s part of why we choose to have it active in dump-files but not replace func-eval in regular execution. For dump-file scenarios, it took something that would have been completely broken and made many things work. 

Remember the classic arcade style jukeboxes? Today we will be creating our own jukebox using WPF, WMP, a little bit of 3D, some very basic electronics (costing less than $10 USD) and a splash of M-V-VM

Rudi Grobler

• Difficulty: Intermediate
• Time Required: 2-4 hours
• Cost: ~$10 for the 5 buttons and the LPT connector
• Software: Visual C# Express Edition 2008
• Source Code Download: Available on CodePlex

Introduction

A couple of weeks ago I took my son to the game arcade to play a little… while playing, I noticed in the corner a old jukebox… I started wondering how difficult it would be to recreate one of these using “real” hardware and WPF? This article explorers how to make real hardware control software applications in a practical manner

M-V-VM

“Once a developer becomes comfortable with WPF and MVVM, it can be difficult to differentiate the two. MVVM is the lingua franca of WPF developers because it is well suited to the WPF platform, and WPF was designed to make it easy to build applications using the MVVM pattern (amongst others). In fact, Microsoft was using MVVM internally to develop WPF applications, such as Microsoft Expression Blend, while the core WPF platform was under construction. Many aspects of WPF, such as the look-less control model and data templates, utilize the strong separation of display from state and behavior promoted by MVVM.”

WPF Apps With The Model-View-ViewModel Design Pattern by Josh Smith

The M-V-VM pattern helps to separate the logic from the UI which is VERY important when you actually want to manipulate the logic from external sources (Like real push buttons). Our MediaViewModel is extremely simple…

The MediaViewModel has a collection of albums (Which gets fetched when Initialize() is called) and also exposes some commands

Setting up Windows Media Player media library

Ensure that your Windows Media Player (WMP) media library has some media. I added a few albums to my library by clicking on the Add to library… menu option.

TIP - I also ensured that all my CD’s that I do add has full ID3 tags and album art

Fetching WMP media library

To fetch the media library from WMP, we have to use a little bit of COM

“Microsoft COM (Component Object Model) technology in the Microsoft Windows-family of Operating Systems enables software components to communicate. COM is used by developers to create re-usable software components, link components together to build applications, and take advantage of Windows services. The family of COM technologies includes COM+, Distributed COM (DCOM) and ActiveX® Controls.”

Adding a reference to a COM component is just as easy as adding a reference to a .NET assembly. Click the Project menu and select Add Reference, then click the COM tab on the Add Reference dialog.

The WMP library is a flat structure of media items, so the Albums -> Tracks hierarchy must be created manually. Here is our Model

We will be abstracting the fetching of the data by using a IMediaLibraryRepository. By using a interface we have the added advantage of supporting other media sources (like iTunes, etc) in the future

C#:

public interface IMediaLibraryRepository
{
    IList<Album> GetAlbums();
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

And here is our WMP-specific implementation

C#:

public class WMPMediaLibraryRepository : IMediaLibraryRepository
{
    public IList<Album> GetAlbums()
    {
        List<Album> Albums = new List();
        WindowsMediaPlayer wmp = new WindowsMediaPlayer();
        IWMPPlaylist playlist = wmp.mediaCollection.getAll();
        for (int i = 0; i < playlist.count; i++)
        {
            IWMPMedia media = (IWMPMedia)playlist.get_Item(i); 

            Track track = new Track();
            track.Title = media.getItemInfo("Title");
            track.Location = media.getItemInfo("SourceUrl");
            track.Number = media.getItemInfo("OriginalIndex");
            string albumName = media.getItemInfo("Album"); 

            var album = (from a in Albums
                            where a.Name == albumName
                            select a).FirstOrDefault(); 

            if (album != null)
            {
                album.Tracks.Add(track);
            }
            else
            {
                Album a = new Album();
                a.Name = albumName;
                string dir = System.IO.Path.GetDirectoryName(track.Location);
                FileInfo file = new FileInfo(System.IO.Path.Combine(dir, "Folder.jpg"));
                if (file.Exists)
                {
                    a.Cover = file.FullName;
                }
                a.Artist = media.getItemInfo("AlbumArtist");
                a.Tracks.Add(track);
                if (albumName != string.Empty)
                {
                    Albums.Add(a);
                }
            }
        }
        return Albums;
    }
}

Commands

All the interaction between the View and the ViewModel happens by using ICommand. We will be using the RelayCommand

RelayCommand - An ICommand whose delegates can be attached for Execute and CanExecute

The MediaViewModel exposes the following commands

• NextAlbum
• PreviousAlbum
• SongUp
• SongDown
• PlaySong

To create a RelayCommand, we first need the CanExecute and Execute delegates

C#:

private bool SongUpCanExecute(object parameter)
{
    return (TracksCollectionView.CurrentPosition > 0);
} 

private void SongUpExecute(object parameter)
{
    if (TracksCollectionView != null)
    {
        TracksCollectionView.MoveCurrentToPrevious();
    }
}

And then create the command

C#:

private ICommand songUp;
public ICommand SongUp
{
    get
    {
        if (songUp == null)
        {
            songUp = new RelayCommand(SongUpExecute, SongUpCanExecute);
        }
        return songUp;
    }
}

The RelayCommand is very well suited to the M-V-VM pattern because it allows me to encapsulate the whole command and its executing logic very cleanly in my ViewModel. The View can then just bind to these commands!

For more information about custom ICommand implementations, read The Power of ICommand

3D WPF Book Control

“The Great Library of Alexandria was founded in 300 B.C.E. with the grand objective of collecting the world’s knowledge in one place; at its height, the library contained nearly 750,000 scrolls. In the modern world, the British Library contains one of the foremost collections; among its twenty million books and manuscripts are some of the rarest works in existence. It holds the Diamond Sutra, the oldest printed book; Mercator’s first atlas of Europe; the Lindisfarne Gospels; Leonardo da Vinci’s personal notebook; the Magna Carta; and the Codex Sinaiticus, one of the two earliest Christian Bibles. Such unique items must, of course, be treated with the utmost care. If they are on public display at all, they are well protected behind glass, and direct interaction is limited to a handful of individuals.

Happily, these works are now being digitized for the first time in order to reach a broad audience. Even better, the digitized versions are being turned into a rich interactive experience that adds curatorial content and brings the books to life. In collaboration with a UK-based software developer, the British Library developed a Windows®-based application called Turning the Pages that offers a virtual facsimile in three-dimensional space of a growing number of the library’s most precious items”

Turning the Pages with WPF by Tim Sneath

By using the free book control (released by Mitsuru Furuta on CodePlex), we will be transforming our WMP media library into a book browsing experience!

To use the controls, we need to reference the WPMMitsuControls.dll and add the following namespace

xmlns:controls="clr-namespace:WPFMitsuControls;assembly=WPFMitsuControls"

Because Book derive from ItemsControl, we can bind it to any collection using ItemsSource and change the ItemTemplate (Like we would using ListBox, ListView, etc)

<controls:Book ItemsSource="...">
    <controls:Book.ItemTemplate>
        ...
    </controls:Book.ItemTemplate>
</controls:Book>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Accessing the parallel port

We will be using the status register (Base + 1) for feedback from the keypad. To access the keypad we need a hardware IO driver (I will be using inpout32.dll). inpout32.dll is a win32 dll so we need to p/invoke

C#:

public class PortAccess
{
    [DllImport("inpout32.dll", EntryPoint = "Out32")]
    public static extern void Output(int adress, int value); 

    [DllImport("inpout32.dll", EntryPoint = "Inp32")]
    public static extern int Input(int adress);
}

For more information on how to access the LPT port using managed code, first read the following CodeProject article:

• CodeProject: I/O Ports Uncensored - 1 - Controlling LEDs (Light Emiting Diodes) with Parallel Port

Electronics 101

This is a very basic schematic of how my keypad is wired up…

I had a keypad laying round which I used but you can also use normal push buttons available at your local electronics shop (Here is a list of push buttons available from RadioShack)

WindowWithKeypadSupport

The last part we need to cover is how to react to a key being pressed on the keypad. I sub-classed the WPF Window and created my own WindowWithKeypadSupport. WindowWithKeypadSupport has a background thread running which monitors the LPT port. If a button is pressed, it raises a PreviewKeypadDown routed event.

C#:

public class WindowWithKeypadSupport : Window
{
    public static readonly RoutedEvent PreviewKeypadDownEvent; 

    static WindowWithKeypadSupport()
    {
        WindowWithKeypadSupport.PreviewKeypadDownEvent =
            EventManager.RegisterRoutedEvent( "PreviewKeypadDown",
            RoutingStrategy.Bubble, typeof(KeypadEventHandler),
            typeof(WindowWithKeypadSupport));
    } 

    public event RoutedEventHandler PreviewKeypadDown
    {
        add
        {
            base.AddHandler(WindowWithKeypadSupport.PreviewKeypadDownEvent, value);
        }
        remove
        {
            base.RemoveHandler(WindowWithKeypadSupport.PreviewKeypadDownEvent, value);
        }
    }
    // The rest of the class is omited for brevity 
} 

To raise the event, we need to invoke back to the UI thread

C#:

Dispatcher.BeginInvoke(DispatcherPriority.Background,
    (SendOrPostCallback)delegate
    {
        KeypadEventArgs e = new KeypadEventArgs(
            WindowWithKeypadSupport.PreviewKeypadDownEvent, this);
        e.Key = CreateKeyFromIOPortValue(keyValue);
        base.RaiseEvent(e);
    }, null);

Here is a example of how to instantiate the WindowWithKeyadSupport

<controls:WindowWithKeypadSupport x:Class="ClassicJukebox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:ClassicJukebox"
    PreviewKeypadDown="WindowWithKeypadSupport_PreviewKeypadDown" />

TIP - I also react to keyboard buttons being pressed… Use the left, right, up, down and enter keys to control the jukebox

And thats it…

Conclusion

WPF provides a very powerful infrastructure for creating applications that can mix 3D & hardware effortless! The binding architecture and command support allows for great separation of concerns!

And probably the most important advantage of WPF? It makes writing applications fun…

About the author

Rudi Grobler’s main area of interest is development in the embedded space (his day-to-day job). In the last 10 years Rudi interfaced to various devices in the embedded space ranging from Graphic LCDs using parallel port, various bill acceptors, RoboHum, smart card readers, Wii remote, data acquisition devices, petrol pumps and much, much more!About 2 years ago, he received a copy of Charles Petzold’s WPF book and fell in love…

His ramblings can be found at http://dotnet.org.za/rudi

Michael Ceranski has an article over at Code Project about recreating the classic game Frogger in Silverlight.

Michael goes in about creating sprites, collision detection, and animation.  He created lanes for the traffic in design time then made them transparent when the application loaded.  Smart!

Nice job Michael.

Ever see a website with some amazing effects but no clue how they got them?  Chances are they used a framework like jQuery.  Glimmer is a WPF-based Windows application that allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.

Feel free to blog/tweet if so inclined! You can use screenshots of Glimmer from this post or the attached banner. Also, you can embed the video about Glimmer using this HTML:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="304" height="228">
<param name="source" value="http://channel9.msdn.com/App_Themes/default/VideoPlayer2009_02_24.xap" />
<param name="initParams" value="m=http://mschannel9.vo.msecnd.net/o9/mix/labs/glimmer/glimmer.wmv,autostart=false,autohide=true,showembed=true, thumbnail=http://mschannel9.vo.msecnd.net/o9/mix/labs/glimmer/glimmerVideo.jpg, postid=0" />
<param name="background" value="#00FFFFFF" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

And, if you end up using Glimmer, let us know your feedback. If you deploy any Glimmer generated code/scripts, let us know so we can add it to the Sites Using Glimmer wiki.