![Page 1: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/1.jpg)
Developing Windows 7 based Multi-Touch Application
Ramaprasanna ChellamuthuMicrosoft India
![Page 2: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/2.jpg)
Agenda
Touch HardwareKey Touch ScenariosWindows 7 Touch InvestmentsTouch Application Development Guidance
GestureManipulation and Inertia
DemoResources
![Page 3: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/3.jpg)
Multi-Touch…
…creates new opportunities.Software that is intuitive for users to walk up & masterSoftware that is collaborative with multiple users
…is not new.Researchers have been exploring this stuff for decades
…is now going mainstream.1. Hardware: Robust touch-capable hardware from Microsoft and
OEMs 1. Dozens of Win7 touch devices now available
2. OS: Windows 7 has great touch support baked in3. SDKs: Microsoft is making touch easy to leverage4. You: Developers & designers creating innovative apps that take
advantage of the technology
![Page 4: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/4.jpg)
Windows Touch is hereWindows Touch is defined as two or more independently traceable touch points.
ConsumersTouch interfaces have proven successful Multi-Touch offers clear differentiation with a high “WOW” factor Multi-touch enhances on-the-go use and enable new scenarios
HardwareMulti-touch capable machines in market today in a broad set of form factors
![Page 5: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/5.jpg)
Navigating and Consuming the Web
Playing Casual Games
Reading and Sorting Email
Viewing Photos
1
2
3
4
5
6 Navigating Files and Using Applications
Consuming Music and Video
Key Touch Scenarios Are Consumptive
![Page 6: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/6.jpg)
Windows InvestmentInternet Explorer®
Pan and zoom gestures, flick forward/back“Open link in new tab” gestureAddress bar drag menu
Windows® Media Center:Live gallery panningOn-screen keyboardLarger transport controls & seekNew Now Playing & details pages
Photo Viewer (& Windows Live Photo Gallery)Multitouch Zoom and rotation
XPS ViewerStretch zoom centered around gestureSmart zoom
Touch Pack for Windows 7
![Page 7: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/7.jpg)
Windows 7 Principle: Be Great at “Look” and “Do”
Users have expectations for how an experience will “Look” and what it should “Do”Direct Manipulation demands more from “Look” and “Do”Touch Pack for Windows 7
Surface Globe: Immersive, 2-D and 3-D touch world exploration:
Zoom in on locationsPinpoint areas of interestGet local informationPersonalize map views
![Page 8: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/8.jpg)
![Page 9: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/9.jpg)
Development Tiers
Best
Better
Good
Raw data points from WM_TOUCH for custom gestures. Manipulation/inertia APIs
Multi-touch support – zoom, finger pan, rotate, panning with inertia, and 2 finger tap. WM_GESTURE
Maps to common Windows messages – pan, zoom, right click, and double click
![Page 10: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/10.jpg)
Gestures: Consistency is key
Gestures: Touch actions that are one step removed from direct manipulations
Two finger tapPress and tap Pinch/stretch (zoom)Circular motion (rotate)Single and two-finger panningFlicks
Useful for shortcut-like efficiencyConsistent operations like zoom in, or navigateFocus on content : to surface extra information or invoke contextual action UI
Design ConsiderationsConsistency
Should work in the same way across Windows applicationsKeep it simple – users won’t discover or remember too many abstractions
![Page 11: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/11.jpg)
Windows 7 Touch Gestures
![Page 12: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/12.jpg)
WM_GESTURE
Windows Message and APIs:
WM_GESTURE, WM_GESTURENOTIFY
GESTURECONFIG struct
Set/GetGestureConfig()
GESTUREINFO
GetGestureinfo()
![Page 13: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/13.jpg)
Setting Gestures and WM_GESTURE case WM_GESTURENOTIFY: { BOOL bResult;
GESTURECONFIG gcAll[] = {0,GC_ALLGESTURES,0}; // Enable all gestures bResult = SetGestureConfig(hWnd, 0, 1, gcAll, sizeof(GESTURECONFIG));
} case WM_GESTURE: {
GESTUREINFO gi; gi.cbSize = sizeof(gi); bResult = GetGestureInfo((HGESTUREINFO)lParam, &gi); switch (gi.dwID) { case GID_BEGIN:
break; case GID_END:
break; case GID_ZOOM: //GID_PAN, GID_ROTATE, GID_TWOFINGERTAP, GID_PRESSANDTAP
break; }
![Page 14: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/14.jpg)
WM_TOUCH
WM_TOUCH* family of messagesEnables touch-optimized experiencesProvides standard Win32 messages
WM_TOUCHDOWN, WM_TOUCHMOVE, WM_TOUCHUPSemantically similar to mouse messagesConveys raw touch data to Win32 apps
Scenario examples:Finger painting, custom gestures, feeding higher level controls, etc
![Page 15: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/15.jpg)
.NET 3.5 Multitouch library
Multi-touch for Windows 7
NativeWindows SDK
.NET 4WPF
SilverlightSilverlight3
GesturesAvailable via
manipulation
Raw Touch
Manipulation
Inertia
![Page 16: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/16.jpg)
Manipulation Container
Canvas
Manipulation Container
IsManipulationEnabled=true
IsManipulationEnabled=true
Update RenderTranform
Handle ManipulationDelta Event
• Coordinates relative to Manipulation Container
Handle ManipulationStarting Event• Set Manipulation
Container
![Page 17: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/17.jpg)
Manipulation Events
Starting Started Delta Inertia Starting Delta Completed
StartInertia() StartInertia()
Touch Down (Initial) Touch Move Touch Up
(All)
Initialize:•Mode• Container• Pivot
Completed()
![Page 18: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/18.jpg)
WPF 4 Multi-Touch APIs Overview
WPF Controls Styles with Panning Enabled
ScrollViewer Panning Support
Manipulation Events
Touch Events
Extensible Touch Device
Win7 Touch Device Surface Touch Device
Beta 1
Beta 2
Release Candidate
Surface V2
![Page 19: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/19.jpg)
Silverlight 3 Touch APIs - Listening
public partial class MainPage : UserControl { public MainPage() { ... // listen to touch events from the system Touch.FrameReported += new TouchFrameEventHandler(OnFrame); }
void OnFrame(object sender, TouchFrameEventArgs e) { // enumerate and respond to touch events }}
![Page 20: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/20.jpg)
Silverlight 3 Touch APIs - Processing
void Touch_FrameReported(object sender, TouchFrameEventArgs e) { TouchPointCollection touchPoints = e.GetTouchPoints(LayoutRoot);
foreach (TouchPoint tp in touchPoints) { if (tp.Action == TouchAction.Down) { // a new touch has come down } if (tp.Action == TouchAction.Move) { // a previously down touch has moved } if (tp.Action == TouchAction.Up) { // a touch has been removed } }}
![Page 21: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/21.jpg)
Inertia BehaviorsManipulationInertiaStartingEventArgs
Properties Units
TranslationBehavior InitialVelocity 1/96th DIP per millisec
DesiredDeceleration 1/96th DIP per millisec^2
DesiredDisplacement 1/96th DIP
RotationBehavior InitialVelocity Degrees per millisec
DesiredDeceleration Decrees per millisec^2
DesiredRotation Degrees
ExpansionBehavior InitialVelocity 1/96th DIP per millisec
InitialRadius 1/96th DIP
DesiredDeceleration 1/96th DIP per millisec^2
DesiredExpansion 1/96th DIPS
• Deceleration and Displacement/Rotation/Expansion mutually exclusive• Deceleration – useful to simulate friction• Displacement – useful on page flips• Default – no inertial movements
![Page 22: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/22.jpg)
Demo !! Demo !! Demo !!
![Page 23: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/23.jpg)
Surface is not just multi-touch
Windows 7 & WPF 4 are a great baseline for touch
Surface creates unique opportunities with specialized HW
Robust topHorizontal form factorInfrared camera array
![Page 24: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/24.jpg)
Surface: Beyond Multi-Touch
Massive multi-touch
Multi-user experiences
Object recognition
Optical engineering
![Page 25: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/25.jpg)
Surface: Multi-User
Trend: Software continues to reduce the need for face-to-face human interactions
Problem: Happiness and creativity depend on social interactions
Surface brings people togetherIndustrial design encourages users to gatherInput capabilities allow simultaneous useApps facilitate collaboration / competition
![Page 26: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/26.jpg)
Surface: Massive Multi-Touch
Surface can efficiently track 50+ simultaneous fingers and objects
![Page 27: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/27.jpg)
Surface: Objects
Uniquely identify & react to billions of tagged objects
Byte Tags256 unique values
Identity Tags>340,282,366,920,938,000,000,000,000,000,000,000,000
unique values
Tags include orientation indictors dots
![Page 28: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/28.jpg)
Surface: Optics
Determine the size and shape of every inputSee into and project onto physical objects
![Page 29: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/29.jpg)
>>FUTURE
What’s next for Surface hardware?
Things we’re exploring:Cheaper ThinnerVertical
Stay tuned…
![Page 30: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/30.jpg)
ResourcesSoftware Design
Windows User Experience Interaction GuidelinesMulti-Touch in Windows 7Developer Enhancements to Windows Touch and Tablet PC(User Perceptions of Response Time) Performance UX Patterns
Developer ResourcesCode Magazine: Multi-touch capabilities in Windows 7Windows Touch on MSDNWindows Touch Developer ResourcesTablet and Touch SDKIntroducing the Microsoft Touch Pack for Windows 7
![Page 31: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/31.jpg)
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
![Page 32: Ramaprasanna Chellamuthu Microsoft India. Navigating and Consuming the Web Playing Casual Games Reading and Sorting Email Viewing Photos 1 2 3 4](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f325503460f94c4e309/html5/thumbnails/32.jpg)
Thank you !!