Scratching the Surface with JavaFX

Scratching the Surface with JavaFXUsing JavaFX 3D & Multi-touch APIs

James WeaverJava Technology Ambassador

@JavaFXpertjames.weaver@oracle.com

Author of several Java/JavaFX books

Co-leader of IoT & JavaFX communities at java.net

javafxcommunity.com

iotcommunity.net

Multi-touch considerations for JavaFX

Touch Gestures– Swipe, Scroll, Rotate, Zoom

Touch Event and Touch Points

The Pagination Control

Accommodating Fingers

Introduction to JavaFX 3D

Example app: ZenGuitar3D

5

Please note

The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.

Touch Gestures

The Swipe Gesture

Commonly a finger drag in one direction A single event is produced for the gesture May be left, right, up, or down

Handling the Swipe Gesture (SwipeEvent)

Note: Lambda expressions from JDK 8 are used here to simplify event handling

Handling the Swipe Gesture (SwipeEvent)

The Scroll Gesture

User turns mouse wheel, drags finger on touch screen, etc.

Scroll events are continuously generated, containing x/y position-related info

Events are pixel-based or character/line-based

If inertia is supported, scroll events may be generated after user quits scrolling

Handling the Scroll Gesture (ScrollEvent)

The Rotate Gesture

User typically drags two fingers around each other

Rotate events are continuously generated, containing angle-related info

Handling the Rotate Gesture (RotateEvent)

The Zoom Gesture

User typically drags two fingers apart or closer together

Zoom events are continuously generated, containing zoom factor-related info

Handling the Zoom Gesture (ZoomEvent)

Touch Event and Touch Points

Thomas Laenner - http://thomas.laenner.dk/

Handling Touch (TouchEvent/TouchPoint)

A TouchEvent contains information about a touch, including:

– Event type: Pressed, released, moved, or stationary

– Touch points: The TouchPoint instances that represent each of the points that were touched

Each TouchEvent has a unique ID to identify the events and touch points in a multi-touch action

Responding to Touch Events

The Pagination Control

Using the Pagination Control

The Pagination control is used for navigation between pages

Each page is a Node subclass Numeric page indicators, or bullet-style

indicators, may be set with the style class STYLE_CLASS_BULLET

Using the Pagination Control

Accommodating Fingers

Making UI Controls Larger for Touching

The default sizes for JavaFX UI controls are conducive to using a mouse as a pointing device

An easy way to modify the default sizes is to use CSS

Making UI Controls Larger for Touching

Specify an -fx-font-size property in the #root selector

Introduction to JavaFX 3D

“JavaFX 3D gives you the ability to use 3D geometry, cameras, and lights in JavaFX.”

Jasper PottsJavaFX Engineer, Oracle Corporation

Mesh Geometry (3D Shapes)

■ Predefined shapes

■ Box

■ Cylinder

■ Sphere

■ User-defined shapes

■ Using TriangleMesh / MeshView

27

28

Creating Primitive Shapes and Materials

3D Materials and Textures

■ PhongMaterial has these properties

■ Ambient color

■ Diffuse color, diffuse map

■ Specular color, specular map

■ Specular power

■ Bump map

■ Self-illumination map

29

https://wikis.oracle.com/display/OpenJDK/3D+Features

Duke’s nose has a Diffuse Map texture

30

This planet has a Bump Map texture

31

UV Mapping Textures to Shapes

32

Tip: A texture is a 2D image to be mapped on a 3D surface

Source: http://en.wikipedia.org/wiki/File:UVMapping.png

Placing a Texture on a Sphere

33

Placing a Texture on a Sphere

34

3D Lights

■ Lights are nodes in the scene graph

■ PointLight

■ AmbientLight

■ Default light provided if no active lights

35

36

Lights, Camera, Action!

Example multi-touch app: ZenGuitar3D

38

Showing the Picker (TouchEvent)

39

Rotating Instrument Picker with Scroll Gesture

40

Playing Strings (TouchEvent / TouchPoint)

41

Switching Modes (TouchPoint#belongsTo)

GuitarString3D instance

42

Setting up to Rotate on Three Axes

43

Using Scroll Gesture for X/Y Rotate

44

Using Rotate Gesture for Z Rotate

45

Using Zoom Gesture for Scaling

46

Using Timeline to Transform to Home Position

47

ZenGuitar3D Uses the JFugue5 Library

■ An open-source Java API for programming music without the complexities of MIDI

■ Developed by David Koelle

■ Available at http://JFugue.org

Questions?

Scratching the Surface with JavaFXUsing JavaFX 3D & Multi-touch APIs

James WeaverJava Technology Ambassador

@JavaFXpertjames.weaver@oracle.com