Kinect SDK dev series with a runtime extension and more on buttons (with Hover Button Control too)

Description

Today's a two for one kind of project day (and yes, today, we have some source you can download too...)

As we've seen in many of the past Gallery projects there's just something about the Kinect that seems to bring out the geek in us. It's inspired many of us to break out our IDE's and do some Kinect coding. Today's projects are from someone like that whereas by day she's an Escalation Engineer in the ASP.NET developer support team and by night a Kinect coder. Best of all she is sharing it all with us...

Kinect SDK for Windows – demos

In this series I will post a number of different controls, extensions and demo apps that I have created. Some are based on inspiration from the Kinect blog and other sources. The list of demos/howtos here will hopefully grow over time

1. RuntimeExtension methods for common stuff
2. Creating a Kinect Hover Button / Hover Control

Kinect SDK for Windows–Extensions Methods

Every time I create a new Kinect SDK demo I find myself doing the same setup so I created a few extensions methods that I use in my projects to make life easier.
I figured I would share them here since I will be using them in my blog posts about Kinect in the future.

The extension methods are SetSmoothTransform, which sets the smoothing parameters on the skeleton to stabilize the skeleton movement a bit, and the second method (GetFirstTrackedSkeleton) simply grabs the first skeleton that is tracked, so that we can use it in the SkeletonFrameReady event if we only need data about one skeleton.

Kinect SDK for Windows – Hover Button / Hover Control

In this post I will talk about how you can create a simple and versatile Hover Button / Hover Control for Kinect with a Metro look.

The control is largely based on the Kinect Buttons from Shai Raiten, so all cred goes to him, this is just a customization of his work.

Hover button UI

The HoverButton control can have either an image or text or both and can be resized to fit your needs. It features a Click event that will occurr after a hovering for 2 seconds.

Below are two examples of how you could use the HoverButton control…

In the first example I have used 10 HoverButtons to create a metro style UI for
getting into different demos and I have used both images and just buttons with text together so you can see the difference.

The center button is currently selected and the white overlay slowly covers the whole button… when the button is fully covered a Click event is fired.

In the second example I have used only images to show a completely different effect with the same hover button where the 3rd avatar is being selected.

...

Project Information URL: http://blogs.msdn.com/b/tess/archive/2011/08/16/kinect-sdk-for-windows-demos.aspx, http://blogs.msdn.com/b/tess/archive/2011/08/16/kinect-sdk-for-windows-extensions-methods.aspx, http://blogs.msdn.com/b/tess/archive/2011/08/16/kinect-sdk-for-windows-hover-button-hover-control.aspx

Project Download URL: http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-components-postattachments/00-10-19-61-85/KinectControls.zip

image

image

image

private void StartHovering()
{
     double maxFillHeight = this.ActualHeight;

     if (!isHovering)
     {
         isHovering = true;
         maskAnimation = new DoubleAnimation(Mask.ActualHeight, maxFillHeight, hoverDuration);
         maskAnimation.Completed += new EventHandler(maskAnimation_Completed);
         Mask.BeginAnimation(Canvas.HeightProperty, maskAnimation);
     }
}

private void StopHovering()
{
     if (isHovering)
     {
         isHovering = false;
         maskAnimation.Completed -= maskAnimation_Completed;
         maskAnimation = new DoubleAnimation(Mask.ActualHeight, 0, reverseDuration);
         Mask.BeginAnimation(Canvas.HeightProperty, maskAnimation);
     }
}
 

public bool Check(FrameworkElement cursor)
  {
      if (IsCursorInButton(cursor))
      {
          this.StartHovering();
          return true;
      }
      else
      {
          this.StopHovering();
          return false;
      }
  }

  private bool IsCursorInButton(FrameworkElement cursor)
  {
      try
      {
          //Cursor midpoint location
          Point cursorTopLeft = cursor.PointToScreen(new Point());
          double cursorCenterX = cursorTopLeft.X + (cursor.ActualWidth / 2);
          double cursorCenterY = cursorTopLeft.Y + (cursor.ActualHeight / 2);

          //Button location
          Point buttonTopLeft = this.PointToScreen(new Point());
          double buttonLeft = buttonTopLeft.X;
          double buttonRight = buttonLeft + this.ActualWidth;
          double buttonTop = buttonTopLeft.Y;
          double buttonBottom = buttonTop + this.ActualHeight;

          if (cursorCenterX < buttonLeft || cursorCenterX > buttonRight)
              return false;

          if (cursorCenterY < buttonTop || cursorCenterY > buttonBottom)
              return false;

          return true;
      }
      catch
      {
          return false;
      }
  }
 

Contact Information:

The Discussion

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.