Tizen v2.3 Graphics & UI Frameworks

1. Tizen v2.3 Graphics & UI Frameworks

2. Contents • EFL(Enlightenment Foundation Library) • EFL Features • Ecore • Evas • Edje • Elementary • Cserve2 • Window Systems • X Window System • Wayland • DALi 3D Engine

3. Tizen v2.3 Graphics & UI Frameworks • UI Frameworks • Modules to implement interactive GUI • EFL(Elementary/Ecore), OSP, GTK, Qt • Input Service Framework(ISF), Voice Framework • Graphics Libraries • Modules to render graphic objects • Evas, Cairo, OpenGL ES, EGL • Window Systems • Modules to manage windows and frame buffers • X Window System, Wayland(Tizen v3.0)

4. Tizen v2.3 Graphics & UI Frameworks • Frameworks for UI of core applications &web applications Deprecated (Bada App FW)

5. EFL(Enlightenment Foundation Library)

6. Enlightenment • Started froma desktop window manager • Default window manager of Bodhi Linux

7. Enlightenment Foundation Library • A set of libraries supporting Enlightenment • Enlightenment 0.17(E17) • Components are divided by functions • Event loop: Ecore • Rendering engine: Evas • UI: Edje, Elementary, … • UI builder tools: Enventor, Eflete, ELM Theme Editor • EFL in Present • Core components of Tizen Graphics/UI framework • 26%of code isE17, the other isEFL

8. EFL in Tizen v2.3 Core Applications InputServiceFramework& Voice Framework Elementary Edje Ecore Evas Eina Eet freetype2 fontconfig Cairo OpenGL ES/EGL X Window System Linux Kernel Frame Buffer Input Devices H/W Applications Graphics Window System ISF& Voice FW Legend kernel / Frame Buffer/ Input Devices EFL & fonts H/W

9. Immediate vs. Retained Mode (1/2) • Immediate Mode Graphics System • Application directly re-paints its portion that is invalidated • Application re-issues all drawing commands to describe the entire scene each time a new frame is required • GTK+ 3, GDI, GDI+ Application 1. Invalidate GTK+/GDK-X11 2. Expose 3. Drawing Window System Graphics Card Frame Buffer for Screen

10. Immediate vs. Retained Mode (2/2) • Retained Mode Graphics System • The graphics system is responsible for rendering the drawing objects given by application. • Application passes drawing objects to graphics system. • Evas, GTK+ 4(Clutter), WPF Application Evas objects Expose X Window System Evas Rendering Engine (Graphics system) Graphics Card Framebuffer for screen

11. Why is EFL used on Tizen? (1/3) • High performance • Retained mode graphics system • 60fps+ on general smartphones • Fit for Low-end Hardware • Small memory, no swap, no GPUs • OpenGLis not worth for all cases • Texture keeps speed, but loses memory • Support for HW rendering • OpenGL ES • SIMD vector(MMX, Neon)

12. Why is EFL used on Tizen? (2/3) • Various back-end engine • X11 (~Tizen 2.2.1), Wayland (Tizen 3.0~) • Direct Frame Buffer, DRM, Memory buffers, PS3 Native, Windows (GDI & DirectDraw), … • UI Scalability • Various resolutions (WVGA ~ XQXGA) with the same layout and resources Scale factor: 0.6 0.8 1.0

13. Why is EFL used on Tizen? (3/3) • GUI, Logic separation • Themes • A preset package containing graphical appearance details • Bindings • Basically C-based • EFL is also binded to Javascript, C++, Python, Ruby, Perl … • Eo: Generic object model

14. EFL Shortcomings • Entry barrier • Unfamiliar development style • Lack of documentations, developers • No object-oriented implementation • C-based • Eo project is ongoing • Incomplete C++ support • Eolian based E++ project ongoing • Eolian is EO object parser and C code generator • No thread safe

15. Tizen v2.3 Rendering Path 3D App EFL App. Composite Window Manager EFL OpenGL ES/EGL EVAS OpenGL ES/EGL OpenGL ES/EGL Video App. X window server Frame Buffer Textures EFL MM FW OpenGL ES win EFL win Video win Legend Process Configurable Enable/disable 3D App. EFL App. Multimedia App. OpenGL ES/EGL Texture Mem. Rendering pipeline path; rendering data flow Texture from Pixmap

16. Tizen v2.3 Rendering Path on SW Backend Elementary Evas Ecore Edje EcoreX xlib Evas software backend LCDcontroller X shared Mem. Frame buffer Update window areas X Server 60Hz

