Windows 7 Multi-touch Panning with ScrollViewer in WPF 3.5 Part Duex

In my last post I described a class that wraps the ScrollViewer control to enable multi-touch panning in it.

Well, it’s not exactly the right way to do it. You should be receiving the pan messages in the Window, then finding the scroll viewer where the window was touched using a Hit Test, and scroll that ScrollViewer.

 

Code Snippet
  1.         private void Page2_Loaded(object sender, RoutedEventArgs e)
  2.         {
  3.             // Get our items for the itemscontrols
  4.             this.GetItems();
  5.  
  6.             // Check for multi-touch capabilities
  7.             if (Windows7.Multitouch.Handler.DigitizerCapabilities.IsMultiTouchReady)
  8.             {
  9.                 // Enable stylus events
  10.                 Windows7.Multitouch.WPF.Factory.EnableStylusEvents(this);
  11.                 // Add the gesture handler
  12.                 this.GestureHandler = Windows7.Multitouch.WPF.Factory.CreateGestureHandler(Window.GetWindow(this));
  13.                 // Attach the handler to the method
  14.                 this.GestureHandler.Pan += new EventHandler<Windows7.Multitouch.GestureEventArgs>(this.GestureHandler_Pan);
  15.             }
  16.         }
  17.  
  18.  
  19.         private void GestureHandler_Pan(object sender, Windows7.Multitouch.GestureEventArgs e)
  20.         {
  21.             this.panTranslation = e.PanTranslation;
  22.  
  23.             PointHitTestParameters hitTestParameters = new PointHitTestParameters(Windows7.Multitouch.WPF.PointUtil.ToDrawingPointF(e.Center));
  24.             VisualTreeHelper.HitTest(this, null, new HitTestResultCallback(this.HitTestResult), hitTestParameters);
  25.         }
  26.  
  27.         public HitTestResultBehavior HitTestResult(HitTestResult rawresult)
  28.         {
  29.             ScrollViewer sv = null;
  30.             try
  31.             {
  32.                 sv = (ScrollViewer)rawresult.VisualHit;
  33.             }
  34.             catch
  35.             {
  36.             }
  37.  
  38.             // If we have a reference to the scrollviewer, then we scroll
  39.             if (sv != null)
  40.             {
  41.                 // Make the Scroller scroll
  42.                 sv.ScrollToVerticalOffset(sv.VerticalOffset - this.panTranslation.Height);
  43.  
  44.                 // Stop trying to find more controls in the visual tree
  45.                 return HitTestResultBehavior.Stop;
  46.  
  47.             }
  48.             else
  49.             {
  50.                 // Continue trying to find more controls in the visual tree
  51.                 return HitTestResultBehavior.Continue;
  52.             }
  53.  
  54.         }

When you are tracking multi-touch in a specific control, the touchs register at the window level, so even if you are not touching in the ScrollViewer, it still will pan it.

So the code was moved to the window , and uses the standard <ScrollViewer>.

Download the example project in C# and VB.NET

13. November 2009 01:23 by Rick | Comments (2) | Permalink

Windows 7 Multi-touch Panning with ScrollViewer in WPF 3.5

UPDATE: You should be using the Window to receive events. See my updated post for details.

Yes, it can be done easily, including inertia. It does require the Windows 7 Multitouch .NET Interop Sample Library

First, create a class that inherits from scrollviewer.

Code Snippet
  1. Public Class MultiTouchScollViewer
  2.     Inherits ScrollViewer
  3.  
  4. End Class

Then you add references to Windows7.Multitouch.dll and Windows7.Multitouch.Wpf.dll.

Then modify the MultiTouchScrollViewer like so:

Code Snippet
  1. Imports System.Windows
  2. Imports System.Windows.Controls
  3.  
  4. Public Class MultiTouchScrollViewer
  5.     Inherits ScrollViewer
  6.  
  7.     Private GestureHandler As Windows7.Multitouch.GestureHandler
  8.  
  9.     Public Sub New()
  10.         AddHandler MyBase.Loaded, New RoutedEventHandler(AddressOf Me.MultiTouchScollViewer_Loaded)
  11.         Me.GestureHandler = Nothing
  12.     End Sub
  13.  
  14.     Private Sub MultiTouchScollViewer_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
  15.         If Windows7.Multitouch.TouchHandler.DigitizerCapabilities.IsMultiTouchReady Then
  16.             GestureHandler = Windows7.Multitouch.WPF.Factory.CreateGestureHandler(System.Windows.Window.GetWindow(Me))
  17.             AddHandler GestureHandler.Pan, AddressOf Me.GestureHandler_Pan
  18.         End If
  19.     End Sub
  20.  
  21.     Private Sub GestureHandler_Pan(ByVal sender As Object, ByVal e As Windows7.Multitouch.GestureEventArgs)
  22.         Dim s As System.Drawing.Size = e.PanTranslation
  23.  
  24.         Me.ScrollToVerticalOffset(Me.VerticalOffset - s.Height)
  25.     End Sub
  26.  
  27. End Class

