Detect input pointer device in Windows Store App

Introduction

The Windows Store Application can run in any Windows 8 supported devices. Such as in Win8 desktops, Surface Tablets, touch sensitive devices etc.

In the desktop environment, to perform operations like button clicks etc we need to use the MOUSE as the input pointer device.

In tablet or touch sensitive devices to perform such operation we need to use the FINGER TOUCH as the input pointer. Also we can use PENs to perform the touch operation.

Let’s assume a scenario where we need to program on basis of the pointer device used in the application. Below is one of the example to detect the pointer device.

Description

In the below example we are trying to sense the pointer device.

Html file contect


   <span class="spnTouch" id="spnDevice">Touch/Click Me</span>
  <img id="imgDevice" alt="" />

We have taken a SPAN which will sense the device on click. The IMG control will display the image of the pointing device. Such as, on click of mouse it will display a mouse image, on touch it will display a touch finger image etc. Just make it a bit fancy 🙂

CSS file contect


.spnTouch{
font:bold 20px verdana;
}

Just to make the span appear a bit bigger on screen.

JS file contect


var spnDevice = document.getElementById("spnDevice");
 spnDevice.innerHTML = "No device detected yet.";

 var imgdevice = document.getElementById("imgDevice");
 spnDevice.addEventListener("MSPointerDown", function (evt) {
 var pointerDevice = Windows.UI.Input.PointerPoint.getCurrentPoint(evt.pointerId);
     switch (pointerDevice.pointerDevice.pointerDeviceType) {
                case Windows.Devices.Input.PointerDeviceType.mouse:
                    spnDevice.innerHTML = "Mouse detected";
                    imgdevice.src = "images/Mouse.jpg";
                    break;
                case Windows.Devices.Input.PointerDeviceType.touch:
                    spnDevice.innerHTML = "Touch detected";
                    imgdevice.src = "images/Touch.jpg";
                    break;
                case Windows.Devices.Input.PointerDeviceType.pen:
                    spnDevice.innerHTML = "Pen detected";
                    imgdevice.src = "images/Pen.jpg";
                    break;
                default:
                    spnDevice.innerHTML = "No device detected yet.";
                    imgdevice.src = "";
                    break;
            }

In the JS part, we are sensing the device on click of the SPAN and displaying the image basing upon the device sensed.

Summary

This blog demonstrates how to sense the input device inside an application. Although the usage being shown here may not be the exact one it is meant for but certainly it tries to demonstrate the way it can be done.

Thanks !!

Written By: Nirmal Hota, Cross-Platform Mobile Lead, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s