2-D- und 3-D-Datenvisualisierung für alle Plattformen mit HTML5

2-D- und 3-D-Datenvisualisierung für alle Plattformen mit HTML5

Zahlen und Ziffern, schwarz auf weiß, sind für sich genommen ziemlich langweilig und oftmals nur bedingt aussagekräftig. Es bedarf einer Visualisierung, um Zusammenhänge verstehen und Daten vergleichen zu können. Mit Webtechnologien stehen Ihnen hierfür mehr Möglichkeiten zur Verfügung denn je. Neben 2-D-Diagrammen können Sie mithilfe von WebGL auch interaktive dreidimensionale Darstellungen plattformübergreifend realisieren – im Browser und Touch-optimiert auf mobilen Endgeräten. Christian Liebel und Manuel Rauber zeigen Ihnen in dieser Session, wie Sie ansprechende 2-D- und 3-D-Visualisierungen Cross-Plattform implementieren und in existierende Anwendungen einbetten können.

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

September 22, 2016
Tweet

Transcript

  1. None
  2. INTRODUCTION Christian Liebel Manuel Rauber christian.liebel@thinktecture.com @chris_liebel manuel.rauber@thinktecture.com @manuelrauber Microso

    MVP https://christianliebel.com https://manuel-rauber.com
  3. SPECIAL DAY "CROSS-PLATTFORM HTML5"

  4. TALKING POINTS 2D 3D Overview Browser support, performance API Basics,

    retina scaling, animation, interaction Examples Overview Basics WebGL & three.js Browser support, controls Examples
  5. 2D VISUALIZATION HTML5 CANVAS Manuel Rauber @manuelrauber

  6. CROSS PLATFORM Native Multi Platform Cross Platform One app per

    platform Less to none code sharing Java/Swi /C# One app per supported platforms Medium code sharing Xamarin (C#) One app for all High code sharing HTML/JS
  7. OVERVIEW Plain bitmap for the web Cross platform graphic manipulations

    High performance Mouse, touch & gamepad support Low energy consumpting animations
  8. BROWSER SUPPORT (BASIC) From http://caniuse.com/#search=canvas

  9. BROWSER SUPPORT (OVERALL) From http://caniuse.com/#search=canvas

  10. PERFORMANCE CHROME @ MACBOOK PRO From http://jsperf.com/html-vs-svg-vs-canvas/31

  11. PERFORMANCE ANDROID @ SAMSUNG GALAXY NOTE From http://jsperf.com/html-vs-svg-vs-canvas/31

  12. COORDINATE SYSTEM Cartesian: (0/0) bottom le Canvas: (0/0) top le

    From http://www.sitepoint.com/html5-canvas-tutorial-introduction/
  13. USAGE < ! D O C T Y P E

    h t m l > < h t m l > < h e a d > < t i t l e > C a n v a s ! < / t i t l e > < / h e a d > < b o d y > < c a n v a s > < / c a n v a s > < / b o d y > < / h t m l >
  14. FALLBACK < ! D O C T Y P E

    h t m l > < h t m l > < h e a d > < t i t l e > C a n v a s ! < / t i t l e > < / h e a d > < b o d y > < c a n v a s > T h i s t e x t i s s h o w n , w h e n a b r o w s e r d o e s n o t s u p p o r t c a n v a s . < / c a n v a s > < / b o d y > < / h t m l >
  15. CONTEXTS 2D context: CanvasRenderingContext2D v a r c o n

    t e x t = c a n v a s . g e t C o n t e x t ( ' 2 d ' ) ; WebGL context: WebGLRenderingContext v a r c o n t e x t = c a n v a s . g e t C o n t e x t ( ' w e b g l ' ) ;
  16. API DRAWING v o i d f i l l

    R e c t ( x , y , w i d t h , h e i g h t ) ; v o i d s t r o k e R e c t ( x , y , w i d t h , h e i g h t ) ; v o i d c l e a r R e c t ( x , y , w i d t h , h e i g h t ) ; v o i d f i l l T e x t ( t e x t , x , y [ , m a x W i d t h ] ) ; v o i d s t r o k e T e x t ( t e x t , x , y [ , m a x W i d t h ] ) ; MDN: CanvasRenderingContext2D
  17. API PATHS v o i d b e g i

    n P a t h ( ) ; v o i d c l o s e P a t h ( ) ; v o i d m o v e T o ( x , y ) ; v o i d l i n e T o ( x , y ) ; v o i d b e z i e r C u r v e T o ( c p 1 x , c p 1 y , c p 2 x , c p 2 y , x , y ) ; v o i d r e c t ( x , y , w i d t h , h e i g h t ) ; v o i d f i l l ( ) ; v o i d s t r o k e ( ) ; MDN: CanvasRenderingContext2D
  18. API PIXEL MANIPULATION I m a g e D a

    t a c r e a t e I m a g e D a t a ( w i d t h , h e i g h t ) ; I m a g e D a t a g e t I m a g e D a t a ( s x , s y , s w , s h ) ; v o i d p u t I m a g e D a t a ( i m a g e d a t a , d x , d y ) ; MDN: CanvasRenderingContext2D
  19. RETINA SUPPORT

  20. None
  21. RETINA - HOW TO f u n c t i

    o n a d j u s t F o r R e t i n a ( ) { i f ( ! w i n d o w . d e v i c e P i x e l R a t i o | | w i n d o w . d e v i c e P i x e l R a t i o < = 1 ) { r e t u r n ; } v a r w i d t h = c a n v a s . w i d t h ; v a r h e i g h t = c a n v a s . h e i g h t ; c a n v a s . s t y l e . w i d t h = w i d t h + ' p x ' ; c a n v a s . s t y l e . h e i g h t = h e i g h t + ' p x ' ; c a n v a s . w i d t h = w i d t h * w i n d o w . d e v i c e P i x e l R a t i o ; c a n v a s . h e i g h t = h e i g h t * w i n d o w . d e v i c e P i x e l R a t i o ; c o n t e x t . s c a l e ( w i n d o w . d e v i c e P i x e l R a t i o , w i n d o w . d e v i c e P i x e l R a t i o ) ; }
  22. ANIMATIONS THE OLD WAY setTimeout f u n c t

    i o n d r a w ( ) { / / d r a w r o u t i n e s e t T i m e o u t ( d r a w , 1 0 0 0 / 6 0 ) ; } setInterval s e t I n t e r v a l ( f u n c t i o n ( ) { / / d r a w r o u t i n e } , 1 0 0 0 / 6 0 ) ;
  23. ANIMATIONS THE MODERN WAY requestAnimationFrame v a r a n

    i m a t i o n F r a m e ; f u n c t i o n s t a r t A n i m a t i o n ( ) { v a r s t e p = f u n c t i o n ( ) { / / d r a w r o u t i n e a n i m a t i o n F r a m e = w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( s t e p ) ; } a n i m a t i o n F r a m e = w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( s t e p ) ; f u n c t i o n s t o p A n i m a t i o n ( ) { w i n d o w . c a n c e l A n i m a t i o n F r a m e ( a n i m a t i o n F r a m e ) ; } MDN: , requestAnimationFrame cancelAnimationFrame
  24. ANIMATIONS PROBLEMS WITH "OLD" TECHNIQUES If the callback function takes

    longer than the timer will call it, the callback function gets queued. Could lead quickly to an "infinite" amount of queued callback functions. Timers continue to work in background tabs, the browser will render invisible animations (wastage of CPU and battery life). Especially bad for mobile devices. From https://dev.opera.com/articles/better-performance-with-requestanimationframe/
  25. ANIMATIONS WHAT REQUESTANIMATIONFRAME DOES Only executed when visible to the

    user (will stop in background tabs!). No wastage of CPU and battery life. Frame is only drawn when browser is ready and no other frame waits for drawing. No "infinite" amount of queued callback functions. From https://dev.opera.com/articles/better-performance-with-requestanimationframe/
  26. ANIMATIONS WHAT REQUESTANIMATIONFRAME DOESN'T DO As the name suggests: Only

    one frame is requested. r e q u e s t A n i m a t i o n F r a m e has to be called within the callback to get an animation loop. You don't know, when the callback will be executed. Animations on the same page, where one is in the visible area and one not, will not run synchronously since the hidden one's r e q u e s t A n i m a t i o n F r a m e will not be called. From https://dev.opera.com/articles/better-performance-with-requestanimationframe/
  27. INTERACTION KEYBOARD & MOUSE SUPPORT Canvas supports all keyboard &

    mouse events like k e y d o w n , k e y u p , m o u s e d o w n or m o u s e m o v e . c a n v a s . a d d E v e n t L i s t e n e r ( ' m o u s e m o v e ' , f u n c t i o n ( m o u s e E v e n t ) { / / m o u s e e v e n t r o u t i n e } ) ; c a n v a s . a d d E v e n t L i s t e n e r ( ' k e y d o w n ' , f u n c t i o n ( k e y E v e n t ) { / / k e y d o w n e v e n t r o u t i n e } ) ; MDN: , MouseEvent KeyboardEvent
  28. INTERACTION TOUCH Canvas supports all touch events like t o

    u c h s t a r t , t o u c h m o v e , t o u c h e n d . Consider using a library for recognizing gestures like . HammerJS c a n v a s . a d d E v e n t L i s t e n e r ( ' t o u c h m o v e ' , f u n c t i o n ( t o u c h E v e n t ) { / / t o u c h m o v e e v e n t r o u t i n e } ) ; MDN: , Touch events TouchEvent
  29. EXAMPLES WITHIN GITHUB REPOSITORY 1. Basic circle 2. Circle with

    gradient 3. Retina support 4. requestAnimationFrame 5. Time-based animations 6. Mouse Move 7. Touch Move 8. Manipulating a rectangle with HammerJS 9. Rotating Pie Chart
  30. EXAMPLES WITHIN THE WEB Gesture recognition: Video explosion: Zen Photon

    Garden: Zoom Charts: Many more examples @ http://revealjs.herokuapp.com/ http://www.cra ymind.com/factory/html5video/CanvasVideo http://zenphoton.com/ https://zoomcharts.com/developers/en/net- chart/examples/items/link-items.html http://www.canvasdemos.com/
  31. VIDEO EXPLOSION From http://www.cra ymind.com/factory/html5video/CanvasVideo.html

  32. ZEN PHOTON GARDEN From http://zenphoton.com/

  33. ZOOM CHARTS From https://zoomcharts.com/developers/en/net-chart/examples/items/link-items.html

  34. LIVE DEMO

  35. 3D VISUALIZATION Christian Liebel @chris_liebel

  36. 3D CONTENT IN A 3D WORLD WITH 2D SCREENS scenes,

    cameras, rendering
  37. COORDINATE SYSTEM Right-handed From https://msdn.microso .com/library/dn479430(v=vs.85).aspx

  38. CAMERA FRUSTUM From https://msdn.microso .com/library/dn479430(v=vs.85).aspx

  39. WEBGL Web Graphics Library Hardware accelerated (GPU) New canvas rendering

    context w e b g l
  40. PROVEN TECHNOLOGY Based on OpenGL for Embedded Systems Blender &

    Unity can export to WebGL ANGLE (Chrome/Firefox): Rendering on Direct3D
  41. THREE.JS Native WebGL is complex Open-source JavaScript library High-level API

    abstracting WebGL (and more)
  42. STRUCTURE Geometry: shape (cube, sphere, …) Material: color, texture, light

    reflection Mesh: 3D object (geometry + material)
  43. BROWSER SUPPORT From http://caniuse.com/#search=webgl

  44. MOBILE PLATFORM SUPPORT iOS 8+ Android WebView 36+ Crosswalk Windows

    (Phone) 8.1+
  45. CONTROLS Mouse/Keyboard Touch Gamepad

  46. A WORD ON TOUCH EVENTS… Pointer Events vs. Touch Events

    Browser support varies on desktop three.js controls only support Touch Events
  47. A WORD ON GAMEPADS… HTML5 Gamepad API Polling (requestAnimationFrame) Supported

    by Chrome, Firefox, MS Edge, Opera
  48. THE CREATION OF THE WORLD

  49. EVEN MORE SAMPLES… Flight Arcade Physijs three.js samples

  50. SUMMARY Cross platform high-performance graphic manipulation 2D & 3D Hardware

    acceleration Supported by all major browsers Touch-enabled, gamepad-enabled
  51. CHANNEL9 Cross-Platform Development https://channel9.msdn.com/Series/Thementag-Cross- Plattform-Entwicklung-mit-HTML5--Javascript

  52. THANK YOU! GitHub repository: https://github.com/thinktecture/basta-2d-3d thinktecture.com

  53. RESOURCES GitHub repository: Canvas browser support: Cordova: Ionic: Gulp: TypeScript:

    CanvasRenderingContext2D: WebGLRenderingContext: requestAnimationFrame: https://github.com/thinktecture/basta-2d-3d http://caniuse.com/#search=canvas https://cordova.apache.org/ http://ionicframework.com/ http://gulpjs.com http://www.typescriptlang.org/ https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext https://developer.mozilla.org/en- US/docs/Web/API/window/requestAnimationFrame