Associated Project(s)

Adding touch support in your application using openFramework on WinRT

For the past few days I have been playing with the latest OpenFramework port on Windows 8 (the repository is public and still active). In my deeper examination of touch support, I learned that adding it into your OF application is really quite simple and efficient!

I have outlined some steps below to help others of you who would be interested to do this, but haven’t yet had the chance to dive in.

Pre-requisite

In order to start correctly, you will first need to:

·         Have a stable C++ environment up and running

You may obtain the free version of Visual C++ here.

·         Install OpenFrameworks (Winrt-Multitouch branch) from GitHub in the MSOpenTech repo. Note than you can clone the repo on your desktop or download a zip file and uncompress it where you want.

      Of course, to test the touch behavior, you will also need a tactile screen….!

Project creation and structure

To create a project and reference the appropriate libraries, the path can be tricky, complex and… boring. The OF community offers a great tool for creating projects. We have also duplicated this tool for WinRT usage. You may soon also learn that project generator is an indispensable resource for creating projects in the OF world.

Launch projectGeneratorSimple_winrt.exe, from \GitHub\openFrameworks\projectGenerator folder. The interface will look very simple:

clip_image002

To make things easier for yourself in the long-run, I would advise you to fill in the name of your solution manually rather than using any of the add-ons that come with this version.

Also, don’t change the target path. I will discuss this later, but for now, just click on generate project. The UI will show you a message in the status bar, inviting you to access the folder:

C:\...\GitHub\openFrameworks\apps\myApps\

In this folder you will see two project files (sln extension), as well as a couple of xaml files, DirectXHelper files and Angle files. This is because all OpenGL calls made in openFrameworks are translated in DirectX via the Angle library, acting as a redirecting layer to DirectX.

Temporarykey and package manifest files will be needed for WinRT project Type. With manifest file, you will be able to set precise settings for the application in the Win8 application environment (tile, screen orientation behavior, etc.)

 

clip_image004clip_image006

The two projects correspond to two different approaches of coding applications for Windows 8. Interfaces can be created in a special format: XAML files. At compile time, your .xaml file will become a .g file, which describes the interface. These files will be compiled and linked in your application when you build it. 

While I won’t go into more detail here, a general understanding of the structure of a XAML-type project will be very useful when building Windows 8 applications.

For a XAML project, you’ll find these files in your project directory:

 clip_image008

DirectXPage.xaml file is the screen definition for your project.

You will then be able to design pages visually using Visual Studio and the control toolbar, as shown here:

clip_image010

 

Here is another solution that provides the usual OF project structure (no XAML, just of app with a main as simpler is possible).

clip_image012 

This project should look very familiar for OF developers. The magic in this structure is that it allows you to port your existing code directly. For non-OF developers, this structure is well-adapted to render graphical scenes. As a result, the update and draw methods are automatically called at the fps rate needed. So, after put your logic in setup, you will be able to update and render the code in draw… that’s it !

 

Touch it

Once you verify that the project generated a fresh build correctly, you will be able to add touch support.

Touch support can be added in an OF project by setting the ofRegisterTouchEvents(this) function:

clip_image014

As you can see, this call can add listeners for five events (defined inofEvents, already included in the project).

You will then be able to add the method proto in our classofAppin the .h file to start implementing the touch behavior:

void touchDown(ofTouchEventArgs &touch);

       void touchMoved(ofTouchEventArgs &touch);

       void touchUp(ofTouchEventArgs &touch);

       void touchDoubleTap(ofTouchEventArgs &touch);

       void touchCancelled(ofTouchEventArgs &touch);

 

You will need to go into the .cpp file to add an empty implementation for these five methods. Compile the project again to verify that everything is OK.

To test touch events, you will need to be able to detect a touchdown, or a finger touching the screen.

First call ofRegisterTouchEvents(this)

In setup method, you can then add touch capabilities to your application.

Add a ofpoint and a string as class members in the class definition (in the .h file), to store the position and the identity of the contact.

 

In the touchDown event handler, just stor x and y in your point and the ID in your string:

 

voidofApp::touchDown(ofTouchEventArgs &touch){

 

       pt.x = touch.x;

       pt.y = touch.y;

 

       s="TouchID : ";

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

 

in Draw() method, you will then display the string at the touch position with a litle circle:

ofCircle(pt, 10);

       ofDrawBitmapString(s, pt);

 

When you now test the application, you will see a circle appear at the position where you touch the screen. Looking at the id, you will see this value change every time you touch the screen. In fact, the value will continue to be dynamic. It will be different for every operation touch-move-up. During the time your fingers maintain the contact with the screen, it will maintain the same contact identity. Stock the identity in TouchDown, then test it while moving and re init at the touchUp event.

 

Multitouch!

To play with multitouch, we will need to create more contact points. We’ll recognize who is who with the id of the touch argument; touch.id

For this purpose, you will need to remove all of the code concerning the pt and the string. In place,  you should create a map of ofPoint and int for storing point and id of each point of contact:

map<int,ofPoint> ptLst;

Now implement the three touch event:

In touchdown we store id and point in our map, with id as key in our map.

voidofApp::touchDown(ofTouchEventArgs &touch){

 

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

       ptLst.insert(std::pair<int,ofPoint>( touch.id, pt) );}

 

When we move fingers on the screen, just move the correspondent point. For that, find the point corresponding to the id passing in parameter, and change their x and y coordinate.

 

voidofApp::touchMoved(ofTouchEventArgs &touch){

 

       map<int, ofPoint>::iterator it;

       it = ptLst.find(touch.id);

       it->second.x = touch.x;

       it->second.y = touch.y;

 

}

 

 

For the touch up, just remove from the map the point corresponding to the touch.id

voidofApp::touchUp(ofTouchEventArgs &touch){

       map<int, ofPoint>::iterator it;

       it = ptLst.find(touch.id);

       ptLst.erase(it);

}

 

Well done! We just saw in few lines of code that the openFramework structure works well for creating projects – including touch and multitouch – for Windows 8 applications.  

I hope you enjoyed reading this post, and have fun applying touch to your own applications using openFrameworks J

Feel free to share any feedback about your own experiences as comments to this blog or at the project site.

 

A bientôt !

Eric


2 thoughts on “Adding touch support in your application using openFramework on WinRT

  1. Pingback: Dew Drop – March 19, 2014 (#1746) | Morning Dew

Leave a Reply