build your own multitouch interface with java and javafx technology… · build your own multitouch...

Build Your Own Multi-Touch Interface with Java and JavaFX Technology

Simon Ritter, Sun MicrosystemsAngela Caicedo, Sun Microsystems

TS-6127

2008 JavaOneSM Conference | java.sun.com/javaone | 2

Learn how to build a JavaTM technology-powered touch screen that recognises multiple touch points. Also see how easy it is to use JavaFXTM technology to build user interfaces that work with multi-touch input.

2008 JavaOneSM Conference | java.sun.com/javaone | 3

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 4

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 5

Touch Screen Basics

Several different approaches• Special surface coating - capacitive, resistive• Surface acoustic wave, acoustic pulse• Optical – Frustrated total internal reflection

Most screens only respond to single touch point• Touch replaces use of mouse

Multi-touch is becoming more popular• Apple iPhone• Samsung multi-touch display• Microsoft table

2008 JavaOneSM Conference | java.sun.com/javaone | 6

Frustrated Total Internal Reflection

Similar concept to fibre optic cableTouching screen causes IR to appear where touched

Web-cam

Infra-RedSource (LED)

Finger

Acrylic Sheet

ScreenProjector

2008 JavaOneSM Conference | java.sun.com/javaone | 7

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 8

Touch Surface

Thick acrylic sheet• We used 6mm thick, 50x40cm

Edges need to be polishedWe used a three stage process• Back of a hacksaw blade• Very fine sandpaper• Car polish

Screen for display needs to be separate• Coating the underside of the touch surface was a complete disaster• Used a separate 3mm thick acrylic sheet covered in tracing paper

2008 JavaOneSM Conference | java.sun.com/javaone | 9

Infra-Red Source/Detection

Infra-red LEDs mounted along edge of screen• Initially mounted one LED every 7mm• This was reduced to one LED every 3cm (lower power consumption)

Webcam mounted under screen to observe touch points• Webcams can see infra-red, unlike humans• Most webcams have an infra-red filter which must be removed

• This can be difficult (we destroyed several webcams!)

• Replace this with a filter that only lets IR through• Use the filter from a remote control

• Tricky bit is getting the webcam far enough away to see whole screen• Wide angle lens makes this easier

2008 JavaOneSM Conference | java.sun.com/javaone | 10

Infra-Red LED Wiring

LEDs wired in parallel100 Ohm resistor for each LED • Good, bright LED• Not too much power consumption• Not too hot

2008 JavaOneSM Conference | java.sun.com/javaone | 11

Infra-Red LED Mounting

Each LED machined flatBetter optical connectivity to touch surface

2008 JavaOneSM Conference | java.sun.com/javaone | 12

Touch Surface

IR LEDs

2008 JavaOneSM Conference | java.sun.com/javaone | 13

Touch Surface with Screen

Display screen

Touch surface

IR LEDs

2008 JavaOneSM Conference | java.sun.com/javaone | 14

Webcam

Without filter With IR bandpass filter

2008 JavaOneSM Conference | java.sun.com/javaone | 15

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 16

Getting an Image From a Webcam

Java Media Framework (JMF) API• The forgotten Java API, last update 2003

Version 1 only for playback, version 2 introduced captureStill works well for SolarisTM (SPARC®) technology, Linux and Windows• Pure Java technology version available• Performance packs for specific OS• Decision was to use Ubuntu Linux for driver support

Performance was not an issue• Able to grab and process images at suitably high frame rate

2008 JavaOneSM Conference | java.sun.com/javaone | 17

JMF API Frame Grabbing

Locate device with CaptureDataManagerGet DataSource through MediaLocatorSet FormatCreate and Realize ProcessorCreate a PushBufferDataSource• We really want a PullBufferDataSource, but can't have one

Get BufferStream through DataSourceRead BufferConvert Buffer to BufferedImage with BufferToImageConvert BufferedImage to RGB array with PixelGrabber

2008 JavaOneSM Conference | java.sun.com/javaone | 18

Image Processing: Stage 1

Image from camera was not good for processing• Camera had automatic adjustment of white balance, contrast, etc.

Use webcam device driver ioctls• Turn off automatic adjustment• Retrieve current settings• Manually change settings

Driver needed modification• Yay open source!

2008 JavaOneSM Conference | java.sun.com/javaone | 19

Image Processing: Stage 2

Java 2DTM and Java Advanced Imaging APIConvert to 8-bit greyscale for simplified processing• ColorConvolveOp

BufferedImage is really useful for this kind of processing

BufferedImage

ColorModel Raster

SampleModel

DataBufferColorSpace

2008 JavaOneSM Conference | java.sun.com/javaone | 20

Brightness and Contrast Adjustment

Create a ByteLookupTableApply LookupOp filter

Image Pixel Values

Filte

red

Pix

el V

alue

s

Window

Window / 2

Level

LookupOp lop = new LookupOp(byteTable, null);filteredImage = lop.filter(oldImage, null);

2008 JavaOneSM Conference | java.sun.com/javaone | 21

Image Processing: Stage 3

Identify where bright spots are in imageAlgorithm is basically simple• Although certain cases make life a bit harder

Ensure image is mono-chrome, each pixel is white or black• 8-bit greyscale -> 1 bit mono-chrome• Tunable level for change from black to white (0-255)

Sum pixels in each row and column (white = 1, black = 0)Rows or columns with high values indicate touch pointGenerate a set of x, y co-ordinates for all touch points

