Touch Support Using openFrameworks

Overview

In this challenge, you will learn how to add touch support to your application using openFramework on WinRT. Following the exercises, you will create a sample application that uses openFramework to respond a touch event and then modify it to respond to multi-touch events.

What You’ll Learn

You will learn how to:

  • Use Project Generator to create the initial project
  • Add a response for a single touch event
  • Add responses for multi-touch events

The Challenge

In this challenge, you will learn how to register to receive touch events and to add visual cues of the touch to the screen. The exercises you will complete are as follows:

  1. Create the initial project files
  2. Add single touch response
  3. Add multi-touch response

Exercise 1: Create the initial project files

In this exercise, you will use Project Generator to create a new project.

  1. Navigate to the C:\Labs\openFrameworks-winrt-multitouch\projectGenerator folder, and then click projectGeneratorSimple_winrt.exe.
  2. In the Name field, enter a name for your project.
  3. Use the default project directory and the add-ons values.
  4. Click Generate Project.

Exercise 2: Add single touch response

The OF defines the ofRegisterTouchEvents method which adds five listeners which you use to repsond to touch events.

In this exercise, you will implement the response to handle single touch events.

Task 1: Add prototypes for the touch events to the header.

In this task, you will add the

  1. Open file explorer and navigate to C:\Labs\openFrameworks-winrt-multitouch\apps\myApps\
  2. Double click the <your app name>_winrt.sln file to open the project in Visual Studio 2013.
  3. In Solution explorer open the ofApp.h file and add the following function prototypes.

void touchDown(ofTouchEventArgs &touch);

void touchMoved(ofTouchEventArgs &touch);

void touchUp(ofTouchEventArgs &touch);

void touchDoubleTap(ofTouchEventArgs &touch);

void touchCancelled(ofTouchEventArgs &touch);

Task 2: Add touch event implementations

In this task, you will add the implementations for the touch events. You will add code to register to receive events and to

  1. In Solution explorer open the ofApp.cpp file and add the ofRegisterTouchEvents method to the setup method.

ofRegisterTouchEvents(this);

myFont.loadFont("C:/Windows/Fonts/cour.ttf", 25);

  1. At the end of the file, add the following empty function implementations.

voidofApp::touchDown(ofTouchEventArgs &touch){

}

voidofApp::touchMoved(ofTouchEventArgs &touch){

}

voidofApp::touchUp(ofTouchEventArgs &touch){

}

voidofApp::touchDoubleTap(ofTouchEventArgs &touch){

}

voidofApp::touchCancelled(ofTouchEventArgs &touch){

}

  1. To store the touch point, open the ofApp.h file and add an the following variable defintions.

ofPoint touchPoint;

string sTouchMsg;

ofTrueTypeFont myFont;

  1. In onApp.cpp file, add the following lines to the touchDown event handler to save the point ID and location:

touchPoint.x = touch.x;

touchPoint.y = touch.y;

sTouchMsg ="TouchID : ";

sTouchMsg.append(ofToString(touch.id ));

  1. In the Draw method, add the following code to display the string at the touch position with a litle circle:

ofCircle(touchPoint, 10);

myFont.drawString(sTouchMsg, touchPoint.x+10, touchPoint.y);

  1. Save the files. Press CTRL+F5 to compile and run the app.

When the app runs, you can touch the screen. The app draws a circle is and shows a string that contains the touch point ID.

Exercise 3: Add multi-touch response

In this exercise, you will update your app to respond to three multi-touch events; touchDown, touchMoved, and touchUp. You will recognize which touch is which by examining the id of the touch argument; touch.id.

  1. In the ofApp.h file declare collection of type map to store the point ID and location:

map<int,ofPoint> ptLst;

  1. In the ofApp.cpp file, to store the touch points received, replace the body of the touchDown method:

ofPoint pt(touch.x, touch.y);

ptLst.insert(std::pairint,ofPoint>( touch.id, pt) );

  1. Add code to the touchMoved method to update points when they move:

mapint, ofPoint>::iterator it;

it = ptLst.find(touch.id);

if (it != ptLst.end()){

it->second.x = touch.x;

it->second.y = touch.y;

}

  1. In the touchUp method add the following code to remove a point when you lift your finger:

mapint, ofPoint>::iterator it;

it = ptLst.find(touch.id);

ptLst.erase(it);

  1. In the draw method, update the code to iterate through each touch point:

string sPoint;

foreach(auto x in ptLst){

ofCircle(x.second, 50);

sPoint = "TouchID : ";

sPoint.append(ofToString(x.first));

myFont.drawString(sPoint, x.second.x + 55, x.second.y);

}

  1. Save the files. Press CTRL+F5 to compile and run the app.

When the app runs, you can touch the screen. The app draws a circle is and shows a string that contains the touch point ID for each finger touching the screen. The output is limited by the number of touch points supported by your system, which in most cases is ten.

Wrap Up

Congratulations on completing this challenge.

Want more?

Visit and check out our full collection of Quick Start Challenges.