Kinect Interaction with WPF Part II: Getting Started Easier [KinectChooserEx]

In the previous post of this series, I have introduced the Kinect for Windows SDK 1.7, and the key controls and concepts within its Kinect Interactions toolkit. If you have followed through that post, you have seen all the work and code you need to get the basics running. Most of the initialization code was biolerplate, and code that you can easily copy and paste into your own project.

I have packaged up the initialization code into a UserControl called KinectChooserEx, and wired up a couple of dependency properties.

Note: I could have inherited from KinectChooser instead of packaging it into a user control. But I ran into some serious strong name issues, and wanted more consistent naming for the properties, so it was better to hide some internal workings.

The NearMode property is a boolean value, and can be used to turn Near Mode on and off. Changing Near Mode also sets the EnableTrackingInNearRange of the SkeletonStream. You will probably want to keep NearMode as false if you are using a Kinect for XBox sensor instead of a Kinect for Windows one. Otherwise the interaction engine works better at close range, so I have set NearMode to be true by default.

The other property is KinectSensor, which contains null if no sensor is initialized, or a KinectSensor object if one is.

Both of these properties are bindable. With KinectChooserEx, you can finally get started with your own Kinect project purely in Blend, without writing a single line of code (at least for the interaction part). Here is a step by step tutorial on how to do this:

• Create a New Project and Add KinectChooserEx.xaml and KinectChooserEx.xaml.cs

Create a new WPF project, and add the necessary references as described in my previous post. Drag and drop the KinectChooserEx.xaml and KinectChooserEx.xaml.cs files from Explorer into the project. You will also want to add the KinectInteraction170_32.dll and KinectInteraction170_64.dll files at this point (again, see my previous post).

• Add KinectChooserEx to the MainPage
• Adding a KinectRegion
• Adding a KinectUserViewer control
• Let’s See it Work!
• Using the Near Mode

Project Information URL: http://dotneteers.net/blogs/vbandi/archive/2013/04/19/kinect-interaction-with-wpf-part-ii-getting-started-easier.aspx

Project Download URL: http://sdrv.ms/117qGxo

Project Source URL: http://sdrv.ms/117qGxo

Contact Information:

• Blog: http://dotneteers.net/blogs/vbandi/
• Twitter: @vbandi

How to do Push to Press with Kinect SDK 1.7

Microsoft officially released the 1.7 Kinect for Windows SDK. In this article I will demonstrate or explain what interest me most. The Push-to-Press functionality.

Introduction

Kinect 1.7 sdk has been released, when I first played around with the examples like ‘Interaction Gallery’ and the fact that I don’t to adjust the jittering anymore , I knew I had to stop whatever I was doing in my Kinect project to learn “Press to Push” and implement in my current project. Before with the help of Coding4Fun toolkit we would place a hand over a button and some nice animation cycling your hand will appear telling you that you are about to select something, I had to struggle teaching my 2 years old daughter to wait for you, I was teaching her un-natural user interface, with Kinect 1.7, we have a natural user interface gesture, because you push to press a button. I must say a struggled a bit to isolate this functionality. I hope it will help someone.

...

Objective

In this article I wanted to show you on how to create a basic navigation system in wpf that uses hand gestures to select menu items. This is an updated version from the one I created from Coding4Fun toolkit. This one uses the press to push. So this means to select a menu, you need to push the button to press it. 

Code Explanation

Few things have changed from the way we used to do things in sdk 1.6. Well you can still choose to Coding4Fun toolkit to do hand gestures that interact with your controls, but in this article I will explain how you can use the nice things found in the new sdk. The first thing that is new is the Kinect Region.

• KinectRegion
• KinectTileButton
• KinectScrollViewer
• UserViewer

Generic Class to store the KinectSensorChooser

...

Project Information URL: http://www.dotnetfunda.com/articles/article2214-how-to-do-push-to-press-with-kinect-sdk-17.aspx

Project Download URL: How to do Push to Press with Kinect SDK 1.7

Project Source URL: How to do Push to Press with Kinect SDK 1.7

Kinect Interactions with WPF - Part I: Getting Started

... Kinect Interactions. Kinect Interactions allow developers to create interactive applications with a new, well-designed and ergonomically friendlier interaction language than before. The Kinect SDK can now detect a “push towards the screen” gesture to activate buttons, and this is the recommended “activate” gesture now instead of the old “hover, wait until the circle fills and its pressed” gesture.

Browsing lists larger than a dozen or so items has been even more difficult using Kinect. The recommended solution was to implement a “swipe from side” gesture, which paged through items on the screen. Here is such a list, straight from my XBox:

You can see that the list has 358 games, and 5 of them are visible at the same time. To get through even half of this list, you would have to perform the swipe gesture 36 times! This is extremely slow, frustrating and physically exhausting.

The latest K4W SDK solves this issue by differentiating between an open and a closed hand. When you close your hand, you “grip” whatever’s underneath it (such as a scrollviewer), and then you can move your hand to scroll. If you release the scroller while your hand is still moving, the scrolling keeps happening – similarly to the inertia scroll you are already used to on touch devices. You can close your hand again at any time, and stop the inertia – again, as you expected.

In this post, I will help you to get started with Kinect Interactions by creating a Hello World WPF app that uses the features mentioned above. In later posts, I will dive deeper into the Kinect Interactions SDK, show you how to customize the existing controls, create new ones and go deep into the lower levels of the InteractionStream to invent new ways of interacting with your app. But first, let’s see how you can get started with Kinect Interactions today!

Note: I am assuming that you are familiar with C# and WPF for this article series.

...

• First Things First – Download and Install the bits
• Create the Project
• Initializing the Kinect Sensor with KinectSensorChooser
• Setting up the Kinect for Interactions
• The Kinect Region
• User Viewer
• Interactive Controls
  • The KinectTileButton
  • The KinectCircleButton
• They See Me Scrollin’

...

Download

You can download the demo project for this article here.

Summary

In this post, I’ve introduced you to the basics to get started with a Kinect Interactions application – getting the Kinect sensor up and running, defining a KinectRegion, adding buttons and scrollable areas to it.

In the next posts of this series, I will dive deeper into the world of Kinect Interactions. We will dive deeper into the – unfortunately very sparsely documented – controls I discussed above, and see the customization options they offer. And finally, going deeper into the rabbit hole, we will examine the low level Interaction Stream.

Project Information URL: http://dotneteers.net/blogs/vbandi/archive/2013/03/25/kinect-interactions-with-wpf-part-i-getting-started.aspx

Project Source URL: http://sdrv.ms/10tWqi9

Contact Information:

• Blog: http://dotneteers.net/blogs/vbandi
• Twitter: @vbandi

