scratching the surface with javafx

50
Scratching the Surface with JavaFX Using JavaFX 3D & Multi-touch APIs James Weaver Java Technology Ambassador @JavaFXpert james.weaver@oracle. com

Upload: nljug

Post on 11-Nov-2014

696 views

Category:

Technology


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Scratching the Surface with JavaFX

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

James WeaverJava Technology Ambassador

@[email protected]

Page 2: Scratching the Surface with JavaFX

Author of several Java/JavaFX books

Page 3: Scratching the Surface with JavaFX

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

javafxcommunity.com

iotcommunity.net

Page 4: Scratching the Surface with JavaFX

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

Page 5: Scratching the Surface with JavaFX

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.

Page 6: Scratching the Surface with JavaFX

Touch Gestures

Page 7: Scratching the Surface with JavaFX

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

Page 8: Scratching the Surface with JavaFX

Handling the Swipe Gesture (SwipeEvent)

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

Page 9: Scratching the Surface with JavaFX

Handling the Swipe Gesture (SwipeEvent)

Page 10: Scratching the Surface with JavaFX

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

Page 11: Scratching the Surface with JavaFX

Handling the Scroll Gesture (ScrollEvent)

Page 12: Scratching the Surface with JavaFX

The Rotate Gesture

User typically drags two fingers around each other

Rotate events are continuously generated, containing angle-related info

Page 13: Scratching the Surface with JavaFX

Handling the Rotate Gesture (RotateEvent)

Page 14: Scratching the Surface with JavaFX

The Zoom Gesture

User typically drags two fingers apart or closer together

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

Page 15: Scratching the Surface with JavaFX

Handling the Zoom Gesture (ZoomEvent)

Page 16: Scratching the Surface with JavaFX

Touch Event and Touch Points

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

Page 17: Scratching the Surface with JavaFX

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

Page 18: Scratching the Surface with JavaFX

Responding to Touch Events

Page 19: Scratching the Surface with JavaFX

The Pagination Control

Page 20: Scratching the Surface with JavaFX

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

Page 21: Scratching the Surface with JavaFX

Using the Pagination Control

Page 22: Scratching the Surface with JavaFX

Accommodating Fingers

Page 23: Scratching the Surface with JavaFX

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

Page 24: Scratching the Surface with JavaFX

Making UI Controls Larger for Touching

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

Page 25: Scratching the Surface with JavaFX

Introduction to JavaFX 3D

Page 26: Scratching the Surface with JavaFX

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

Jasper PottsJavaFX Engineer, Oracle Corporation

Page 27: Scratching the Surface with JavaFX

Mesh Geometry (3D Shapes)

■ Predefined shapes

■ Box

■ Cylinder

■ Sphere

■ User-defined shapes

■ Using TriangleMesh / MeshView

27

Page 28: Scratching the Surface with JavaFX

28

Creating Primitive Shapes and Materials

Page 29: Scratching the Surface with JavaFX

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

Page 30: Scratching the Surface with JavaFX

Duke’s nose has a Diffuse Map texture

30

Page 31: Scratching the Surface with JavaFX

This planet has a Bump Map texture

31

Page 32: Scratching the Surface with JavaFX

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

Page 33: Scratching the Surface with JavaFX

Placing a Texture on a Sphere

33

Page 34: Scratching the Surface with JavaFX

Placing a Texture on a Sphere

34

Page 35: Scratching the Surface with JavaFX

3D Lights

■ Lights are nodes in the scene graph

■ PointLight

■ AmbientLight

■ Default light provided if no active lights

35

Page 36: Scratching the Surface with JavaFX

36

Lights, Camera, Action!

Page 37: Scratching the Surface with JavaFX

Example multi-touch app: ZenGuitar3D

Page 38: Scratching the Surface with JavaFX

38

Showing the Picker (TouchEvent)

Page 39: Scratching the Surface with JavaFX

39

Rotating Instrument Picker with Scroll Gesture

Page 40: Scratching the Surface with JavaFX

40

Playing Strings (TouchEvent / TouchPoint)

Page 41: Scratching the Surface with JavaFX

41

Switching Modes (TouchPoint#belongsTo)

GuitarString3D instance

Page 42: Scratching the Surface with JavaFX

42

Setting up to Rotate on Three Axes

Page 43: Scratching the Surface with JavaFX

43

Using Scroll Gesture for X/Y Rotate

Page 44: Scratching the Surface with JavaFX

44

Using Rotate Gesture for Z Rotate

Page 45: Scratching the Surface with JavaFX

45

Using Zoom Gesture for Scaling

Page 46: Scratching the Surface with JavaFX

46

Using Timeline to Transform to Home Position

Page 47: Scratching the Surface with JavaFX

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

Page 48: Scratching the Surface with JavaFX

Questions?

Page 49: Scratching the Surface with JavaFX

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

James WeaverJava Technology Ambassador

@[email protected]

Page 50: Scratching the Surface with JavaFX