Pro Yearly is on sale from $80 to $50! »

JavaFX - Custom Controls

7c61dd08cacb66024f77fc45f51899f9?s=47 Karakun
December 05, 2018

JavaFX - Custom Controls

Gerrit presents his two open source frameworks TilesFX and Medusa. TilesFX is used for creating professional and sophisticated dashboards. Medusa delivers a huge set of custom controls that implement gauges, ideal for monitoring applications. Gerrit will share many tricks on how to accomplish eye candy effects.

7c61dd08cacb66024f77fc45f51899f9?s=128

Karakun

December 05, 2018
Tweet

Transcript

  1. Karakun CUSTOM CONTROLS

  2. Gerrit Grunwald | Engineer ABOUTME. Karakun

  3. Karakun HISTORY

  4. Karakun MY 1st CONTROL

  5. Karakun

  6. Karakun Swing

  7. Karakun MY 2nd CONTROL

  8. Karakun Swing

  9. Karakun STEELSERIES Swing

  10. Karakun Swing

  11. Karakun ENZO

  12. Karakun

  13. Karakun MEDUSA

  14. Karakun

  15. Karakun TILESFX

  16. Karakun

  17. Karakun CHARTS

  18. Karakun

  19. Karakun IT'S ALL ABOUT…

  20. Karakun CUSTOM CONTROLS

  21. Karakun I ❤ IT

  22. Karakun BASICS

  23. Karakun TYPES OF CONTROLS

  24. Karakun TYPES OF CONTROLS ๏BASED ON REGION ๏BASED ON CONTROL

    + SKIN ๏BASED ON CANVAS
  25. Karakun CONTROL BASED ON REGION

  26. Karakun REGION ๏Ideal for "stand-alone" controls ๏Can be styled with

    CSS ๏Contains Logic and UI code
  27. Karakun CONTROL BASED ON CONTROL + SKIN

  28. Karakun CONTROL + SKIN ๏Ideal for "library" controls ๏Can be

    style with CSS ๏Separate Logic and UI code ๏Re-Use of Logic code for different skins
  29. Karakun CONTROL BASED ON CANVAS

  30. Karakun CANVAS ๏Ideal for complex controls ๏Cannot be styled with

    CSS ๏Contains Logic and UI code ๏Mouse event handling is more complex ๏Not supported by JPro
  31. Karakun SOME EXAMPLES

  32. Karakun NODES ONLY

  33. Karakun

  34. Karakun SPIRAL ๏Can be realized by adding another Circle

  35. Karakun ๏Can be realized by rotating the Circle SHADOW

  36. Karakun CONICAL GRADIENT ๏Can be realized by using Lines ๏Can

    be realized by using a Pixel Raster
  37. Karakun LINE APPROACH ๏Rotate lines around center ๏Color the lines

    dependent on the current angle
  38. Karakun RASTER APPROACH ๏Calculate the color for each pixel dependent

    on it’s position and angle to the center
  39. Karakun LINES VS RASTER

  40. Karakun RESULT

  41. Karakun

  42. Karakun CANVAS ONLY

  43. Karakun

  44. Karakun CHALLENGES ๏How to realize it? ๏How to do the

    text? ๏How to animate?
  45. Karakun HOW TO REALIZE ๏Using Nodes ๏5x7 Font 35 Nodes

    per Character !!! Node
  46. Karakun HOW TO REALIZE 175 Nodes !!!

  47. Karakun HOW TO REALIZE ๏Using Canvas ๏5x7 Font 1 Nodes

    per Matrix!!! Node
  48. Karakun HOW TO REALIZE 1 Node !!!

  49. Karakun RESULT

  50. Karakun

  51. Karakun VERSATILE…

  52. Karakun VERSATILE…

  53. Karakun VERSATILE…

  54. Karakun VERSATILE…

  55. Karakun VERSATILE…

  56. Karakun VERSATILE…

  57. Karakun VERSATILE…

  58. Karakun BOTH… CANVAS + NODES

  59. Karakun

  60. Karakun

  61. Karakun HOW DOES IT WORK ?

  62. Karakun How does it work? ๏ Canvas Node ๏ Draw

    characters ๏ Create image by performing a snapshot of the canvas A B Z C
  63. Karakun A B Z C A ImageView Viewport Image stripe

    Rectangle
  64. Karakun

  65. Karakun THINGS TO AVOID

  66. Karakun THINGS TO AVOID ๏ Changing the Scene Graph at

    Runtime ๏ Use too many nodes ๏ Third-party dependencies ๏ Use of bindings from laziness ๏ Use of shadows (if not really needed) ๏ Update the UI from outside the UI thread
  67. Karakun DESIGN FOR PERFORMANCE

  68. Karakun DESIGN FOR PERFORMANCE ๏EMBEDDED ๏MOBILE (GLUON) ๏DESKTOP ๏WEB (JPRO)

  69. Karakun EMBEDDED

  70. Karakun EMBEDDED ๏Keep number of nodes as low as possible

    ๏Use Canvas where possible ๏Avoid all kinds of effects
  71. Karakun MOBILE

  72. Karakun MOBILE ๏Keep number of nodes low if possible ๏Design

    for a small screen (reduce details) ๏Design for vertical screen orientation ๏Have usability and user experience in mind ๏No standard JavaFX webview
  73. Karakun DESKTOP

  74. Karakun DESKTOP ๏No restrictions ๏Design for horizontal screen orientation ๏Make

    use of Canvas Node if you need performance
  75. Karakun WEB

  76. Karakun WEB ๏Nodes will be rendered using SVG -> Hardware

    Acceleration in Browser ๏No support for JavaFX Canvas ๏Webview not straight foward ๏Great for dashboards etc.
  77. Karakun But I do also useful stuff…

  78. Karakun

  79. Karakun DEMO

  80. Karakun KEEP CODING…

  81. Karakun THANK U