• [00:31] Build 2013
• [01:04] #785 – Using the Visual Profiler Tool, #783 – Downloading and Installing the WPF Performance Suite (Sean Sexton), WPF Performance Suite
• [01:45] Brew 1.0 has arrived! [Found Via: The Morning Brew #1321]
• [02:23] Backbone 1.0 (Jeremy Ashkenas) [Found Via: The Morning Brew #1321]
• [02:50] Git Patterns and Anti-Patterns (Luca Milanesio)
• [04:03] Developing an app with the Visual Studio 3D Starter Kit, part 1 of 3 (Roberto Sonnino)
• [04:51] GDC 2013 Windows Developer Content Direct3D Game Templates
• [05:29] New middleware makes porting games to Windows Phone easy (Todd Brix)
• [06:06] Windows Phone Apps - Watch Your Code for Hidden Activity (Den Delimarsky)
• Channel 9 Highlight:[07:08] Build Windows 8 Apps with YUI (Jeff Burtoft)

Picks of the Week!

• Brian's Pick of the Week:[07:40] Arena.Xlsm, an RPG built using Excel, carywalkin.wordpress.com, Version 1.1, Arena.Xlsm wiki
• Clint's Pick of the Week:[08:11] Dynamic Lockscreen Changer for Windows Phone 8, Built With ASP.NET MVC and Azure Mobile Services (Clint Rutkas, Den Delimarsky)

Basic Navigation in Kinect using WPF

Navigation in Kinect applications cannot be the same as other traditional applications with small buttons that are made to save safe and also Tabs that can allow a user to navigate with the application. Kinect approach is different and if you are new to Kinect, you probably came across the UI navigation problem as I did before, but was able to resolve the problem through friends who are also doing Kinect for Windows Development.

Project Information URL: http://www.dotnetfunda.com/articles/article2168-basic-nagivation-in-kinect-using-wpf.aspx

Project Source URL: http://www.dotnetfunda.com/UserFiles/ArticlesFiles/Vuyiswamb_Articles_634959886755371172_WpfApplication1.zip

KegManager

Project Description
KegManager is a software package designed to collect, interpret and display relevant data collected from a kegerator. Each level of this project uses a Microsoft technology, from the .Net micro framework on the hardware to using the new Windows 8 Immersive UI for the frontend.

"Kegduino" - the hardware
This consists of the hardware and software that is actually collecting the data. Everything is built around a Netduino device running the .Net micro framework and connected to a series of sensors that will report information like: flow volume (for pouring), temperature, gas (CO2 or N) pressure etc. This data is then sent over a bluetooth connection to a nearby PC.

"KegMonitor" - The data logger
This software listens to the kegduino, interprets the packets, and writes the data to a datasource for posterity.

"KegManager" - The display
Using the new Windows 8 SDK, this immersive application will display the current status of the kegerator, including what beers are on tap, the current temperature, and will even support facial recognition of users.

Here's a snap of the the main project in the solution...

You get DB diagrams;

WPF Controls...

To even KegReader and KegWriters!

Now how can you go wrong with that? If nothing else, it's an interesting project to "drink in" 

WPF Composites

"WPF Composites makes WPF so easy that a baby could do it. Think of building blocks . . ."

WPF Composites is a project designed to provide an alternative, concise, C# code-behind approach to managing UI Element composites. Composites are normally managed via WPF Databinding and DataTemplates but this library uses ID's and X-Y Coordinates instead to position elements on the screen. This is currently for synchronous apps only or apps that invoke on the UI Thread when working with Composites. This library is still alpha and under-construction. However, I welcome volunteers! NO XAML. NO DATATEMPLATES REQUIRED!

...

BEGIN COMPOSITE . . . END COMPOSITE
Below is an example for creating a new composite, adding a new Rectangle (automagically instantiating it) to the composite, followed by adding two Textblocks underneath the Rectangle (all in column 0):

myDockPanel.BeginComposite(myGuid)
.AddAnything<Rectangle, DockPanel(0,0)                
.AddText(1,0, "Hello World 1")                
.AddText(2,0, "This is text at Row 2 Column 0 in the composite")                
.EndComposite(new DockArgs(Dock.Left)); 

The entire composite is then added to myDockPanel at Dock.Left.
Typically, objects retrieved from or saved to a SQL database will have a record ID associated with them, either a GUID or a basic IDENTITY number (1-...). It follows then that composites of UI Elements on the screen may also readily be associated with this same ID, the same ID as that used in the database. However, a GUID is not required (as one can be created automatically behind the scenes.)

This can be an effective way of binding and retrieving a composite set of UI Elements (which may correspond to properties within a C# Class.) Within a single composite tied to an ID, identify X-Y Coordinates for positioning child elements within a Grid within a parent container.

Examples?

I started with a working example of this code-behind approach via extensions to the WPF ListBox. I used extension methods because I didn't want developers to have to implement a new custom control.

This humble start has grown into fair support for 20 IParent controls:
Code Examples
Grid Example
Dock Panel Example
Combo Example
Menu Example
Tree View Example

Want to see more?

See C# Demo App Screenshots here: Demo App Screenshots
This library isn't limited to C#. See an IronPython example here: Iron Python Example
Remaining To-Do Items: To-Do List
Tutorials and Details: Dictionaries, Easy as 1-2-3-4-5, Selectors

Demo App Screenshots

These screenshots are taken in 1280x1024 screen resolution. The demo app should scale up fine to higher resolutions as long as they maintain this same aspect ratio (better choices could be made in terms of layout and relative positioning in a live production app.)

A key thing to focus on in these screenshots is the fine-grained control over colors/styles . . . note how many little pieces are exposed for styling via code-behind with no XAML required by the developer.

In other words, my color choice may be hideous, my design skills old-school or flat, but it's just to show off what is possible, how many items you can change/modify/override?

In this first shot, I showcase the Grid, TabControl, ListBox, DockPanel, TreeView, DataGrid (with Composites), GroupBox, ComboBox, Dialog, and multiple ScrollViewers.

...

A new, very different means to build WPF applications, one that might appeal to those in the WinForm world.

Oh and you get the entire source behind this approach too!

http://wpfcomposites.codeplex.com/SourceControl/BrowseLatest

Like Visual Studio's docking behavior? It's Window Management? It's auto-hiding areas? Want a free [New BSD License (BSD)] WPF control that lets you build the same kind of thing?

AvalonDock

Project Description
AvalonDock is a WPF controls library which can be used to create a docking layout system like that is present in VisualStudio.

Features

• Supports MVVM design
• Almost everything can be restyled
• Support for Windows Forms controls

...

AvalonDock 2.0 getting started guide PART 1

AvalonDock 2.0 allows to create an interface for WPF very similar to Visual Studio GUI. It's important to understand that has been developed with this in mind so it's most suited for projects that have documents and tools.

In this tutorial I'll show you how to start using with AvalonDock. Below information are relative to version 2.0 and connot be valid for earlier versions.

AvalonDock is composed of a layout model, a series of controls representing the views and a DockingManager class which represents the docking area where user can drag and drop documents and tools.

Looking at the below screenshot we can identify the AvalonDock components.

• DockingManager This is the core control in AvalonDock. It arranges contained panes, handles fly out panes and floating windows. In the above image the DockingManager object contains everything (in WPF terms) from the toolbar on top and the status bar on bottom. DockingManager class also handles saving and restoring layout.
• LayoutPanel This panel arranges children panes along a direction (selected with property Orientation) adding a resizer between them. Above a LayoutPanel with horizontal orientation arranges three panes: a LayoutAnchorablePane on left, a LayoutDocumentPane in the central area, and a LayoutDockablePane on right.
• LayoutAnchorablePane This layout element contains a collection of LayoutAnchorable obiects. Usually it arranges contents like a tabcontrol. In the above screenshot LayoutDockablePanes are the container of contents 'Strumenti' and 'Progetti' (Tools and Projects in English) on the left and the container of 'Classi' and 'Proprieta'' (Classes and Properties in English) on the right. A LayoutDockablePane can be auto-hidden (like that containing contents 'Errori'(errors), 'Lista Azioni'(action list) and 'Uscita'(output)) and can be dragged over the DockingManager as floating window or anchored to a border of the parent DockingManager.
• LayoutDocumentPane A pane of this type contains usually documents (object of type DocumentContent) but optionally can also contain DockableContents object like the above 'Tools' or 'Classes' contents. Above a document content is placed inside a ResizingPanel (horizontally orienteted) in the central area between the too DockablePane object just mentioned. A document pane can't be moved.
• LayoutAnchorable A anchorable content is the container of application controls. It's always contained in a pane (LayoutAnchorablePane or LayoutDocumentPane). In the above screen shot, LayoutAnchorable objects are the 'classi'(classes) object (which contains a SharpDevelop object), the 'strumenti'(tools) object but also the 'Errori' (errors) (which is in the AutoHidden state and is contained in a autohidden pane). A LayoutAnchorable as name suggests can be dragged away from its container pane and be repositioned into another esisting pane, or to a border of the parent DockingManager or left in a floating window (LayoutAnchorableFloatingWindow).
• LayoutDocument is a content that can be hosted only in a LayoutDocumentPane. It's a particular content because can't be anchored to a border but can be positioned only into a LayoutDocumentPane or floated in a LayoutDocumentFloatingWindow. Above LayoutDocument objects are the 'program.cs' or 'MainForm.cs' files.
• LayoutFloatingWindow It's a window that contains contents when are dragged or moved over a DockingManager. A LayoutFloatingWindow (and its specializations LayoutAnchorableFloatingWindow and LayoutDocumentFloatingWindow) derives from Window, and always contains a pane (LayoutAnchorablePane or LayoutDocumentPane) which in turn contains one or more contents (LayoutAnchorable or LayoutDocument). The LayoutFloatingWindow object is created directly from the DockingManager when user start a dragging operation for a content or a DockablePane or manually by code calling the LayoutContent.Float() method.
• LayoutPane It's a base class for LayoutDockablePane and LayoutDocumentPane. It provides common properties and methods for both.
• LayoutContent It's a base class for LayoutAnchorable and LayoutDocument. It provides common properties and methods for both.

...

Here's some snaps from the Dec 4,2012 samples release;

In firing up the MVVM code sample, there's a couple references you might have to fix up.

Just Nuget for AvalonDock, install and you're good to go. Matter of fact, if you install it via nuget you get a couple additional themes too.

The MVVM sample is simple, but that's just fine. Here's a snap of it

And here's a couple snaps of it using the different themes.

How hard is it to change a theme? Less than one line of code.

...

Okay, you're a diehard WinForm dev? Feel left out? Don't! There's WinForm support for you too!

So get Docking!

• [0:42] Windows Phone 8 Emulator Skin Switcher 1.0 released on codeplex (Geert van der Cruijsen )
• [1:43] Maps in Windows Phone 8 and Phone toolkit: a winning team – Part 1 (Matteo Pagani)
• [2:35] What Is New In WPF 4.5 (DevToolsGuy)
• [3:36] Developer Tools Screencast: LINQPad - Part 1 (Latish Sehgal)
• [4:46] Integrating Search with OData Service for Team Foundation Server in a Windows Store App (Nisha Singh)
• [5:37] Part 1 of 9: Creating a Complete Windows 8 Game (minus the game) (Lindsay Lindstrom)
• [6:34] Introducing Blend for Visual Studio 2012 – Build a simple Windows 8 Store App (Pravinkumar Dabade)
• [8:10] Entity Framework - Pro and Con (Bnaya Eshet)
• [9:18] Understanding Mock and frameworks – Part 3 of N (Punit Ganshani)

Picks of the Week!

• Clint's Pick of the Week:[10:38] Obama crushes Death Star dreams (Mike Hoffman)
• Dan's Pick of the Week:[11:41] Creating your own Kinect Night Vision with help from the IR Stream, IR Emitter and Abhijit (Abhijit Jana)

Using the Microsoft Kinect to control GoogleMap

The project is a WPF application that uses Microsoft Kinect to control google maps.

Feel free to learn WPF MVVM pattern and Kinect development from it!

Project Information URL: http://kinectmap.codeplex.com/

Project Source URL: http://kinectmap.codeplex.com/SourceControl/changeset/view/15754

Blob Tracking: Kinect + OpenCV + WPF

With the latest SDK release, the Kinect platform has become pretty robust – skeleton tracking, gesture support, and access to the raw infrared stream all come “out-of-the-box”. Which is great, because if you’ve ever used any of the opensource equivalents, things can get pretty hairy.

Hands and skeletons are cool and all, but unfortunately there isn’t an *easy* way to do blob or generic object detection.. Right now, we’re working on a fun project and ultra fast blob detection is one of the major tech hurdles we’re working through.

After googlin’ around for blob-tracking with Kinect I came up empty handed. So I decided to look into OpenCV for doing blob detection. Many curse words later, I finally got things working the way I wanted. Along the way I noticed a handful of forums with people looking to do similar object tracking with Kinect, so I figured I would share how I cobbled things together.

Demo Overview & Source Code

The demo below is showing a couple of key things:

• Consuming the raw Depth image from the Kinect sdk
• Slicing the Depth image to a particular range
• Using OpenCV to perform object/blob tracking
• Rendering OpenCV output with WPF

...

Ok, so what?

I know what you’re thinking…so you have some blobs, big deal. And you might be wondering what else you can do with blobs. Well, let me tell you. By using generic blob detection you can not only detect when objects are present, you can also track their size, shape and rotation. For example, its possible to track an open hand transitioning to a closed fist for a grab gesture, or a user holding a wand or prop. Or in our case, we want to very efficiently capture the position of small, fast moving objects that penetrate an “invisible” IR plane. There are a ton of uses for blob detection including surveillance, card counting, and even real-time projection mapping.

What’s Next

While I’m pretty happy with the performance of this solution, I’m curious if it would be better/faster if I rewrote everything with the C++ flavor of the Kinect sdk and coupled it with DirectWrite or XAML to render the UI. Anybody out there do anything like this yet? If so, shoot me a tweet or email.

We’re currently rolling this stuff into a fun side project that I’ll post about shortly…stay tuned.

Project Information URL: http://blogs.claritycon.com/blog/2012/11/blob-tracking-kinect-opencv-wpf/

Project Download URL: https://github.com/eklimcz/OpenCV-WPF-Kinect

Project Source URL: https://github.com/eklimcz/OpenCV-WPF-Kinect

Contact Information:

• Blog: http://blogs.claritycon.com/blog/author/eklimczak/
• Twitter: @eklimcz

MJPEG Decoder v1.2

Release Notes

• Added support for WinRT (ARM and x86/x64)
• Added support for Windows Phone 8
• Added Error event to catch connection exceptions (thanks to Mirek Czerwinski for the idea)
  • Note that the XNA and WP7 assemblies remain at v1.1 and do not contain this addition
• Samples for WinRT in C#/XAML and HTML/JavaScript (in source code repository)
• Sample for Windows Phone 8 in C#/XAML (in source code repository)

MJPEG Decoder

Library to decode MJPEG streams. Sample code showing usage is included with the distribution. For more information, see the full Coding4Fun Article.

MJPEG Decoder

Last year the Coding4Fun/Channel 9 guys asked me to work on a few things for MIX10.  One of these items was a way to output a webcam stream to Windows Phone 7 for use with Clint's t-shirt cannon project you may have read about.  I figured the easiest way to accomplish this was by using a network/IP camera capable of sending a Motion-JPEG stream, which can be easily decoded and displayed that can display a JPEG image.  Thus, this library was born.

It has gone through quite a few changes and I have expanded it to easily display MJPEG streams on a variety of platforms.  The developer just references the assembly appropriate to their platform, adds a few lines of code, and away it goes

...

Here's a snap of the Solution;

One important to note and that Brain mentions in the article, if you want to play with the test apps, you're going to need a MJPEG video source (which kind of makes sense, doesn't it?). If you've got one, then all you need to do is plug in the URI into the test apps, which as you can see there's a bunch, and off you go...

MVVM Diagram Designer

A while back a user called "sucram (real name Marcus)"  posted a series of articles here about how to create a diagram designer using WPF. Sucrams original links are as follows:

• http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1
• http://www.codeproject.com/Articles/23265/WPF-Diagram-Designer-Part-2
• http://www.codeproject.com/Articles/23871/WPF-Diagram-Designer-Part-3
• http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4

I remember being truly blown away by this series of articles, as they showed you how to do the following things:

• Toolbox
• Drag and Drop
• Rubber band selection using Adorners
• Resizing items using Adorners
• Rotating items using Adorners
• Connecting items
• Scrollable designer surface, complete with zoombox

WOW that sounds fantastic, sounds exactly like the sort of things you would need to create a fully functional diagram designer. Well Yeah, its was and still is, but........the thing is I have used WPF a lot, and trying to use the code attached to sucrams series of article in WPF just wasn't that great. He had taken a very control centric view, in that everything was geared around adding new controls and supplying static styles for said controls.

In reality it was more like working with a Win Forms application. Not that there is anything wrong with that, and I really truly do not mean to sound ungrateful, as that could not be further from the truth, without that original series of articles it would have taken me a lot longer to come up with a working diagram designer that I was happy with. So for that I am truly grateful, thanks sucram you rock.

Anyway as I say sucrams original codebase took a very control centric point of view, and added controls using code behind, and held collections of items directly in the diagram surface control. As I say if that is what you want cool, however, it was not what I wanted. What I wanted was

• All of the features of curams original code (actually I didn't want any rotating of items, or resizing of items)
• A more MVVM driven approach, you know allow data binding of items, delete of items via ICommand etc. etc.
• Allow me to control the creation of an entire diagram from within a single ViewModel
• Allow for complex objects to be added to the diagram i.e. ViewModels that I could style using DataTemplate(s). Sucrams original code only allowed simply strings to be used as a DataContext which would control what ImageSource an Image would use to show for a diagram item. I needed my items to be quite rich and allow popups to be shown and associated with the diagram item, such that the data related to the diagram item could be manipulated
• Allow me to save the diagram to some backing store
• Allow me to load a previously saved diagram from some backing store

To this end I have pretty much completely re-written sucrams original code, I think there is probably about 2 classes that stayed the same, there is now more code, a lot more, however from an end user experience, I think it is now dead easy to control the creation of diagrams from a centralized ViewModel, which allows a diagram to be created via well known WPF paradigms like Binding/DataTemplating.

For example this is how the attached DemoApp code creates a simple diagram that is shown when you first run the DemoApp:

public partial class Window1 : Window
{
    private Window1ViewModel window1ViewModel;

    public Window1()
    {
        InitializeComponent();

        window1ViewModel = new Window1ViewModel();
        this.DataContext = window1ViewModel;
        this.Loaded += new RoutedEventHandler(Window1_Loaded);
    }


    /// <summary>
    /// This shows you how you can create diagram items in code
    /// </summary>
    void Window1_Loaded(object sender, RoutedEventArgs e)
    {
        SettingsDesignerItemViewModel item1 = new SettingsDesignerItemViewModel();
        item1.Parent = window1ViewModel.DiagramViewModel;
        item1.Left = 100;
        item1.Top = 100;
        window1ViewModel.DiagramViewModel.Items.Add(item1);

        PersistDesignerItemViewModel item2 = new PersistDesignerItemViewModel();
        item2.Parent = window1ViewModel.DiagramViewModel;
        item2.Left = 300;
        item2.Top = 300;
        window1ViewModel.DiagramViewModel.Items.Add(item2);

        ConnectorViewModel con1 = new ConnectorViewModel(item1.RightConnector, item2.TopConnector);
        con1.Parent = window1ViewModel.DiagramViewModel;
        window1ViewModel.DiagramViewModel.Items.Add(con1);
    }
}

As the article progresses I will show you how to use the new MVVM driven diagram designer classes in your own applications, and you could leave it right there if you wanted to, but if you want to know how it all works that will be explained in the rest of the article.

...

• Introduction
• What Does It Look Like
• Attached Codebase Structure
• How Do I Use It In My Own Applications
  • Use It Step 1 : Creating The Raw XAML
  • Use It Step 2 : Creating The Main ViewModel
  • Use It Step 3 : Creating Toolbox Item DataTemplates
  • Use It Step 4 : Creating The Diagram Item ViewModels
  • Use It Step 5 : Creating Diagram Item Designer Surface DataTemplates
  • Use It Step 6 : Creating Diagram Item Popup DataTemplates
  • Use It Step 7 : Persistence
    • What Are The Important Things To Save
    • Saving/Hydrating A Diagram
• How Does The Diagram Designer Stuff Actually Work
  • Drag And Drop To The Design Surface
  • Binding The Items Collection
  • Adding Connections
    • ConnectorInfoBase/PartCreatedConnectorInfo
    • FullyCreatedConnectorInfo
    • ConnectorViewModel
  • Selection/Deselection
    • Flavour 1 : Standard Mouse Down Selection
    • Flavour 2 : Rubberband Selection
  • Deleting Items
• That's It For Now

How Do I Use It In My Own Applications

This section will talk you through how to create a diagram in your own application. It assumes the following

• That you want to use WPF things like Binding/DataTemplating/MVVM
• You actually want to persist / hydrate diagrams to some backing store (Like I say I chose to use RavenDB which is a no sql document database, but if this is not for you, it should be pretty easy for you to craft your own data access layer talking to your preferred SQL backend)

If you want to create your own MVVM style diagram designer, I have broken it down into 7 easy steps, as long as you follow these 7 steps to the letter you should be just fine. There is also a working example of these 7 steps by way of the attached DemoApp project code, so you can examine that whilst reading this text, so hopefully you will be ok.

...

I love that he takes the time to share how we can use this in our own app's.

Here's a snap of it running on my system (which was easy and painless)

One other thing of note is how RavenDB is used as the data store. If you've been hearing about NoSQL but haven't had a chance to see it in use, well here's you chance! It's all here in the download, nothing extra needed.

In early January, we were tasked with creating a unique, interactive experience for the SXSW Interactive launch party with Frog Design. We bounced around many ideas, and finally settled on a project that Rick suggested during our first meeting: boxing robots controlled via Kinect.

The theme of the opening party was Retro Gaming, so we figured creating a life size version of a classic tabletop boxing game mashed up with a "Real Steel"-inspired Kinect experience would be a perfect fit. Most importantly, since this was going to be the first big project of the new Coding4Fun team, we wanted to push ourselves to create an experience that needed each of us to bring our unique blend of hardware, software, and interaction magic to the table under an aggressively tight deadline.

Hardware

The BoxingBots had to be fit a few requirements:

1. They had to be fun
2. They had to survive for 4 hours, the length of the SXSW opening party
3. Each robot had to punch for 90 seconds at a time, the length of a round
4. They had to be life-size
5. They had to be Kinect-drivable
6. They had to be built, shipped, and reassembled for SXSW

Creating a robot that could be beaten up for 4 hours and still work proved to be an interesting problem. After doing some research on different configurations and styles, it was decided we should leverage a prior project to get a jump start to meet the deadline. We repurposed sections of our Kinect drivable lounge chair, Jellybean! This was an advantage because it contained many known items, such as the motors, motor controllers, and chassis material.  Additionally, it was strong and fast, it was modular, and the code to drive it was already written.

Jellybean would only get us part of the way there, however.  We also had to do some retrofitting to get it to work for our new project. The footprint of the base needed to shrink from 32x50 inches to 32x35 inches, while still allowing space to contain all of the original batteries, wheels, motors, motor controllers, switches, voltage adapters. We also had to change how the motors were mounted with this new layout, as well as provide for a way to easily "hot swap" the batteries out during the event. Finally, we had to mount an upper body section that looked somewhat human, complete with a head and punching arms.

 
Experimenting with possible layouts

The upper body had its own challenges, as it had to support a ton of equipment, including:

• Punching arms
• Popping head
• Pneumatic valves
• Air manifold
• Air Tank(s)
• Laptop
• Phidget interface board
• Phidget relay boards
• Phidget LED board
• Xbox wireless controller PC transmitter / receiver
• Chest plate
• LEDs
• Sensors to detect a punch

Brian and Rick put together one of the upper frames

Punching and Air Tanks

We had to solve the problem of getting each robot to punch hard enough to register a hit on the opponent bot while not breaking the opponent bot (or itself). Bots also had to withstand a bit of side load in case the arms got tangled or took a side blow. Pneumatic actuators provided us with a lot of flexibility over hydraulics or an electrical solution since they are fast, come in tons of variations, won't break when met with resistance, and can fine tuned with a few onsite adjustments.

To provide power to the actuators, the robots had two 2.5 gallon tanks pressurized to 150psi, with the actuators punching at ~70psi.  We could punch for about five 90-second rounds before needing to re-pressurize the tanks.  Pressurizing the onboard tanks was taken care of by a pair of off-the-shelf DeWalt air compressors.

The Head

It wouldn’t be a polished game if the head didn’t pop up on the losing bot, so we added another pneumatic actuator to raise and lower the head, and some extra red and blue LEDs. This pneumatic is housed in the chest of the robot and is triggered only when the game has ended.

To create the head, we first prototyped a concept with cardboard and duct tape. A rotated welding mask just happened to provide the shape we were going for on the crown, and we crafted each custom jaw with a laser cutter.  We considered using a mold and vacuum forming to create something a bit more custom, but had to scrap the idea due to time constraints.

Sensors

Our initial implementation for detecting punches failed due to far too many false positives. We thought using IR distance sensors would be a good solution since we could detect a “close” punch and tell the other robot to retract the arm before real contact. The test looked promising, but in practice, when the opposite sensors were close, we saw a lot of noise in the data. The backup and currently implemented solution was to install simple push switches in the chest and detect when those are clicked by the chest plate pressing against them.

Power

Different items required different voltages. The motors and pneumatic valves required 24V, the LEDs required 12V and the USB hub required 5V. We used Castle Pro BEC converters to step down the voltages. These devices are typically used in RC airplanes and helicopters.

Shipping

So how does someone ship two 700lb robots from Seattle to Austin? We did it in 8 crates. . The key thing to note is that the tops and bottoms of each robot were separated. Any wire that connected the two parts had to be able to be disconnected in some form. This affected the serial cords and the power cords (5V, 12V, 24V).

Software

The software and architecture went through a variety of iterations during development. The final architecture used 3 laptops, 2 desktops, an access point, and a router. It's important to note that the laptops of Robot 1 and Robot 2 are physically mounted on the backs of each Robot body, communicating through WiFi to the Admin console. The entire setup looks like the following diagram:

Admin Console

The heart of the infrastructure is the Admin Console. Originally, this was also intended to be a scoreboard to show audience members the current stats of the match, but as we got further into the project, we realized this wouldn't be necessary. The robots are where the action is, and people's eyes focus there. Additionally, the robots themselves display their current health status via LEDs, so duplicating this information isn't useful. However, the admin side of this app remains.

Sockets

The admin console is the master controller for the game state and utilizes socket communication between it, the robots, and the user consoles. A generic socket handler was written to span each computer in the setup. The SocketListener object allows for incoming connections to be received, while the SocketClient allows clients to connect to those SocketListeners. These are generic objects, which must specify objects of type GamePacket to send and receive:

public class SocketListener<TSend, TReceive> where TSend : GamePacket                                                
                                             where TReceive : GamePacket, new()

GamePacket is a base class from which specific packets inherit:

public abstract class GamePacket
{
    public byte[] ToByteArray() 
    {   
        MemoryStream ms = new MemoryStream();           
        BinaryWriter bw = new BinaryWriter(ms);
                
        try
        {           
            WritePacket(bw);
        }
        catch(IOException ex)
        {
            Debug.WriteLine("Error writing packet: " + ex);
        }
        
        return ms.ToArray();
    }
        
    public void FromBinaryReader(BinaryReader br)
    {        
        try
        {    
            ReadPacket(br);       
        }
        catch(IOException ex)       
        {
            Debug.WriteLine("Error reading packet: " + ex);
        }
    }
    
    public abstract void WritePacket(BinaryWriter bw);
    public abstract void ReadPacket(BinaryReader br);
}

For example, in communication between the robots and the admin console, GameStatePacket and MovementDescriptorPacket are sent and received. Each GamePacket must implement its own ReadPacket and WritePacket methods to serialize itself for sending across the socket.

Packets are sent between machines every "frame". We need the absolute latest game state, robot movement, etc. at all times to ensure the game is functional and responsive.

As is quite obvious, absolutely no effort was put into making the console "pretty". This is never seen by the end users and just needs to be functional. Once the robot software and the user consoles are started, the admin console initiates connections to each of those four machines. Each machine runs the SocketListener side of the socket code, while the Admin console creates four SocketClient objects to connect to each those. Once connected, the admin has control of the game and can start, stop, pause, and reset a match by sending the appropriate packets to everyone that is connected.

Robot

The robot UI is also never intended to be seen by an end user, and therefore contains only diagnostic information.

Each robot has a wireless Xbox 360 controller connected to it so it can be manually controlled. The UI above reflects the positions of the controller sticks and buttons. During a match, it's possible for a bot to get outside of our "safe zone". One bot might be pushing the other, or the user may be moving the bot toward the edge of the ring. To counter this, the player's coach can either temporarily move the bot, turning off Kinect input, or force the game into "referee mode" which pauses the entire match and turns off Kinect control on both sides. In either case, the robots can be driven with the controllers and reset to safe positions. Once both coaches signal that the robots are reset, the admin can then resume the match.

Controlling Hardware

Phidget hardware controlled our LEDs, relays, and sensors. Getting data out of a Phidget along with actions, such as opening and closing a relay, is shockingly easy as they have pretty straightforward C# APIs and samples, which is why they typically are our go-to product for projects like this.

Below are some code snippets for the LEDs, relays, and sensor.

LEDs – from LedController.cs

This is the code that actually updates the health LEDs in the robot's chest. The LEDs were put on the board in a certain order to allow this style of iteration. We had a small issue of running out of one color of LEDs so we used some super bright ones and had to reduce the power levels to the non-super bright LEDs to prevent possible damage:

private void UpdateLedsNonSuperBright(int amount, int offset, int brightness)
{
    for (var i = offset; i < amount + offset; i++)
    {
        _phidgetLed.leds[i] = brightness / 2;
    }
}

private void UpdateLedsSuperBright(int amount, int offset, int brightness)
{
    for (var i = offset; i < amount + offset; i++)
    {
        _phidgetLed.leds[i] = brightness;
    }
}

Sensor data – from SensorController.cs

This code snippet shows how we obtain the digital and analog inputs from the Phidget 8/8/8 interface board:

public SensorController(InterfaceKit phidgetInterfaceKit) : base(phidgetInterfaceKit)
{    
    PhidgetInterfaceKit.ratiometric = true;
}

public int PollAnalogInput(int index)
{
    return PhidgetInterfaceKit.sensors[index].Value;
}

public bool PollDigitalInput(int index)
{
    return PhidgetInterfaceKit.inputs[index];
}

Relays – from RelayController.cs

Electrical relays fire our pneumatic valves. These control the head popping and the arms punching. For our application, we wanted the ability to reset the relay automatically. When the relay is opened, an event is triggered and we create an actively polled thread to validate whether we should close the relay. The reason why we actively poll is someone could be quickly toggling the relay. We wouldn't want to close it on accident. The polling and logic does result in a possible delay or early trigger for closing the relay, but for the BoxingBots the difference of 10ms for a relay closing is acceptable:

public void Open(int index, int autoCloseDelay)
{   
    UseRelay(index, true, autoCloseDelay);
}

public void Close(int index)
{
    UseRelay(index, false, 0);
}

private void UseRelay(int index, bool openRelay, int autoCloseDelay)
{
    AlterTimeDelay(index, autoCloseDelay);
    PhidgetInterfaceKit.outputs[index] = openRelay;
}

void _relayController_OutputChange(object sender, OutputChangeEventArgs e)
{
    // closed
    if (!e.Value)
        return;

    ThreadPool.QueueUserWorkItem(state =>
    {                                          
        if (_timeDelays.ContainsKey(e.Index))
        {                                              
            while (_timeDelays[e.Index] > 0)                       
            {
                Thread.Sleep(ThreadTick);           
                _timeDelays[e.Index] -= ThreadTick;
            }                                            
        }
                                            
        Close(e.Index);
                                        
    });
}

public int GetTimeDelay(int index)
{
    if (!_timeDelays.ContainsKey(index))
        return 0;
    return _timeDelays[index];
}

public void AlterTimeDelay(int index, int autoCloseDelay)
{
    _timeDelays[index] = autoCloseDelay;
}

User Console

Since the theme of the party was Retro Gaming, we wanted to go for an early 80's Sci-fi style interface, complete with starscape background and solar flares! We wanted to create actual interactive elements, though, to maintain the green phosphor look of early monochrome monitors. Unlike traditional video games, however, the screens are designed not as the primary focus of attention, but rather to help calibrate the player before the round and provide secondary display data during the match. The player should primarily stay focused on the boxer during the match, so the interface is designed to sit under the players view line and serve as more of a dashboard during each match.

However, during calibration before each round, it is important to have the player understand how their core body will be used to drive the Robot base during each round. To do this, we needed to track an average of the joints that make up each fighter's body core. We handled the process by creating a list of core joints and a variable that normalizes the metric distances returned from the Kinect sensor into a human-acceptable range of motion:

private static List<JointType> coreJoints = newList<JointType>( 
    newJointType[] {
        JointType.AnkleLeft,
        JointType.AnkleRight,
        JointType.ShoulderCenter,
        JointType.HipCenter
    });
private const double RangeNormalizer = .22;
private const double NoiseClip = .05;

And then during each skeleton calculation called by the game loop, we average the core positions to determine the averages of the players as they relate to their playable ring boundary:

public staticMovementDescriptorPacket AnalyzeSkeleton(Skeleton skeleton)
{           
    // ...

    CoreAverageDelta.X = 0.0;
    CoreAverageDelta.Z = 0.0;
    foreach (JointType jt in CoreJoints)
    {
        CoreAverageDelta.X += skeleton.Joints[jt].Position.X - RingCenter.X;
        CoreAverageDelta.Z += skeleton.Joints[jt].Position.Z - RingCenter.Z;
    }

    CoreAverageDelta.X /= CoreJoints.Count * RangeNormalizer;
    CoreAverageDelta.Z /= CoreJoints.Count * RangeNormalizer;

    // ...

    if (CoreAverageDelta.Z > NoiseClip || CoreAverageDelta.Z < -NoiseClip)
    {
        packet.Move = -CoreAverageDelta.Z;
    }

    if (CoreAverageDelta.X > NoiseClip || CoreAverageDelta.X < -NoiseClip)
    {
        packet.Strafe = CoreAverageDelta.X;
    }
}

In this way, we filter out insignificant data noise and allow the player's average core body to serve as a joystick for driving the robot around. Allowing them to lean at any angle, the move and strafe values are accordingly set to allow for a full 360 degrees of movement freedom, while at the same time not allowing any one joint to unevenly influence their direction of motion.

Another snippet of code that may be of interest is the WPF3D rendering we used to visualize the skeleton. Since the Kinect returns joint data based off of a center point, it is relatively easy to wire up a working 3D model in WPF3D off of the skeleton data, and we do this in the ringAvatar.xaml control.

In the XAML, we simply need a basic Viewport3D with camera, lights, and an empty ModelVisual3D container to hold or squares. The empty container looks like this:              

<ModelVisual3D x:Name="viewportModelsContainer2">                   
    <ModelVisual3D.Transform>
        <Transform3DGroup>           
            <RotateTransform3D x:Name="bodyRotationCenter" CenterX="0" CenterY="0" CenterZ="0">      
                <RotateTransform3D.Rotation>             
                    <AxisAngleRotation3D x:Name="myAngleRotation" Axis="0,1,0" Angle="-40"/>                 
                </RotateTransform3D.Rotation>           
            </RotateTransform3D> 
        </Transform3DGroup> 
    </ModelVisual3D.Transform>
</ModelVisual3D>

In the code, we created a generic WPF3DModel that inherits from UIElement3D and is used to store the basic positioning properties of each square. In the constructor of the object, though, we can pass a reference key to a XAML file that defines the 3D mesh to use:

public WPF3DModel(string resourceKey)
{
    this.Visual3DModel = Application.Current.Resources[resourceKey] as Model3DGroup;
}

This is a handy trick when you need to do a fast WPF3D demo and require a certain level of flexibility. To create a 3D cube for each joint when ringAvatar is initialized, we simply do this:

private readonly List<WPF3DModel> _models = new List<WPF3DModel>();
private void CreateViewportModels()
{           
    for (int i = 0; i < 20; i++)
    { 
        WPF3DModel model = new WPF3DModel("mesh_cube");
        viewportModelsContainer2.Children.Add(model);

        // ...

        _models.Add(model);
    }

    // ...
}

And then each time we need to redraw the skeleton, we loop through the skeleton data and set the cube position like so:

if (SkeletonProcessor.RawSkeleton.TrackingState == SkeletonTrackingState.Tracked)
{
    int i = 0;  

    foreach (Joint joint in SkeletonProcessor.RawSkeleton.Joints)
    {
        if (joint.TrackingState == JointTrackingState.Tracked)
        {
                                        
            _models[i].Translate(                                        
                joint.Position.X * 8.0,                                    
                joint.Position.Y * 10.0,
                joint.Position.Z * -10.0);

            i++;
        }
    }

    // ...

}

There are a few other areas in the User Console that you may want to further dig into, including the weighting for handling a punch as well dynamically generating arcs based on the position of the fist to the shoulder. However, for this experience, the User Console serves as a secondary display to support the playing experience and gives both the player and audience a visual anchor for the game.

Making a 700lb Tank Drive like a First Person Shooter

The character in a first person shooter (FPS) video game has an X position, a Y position, and a rotation vector. On an Xbox controller, the left stick controls the X,Y position. Y is the throttle (forward and backward), X is the strafing amount (left and right), and the right thumb stick moves the camera to change what you're looking at (rotation).  When all three are combined, the character can do things such as run around someone while looking at them.

In the prior project, we had existing code that worked for controlling all 4 motors at the same time, working much like a tank does, so we only had throttle (forward and back) and strafing (left and right). Accordingly, we can move the motors in all directions, but there are still scenarios in which the wheels fight one another and the base won't move. By moving to a FPS style, we eliminate the ability to move the wheels in an non-productive way and actually make it a lot easier to drive.

Note that Clint had some wiring "quirks" with polarity and which motor was left VS right, he had to correct in these quirks in software :

public Speed CalculateSpeed(double throttleVector, double strafeVector, double rotationAngle)
{
    rotationAngle = VerifyLegalValues(rotationAngle);
    rotationAngle = AdjustValueForDeadzone(rotationAngle, AllowedRotationAngle, _negatedAllowedRotationAngle);

    // flipped wiring, easy fix is here  
    throttleVector *= -1;
    rotationAngle *= -1;
    
    // miss wired, had to flip throttle and straff for calc
    return CalculateSpeed(strafeVector + rotationAngle, throttleVector, strafeVector - rotationAngle, throttleVector);
}

protected Speed CalculateSpeed(double leftSideThrottle, double leftSideVectorMultiplier, double rightSideThrottle, double rightSideVectorMultiplier) 
{ /* code from Jellybean */ }

Conclusion

The Boxing Bots project was one of the biggest things we have built to date. It was also one of our most successful projects. Though it was a rainy, cold day and night in Austin when the bots were revealed, and we had to move locations several times during setup to ensure the bots and computers wouldn't be fried by the rain, they ran flawlessly for the entire event and contestants seemed to have a lot of fun driving them.

Camera Face Detection in C# Using Emgu CV (OpenCV in .NET) and WPF

Hi there, this is a new tutorial category in my blog. It's Computer Vision. In this blog, I'd like to show you something cool. It's how to perform Face Detection using your camera / Webcam. You'll see how your application can detect faces from a captured image. Curious about it? Let's take a look how to do that.

This what you need to follow this tutorial:

1. Microsoft Visual Studio 2010. Or if you don't have one, you can use 2008 version
2. Emgu CV (OpenCV in .NET). You can download the latest version in this link: http://www.emgu.com/wiki/index.php/Main_Page and follow the installation instruction
3. Basic Knowledge of C# Programming
4. Familiar in WPF Development

After you've got what you need, it's time to rock!

1. First thing you should do is installing Emgu CV. Your installation path should be like C:\Emgu\emgucv-windows-x86 2.2.1.1150. And you can see inside C:\Emgu\emgucv-windows-x86 2.2.1.1150\bin some DLLs and sample programs. You can see a simple face detection app Example.FaceDetection.exe and you'll see something like the first picture in this post.

...

...

8. Here is the result of our work:

...

Note : If you can't run your project, just build it and make sure all opencv_xxxx.dll files and haarcascade_frontalface_alt_tree.xml in the same directory with your executable file. You can find those files inside C:\Emgu\emgucv-windows-x86 2.2.1.1150\bin .

Take note of his note... Getting the OpenCV and EmguCV dependices were the hardest part of this project.

Also there there's been a file name change to the noted XML file, haarcascade_frontalface_alt_tree.xml. If you get the latest drop of emgucv-windows-x86 the file name's been changed to "haarcascade_frontalface_default.xml". So you'll need to tweak the code to take that into account.

Here's the before;

And the after;

Once the dependences are in place and the file name fixed, this ran like a charm and really did make facial detection look easy...

If you've been wondering how to do face detection, this project is one you'll want to check out...

Think it was kind of cool and something you'd like to look see the source for?

MY EVENTS - Sample Modern Application with Visual Studio 2012

The main goal of this sample modern application is to provide a sample app where you can see most of the new technologies related to Visual Studio 2012, in a practical way.

Sample application context and scenarios
This sample application shows most of the new technologies you can use with Visual Studio 2012 in order to build Modern Apps.

The context is about an events/conferences management system called “My Events”.
It is composed by:

• Central Web API Services:
• Global Web-App (ASP.NET MVC4):
• Organizers WPF App (WPF):
• Organizers Windows 8 Store App (XAML/C#):
• Attendees Windows 8 Store App (HTML5/WinJS):

Goals
This global system and the related client apps are highlighting the following points:

• Consumer end-user point of view with the latest UX technologies capabilities, typical of Modern-Apps.
• Enterprise and LOB (Line of Business) point of view, when using a desktop application.
• Cloud friendly. You can deploy very easily all the server assets (Web Api Services and Web app) into the Windows Azure cloud.
• Extensible and open to more complex scenarios. Even though our scenario’s main goal is to ‘keep it simple’, we wanted to be able to leave it open for future extensions and complexity that is usually required when implementing a real production application.
• Multiple technical approaches. We wanted to illustrate how multiple technical approaches can co-exist within the same solution (Web, mainstream-app, CRUD, etc.)
• Easily deployable. The RI is easily deployable so that you can install it and experiment with it.

The selected technologies and frameworks used are the following:

• Core
  • ASP.NET Web-API Services
  • Entity Framework 5 (Code First)
  • SQL Server LocalDB
• Web App
  • ASP.NET MVC 4
  • JavaScript & JQuery consuming Web Api Services
• Windows 8 Store Apps
  • Windows 8 Store App using HTML5/WinJS
  • Windows 8 Store Apps using XAML/C#
• Desktop App
  • WPF (Windows Presentation Foundation) App

While this show's off allot...

What this sample application is NOT about
This is not a production application and it is not intended as a guidance for complex scenarios/applications, as it mostly covers CRUD and Data-Driven scenarios, only. If you need guidance for complex scenarios, we recommend to check guidance material from the Microsoft Patterns & Practices group like the ‘CQRS Journey guidance’, which shows a reference application with a related functional domain & scope (Events/Conferences platform) but from a different point of view based on design-patterns and best architectural practices for complex scenarios, covering approaches like CQRS (Command & Query Responsibility Segregation) & DDD (Domain Driven Design).

Ready to build it now?

Building the Sample

Software required:

Visual Studio 2012, Windows 8, BingMaps JavaScript SDK [GD: which you can find here Bing Maps SDK for Metro style apps (Beta)]

Check that you have the dependencies, open the solution and run it. The database will be generated for you using LocalDB and Entity Framework Initializers.

If when running the web client for the first time, you get a runtime error here;

...that it can't find a file in the FakeImages folder, what I did was just copy the folder into the path it thought to find the images. Easier than tweaking code.

So I coping the FakeImages folder from
...\MY EVENTS - Sample Modern Application with Visual Studio 2012\C#,JavaScript\MyEvents\MyEvents.Web\FakeImages
to
...\MY EVENTS - Sample Modern Application with Visual Studio 2012\FakeImages

Then the app ran fine. Once run the first time, you can delete that extra copy if you want, it's only need the first time the app runs, when its building its data store.

Also note: When creating an Event, also make sure to add at least one Session to it. Otherwise the event won't show up in the in a few of the Clients (This had me wondering if something was busted. I could see the event in the Web and Desktop apps, but in none of the Windows Store apps... Adding a Session fixed that. Doh!)

Here's a snap of the Solution;

And some snaps of it running on my system.

Here's the Web app;

The WPF Desktop app;

As a Windows Store app;

Wrap up
Therefore and as previously mentioned, our main objective is to highlight and show most of the new capabilities and technical possibilities offered by Visual Studio 2012 and all its related technologies in order to build Modern Apps.

There's a bunch here to look in this source. From using a Solution wide version assembly file, to Portable Library projects, Windows Store apps, Facebook Integration, Twitter, Maps, MVC4, ASP.Net Web API, Json.Net, MVVM, unit testing the web backend and much, much more.

Introduction

This app is based on an old hack from back to at least 1997 that uses the HP Job control language to change the text on the LCD status display. Some background on this hack can be found here: http://www.irongeek.com/i.php?page=security/networkprinterhacking. There are various versions of the hack code out there, and typically they all work the same way: you specify the address of the printer and the message to send, open a TCP connection to the printer over port 9100, and then send a command to update the display.

This app is a variation of that hack. It’s a tray application that periodically checks the stock price for a company and then sends a formatted message of the stock symbol and price to a specified printer.

To get the current stock price, we retrieve the data from Yahoo! through finance.yahoo.com. The data comes back in CSV format. To save a step in parsing the CSV columns, we use YQL, the Yahoo! Query Language. Yahoo! created YQL to provide a SQL-like API for querying data from various online web services. YQL! can return XML or JSON data, and we’ll take the XML and use LINQ to parse the data.

How to Use the App

The first time you run the app, the main form will appear and you'll be able to enter in the stock symbol and the IP address of your printer. Click the “Get Printer” button to view a dialog listing the available printers connected on port 9100.

There are two checkboxes. The first one is labeled “Start with Windows”. When this setting is saved, the following code is executed to tell Windows whether to start the app when user logs in:

C#

private void StartWithWindows(bool start) 
{ 
    using (RegistryKey hkcu = Registry.CurrentUser) 
    { 
        using (RegistryKey runKey = hkcu.OpenSubKey(@"Software\Microsoft\Windows\CurrentVersion\Run", true)) 
        { 
            if (runKey == null) 
                return;
 
            if (start) 
                runKey.SetValue(wpfapp.Properties.Resources.Code4FunStockPrinter, Assembly.GetEntryAssembly().Location); 
            else 
            { 
                if (runKey.GetValue(wpfapp.Properties.Resources.Code4FunStockPrinter) != null) 
                    runKey.DeleteValue(wpfapp.Properties.Resources.Code4FunStockPrinter); 
            } 
        } 
    } 
}

VB

Private Sub StartWithWindows(ByVal start As Boolean)
    Using hkcu As RegistryKey = Registry.CurrentUser
        Using runKey As RegistryKey = hkcu.OpenSubKey("Software\Microsoft\Windows\CurrentVersion\Run", True)
            If runKey Is Nothing Then
                Return
            End If

            If start Then
                runKey.SetValue(My.Resources.Code4FunStockPrinter, System.Reflection.Assembly.GetEntryAssembly().Location)
            Else
                If runKey.GetValue(My.Resources.Code4FunStockPrinter) IsNot Nothing Then
                    runKey.DeleteValue(My.Resources.Code4FunStockPrinter)
                End If
            End If
        End Using
    End Using
End Sub

The enabled checkbox is used so that you can pause the sending of the stock price to the printer without having to exit the app. When you press the “Start” button, you are prompted to save any changed settings and the app hides the main form, leaving just the system tray icon. While the app is running, it will check the stock price every 5 minutes. If the price has changed, it tells the printer to display the stock symbol and price on the display.

A DispatcherTimer object is used to determine when to check the stock price. It’s created when the main form is created and will only execute the update code when the settings have been defined and enabled.

If an unexpected error occurs, the DispatcherUnhandledException event handler will log the error to a file and alert the user:

C#

void App_DispatcherUnhandledException(object sender, System.Windows.Threading.DispatcherUnhandledExceptionEventArgs e) 
{ 
    // stop the timer 
    _mainWindow.StopPrinterHacking();

    // display the error 
    _mainWindow.LogText("Sending the stock prince to the printer was halted due to this error:" + e.Exception.ToString()); 

    // display the form 
    ShowMainForm(); 

    // Log the error to a file and notify the user 
    Exception theException = e.Exception; 
    string theErrorPath = Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData) + "\\PrinterDisplayHackError.txt"; 

    using (System.IO.TextWriter theTextWriter = new System.IO.StreamWriter(theErrorPath, true)) 
    { 
        DateTime theNow = DateTime.Now; 
        theTextWriter.WriteLine(String.Format("The error time: {0} {1}", theNow.ToShortDateString(), theNow.ToShortTimeString())); 
        while (theException != null) 
        { 
            theTextWriter.WriteLine("Exception: " + theException.ToString()); 
            theException = theException.InnerException; 
        } 
    } 

    MessageBox.Show("An unexpected error occurred. A stack trace can be found at:\n" + theErrorPath); 
    e.Handled = true; 
}

VB

Private Sub App_DispatcherUnhandledException(ByVal sender As Object, ByVal e As System.Windows.Threading.DispatcherUnhandledExceptionEventArgs)
    ' stop the timer
    _mainWindow.StopPrinterHacking()

    ' display the error
    _mainWindow.LogText("Sending the stock prince to the printer was halted due to this error:" & e.Exception.ToString())

    ' display the form
    ShowMainForm()

    ' Log the error to a file and notify the user
    Dim theException As Exception = e.Exception
    Dim theErrorPath As String = Environment.GetFolderPath(Environment.SpecialFolder.CommonApplicationData) & "\PrinterDisplayHackError.txt"
    Using theTextWriter As System.IO.TextWriter = New System.IO.StreamWriter(theErrorPath, True)
        Dim theNow As Date = Date.Now
        theTextWriter.WriteLine(String.Format("The error time: {0} {1}", theNow.ToShortDateString(), theNow.ToShortTimeString()))
        Do While theException IsNot Nothing
            theTextWriter.WriteLine("Exception: " & theException.ToString())
            theException = theException.InnerException
        Loop
    End Using
    MessageBox.Show("An unexpected error occurred.  A stack trace can be found at:" & vbLf & theErrorPath)
    e.Handled = True
End Sub

The User Interface

The application currently looks like this:

Pressing the “Get Printer” button opens a dialog that looks like this:

The UI was designed with WPF and uses the basic edit controls as well as a theme from the WPF Themes project on CodePlex. On the main form, the stock symbol, printer IP address, and the check boxes using data bindings to bind each control to a custom setting are defined in the PrinterHackSettings class.

The settings are defined in a class descended from ApplicationSettingsBase. The .NET runtime will read and write the settings based on the rules defined here.

The big RichTextBog in the center of the form is used to display the last 10 stock price updates. The app keeps a queue of the stock price updates, and when the queue is updated it’s sent to the RichTextBox with the following code:

C#

public void UpdateLog(RichTextBox rtb) 
{ 
    int i = 0; 
    TextRange textRange = new TextRange(rtb.Document.ContentStart, rtb.Document.ContentEnd); 
    textRange.Text = string.Empty; 
    foreach (var lg in logs) 
    { 
        i++; 
        TextRange tr = new TextRange(rtb.Document.ContentEnd, rtb.Document.ContentEnd) { Text = String.Format("{0} : ", lg.LogTime.ToString("hh:mm:ss")) }; 
        tr.ApplyPropertyValue(TextElement.ForegroundProperty, Brushes.DarkRed); 
        tr = new TextRange(rtb.Document.ContentEnd, rtb.Document.ContentEnd) { Text = lg.LogMessage + Environment.NewLine }; 
        tr.ApplyPropertyValue(TextElement.ForegroundProperty, Brushes.Black); 
    } 
    if (i > 10) 
        logs.Dequeue(); 

    rtb.ScrollToEnd(); 
}

VB

Public Sub UpdateLog(ByVal rtb As RichTextBox)
    Dim i As Integer = 0

    For Each lg As LogEntry In logs
        i += 1
        Dim tr As New TextRange(rtb.Document.ContentEnd, rtb.Document.ContentEnd) With {.Text = String.Format("{0} : ", lg.LogTime.ToString("hh:mm:ss"))}
        tr.ApplyPropertyValue(TextElement.ForegroundProperty, Brushes.Red)

        tr = New TextRange(rtb.Document.ContentEnd, rtb.Document.ContentEnd) With {.Text = lg.LogMessage & Environment.NewLine}
        tr.ApplyPropertyValue(TextElement.ForegroundProperty, Brushes.White)
    Next lg

    If i > 10 Then
        logs.Dequeue()
    End If

    rtb.ScrollToEnd()
End Sub

Displaying a notification trace icon

WPF does not provide any functionality for running an app with just an icon in the notification area of the taskbar. We need to tap into some WinForms functionality. Add a reference to the System.Windows.Form namespace to the project. In the App.xaml file, add an event handler to the Startup event. Visual Studio will wire up an Application.Startup event in the code behind file. We can use that event to add a WinForms.NotifyIcon and wireup a context menu to it:

C#

private void Application_Startup(object sender, StartupEventArgs e) 
{ 
    _notifyIcon = new WinForms.NotifyIcon(); 
    _notifyIcon.DoubleClick += notifyIcon_DoubleClick; 
    _notifyIcon.Icon = wpfapp.Properties.Resources.Icon; 
    _notifyIcon.Visible = true; 

    WinForms.MenuItem[] items = new[] 
    { 
        new WinForms.MenuItem("&Settings", Settings_Click) { DefaultItem = true } , 
        new WinForms.MenuItem("-"), 
        new WinForms.MenuItem("&Exit", Exit_Click) 
    }; 

    _notifyIcon.ContextMenu = new WinForms.ContextMenu(items); 
    _mainWindow = new MainWindow(); 

    if (!_mainWindow.SettingsAreValid()) 
        _mainWindow.Show(); 
    else 
        _mainWindow.StartPrinterHacking(); 
}

VB

Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs)
    _notifyIcon = New System.Windows.Forms.NotifyIcon()
    AddHandler _notifyIcon.DoubleClick, AddressOf notifyIcon_DoubleClick

    _notifyIcon.Icon = My.Resources.Icon
    _notifyIcon.Visible = True

    Dim items() As System.Windows.Forms.MenuItem = {New System.Windows.Forms.MenuItem("&Settings", AddressOf Settings_Click) With {.DefaultItem = True}, New System.Windows.Forms.MenuItem("-"), New System.Windows.Forms.MenuItem("&Exit", AddressOf Exit_Click)}

    _notifyIcon.ContextMenu = New System.Windows.Forms.ContextMenu(items)

    _mainWindow = New MainWindow()

    If Not _mainWindow.SettingsAreValid() Then
        _mainWindow.Show()
    Else
        _mainWindow.StartPrinterHacking()
    End If
End Sub

Getting the Stock Information

From the Yahoo Financial site, you get can download a CSV file for any specified stock. Here's a web site that documents the format needed to get the right fields: http://www.gummy-stuff.org/Yahoo-data.htm. We want to return the stock symbol and the last traded price. That works out to be “s” and “l1”, respectively.

If you open the following URL with a browser, a file named quotes.csv will be returned:

http://download.finance.yahoo.com/d/quotes.csv?s=MSFT&f=sl1

You should get a file like this:

The first field is the stock symbol and the second is the last recorded price. You could just read that data and parse out the fields, but we can get the data in more readable format.

Yahoo! has a tool called the YQL Console that will you let you interactively query against Yahoo! and other web service providers. While it's overkill to use on a two column CSV file, it can be used to tie together data from multiple services.

To use our MSFT stock query with YQL, we format the query like this:

select * from csv where url='http://download.finance.yahoo.com/d/quotes.csv?s=MSFT&f=sl1' and columns='symbol,price'

You can see this query loaded into the YQL Console here.

When you click the “TEST” button, the YQL query is executed and the results displayed in the lower panel. By default, the results are in XML, but you can also get the data back in JSON format.

Our result set has been transformed into the following XML:

<?xml version="1.0" encoding="UTF-8"?> 
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng" yahoo:count="1" yahoo:created="2012-08-23T02:36:06Z" yahoo:lang="en-US"> 
    <results> 
        <row> 
            <symbol>MSFT</symbol> 
            <price>30.54</price> 
        </row> 
    </results> 
</query>

This XML document can be easily parsed in the application code. The URL listed below “THE REST QUERY” on the YQL page is the YQL query encoded so that it can be sent as a GET request. For this YQL query, we use the following URL:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes.csv%3Fs%3DMSFT%26f%3Dsl1'%20and%20columns%3D'symbol%2Cprice'

This is the URL that our application uses to get the stock price. Notice the MSFT in bold face—we replace that hard coded stock symbol with a format item and just use String.Format() to generate the URL at run time.

To get the stock price from our code, we can wrap this with the following method:

C#

public string GetPriceFromYahoo(string tickerSymbol) 
{ 
    string price = string.Empty; 
    string url = string.Format("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes.csv%3Fs%3D{0}%26f%3Dsl1'%20and%20columns%3D'symbol%2Cprice'", tickerSymbol); 

    try 
    { 
        Uri uri = new Uri(url); 
        HttpWebRequest req = (HttpWebRequest)WebRequest.Create(uri); 
        HttpWebResponse resp = (HttpWebResponse)req.GetResponse(); 
        XDocument doc = XDocument.Load(resp.GetResponseStream()); 
        resp.Close(); 
        var ticker =    from query in doc.Descendants("query") 
                        from results in query.Descendants("results") 
                        from row in query.Descendants("row") 
                        select new { price = row.Element("price").Value }; 

        price = ticker.First().price; 
    } 
    catch (Exception ex) 
    { 
        price = "Exception retrieving symbol: " + ex.Message; 
    } 
    return price; 
}

VB

Public Function GetPriceFromYahoo(ByVal tickerSymbol As String) As String
    Dim price As String

    Dim url As String = String.Format("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes.csv%3Fs%3D{0}%26f%3Dsl1'%20and%20columns%3D'symbol%2Cprice'", tickerSymbol)

    Try
        Dim uri As New Uri(url)

        Dim req As HttpWebRequest = CType(WebRequest.Create(uri), HttpWebRequest)
        Dim resp As HttpWebResponse = CType(req.GetResponse(), HttpWebResponse)

        Dim doc As XDocument = XDocument.Load(resp.GetResponseStream())

        resp.Close()

        Dim ticker = From query In doc.Descendants("query") , results In query.Descendants("results") , row In query.Descendants("row") _
                     Let xElement = row.Element("price") _
                     Where xElement IsNot Nothing _
                     Select New With {Key .price = xElement.Value}

        price = ticker.First().price
    Catch ex As Exception
        price = "Exception retrieving symbol: " & ex.Message
    End Try

    Return price
End Function

While this code makes the readying of a two column CSV file more complicated than it needs to be, it makes it easier to adapt this code to read the results for multiple stock symbols and/or additional fields.

Getting the List of Printers

We are targeting a specific type of printer: those that use the HP PJL command set. Since we talk to these printers over port 9100, we only need to list the printers that listen on that port. We can use Windows Management Instrumentation (WMI) to list the printer TCP/IP addresses that are using port 9100.  The WMI class Win32_TCPIPPrinterPort can be used for that purpose, and we’ll use the following WMI query:

Select Name, HostAddress from Win32_TCPIPPrinterPort where PortNumber = 9100

This returns the list of port names and addresses on your computer that are being used over port 9100. Take that list and store it in a dictionary for a quick lookup:

C#

static public Dictionary<string, IPAddress> GetPrinterPorts()
{ 
    var ports = new Dictionary<string, IPAddress>(); 

    ObjectQuery oquery = new ObjectQuery("Select Name, HostAddress from Win32_TCPIPPrinterPort where PortNumber = 9100"); 
    ManagementObjectSearcher mosearcher = new ManagementObjectSearcher(oquery); 

    using (var searcher = new ManagementObjectSearcher(oquery)) 
    { 
        var objectCollection = searcher.Get(); 
        foreach (ManagementObject managementObjectCollection in objectCollection) 
        { 
            var portAddress = IPAddress.Parse(managementObjectCollection.GetPropertyValue("HostAddress").ToString()); 
            ports.Add(managementObjectCollection.GetPropertyValue("Name").ToString(), portAddress); 
        } 
    } 

    return ports; 
}

VB

Public Shared Function GetPrinterPorts() As Dictionary(Of String, IPAddress)
    Dim ports = New Dictionary(Of String, IPAddress)()

    Dim oquery As New ObjectQuery("Select Name, HostAddress from Win32_TCPIPPrinterPort where PortNumber = 9100")

    Dim mosearcher As New ManagementObjectSearcher(oquery)

    Using searcher = New ManagementObjectSearcher(oquery)
        Dim objectCollection = searcher.Get()

        For Each managementObjectCollection As ManagementObject In objectCollection
            Dim portAddress = IPAddress.Parse(managementObjectCollection.GetPropertyValue("HostAddress").ToString())
            ports.Add(managementObjectCollection.GetPropertyValue("Name").ToString(), portAddress)
        Next managementObjectCollection
    End Using

    Return ports
End Function

Next, we get the list of printers that this computer knows about. We could do that through WMI, but I decided to stay closer to the .NET Framework and use the LocalPrintServer class. The GetPrintQueues method returns a collection of print queues of the type PrintQueueCollection. We can then iterate through the PrintQueueCollection and look for all printers that have a port name that matches the names returned by the WMI query. That gives code that looks like this:

C#

public class LocalPrinter 
{ 
    public string Name { get; set; } 
    public string PortName { get; set; } 
    public IPAddress Address { get; set; } 
} 

static public List<LocalPrinter> GetPrinters() 
{ 
    Dictionary<string, IPAddress> ports = GetPrinterPorts(); 
    EnumeratedPrintQueueTypes[] enumerationFlags = { EnumeratedPrintQueueTypes.Local }; 

    LocalPrintServer printServer = new LocalPrintServer(); 
    PrintQueueCollection printQueuesOnLocalServer = printServer.GetPrintQueues(enumerationFlags); 

    return (from printer in printQueuesOnLocalServer 
            where ports.ContainsKey(printer.QueuePort.Name) 
            select new LocalPrinter() 
            { 
                Name = printer.Name, 
                PortName = printer.QueuePort.Name, 
                Address = ports[printer.QueuePort.Name] 
            }).ToList(); 
}

VB

Public Class LocalPrinter
    Public Property Name() As String
    Public Property PortName() As String
    Public Property Address() As IPAddress
End Class

Public Shared Function GetPrinters() As List(Of LocalPrinter)
    Dim ports As Dictionary(Of String, IPAddress) = GetPrinterPorts()

    Dim enumerationFlags() As EnumeratedPrintQueueTypes = { EnumeratedPrintQueueTypes.Local }

    Dim printServer As New LocalPrintServer()

    Dim printQueuesOnLocalServer As PrintQueueCollection = printServer.GetPrintQueues(enumerationFlags)

    Return ( _
            From printer In printQueuesOnLocalServer _
            Where ports.ContainsKey(printer.QueuePort.Name) _
            Select New LocalPrinter() With {.Name = printer.Name, .PortName = printer.QueuePort.Name, .Address = ports(printer.QueuePort.Name)}).ToList()
End Function

Sending the Stock Price to the Printer

The way to send a message to a HP display is via a PJL command. PJL stands for Printer Job Language. Not all PJL commands are recognized by every HP printer, but if you have an HP laser printer with a display, the command should work. This should work for any printer that is compatible with HP’s PJL command set. For the common PJL commands, HP has an online document here.

We will be using the “Ready message display” PJL command. All PJL commands will start and end with a sequence of bytes called the “Universal Exit Language” or UEL. This sequence tells the printer that it’s about to receive a PJL command. The UEL is defined as

<ESC>%-12345X

The format of the packet sent to the printer is be "UEL PJL command UEL". The Ready message display format is

@PJL RDYMSG DISPLAY=”message”[<CR>]<LF>

To send the command that has the printer display “Hello World”, you would send the following sequence:

<ESC>%-12345X@PJL RDYMSG DISPLAY=”Hello World”[<CR>]<LF><ESC>%-12345X[<CR>]<LF>

We wrap this up in a class called SendToPrinter and the good stuff gets executed in the Send method, as listed below:

C#

public class SendToPrinter 
{ 
    public string host { get; set; } 
    public int Send(string message) 
    { 
        IPAddress addr = null; 
        IPEndPoint endPoint = null; 

        try 
        { 
            addr = Dns.GetHostAddresses(host)[0]; 
            endPoint = new IPEndPoint(addr, 9100); 
        } 
        catch (Exception e) 
        { 
            return 1; 
        } 

        Socket sock = null; 
        String head = "\u001B%-12345X@PJL RDYMSG DISPLAY = \""; 
        String tail = "\"\r\n\u001B%-12345X\r\n"; 
        ASCIIEncoding encoding = new ASCIIEncoding(); 

        try 
        { 
            sock = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.IP); 
            sock.Connect(endPoint); 
            sock.Send(encoding.GetBytes(head)); 
            sock.Send(encoding.GetBytes(message)); 
            sock.Send(encoding.GetBytes(tail)); 
            sock.Close(); 
        } 
        catch (Exception e) 
        { 
            return 1; 
        } 

        int bytes = (head + message + tail).Length; 
        return 0; 
    } 
}

VB

Public Function Send(ByVal message As String) As Integer
    Dim endPoint As IPEndPoint = Nothing

    Try
        Dim addr As IPAddress = Dns.GetHostAddresses(Host)(0)

        endPoint = New IPEndPoint(addr, 9100)
    Catch
        Return 1
    End Try

    Dim startPJLSequence As String = ChrW(&H1B).ToString() & "%-12345X@PJL RDYMSG DISPLAY = """
    Dim endPJLSequence As String = """" & vbCrLf & ChrW(&H1B).ToString() & "%-12345X" & vbCrLf

    Dim encoding As New ASCIIEncoding()

    Try
        Dim sock As New Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.IP)

        sock.Connect(endPoint)

        sock.Send(encoding.GetBytes(startPJLSequence))
        sock.Send(encoding.GetBytes(message))
        sock.Send(encoding.GetBytes(endPJLSequence))

        sock.Close()
    Catch
        Return 1
    End Try

    Return 0
End Function

The Installer

The installer for this app was written with WiX, Windows Installer XML. WiX is an open source project created by Rob Mensching that lets you build Windows Installer .msi and .msm files from XML source code. I used the release candidate of WiX 3.6, but any recent version should work. Of course, you don’t need an installer if you build the app yourself.

Setting InstalScope to “perUser” designates this package as being a per-user install. Adding the property “WixAppFolder” and set to “WixPerUserFolder” tells WiX to install this app under %LOCALAPPDATA% instead of under %ProgramFiles%. This eliminates the need for the installer to request elevated rights and the UAC prompt:

<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi"> 
    <Product Id="*" Name="Coding4Fun Printer Display Hack" Language="1033" Version="1.0.0.0" Manufacturer="Coding4Fun" UpgradeCode="e0a3eed3-b61f-46da-9bda-0d546d2a0622"> 
    <Package InstallerVersion="200" Compressed="yes" InstallScope="perUser" /> 
    <Property Id="WixAppFolder" Value="WixPerUserFolder" />

Because we are not touching any system settings, I eliminated the creation of a system restore point at the start of the installation process. This greatly speeds up the installation of the app, and is handled by adding a property named MSIFASTINSTALL with the value of “1”:

<Property Id="MSIFASTINSTALL" Value="1" />

I modified the UI sequence to skip over the end user license agreement. There is nothing to license here and no one reads EULAs anyways. To do this, I needed to download the WiX source code and extract a file named WixUI_Mondo.wxs. I added it to the installer project and renamed it to WixUI_MondoNoLicense.wxs. I also added a checkbox to the exit dialog to allow the user to launch the app after it been installed:

<Property Id="WIXUI_EXITDIALOGOPTIONALCHECKBOXTEXT" Value="Launch Printer Display Hack" /> 
<Property Id="WixShellExecTarget" Value="[#exe]" /> 
<CustomAction Id="LaunchApplication" BinaryKey="WixCA" DllEntry="WixShellExec" Impersonate="yes" /> 
<UI> 
    <UIRef Id="WixUI_MondoNoLicense"/> 
    <Publish Dialog="ExitDialog" Control="Finish" Event="DoAction" Value="LaunchApplication"> 
        WIXUI_EXITDIALOGOPTIONALCHECKBOX = 1 and NOT Installed 
    </Publish> 
</UI>

When you build the installer, it generates two ICE91 warning messages. An ICE91 warning occurs when you install a file or shortcut into a per-user only folder. Since we have explicitly set the InstallScope to “perUser”, we can safely ignore these two warnings. If you hate warning messages, you can use the tool settings for the installer project to suppress ICE91 validation checks:

Conclusion

I have had various versions of this app running in my office for over a year. It’s been set to show our current stock price on the main printer in the development department. It’s fun to watch people walk near the printer just to check out the current stock price.

If you want to try this out, the download link for the source code and installer is at the top of the article!

About The Author

I am a senior R&D engineer for Tyler Technologies, working on our next generation of school bus routing software. I also am the leader of the Tech Valley .NET Users Group (TVUG). You can follow me at @anotherlab and check out my blog at anotherlab.rajapet.net. I would list my G+ address, but I don’t use it. I started out with a VIC-20 and been slowly moving up the CPU food chain ever since.

I would like to thank Brian Peek on the Coding4Fun team for his encouragement and suggestions and for letting me steal large chunks of the UI code from his TweeVo project .

Helix 3D Toolkit

Project Description
Helix 3D Toolkit is a collection of custom controls and helper classes for WPF 3D. The toolkit contains controls to manipulate the camera, classes to import models (3ds,lwo,obj) and export models.

NuGet package
http://nuget.org/List/Packages/HelixToolkit (updated at every code check-in)

Features

• Camera manipulation control
  • Turntable rotation
  • Trackball rotation
  • Zoom extents
  • Zoom by rectangle
  • Change field-of-view
  • Zoom/Rotate around the mouse down point
  • Support for orthographic and perspective cameras
  • Support for touch manipulation events (e.g. pinch to zoom)
• Controls
  • HelixViewport3D - camera manipulation, lights and a Viewport3D
  • StereoView3D - cross/parallel stereo viewing
  • AnaglyphView3D - anaglyph viewing (requires red/cyan glasses)
  • ViewCube - rotates the view to align with selected faces of a cube
• Input
  • Support for 3D Connexion SpaceNavigator
  • Examples for Wii remote
  • Examples for Kinect
• Export
  • Kerkythea render engine
  • Wavefront files (.obj)
  • X3D (not finished)
  • Collada (not finished)
  • VRML97 (not finished)
  • POV-Ray (not finished)
• Import
  • 3D Studio files (.3ds)
  • Lightwave files (.lwo)
  • Wavefront files (.obj)
  • StereoLithography files (.stl)
• MeshBuilder - generates MeshGeometry3D
  • Extrude
  • Revolve
  • Loft
  • Boxes
  • Rectangular meshes
  • Tubes
  • Cone/Cylinder
• Subdivision surfaces (Loop)
• Visual3D objects
  • Arrow
  • Box
  • Cube
  • Rectangle
  • Lines (screen space thickness)
  • Points (screen space size)
  • GridLines
  • PieSlice
  • Sphere
  • TruncatedCone
  • Tube
  • Pipe
  • CoordinateSystem
  • Light
  • PanoramaCube
  • Terrain
  • Text
  • Billboard
  • Text billboard
  • Cutting planes
  • SortingVisual3D (sorts transparent objects by distance from camera)
• Effects
  • Anaglyph shader effect

The only way to really get a feel for this project is to download it and play with the Samples.

Here's just a few of them from the included Sample Browser

From real time cloth examples;

To building LEGOs

There's other demo's to, like the 360 degree panorama viewer;

And my favorite, the Solar System;

Why is this my favorite? A couple reasons. First, how the textures are used to show rotation. Check out the spot on the Sun and how it moves over time. Same for the Earth and other planets. Second is how the solar system is "created".

Yep, creating the Solar System via WPF (and MVVM). How cool is that?

And yes, you get all the source for all of this, the examples and the Toolkit too.

If you're creating 3D based applications in WPF, you need to check out this toolkit...

MayhemVolumeStart.zip file contains the class library project all set up with the NuGet package references and the reaction that increments the volume.

The first step we are going to take is to add the additional references we need to be configurable. The first reference is MayhemWpf from the same NuGet feed MayhemCore is from. (http://makemayhem.com/nuget). Add a reference to the following assemblies:

• PresentationCore
• PresentationFramework
• System.Runtime.Serialization
• System.Xaml
• WindowsBase.

Next, we switch the code from incrementing the volume to setting the volume to 50%.

To do this, replace the line:

device.AudioEndpointVolume.VolumeStepUp();

with

device.AudioEndpointVolume.MasterVolumeLevelScalar = 50 / 100.0f;

The reaction now works successfully to set the volume to half way. The next step is to make that setting configurable, and persist between application runs. Let’s make that 50 a variable. Add a private integer to the class (I’m calling it level) and change the above line to be:

device.AudioEndpointVolume.MasterVolumeLevelScalar = level / 100.0f;

Since that variable will be user configurable, we want to be able to show a string on the main window that says what the reaction is doing. To do this, we have to tell Mayhem that our reaction is configurable by implement the IWpfConfigurable interface from MayhemWpf.

In order to set that configuration string we have to implement the method GetConfigString. The implementation of this method should return some string that provides a look into what the configuration settings are for the reaction.

I will make the GetConfigString method be the following:

public string GetConfigString()
{
   return string.Format("Set the volume to {0}%",level);
}

Now, in order to make the module save the configured state when the application is shut down and restarted, we need to add a little bit of data contract code. We are going to add the [DataContract] attribute to our class. This attribute comes from the System.Runtime.Serialization framework.

Our class header now looks like:

[DataContract]
[MayhemModule("Set Volume", "Sets the master volume level")]
public class SetVolume : ReactionBase, IWpfConfigurable

Note that I also changed the MayhemModule attribute’s name and description to reflect the new functionality.

We also need to mark the configurable variables to be saved as well. To do that, add the [DataMember] attribute to our level variable:

[DataMember]
private int level;

In order to set a default value for this variable, we shouldn’t initialize it using a constructor. Constructors should never be used in modules. Instead, we have a method that should be overridden that you get from ReactionBase. OnLoadDefaults is to load the settings you want to have by default.

protected override void OnLoadDefaults()
{
   level = 50;
}

Now when you use the SetVolume reaction in Mayhem, it will at 50%, but if that value is changed and the application is restarted, it will be set to the value it was at before it was closed!

The next step is to make the configuration window that actually enables that variable to be modified.

Add a new WPF UserControl item to the project named SetVolumeConfig.xaml.

Replace the contents of the XAML file with:

<src:WpfConfiguration x:Class="Volume.SetVolumeConfig"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
   xmlns:src="clr-namespace:MayhemWpf.UserControls;assembly=MayhemWpf"
   Width="300">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="100" />
         <ColumnDefinition Width="200" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
         <RowDefinition />
      </Grid.RowDefinitions>
      <TextBlock Style="{StaticResource ConfigLabel}" Grid.Column="0" Grid.Row="0">Volume:</TextBlock>
      <Slider Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Left"  Name="VolumeSlider" VerticalAlignment="Top" Width="200" Maximum="100" />
   </Grid>
</src:WpfConfiguration>

This configuration window simply has a volume slider allowing values between 0 and 100. WpfConfiguration handles the display of how the module asks for information. As you hopefully notice, it doesn’t contain the save button, or the title of the window. All that is handled for you so that we can maintain consistency between configuration windows. We also provide default styles that further maintain consistency and user expectation.

We now need to create the backing code that makes the configuration window come together. Change SetVolumeConfig.xaml.cs to extend the base class WpfConfiguration instead of the default UserControl base class.

In the constructor, we should ask for all the information we need to populate the config window with the current settings. In this situation, that only means the current volume level setting. Add an int parameter to the constructor called level. Also add a public property on the class with a private setter called Level. In the constructor, set this property with the parameter passed in to the constructor.

Your class should now look like this:

using MayhemWpf.UserControls;
namespace Volume
{
   public partial class SetVolumeConfig : WpfConfiguration
   {
      public int Level
      {
         get;
         private set;
      }
      public SetVolumeConfig(int level)
      {
         this.Level = level;
         InitializeComponent();
      }
   }
}

WpfConfiguration gives us some handy hooks that we can use. We need to set the value property on our slider. This could be done with data bindings, but for simplicity we will just be doing this with code. Also, there is a Boolean flag in the WpfConfiguration class that enables the Save button on the dialog. When handling user input, the save button should only be enabled if the input is valid. Since the slider always has a value in our range, the Save button can always be enabled. We will set this flag in the OnLoad method.

Override the OnLoad method as follows:

public override void OnLoad()
{
   VolumeSlider.Value = this.Level;
   CanSave = true;
}

We then also override the OnSave method to set the property to the value the SetVolume class will expect.

public override void OnSave()
{
   this.Level = (int)VolumeSlider.Value;
}

Lastly, we need to set the title that shows up on the configuration window. To do this, override the Title property and have it return “Set Volume”:

public override string Title
{
   get { return "Set Volume"; }
}

Now we need to go back to the SetVolume class and implement those configuration related methods.

The ConfigurationControl property needs to return an instance of the SetVolumeConfig class. Remember that its constructor expects the current volume setting:

public WpfConfiguration ConfigurationControl
{
   get
   {
      return new SetVolumeConfig(level);
   }
}

Lastly, OnSaved takes the instance of WpfConfiguration control we just returned in the above property. We need to cast this back to SetVolumeConfig to be able to get access to the Level property:

public void OnSaved(WpfConfiguration configurationControl)
{
   var config = (SetVolumeConfig)configurationControl;
   this.level = config.Level;
}

That’s all it takes! This code provides us with a complete reaction that enables us to set the volume level on the computer. As you can see, we provide a very straightforward API enabling you, the developer, to write user configurable modules for Mayhem.  You can click the download link at the top of the screen to get the final code in MayhemVolumeFinal.zip.

We have more documentation available on the available methods and APIs on our CodePlex documentation page.

In literally minutes (I think it took me less than one) you can copy-n-paste your way to displaying Kinect color & depth streams.

Kinect for Windows SDK– color, and depth streams

Color Stream in WPF Application

Add Image control in MainWindow.xaml in the Window Grid

Add enabling color stream in MainWindow() constructor of Main.Window.xaml

Add color frame ready handler

Depth Stream in WPF Application

Add Image control in MainWindow.xaml in the Window grid

Add enabling depth stream in MainWindow() constructor of Main.Window.xaml

Add Depth frame ready handler

Project Information URL: http://blogs.msdn.com/b/ampuri/archive/2012/04/13/kinect-for-windows-sdk.aspx

Contact Information:

• Blog: http://blogs.msdn.com/b/ampuri

Do audio stuff? Need equalizer like controls? A running time digital clock? Display Album Art for an MP3? A Spectrum Analyzer? Want to visualize audio waveforms as it plays? You'll want this...

WPF Sound Visualization Library

The WPF Sound Visualization Library is a collection of WPF Controls for graphically displaying data related to sound processing. Current controls include a Spectrum Analyzer, Waveform Timeline, and an Album Art Display Panel.

Here's a snap of it running on my notebook (which ran the first time with no issues);

What I found cool is that there's two samples, using different audio libraries, NAudio and BASS.

The library is provided as source too... So not only do we get some cool controls, but the source for those controls too (and you know how source makes me a happy camper...)

Here's some more information on

If you're into build audio based/related WPF applications or just want to see a cool control set, you've got to see this "Visualization" project...

WPFSpark

WPFSpark is a library of user controls which can be used by developers to provide a rich User Experience in their applications.

Before we go to far, there's a series of great Code Project articles that covers each control...

1. WPFSpark: 1 of n: SprocketControl
2. WPFSpark: 2 of n: ToggleSwitch
3. WPFSpark: 3 of n: FluidWrapPanel
4. WPFSpark: 4 of n: SparkWindow
5. WPFSpark: 5 of n: FluidPivotPanel
6. WPFSpark: 6 of n: FluidProgressBar
7. WPFSpark: 7 of n: FluidStatusBar

These articles do a great job in explaining each control, how they work and how you can best use them.

Though it doesn't do the control justice, that you really have to see them in motion, here's a quick snap of each;

Enough eye candy, let's take a look at the Solution;

As you can see, each control has it's own folder and demo, making it easy for you to dig into the control that interests you.

Say you found the Pivot Panel coo and interesting, because you might think that with Windows 8 coming soon, with its touch first focus that we're going to be seeing much more focus on touch and touch devices, even for "normal" apps, and you like the Windows Phone 7 Pivot design and want something like that in your WPF UI/App...

First the demo code;

Now lets take a peek at how it's actually implemented.

In short, we've got demo code to check out if we're interested in is consuming it, or we've got the implementation code, if we're interested in seeing how something like this is built.

If you're looking to add a little zest and spark to your WPF UI's, yet are looking for something inexpensive and also something that can help you grow your own knowledge base, this project is there just waiting for you!

Also last time we didn't look at the cool sample app that's included in the source tree...

Extended WPF Toolkit - Extended WPF Toolkit 1.5.0

Want an easier way to install the Extended WPF Toolkit?

The Extended WPF Toolkit is available on Nuget.

What's in the 1.5.0 Release?

• BusyIndicator
• ButtonSpinner
• Calculator
• CalculatorUpDown
• CheckListBox - New Control
• ChildWindow
• CollectionEditor - New Control
• CollectionEditorDialog - New Control
• ColorCanvas
• ColorPicker
• DateTimePicker
• DateTimeUpDown
• DecimalUpDown
• DoubleUpDown
• DropDownButton - New Control
• IntegerUpDown
• Magnifier
• MaskedTextBox
• MessageBox
• MultiLineTextEditor - New Control
• PrimitiveTypeCollectionEditor - New Control
• PropertyGrid - Beta
• RichTextBox
• RichTextBoxFormatBar
• SplitButton
• TimePicker
• WatermarkTextBox
• Wizard - New Control

So as you can see, v1.5 has a number of new cool things to play with.

For example the Wizard control. Many app's use them and many dev's re-invent that wheel when they do. This control looks simple, yet configurable enough, that maybe we don't need to re-invent it anymore (and even if we do, since the source is available, we don't have to start from scratch!

Then there's the some of the other controls, new and old, too;

Like one of my favorite, the calculator control

Or the watermark textbox

Or the new WPF Property Grid;

One thing about these samples... They are "live." They are not static examples or screenshots, but instead live, working code.

Speaking of the Sample app. I thought it very cool that the sample app used Prism. Prism is meant to help you build composite applications, separating the shell and components and allowing them all to evolve independently.

So what does that mean? It means that what you're seeing above is a simple shell that hosts modules that do the work. That once created, you're pretty much done with the shell and you can focus on the specific modules.

The Sample shell is a simple host for the sample modules. In this case modules are added to the shell via the app.config.

If we take a peek at the wizard sample module;

Okay, okay, I know, enough samples. Here's a snap of the Toolkit project itself;

As you can see the Toolkit project is well segmented by control, making it very easy for you to find the source for the control of interest. For example, for the wizard control;

If you're building WPF applications or re-usable controls for them, this toolkit is one you should check out...

Speaker : Christophe De Baene, RealDolmen