2008 JavaOneSM Conference | java.sun.com/javaone | 22

2 4 2 3 3 3

233

333

Image Processing: Stage 3

Points can be reversedTest possible locations to get accurate result

x point 1 x point 2

y point 1

y point 2

2008 JavaOneSM Conference | java.sun.com/javaone | 23

Generating Touch Events

We now have a set of touch point co-ordinatesSimple events are somewhat like mouse events• Change of position• New touch point• Touch point disappeared

Touch point code is more complex than mouse• Must track points and figure out when a new one appears• Or an existing one disappears

Gesture recognition is even more complex• Swipe movement• expand/shrink/rotate using two points• Requires time-based analysis

We defined an extendable touch event interface

2008 JavaOneSM Conference | java.sun.com/javaone | 24

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 25

JavaFX Technology Basics

Programming Language for the Java PlatformObject-orientedDeclarative SyntaxStatically-typed with type-inferenceAutomatic data bindingExtensive Widget library encompassing Swing and Java 2D APIDevelopment tools including NetBeansTM and Eclipse IDE plugins

2008 JavaOneSM Conference | java.sun.com/javaone | 26

Java/JavaFX Technology and Multi-Touch Software Integration

Why JavaFX technology:• Great for image manipulation• Data binding simplifies the software implementation• Simple and easy to design and implement the user interface

Why Java technology:• Heavy multi-threading implemented in Java technology• Java based model bound to the interface with JavaFX technology

capabilities• Model change <-> view change

Why Multi-touch:• Intuitive user interaction• Multiple point of interactions• Allows multiple users interacting with the software• Cool and interesting technology

2008 JavaOneSM Conference | java.sun.com/javaone | 27

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 28

Multi-Touch Events

They capture:• Initial position (finger down)• Direction (finger trajectory)• Speed (finger speed)• Final position (finger up)

Dynamically associated with SmartObjectDynamically released from SmartObjectsUniverse vs. individual interactionDirection = 0 and speed = 0 then locking eventsSpeed > threshold then animation triggered

2008 JavaOneSM Conference | java.sun.com/javaone | 29

Smart Objects

Register multi-touch eventsObject's behavior based on multi-touch events and areas of interactions

rotating &stretching

rotating &stretching

rotating &stretching

rotating &stretching

rotating,stretching &

flipping

rotating,stretching &

flipping

rotating,stretching &

flipping

rotating,stretching &

flipping rotating,

2008 JavaOneSM Conference | java.sun.com/javaone | 30

Stretching with Locking Action

2008 JavaOneSM Conference | java.sun.com/javaone | 31

Both Sides Stretching

2008 JavaOneSM Conference | java.sun.com/javaone | 32

Flipping

2008 JavaOneSM Conference | java.sun.com/javaone | 33

Locking and Rotating

2008 JavaOneSM Conference | java.sun.com/javaone | 34

Free Rotation

2008 JavaOneSM Conference | java.sun.com/javaone | 35

Putting Things Together

2008 JavaOneSM Conference | java.sun.com/javaone | 36

Universe Interaction (1 of 2)

2008 JavaOneSM Conference | java.sun.com/javaone | 37

Universe Interaction (2 of 2)

2008 JavaOneSM Conference | java.sun.com/javaone | 38

Smart Objects Still Active (1 of 2)

2008 JavaOneSM Conference | java.sun.com/javaone | 39

Smart Objects Still Active (2 of 2)

2008 JavaOneSM Conference | java.sun.com/javaone | 40

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 41

Where Next?

Infra-red is very useful as we can't see it• No interference with rest of display

Wiimote from Nintendo has IR detector• Can track up to four points simultaneously• Reports positions via bluetooth interface• Used to figure out where the Wiimote is relative to the display

Why not keep the Wiimote stationary, move the IR?Great examples of this• Johnny Chung Lee of CMU• 3D position interpolation

Working on combining this with touch screen• Using wiiremotej open source project

2008 JavaOneSM Conference | java.sun.com/javaone | 42

Agenda

Basic ideas of the multi-touch displayConstruction of the displayUsing Java technology to recognise touch pointsJavaFX technology integration with multi-touch eventsJavaFX technology multi-touch user interfacesFuture directionsSummary and further information

2008 JavaOneSM Conference | java.sun.com/javaone | 43

Summary

Multi-touch screens are simple and cheap to build• Most expensive bit is the projector

Java technology makes the software easyJavaFX technology is easy to integrate with new types of eventJavaFX technology makes building multi-touch user interfaces simpleThis is just the beginning...

2008 JavaOneSM Conference | java.sun.com/javaone | 44

For More Information

Java Media Framework• java.sun.com/products/java-media/jmf/

Java Advanced Imaging• java.sun.com/javase/technologies/desktop/media/jai/

JavaFX technology• openjfx.org

Jeff Hahn (FTIR multi-touch screen)• cs.nyu.edu/~jhan/ftirtouch/• www.perceptivepixel.com/

Building Imaging Applications With Java Technology• Lawrence H. Rodrigues

2008 JavaOneSM Conference | java.sun.com/javaone | 45

Multi-touch screen in action with JavaFX technology

2008 JavaOneSM Conference | java.sun.com/javaone | 46

Simon Ritter, Sun MicrosystemsAngela Caicedo, Sun Microsystems

TS-6127