17. Tizen v2.3 Rendering Path on GLES Backend Elementary Evas OpenGL ES backend Evas Ecore X OpenGL ES EGL for X Ecore Edje xlib controlled by EGL OpenGL ES H/W LCDcontroller back front Update window area Frame buffer X Server Double buffer 60Hz /dev/fb1

18. EFL Components: Core • Ecore (E + Core) • Event loop library with convenience modules • Evas (E + canVAS) • Canvas & rendering library • Edje • Complex graphical design & layout library • Elementary • Widget set

19. EFL Components: Others • Eo • Generic object model for binding other languages • Eina • Library for data types • Eet • Data codec and storage • Efreet • Freedesktop.org standards support • Edbus • Wrapper of Dbus • Emotion • Video/Audio Playback library • Eio • Asynchronous I/O • Eeze • Udev hardware detection • Ethumb • Thumbnailer & cacher

20. EFL: Ecore The core loop of EFL applications

21. Ecore • The core loop of EFL application, event & marshaling library • Provides glue to other subsystems • Supports various display system • X11, FB, Wayland, Win32, WinCE, etc. • Features: • Networking & IPC • Threading & inter-thread communication • Evas input feeding and output driving • More...

22. Simple EFL Application • elm_main() • Main function of EFL application • After initialization, enter into event loop. On exiting window,it also exits Ecore event loop Elementary UI configuration (Elementary Window) Start Ecore main loop! Finalization process like freeing resource

23. Ecore Main Loop (1/2) • ecore_main_loop_begin() • The wrapper of Ecore main loop • Ecore main loop andGlib main loop can be chosen. Ecore main loop Glib main loop

24. Ecore Main Loop (2/2) • _ecore_main_loop_iterate_internal() • The implementation of Ecore main loop • It starts all the timer handler, event handler, renderingin an application.

25. Ecore: Usage of Ecore Events • Key down event Ecore_Event_Handler *handler; handler = ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, func, data); Eina_Bool func(void *data, int type, void *event_info) { if (…) return ECORE_CALLBACK_DONE; return ECORE_CALLBACK_PASS_ON; } • Timer event Ecore_Timer *timer; double time; timer = ecore_timer_add(time, func, data); Eina_Bool func(void *data) { if (…) return ECORE_CALLBACK_RENEW; return ECORE_CALLBACK_CANCEL; }

26. EFL: Evas Canvas & Rendering Library

27. Evas • Canvas & Rendering Library • Features • Retained mode rendering • Controls rendering behavior in the unit of primitive objects and smart objects. • Scene graph • Tracks the status of objects→ minimizes renderingbehavior. • Multiple output paths • Pure software/OpenGL ES • Rendering optimization • 3D H/W Acceleration, SIMD vector operations • Provides GL Glue Layer

28. Evas: Retained Mode Rendering • Evasusesretained mode rendering • ApplicationsendsEvas objects toEvas. • Evasdoes rendering based on Evas objects. Application Evas objects Expose X Window System Evas Rendering Engine (Graphics system) Graphics Card Framebuffer for screen

29. Evas Objects • All Objects Displayed on Canvas • Controlled by Evas_Object handles. • Loading fonts and images, rendering glyphs and images, scaling, blending, 3D transformation etc. • Evasmanages allEvas objects equally. • Type of Evas Object • Primitive objects: minimum unit of Evas rendering • Rectangle, Line, Polygon, Text, Textblock, Textgrid, Image • Smart objects • Box, Grid, Table, Customized smart objects(ELM Widgets)

30. Evas Primitive Objects • Rendering units of Evas

31. Evas Smart Objects • Evas objects composed of primitive objects • Acts as agroup. • Evas object generic functions also can be used.

32. Image Native Surface Evas Runtime Evas_Object_Rect Hello World! Hello World! Evas_Object_Text … GL Rendering Engine X11 Output Output Evas Engine Module SW Rendering Engine Buffer Output Evas_Object_Image … … X11 Rendering Engine SDL Output Evas_Object_Image(img_obj_a) OpenGL App (surface_aie. Pixmap or texture) evas_object_image_native_surface_set(img_obj_a, surface_a)

33. Evas: Scene Graph • Scene graph • A structure that arranges the logical representation of a graphical scene • General data structure in GUI applications • Scene graph in Evas • Manages Evas objectsin graph data structure. • Tracks all the objects’ statusandgets changed area in the next frame → Minimizes rendering area.

34. Evas: Minimizing Rendering Region • Start Here

35. Evas: Minimizing Rendering Region • Next frame is…

36. Evas: Minimizing Rendering Region • Calculate actual update region deltas

