!1 105 Tizen v2.3 Graphics & UI Frameworks Embedded Software Lab. @ SKKU 内容 !2 105 • EFL(Enlightenment Foundation Library) – EFL Features – Ecore – Evas – Edje – Elementary – Cserve2 • Window Systems – X Window System – Wayland • DALi 3D Engine Embedded Software Lab. @ SKKU !3 Tizen Graphics & UI Frameworks 96 • UI 框架 – 实现交互型 GUI的模块 – EFL(Elementary/Ecore), OSP, GTK, Qt – Input Service Framework(ISF), Voice Framework • 图像库 – 渲染图像对象的模块 – Evas, Cairo, OpenGL ES, EGL • 窗⼝系统 (Window Systems) – 管理窗⼝和 frame缓存的模块 – X Window System, Wayland Embedded Software Lab. @ SKKU !4 Tizen Graphics & UI Frameworks 96 • Frameworks for UI of core Deprecated applications & web applications (Bada App FW) Embedded Software Lab. @ SKKU !5 96 EFL (Enlightenment Foundation Library) Embedded Software Lab. @ SKKU !6 Enlightenment 96 • 起源于桌⾯窗⼝管理器 – Bodhi Linux的默认窗⼝管理器 Embedded Software Lab. @ SKKU !7 Enlightenment Foundation Library 96 • ⼀组⽀持 Enlightenment的库 – Enlightenment 0.17(E17) • 组件由函数区分 – Event loop: Ecore – Rendering engine: Evas – UI: Edje, Elementary, … – UI builder tools: Enventor, Eflete, ELM Theme Editor • 当前的 EFL – Tizen 图形 /UI框架的核⼼组件 – 26% 的代码是 E17, 其他的是 EFL Embedded Software Lab. @ SKKU !8 EFL in Tizen 96 Core Applications Elementary Input Ecore Service Edje Evas Framework & Eet Voice Eina freetype2 fontconfig Cairo OpenGL ES/EGL Framework X Window System Linux Kernel Frame Buffer Input Devices H/W Legend Applications Window System Graphics EFL & fonts ISF& Voice FW H/W kernel / Frame Buffer/ Input Devices Embedded Software Lab. @ SKKU !9 Immediate vs. Retained 模式 (1/2) 96 • 即时模式图形系统 – 应⽤直接重新绘制⽆效的部分 – 当需要新的 frame时，应⽤重新发出绘制请求描述整个场景 – GTK+ 3, GDI, GDI+ Application 1. Invalidate 2. Expose GTK+/GDK-X11 3. Drawing Window System Graphics Card Frame Buffer for Screen Embedded Software Lab. @ SKKU !10 Immediate vs. Retained Mode (2/2) 96 • 保留模式图形系统 – 图形系统负责渲染应⽤给的绘制对象 – 应⽤将绘制对象传递给图形系统 – Evas, GTK+ 4(Clutter), WPF Application Evas objects Expose X Window System Evas Rendering Engine (Graphics system) Graphics Card Framebuffer for screen Embedded Software Lab. @ SKKU !11 为何在 Tizen中使⽤ EFL(1/3) 96 • ⾼性能 Desktop Memory – 保留模式图形系统 Environment Used – 在⼀般智能机可达 60fps+ (MiB) Enlightenment 83.8 • 适应低端硬件 0.18.8 – Small memory, no swap, no GPUs LXDE 0.5.5 87.0 – OpenGL 不适合于所有的情况 XFCE 4.10.2 110.0 LXQt 0.7.0 113.0 • Texture保持了速度，但耗费内存 MATE 1.8.1 123.0 • ⽀持 HW rendering Cinnamon 2.2.13 176.3 – OpenGL ES GNOME3 3.12.2 245.3 KDE 4.13.1 302.6 – SIMD vector(MMX, Neon) Unity 7.2.0.14 312.5 Embedded Software Lab. @ SKKU !12 为何在 Tizen中使⽤ EFL(2/3) 96 • 多样的后端引擎 – X11 (~Tizen 2.2.1), Wayland (Tizen 3.0~) – Direct Frame Buffer, DRM, Memory buffers, PS3 Native, Windows (GDI & DirectDraw), … • UI可扩展性 – 同样的布局和资源在不同的分辨率 (WVGA ~ XQXGA)下 Scale factor: 0.6 0.8 1.0 Embedded Software Lab. @ SKKU !13 为何在 EFL中使⽤ Tizen(3/3) 96 • GUI, 逻辑分离 • 主题 – A preset package containing graphical appearance details – 包含图形外观细节的内置包 • 绑定的语⾔ – 基本上基于 C – EFL 也可与 Javascript, C++, Python, Ruby, Perl 绑定 … – Eo: Generic object model Embedded Software Lab. @ SKKU !14 EFL 缺点 96 • ⼊⻔障碍 – 冷僻的开发⻛格 – 缺少⽂档，开发者 • 没有基于对象的实现 – C-based – Eo计划正在进⾏中 • 不完整的 C++⽀持 – Eolian based E++ project ongoing • 不⽀持线程安全 Embedded Software Lab. @ SKKU !15 Tizen Rendering Path 96 3D App EFL App. Composite Window OpenGL ES/ EFL Manager EGL EVAS OpenGL ES/ OpenGL ES/ EGL EGL Video App. X window server EFL MM FW EFL win Textures OpenGL Frame Buffer ES win Video win Legend 3D App. EFL App. Multimedia App. OpenGL ES/EGL Configurable Enable/disable Process Texture Mem. Rendering pipeline path; rendering data flow Texture from Pixmap Embedded Software Lab. @ SKKU !16 Rendering Path on SW Backend 96 Elementary Edje Ecore Evas Ecore X Evas software backend LCD xlib controller X shared Mem. Update Frame X Server window areas buffer 60Hz Embedded Software Lab. @ SKKU !17 Rendering Path on GLES Backend 96 Elementary Edje Evas Ecore Evas OpenGL ES backend Ecore X OpenGL ES EGL for X OpenGL ES H/W LCD controlled by xlib EGL controller back front Update Double buffer X Server Frame window area buffer 60Hz /dev/fb1 Embedded Software Lab. @ SKKU !18 EFL组件： Core 96 • Ecore (E + Core) – 包含便利模块的事件环路库（ Event Loop Library） • Evas (E + canVAS) – 画布 &渲染库 • Edje – 复杂图像设计 &布局库 • Elementary – 控件集 Embedded Software Lab. @ SKKU !19 EFL 组件 : 其他 96 • Eo • Edbus – ⽤于绑定其他语⾔的通⽤对 – Dbus的包装 象模型 • Emotion • Eina – 影像/⾳频播放库 – 数据结构库 • Eio • Eet – 异步I/O – 数据编解码器和存储 • Eeze • Efreet – Udev 硬件监测 – Freedesktop.org 标准⽀持 • Ethumb – 缩略图& cacher Embedded Software Lab. @ SKKU !20 105 EFL: Ecore The core loop of EFL applications Embedded Software Lab. @ SKKU !21 Ecore 96 • EFL应⽤、事件 &编组库的核⼼ – 提供各个⼦系统的关联 – ⽀持多种战线系统 • X11, FB, Wayland, Win32, WinCE, etc. • 特征： – Networking & IPC – Threading & inter-thread communication – Evas input feeding and output driving – More... Embedded Software Lab. @ SKKU !22 Simple EFL Application 96 • elm_main() – EFL应⽤的主要函数 – 在初始化后，进⼊每个事件回路中 On exiting window, it also exits Ecore event loop Elementary UI configuration (Elementary Window) Start Ecore main loop! Finalization process like freeing resource Embedded Software Lab. @ SKKU !23 Ecore Main Loop (1/2) 96 • ecore_main_loop_begin() – Ecore主要回路的包装 – 可以在 Ecore main loop和 Glib main loop中进⾏选择 Ecore main loop Glib main loop Embedded Software Lab. @ SKKU !24 Ecore Main Loop (2/2) 96 • _ecore_main_loop_iterate_internal() – Ecore main loop的实现 – 开启应⽤中的所有时间处理器，事件处理器和渲染⼯作 Embedded Software Lab. @ SKKU !25 Ecore: Ecore事件的使⽤ 96 • Key down 事件 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 事件 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; } Embedded Software Lab. @ SKKU !26 96 EFL: Evas Canvas & Rendering Library Embedded Software Lab. @ SKKU !27 Evas 96 • 画布 &渲染库 • 特征 – 保留模式渲染 • 以原始对象和智能对象来控制渲染⾏为 – 场景图 • 跟踪对象状态 ->最⼩化渲染⾏为 – 多个输出路径 • Pure software/OpenGL ES – 渲染优化 • 3D H/W Acceleration, SIMD vector operations – 提供了 GL Glue Layer Embedded Software Lab. @ SKKU !28 Evas: Retained Mode Rendering 96 • Evas 使⽤保留模式渲染 – 应⽤将 Evas对象发送给 Evas – Evas基于 Evas对象来渲染 Application Evas objects Expose X Window System Evas Rendering Engine (Graphics system) Graphics Card Framebuffer for screen Embedded Software Lab. @ SKKU !29 Evas 对象 96 • 所有展⽰在画布上的对象 – 由 Evas_Object handles控制 • 加载⽂字和图⽚，渲染符号和图⽚， scaling， blending,3D转换 等 – Evas对所有的对象实⾏同样的管理 • Evas 对象的种类 – 基本对象 : Evas 渲染的最⼩单元 • Rectangle, Line, Polygon, Text, Textblock, Textgrid, Image – 智能对象 • Box, Grid, Table, Customized smart objects(ELM Widgets) Embedded Software Lab. @ SKKU !30 Evas 基本对象 96 • Evas的渲染单元 Embedded Software Lab. @ SKKU !31 Evas 智能对象（ smart objects) 96 • Evas对象由基本对象组成 – 作为⼀个组来活动 – 也可以使⽤ Evas对象的通⽤函数 Embedded Software Lab. @ SKKU !32 Image Native Surface 96 Evas Runtime Evas_Object_Rect Hello World! Hello World! Evas_Object_Text … GL Rendering X11 Engine Output Output Evas Engine Module SW Buffer Rendering Evas_Object_Image Output Engine … … X11 SDL Rendering Output Engine OpenGL App Evas_Object_Image (surface_a (img_obj_a) ie. Pixmap or texture) evas_object_image_native_surface_set(img_obj_a, surface_a) Embedded Software Lab. @ SKKU !33 Evas: 场景图 96 • 场景图 – ⼀种结构，⼀个绘画场景的逻辑表⽰ – 在 GUI应⽤中通⽤的数据结构 • Scene graph in Evas – 以图像数据结构的⽅式管理 Evas对象 – 追踪所有对象的状态，并在下⼀个 frame中获取改变的区 域 ->最⼩化渲染区域 Embedded Software Lab. @ SKKU !34 Evas: Minimizing Rendering Region 96 • Start Here Embedded Software Lab. @ SKKU !35 Evas: Minimizing Rendering Region 96 • Next frame is… Embedded Software Lab. @ SKKU !36 Evas: Minimizing Rendering Region 96 • 计算实际的更新区域变化量 Embedded Software Lab. @ SKKU !37 Evas: Minimizing Rendering Region 96 • 只重画更新的区域 Embedded Software Lab. @ SKKU !38 Evas: ⻓⽅形案例 96 /* 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; } Embedded Software Lab. @ SKKU !39 Evas:图像 案例 96 /* 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);