Author: Soul Solutions Created: Sunday, 6 August 2006
Tips and Tricks as we come across them

railsgirlsbanner

I’d seen posts about Rails Girls events in other countries and cities and I was excited to see that they were going to hold one here, in Brisbane. When Katie Miller (@codemiller) posted on our Girl Geek Dinners wall about the event I checked it out and saw they were looking for volunteers so I asked what I could help with and the answer came back “Do you want to help with mentoring?”. I’ve done many years of dev and bits of training and presenting, but haven’t actually done any Ruby/Rails. I often find the best way to learn is to teach/help others so why not!

1

The evening of Friday 24th came along fairly quickly. Tonight was installation night – where our goal is to get as many of the ladies setup and running on their machines to they can get to the more exciting stuff the next day. They’d not only filled to capacity of 50 but they also had about half as many again on the wait list!

2...

Read More »



Now that we’ve outgrown all the controls in the Interaction Gallery and we’ve exhausted all the ways we can use KinectRegion to make our own controls we get into the thick of it and look at the InteractionStream itself. The cool thing is we can use the stream for non-WPF applications. So you could write a console app or XNA using the stream data to perform functions. Here we can get data of multiple users, and both hands and what states they are in.

Ben from Microsoft has already written a great post on how to use the data here. So instead of basically repeating him, I’ll let you read that and just note a few things that struck me when I first used it.

1. It doesn’t follow the same pattern of the other streams – Most of us are used to enabling our stream and handing it’s frame ready event.  It looks a bit different:

_interactionStream = new Microsoft.Kinect.Toolkit.Interaction.InteractionStream(e.NewSensor, new MyInteractionClient()); _interactionStream.InteractionFrameReady +=InteractionFrameReady; Firstly, we keep a copy of the stream, and we have to give it something the implements the IInteractionClient interface.

2. The InteractionFrameReadyEvent isn’t “it” – normally for other streams like depth we’ve handle depthframe ready and we’re all happy. With InteractionStream, if you only do that nothing useful happens…To get anything useful, you will need to hook up both the SkeletonFrameReady and the DepthFrameReady events. In the skeleton...

Read More »



Now that we’ve looked at the existing controls in the Interaction Gallery. What happens now we want some other control “Kinectified”. Generally speaking I think you can get most of what you want without going direct to the interaction stream and getting the events and properties that are exposed in the KinectRegion.  So for our example we’re going to make a “Kinectified” CheckBox.

If you look at Microsoft.Kinect.Toolkit.Controls.KinectButtonBase it will give you pretty much everything you need for this.