37. Evas: Minimizing Rendering Region • Only draw updated regions

38. Evas: Rectangle Example /* Build by $ gcc evas_rectangle.c -o evas_rectangle `pkg-config --cflags --libs ecore ecore-evas` */ #include <Ecore.h> #include <Ecore_Evas.h> int main(int argc, char **argv) { Ecore_Evas *ee; Evas *evas; Evas_Object *bg; if(ecore_evas_init() <= 0) return 1; ee = ecore_evas_new(NULL, 0, 0, 200, 200, NULL); ecore_evas_show(ee); evas = ecore_evas_get(ee); // Get the Ecore_Evas's Evas object. bg = evas_object_rectangle_add(evas); // Add a rectangle to the given Evas object. evas_object_color_set(bg, 255, 255, 255, 255); // Set the color of the given Evas object to the given one. evas_object_move(bg, 0, 0); // Move the given Evas object to the given location inside its canvas' viewport. evas_object_resize(bg, 200, 200); // Change the size of the given Evas object. evas_object_show(bg); // Make the given Evas object visible. ecore_main_loop_begin(); ecore_evas_free(ee); ecore_evas_shutdown(); return 0; }

39. Evas: Image Example /* Build by $ gcc evas_image.c -o evas_image `pkg-config --cflags --libs ecore ecore-evas` */ #include <Ecore.h> #include <Ecore_Evas.h> int main(int argc, char **argv) { Ecore_Evas *ee; Evas *evas; Evas_Object *bg; if(ecore_evas_init() <= 0) return 1; ee = ecore_evas_new(NULL, 0, 0, 200, 200, NULL); ecore_evas_show(ee); evas = ecore_evas_get(ee); // Get the Ecore_Evas's Evas object. bg = evas_object_image_filled_add(evas); // Add an image to the given Evas object. evas_object_image_file_set(img, “test.png”, NULL); // Set the image file path of the given Evas object. evas_object_move(img, 0, 0); // Move the given Evas object to the given location inside its canvas' viewport. evas_object_resize(img, 200, 200); // Change the size of the given Evas object. evas_object_show(img); // Make the given Evas object visible. ecore_main_loop_begin(); ecore_evas_free(ee); ecore_evas_shutdown(); return 0; }

40. EFL: Edje Complex graphical design & layout library

41. Edje • Complex graphical design & layout library • EDC script • GUI layout description separated from application code • Can be changed at or during runtime • Compiled as binary code(edj) • Description about: • Images, colors, positioning, animations, behaviors, …

42. Edje: Edc & Edj • Separation of layout and logic • Graphical part: GUI Layout binary (edj) • Functionality: Executable logic binary (C) • Utility • edje_cc : compile edc to edj • edje_decc : de-compile edj to edc

43. Edje: Relation with Evas, Ecore

44. Edje: EDC Script

45. Edje: EDC Script

46. Edje: Simple Example • part { • name: “background”; • type: RECT; • mouse_events: 0; • description { • state: “default” 0.0; • color: 255 255 255 255; • } • } • part { • name: “blue_rect”; • type: RECT; • mouse_events: 1; • description { • state: “default” 0.0; • color: 0 0 255 255; • rel1 { • relative: 0.1 0.1; • } • rel2 { • relative: 0.3 0.3; • } • } • }

47. Edje: Simple Example • part { • name: “red_rect”; • type: RECT; • mouse_events: 0; • description { • state: “default” 0.0; • color: 255 0 0 255; • rel1 { • to: “blue_rect”; • relative: 0 2; • } • rel2 { • to: “blue_rect”; • relative: 1 3; • } • } • description { • state: “down” 0.0; • inherit: “default” 0.0; • rel1.relative: 3 2; • rel2.relative: 4 3; • color: 255 0 0 0; • } • }

48. Edje: Simple Example • program { • name: “blue_rect.clicked”; • signal: “mouse,clicked,1”; • source: “blue_rect”; • action: STATE_SET “down” 0.0; • transition: ACCELERATE 0.5; • target: “red_rect”; • after: “red_rect.restore”; • } • program { • name: “red_rect.restore”; • action: STATE_SET “default” 0.0; • target: “red_rect”; • }

49. EFL: Elementary A set of widgets

50. Elementary • A Set of Widgets • 약 80여 개 • Containers: Box, Conformant, Grid, Layout, Panes, Scroller, Table, … • Non-Containers: Bg, Button, Check, Entry, Label, List, Icon, Win, ... • Features: • Fast, Finger friendly, Scalability, Themes • Widget hierarchy, Dynamic language change < Same view but different themes> < Scaled and resized relative to the screen>