Scratching the Surface with JavaFX
Using JavaFX 3D & Multi-touch APIs
James Weaver
Java Technology Ambassador

@JavaFXpert...
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
 Th...
Please note
The following is intended to outline our general product
direction. It is intended for information purposes on...
Touch Gestures
The Swipe Gesture
 Commonly a finger drag in one direction

 A single event is produced for the gesture
 May be left, r...
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
generate...
Handling the Scroll Gesture (ScrollEvent)
The Rotate Gesture
 User typically drags two fingers around

each other
 Rotate events are continuously
generated, conta...
Handling the Rotate Gesture (RotateEvent)
The Zoom Gesture
 User typically drags two fingers apart or

closer together
 Zoom events are continuously
generated, co...
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: Presse...
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...
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 poi...
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.”
Mesh Geometry (3D Shapes)
■ Predefined shapes
■ Box
■ Cylinder
■ Sphere
■ User-defined shapes
■ Using TriangleMesh / MeshV...
Creating Primitive Shapes and Materials

28
3D Materials and Textures
https://wikis.oracle.com/display/OpenJDK/3D+Features
■ PhongMaterial has these properties
■ Ambi...
Duke’s nose has a Diffuse Map texture

30
This planet has a Bump Map texture

31
UV Mapping Textures to Shapes

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

Source: http://en.wikipedia.org/...
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

...
Lights, Camera, Action!

36
Example multi-touch app:
ZenGuitar3D
Showing the Picker (TouchEvent)

38
Rotating Instrument Picker with Scroll Gesture

39
Playing Strings (TouchEvent / TouchPoint)

40
Switching Modes (TouchPoint#belongsTo)

41
Setting up to Rotate on Three Axes

42
Using Scroll Gesture for X/Y Rotate

43
Using Rotate Gesture for Z Rotate

44
Using Zoom Gesture for Scaling

45
Using Timeline to Transform to Home Position

46
ZenGuitar3D Uses the JFugue5 Library
■ An open-source Java API for

programming music without the
complexities of MIDI
■ D...
Questions?
Scratching the Surface with JavaFX
Using JavaFX 3D & Multi-touch APIs
James Weaver
Java Technology Ambassador

@JavaFXpert...
Scratching the Surface with JavaFX
Upcoming SlideShare
Loading in …5
×

Scratching the Surface with JavaFX

994 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
994
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Scratching the Surface with JavaFX

  1. 1. Scratching the Surface with JavaFX Using JavaFX 3D & Multi-touch APIs James Weaver Java Technology Ambassador @JavaFXpert james.weaver@oracle.com
  2. 2. Author of several Java/JavaFX books
  3. 3. Co-leader of IoT & JavaFX communities at java.net javafxcommunity.com iotcommunity.net
  4. 4. 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. 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. 5
  6. 6. Touch Gestures
  7. 7. 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
  8. 8. Handling the Swipe Gesture (SwipeEvent) Note: Lambda expressions from JDK 8 are used here to simplify event handling
  9. 9. Handling the Swipe Gesture (SwipeEvent)
  10. 10. 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/linebased  If inertia is supported, scroll events may be generated after user quits scrolling
  11. 11. Handling the Scroll Gesture (ScrollEvent)
  12. 12. The Rotate Gesture  User typically drags two fingers around each other  Rotate events are continuously generated, containing angle-related info
  13. 13. Handling the Rotate Gesture (RotateEvent)
  14. 14. The Zoom Gesture  User typically drags two fingers apart or closer together  Zoom events are continuously generated, containing zoom factor-related info
  15. 15. Handling the Zoom Gesture (ZoomEvent)
  16. 16. Touch Event and Touch Points Thomas Laenner - http://thomas.laenner.dk/
  17. 17. 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
  18. 18. Responding to Touch Events
  19. 19. The Pagination Control
  20. 20. 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
  21. 21. Using the Pagination Control
  22. 22. Accommodating Fingers
  23. 23. 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
  24. 24. Making UI Controls Larger for Touching Specify an -fx-font-size property in the #root selector
  25. 25. Introduction to JavaFX 3D
  26. 26. “JavaFX 3D gives you the ability to use 3D geometry, cameras, and lights in JavaFX.”
  27. 27. Mesh Geometry (3D Shapes) ■ Predefined shapes ■ Box ■ Cylinder ■ Sphere ■ User-defined shapes ■ Using TriangleMesh / MeshView 27
  28. 28. Creating Primitive Shapes and Materials 28
  29. 29. 3D Materials and Textures https://wikis.oracle.com/display/OpenJDK/3D+Features ■ PhongMaterial has these properties ■ Ambient color ■ Diffuse color, diffuse map ■ Specular color, specular map ■ Specular power ■ Bump map ■ Self-illumination map 29
  30. 30. Duke’s nose has a Diffuse Map texture 30
  31. 31. This planet has a Bump Map texture 31
  32. 32. UV Mapping Textures to Shapes Tip: A texture is a 2D image to be mapped on a 3D surface Source: http://en.wikipedia.org/wiki/File:UVMapping.png 32
  33. 33. Placing a Texture on a Sphere 33
  34. 34. Placing a Texture on a Sphere 34
  35. 35. 3D Lights ■ Lights are nodes in the scene graph ■ PointLight ■ AmbientLight ■ Default light provided if no active lights 35
  36. 36. Lights, Camera, Action! 36
  37. 37. Example multi-touch app: ZenGuitar3D
  38. 38. Showing the Picker (TouchEvent) 38
  39. 39. Rotating Instrument Picker with Scroll Gesture 39
  40. 40. Playing Strings (TouchEvent / TouchPoint) 40
  41. 41. Switching Modes (TouchPoint#belongsTo) 41
  42. 42. Setting up to Rotate on Three Axes 42
  43. 43. Using Scroll Gesture for X/Y Rotate 43
  44. 44. Using Rotate Gesture for Z Rotate 44
  45. 45. Using Zoom Gesture for Scaling 45
  46. 46. Using Timeline to Transform to Home Position 46
  47. 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 47
  48. 48. Questions?
  49. 49. Scratching the Surface with JavaFX Using JavaFX 3D & Multi-touch APIs James Weaver Java Technology Ambassador @JavaFXpert james.weaver@oracle.com

×