public class MyCheckBox : CheckBox { private static readonly bool IsInDesignMode = DesignerProperties.GetIsInDesignMode(new DependencyObject()); private HandPointer _capturedHandPointer; public MyCheckBox() { if (!IsInDesignMode) { Initialise(); } } private void Initialise() { KinectRegion.AddHandPointerPressHandler(this, this.OnHandPointerPress); KinectRegion.AddHandPointerGotCaptureHandler(this, this.OnHandPointerCaptured); KinectRegion.AddHandPointerPressReleaseHandler(this, this.OnHandPointerPressRelease); KinectRegion.AddHandPointerLostCaptureHandler(this, this.OnHandPointerLostCapture); KinectRegion.AddHandPointerEnterHandler(this, this.OnHandPointerEnter); KinectRegion.AddHandPointerLeaveHandler(this, this.OnHandPointerLeave); KinectRegion.SetIsPressTarget(this, true); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; }...

Read More »



The next control I want to touch on in the Interactions Gallery is the KinectScrollViewer. Now that we’ve learnt about the Regions, and button controls it’s time to see how we handle putting a lot of them on the page. 

 

Let’s first put the scrollviewer on the page and to make it obvious when we’ve hit it, we’ll set a bright colour for the hover:

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

Normally, it looks no different, but when we hover our hand over the screen the scrollviewer turns “YellowGreen”

scrollviewer_hover...

Read More »



The next controls I want to touch on in the Interactions Gallery are the KinectTileButton and KinectCircleButton. Now we have our KinectRegion and can see what we’re doing with the UserView control, we can start interacting.

In its simplest form, the KinectTileButton still has a lot of visual features. Simply add it to your XAML and run:

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

In its default form it’s a giant purple button that you can easily put your hand cursor over.  With the interactions the team has added the ability to detect a “push” gesture from either hand. As I start to press...

Read More »



The next control I want to touch on in the Interactions Gallery is the KinectUserView. Now that we know that our Kinect is plugged in and working, most of us want to give the user some indication of where they are in relation to the Kinect to ensure they are the correct distance and position from the Kinect for the things we want them to do. We’ve tried a few things in the past:

1. We made a little WPF skeleton that we’d overlay over some of our interactions. This was interesting to play with but tended to be a bit distracting.

2. Use the depth camera to give a silloute effect and give it some colour. We found this was much more useful as it resembled the user so they were more easily able to tell that the Kinect had recognised them and not the guy standing to the side etc.

I’ve seen various incarnations of this by other people also, so it’s good to see we now have a standard control that we all don’t have to write from scratch. To add this control we continue on from where we left off with the KinectRegion.

XAML:

Add the UserViewer Control and bind it to our Kinect Region:

"{Binding ElementName=KinectRegion}" /> Run the project and we can see ourselves: userviewer_full...

Read More »



The next control I want to touch on in the Interactions Gallery is the KinectRegion Control. It’s a canvas for the other Kinect controls and is associated with a particular sensor.

To add it:

XAML

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

1. Create our sensor changed event

_sensorChooser.KinectChanged += SensorChooserOnKinectChanged; .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }2. In our event associate the control with the sensor

KinectRegion.KinectSensor...

Read More »

When we look at the range of controls in the Interactions Gallery , the first one I wanted to highlight that you’ll see in the Interactions Gallery is the KinectSensorUI.

It’s a nice little control that shows you the status of your Kinect. It gives a nice consistent way to visually indicate to the user there’s something wrong and gets around the question of “is this thing on”. It’s also really easy to add it its most basic form.

1. Add the control to your UI

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

2. Add it in the code behind

private KinectSensorChooser _sensorChooser; public MainWindow() { InitializeComponent(); Loaded += MainWindowLoaded; } void MainWindowLoaded(object sender, RoutedEventArgs e) { _sensorChooser = new KinectSensorChooser(); SensorChooserUi.KinectSensorChooser = _sensorChooser; _sensorChooser.Start();...

Read More »

interactionsGallery

As the Kinect For Windows SDK has started to evolve, the team has been adding some nice little controls which are quite useful and also controls everyone was writing in one way or another to solve the same issues. I think it’s a really good step so we’re not all spending a bunch of time writing similar controls plus it means there should be some consistency going forward if people use the supplied controls. This will help users with the learning curve with many of the applications.

When you first look through the interactions gallery it’s a bit overwhelming as there’s a bunch of controls and the interaction stream to deal with all at once. For this reason I wanted to do a set of posts so we can concentrate on them one at a time.

KinectSensorUI KinectRegion KinectUserViewer KinectTileButton KinectCirceButton...

Read More »

I’ve been hanging out until the 1.7 release of the Kinect SDK to show off a bunch of the improvements and features in the Kinect SDK. This month we’re presenting at the Brisbane .Net User Group. Planning on taking you through a bunch of the new features and go into a deeper look at the Interactions Gallery and its controls aswell as showing a few fun demos. Hoping to make the session quite interactive so come prepared to get out of your chairs. Details of the session:

Kinecting The Dots – Interactions with the Kinect SDK

The Microsoft Kinect has come a long way since its release in November 2010, with the Kinect for Windows SDK and device released in February 2012. In this session Bronwen and John will take you through some of the latest features in the 1.7 SDK release, and delve into the Interaction Gallery looking at some of the Kinect controls and interactions to help you build better navigation and engagement in your next Kinect application.

Where: Brisbane .Net User Group – Microsoft Office - Level 28 400 George Street Brisbane

When: 28 May 2013 – 6pm onwards

Register: here

Copyright © 2002-2013 Soul Solutions Pty Ltd. | Login