Download the VB.NET code here

Download the C# code here

NOTE: It does require hit testing if using multiple scrollviewers in the same window.

9. November 2009 05:04 by Rick | Comments (2) | Permalink

Multitouch table – Step 4 – Fitting the wood and LCD in the hole

Multi-touch table

I started with a table that was perfect for this, as it almost fit the LCD perfectly. They sold it to me cheap too because the hole in the table did not have glass (they apparently broke or lost it).

So I took the side rails off the hole, and replaced them lower in the hole to support the LCD monitor.

Multi-touch table
After dry fitting the monitor, I drilled the two holes at a 45 degree angle so I could place the lasers. One I drilled perfect, the other had to be adjusted.

Going forward, I need to find a permanent solution for mounting the camera above the monitor, and some type of lip for the rim. I used black

Multi-touch table
duct tape for the rim currently, but it’s not the perfect solution.

 
 
 
Photo gallery
7. June 2009 18:00 by Rick | Comments (0) | Permalink

Multitouch table – Step 3 - Testing

DSCI0001b

Well, I got the laser goggles yesterday, so I am testing the lasers now. I mounted my lasers

The lasers are “near infrared” meaning they have a faint glow, but you can’t really see the beam. You should not only wear safety laser goggles, but don’t look directly into the beam. I’ve got 90 degree line generators on the front of the lasers. This shoots a 90 degree sheet of laser light, and when your finger touches the laser, your fingers “glow” so the camera can pick them up.

So I tested with the Multitouch Vista WPF app, and it works great. See the video below.

Watch in HD here.

10. May 2009 11:48 by Rick | Comments (0) | Permalink

Multitouch table – Step 2 – Getting lasers and stuff

Well, I found out that the back of the LCD glass reflects IR back at the camera, so the blobs don’t work very well.

DSCI0002b

So, the solution is to get lasers. I got two 780nm 25mw near-infrared lasers, with a 90 degree line generators. I got the power supply for it too, but now I am waiting for the laser goggles to wear, so I don’t burn my eyes out.

6. May 2009 15:52 by Rick | Comments (0) | Permalink

Multitouch table - Step 1 – Find the right table and monitor

Microsoft Surface at the Rio

Left: Microsoft Surface at the Rio Hotel and Casino

As i said in my last post, I want to make a multitouch table like the Microsoft Surface. I have purchased a table, vellum, tracing paper and 5 LED IR lamps. What happens is, you shine the LED IR lamps up through the tracing paper or vellum, and then the webcam you have below can detect your fingerprints on the vellum, and send those as points to the appropriate software.

Table

I already got the Acer 22’’ X223W monitor, and 2 LED IR Illuminators, 3 more are on the way. Today I bought a table. I went to a furniture store that had clearance items. This table was WAY cheap due to the glass being missing. It was the right height for my table, so I got it! As you can see on the page on the right, I made holes with my drill so I can cut the square out where the top of the drawer is.

Table with the hole cut

This way the webcam and IR LED lights can shine upwards. I plan on taking out the monitor and putting it on the top with a piece of Acrylic or Plexiglas on it. The hole in the top is EXACTLY the right size (well, more or less).

I also purchased a roll of vinyl flooring, for $20 so I can cut it and wrap it around as the walls, to keep the IR Light from escaping, and a small roll of black shelf paper for the top.

The next step is to get the rest of the lights, make sure that the blobs (finger points) work correctly, then add the LED and the top glass.

4. April 2009 17:38 by Rick | Comments (0) | Permalink

Multitouch table

I am going to make a multitouch table, much like the Microsoft Surface. There are two schools of thought on multitouch tables, projector or LCD. With LCD, you actually take the LCD out of the casing, and using a backlight, can mount it into the table, like so:

 lcd
Image shamelessly ripped off from http://wiki.nuigroup.com/Diffused_Illumination_Plans

I got the monitor today, an Acer X223W. I plan on posting as I go with this.

1. April 2009 02:28 by Rick | Comments (0) | Permalink

About Rick

Rick lives in North Las Vegas. He loves his wife, kids, dog, motorcycle, music and programming. There ain't nothing else. Oh yeah, mountain dew!



Programming interests are geared towards multimedia. Platforms are asp.net, windows forms, and WPF.

Calendar

<<  March 2010  >>
MoTuWeThFrSaSu
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar

RecentComments

Comment RSS