Tizen v2.3 Graphics & UI Frameworks · • Frameworks for UI of core applications & web applications Deprecated (Bada App FW) Embedded Software Lab. @ SKKU 96!5 EFL ... – EFL 也可与Javascript,

Embedded Software Lab. @ SKKU

105

!1

Tizen v2.3 Graphics & UI Frameworks


105

!2

• EFL(Enlightenment Foundation Library) – EFL Features – Ecore – Evas – Edje – Elementary – Cserve2

• Window Systems – X Window System – Wayland

• DALi 3D Engine

内容


96

!3

• 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

Tizen Graphics & UI Frameworks


96

!4

Tizen Graphics & UI Frameworks

• Frameworks for UI of core applications & web applications Deprecated

(Bada App FW)


96

!5

EFL (Enlightenment Foundation Library)


96

!6

• 起源于桌⾯面窗⼝口管理器 – Bodhi Linux的默认窗⼝口管理器

Enlightenment


96

!7

• ⼀一组⽀支持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

Enlightenment Foundation Library


96

!8

EFL in Tizen

Legend

Applications EFL & fontsWindow System

H/W

Linux Kernel Frame Buffer Input Devices

H/W

fontconfigfreetype2 OpenGL ES/EGLEet

EvasEcore

Eina

Edje

Elementary

Core Applications

X Window System

InputService

Framework&

Voice Framework

kernel / Frame Buffer/ Input Devices

Graphics

ISF& Voice FW

Cairo


96

!9

• 即时模式图形系统 – 应⽤用直接重新绘制⽆无效的部分 – 当需要新的frame时，应⽤用重新发出绘制请求描述整个场景 – GTK+ 3, GDI, GDI+

Immediate vs. Retained 模式 (1/2)

Application

Window System

GTK+/GDK-X11

1. Invalidate

2. Expose

Graphics Card Frame Buffer for Screen

3. Drawing


96

!10

• 保留模式图形系统 – 图形系统负责渲染应⽤用给的绘制对象 – 应⽤用将绘制对象传递给图形系统 – Evas, GTK+ 4(Clutter), WPF

Immediate vs. Retained Mode (2/2)

Application

Evas objects

Evas Rendering Engine (Graphics system)

Expose

Graphics Card Framebuffer for screen

X Window System


96

!11

• ⾼高性能 – 保留模式图形系统 – 在⼀一般智能机可达 60fps+

• 适应低端硬件 – Small memory, no swap, no GPUs – OpenGL 不适合于所有的情况

• Texture保持了速度，但耗费内存

• ⽀支持HW rendering – OpenGL ES – SIMD vector(MMX, Neon)

为何在Tizen中使⽤用EFL(1/3)

Desktop Environment

Memory Used (MiB)

Enlightenment 0.18.8

83.8

LXDE 0.5.5 87.0XFCE 4.10.2 110.0LXQt 0.7.0 113.0MATE 1.8.1 123.0Cinnamon 2.2.13 176.3GNOME3 3.12.2 245.3KDE 4.13.1 302.6Unity 7.2.0.14 312.5


96

!12

• 多样的后端引擎 – X11 (~Tizen 2.2.1), Wayland (Tizen 3.0~) – Direct Frame Buffer, DRM, Memory buffers, PS3 Native,

Windows (GDI & DirectDraw), … • UI可扩展性 – 同样的布局和资源在不同的分辨率(WVGA ~ XQXGA)下

为何在Tizen中使⽤用EFL(2/3)

0.6 0.8 1.0Scale factor:


96

!13

• GUI, 逻辑分离 • 主题 – A preset package containing

graphical appearance details – 包含图形外观细节的内置包

• 绑定的语⾔言 – 基本上基于C – EFL 也可与Javascript, C++,

Python, Ruby, Perl 绑定… – Eo: Generic object model

为何在EFL中使⽤用Tizen(3/3)


96

!14

• ⼊入⻔门障碍 – 冷僻的开发⻛风格 – 缺少⽂文档，开发者

• 没有基于对象的实现 – C-based – Eo计划正在进⾏行中

• 不完整的C++⽀支持 – Eolian based E++ project ongoing

• 不⽀支持线程安全

EFL 缺点


96

!15

Tizen Rendering Path

Textures

OpenGL ES win

X window server

Frame Buffer

Videowin

EFL win

3D App

OpenGL ES/EGL

Video App.

EFL App.

EFLEVAS

CompositeWindowManager

OpenGL ES/EGL

OpenGL ES/EGL

MM FWEFL

Rendering pipeline path; rendering data flow

Legend

3D App. Multimedia App.EFL App. Configurable Enable/disable

Texture from Pixmap

OpenGL ES/EGL

Process Texture Mem.


96

!16

Rendering Path on SW Backend

Elementary

Ecore

xlib

Framebuffer

LCD controller

60Hz

Update window areasX Server

X shared Mem.

Edje

EvasEvas software backendEcore X


96

!17

Rendering Path on GLES Backend

EGL for X

xlib

Framebuffer

/dev/fb1

LCD controller

60Hz

Update window areaX Server

frontback

Double buffer

OpenGL ES H/W

OpenGL ES

contr

olled

by

EGL

Ecore

Elementary

EdjeEvas

Evas OpenGL ES backend Ecore X


96

!18

• Ecore (E + Core) – 包含便利模块的事件环路库（Event Loop Library）

• Evas (E + canVAS) – 画布&渲染库

• Edje – 复杂图像设计&布局库

• Elementary – 控件集

EFL组件：Core


96

!19

• Eo – ⽤用于绑定其他语⾔言的通⽤用对象模型

• Eina – 数据结构库

• Eet – 数据编解码器和存储

• Efreet – Freedesktop.org 标准⽀支持

EFL 组件: 其他

• Edbus– Dbus的包装

• Emotion– 影像/⾳音频播放库

• Eio– 异步I/O

• Eeze– Udev 硬件监测

• Ethumb– 缩略图& cacher


105

!20

The core loop of EFL applications

EFL: Ecore


96

!21

• EFL应⽤用、事件&编组库的核⼼心 – 提供各个⼦子系统的关联 – ⽀支持多种战线系统

• X11, FB, Wayland, Win32, WinCE, etc.

• 特征： – Networking & IPC – Threading & inter-thread communication – Evas input feeding and output driving – More...

Ecore


96

!22

• elm_main() – EFL应⽤用的主要函数 – 在初始化后，进⼊入每个事件回路中

Simple EFL Application

Start Ecore main loop!

Elementary UI configuration(Elementary Window)

On exiting window, it also exits Ecore event loop

Finalization process like freeing resource


96

!23

• ecore_main_loop_begin() – Ecore主要回路的包装 – 可以在Ecore main loop和Glib main loop中进⾏行选择

Ecore Main Loop (1/2)

Ecore main loop

Glib main loop


96

!24

• _ecore_main_loop_iterate_internal() – Ecore main loop的实现 – 开启应⽤用中的所有时间处理器，事件处理器和渲染⼯工作

Ecore Main Loop (2/2)


96

!25

• Key down 事件

Ecore: Ecore事件的使⽤用

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;}

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;}

• Timer 事件


96

!26

Canvas & Rendering Library

EFL: Evas


96

!27

• 画布&渲染库 • 特征

– 保留模式渲染 • 以原始对象和智能对象来控制渲染⾏行为

– 场景图 • 跟踪对象状态->最⼩小化渲染⾏行为

– 多个输出路径 • Pure software/OpenGL ES

– 渲染优化 • 3D H/W Acceleration, SIMD vector operations

– 提供了GL Glue Layer

Evas


96

!28

• Evas 使⽤用保留模式渲染 – 应⽤用将Evas对象发送给Evas – Evas基于Evas对象来渲染

Evas: Retained Mode Rendering

Application

Evas objects

Evas Rendering Engine (Graphics system)

Expose

Graphics Card Framebuffer for screen

X Window System


96

!29

• 所有展⽰示在画布上的对象 – 由Evas_Object handles控制

• 加载⽂文字和图⽚片，渲染符号和图⽚片，scaling，blending,3D转换等

– Evas对所有的对象实⾏行同样的管理

• Evas 对象的种类 – 基本对象: Evas 渲染的最⼩小单元

• Rectangle, Line, Polygon, Text, Textblock, Textgrid, Image – 智能对象

• Box, Grid, Table, Customized smart objects(ELM Widgets)

Evas 对象


96

!30

Evas 基本对象

• Evas的渲染单元


96

!31

• Evas对象由基本对象组成 – 作为⼀一个组来活动 – 也可以使⽤用Evas对象的通⽤用函数

Evas 智能对象（smart objects)


96

!32

Image Native Surface

Hello World!

Evas_Object_Rect

Evas_Object_Text

Evas_Object_Image

…

GL Rendering Engine

SW Rendering

Engine

X11 Rendering

Engine

X11 Output

BufferOutput…

SDLOutput

…

Evas Runtime

OpenGL App(surface_a

ie. Pixmap or texture)

Evas_Object_Image (img_obj_a)

evas_object_image_native_surface_set(img_obj_a, surface_a)

Output

Hello World!

Evas Engine Module


96

!33

• 场景图 – ⼀一种结构，⼀一个绘画场景的逻辑表⽰示 – 在GUI应⽤用中通⽤用的数据结构

• Scene graph in Evas – 以图像数据结构的⽅方式管理Evas对象 – 追踪所有对象的状态，并在下⼀一个frame中获取改变的区域->最⼩小化渲染区域

Evas: 场景图


96

!34

• Start Here

Evas: Minimizing Rendering Region


96

!35

• Next frame is…



96

!36

• 计算实际的更新区域变化量



96

!37

• 只重画更新的区域



96

!38

/* 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;}

Evas: ⻓长⽅方形案例


96

!39

/* 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;}

Evas:图像案例


105

!40

Complex graphical design & layout library

EFL: Edje


96

!41

• 复杂的图像设计&布局库 • EDC 脚本 – GUI布局描述从应⽤用代码中分离 – 可以在runtime时被改变 – 被编译为⼆二进制码（edj)

Edje

• 描述关于：– 图像，⾊色彩，位置，动态，⾏行为，…


96

!42

• 将布局和逻辑分离 – GUI布局⼆二进制码(edj) – 功能性：可执⾏行的逻辑⼆二进制（C)

• Utility – edje_cc : 将edc编译为 edj – edje_decc : 将 edj t反编译为

edc

Edje: Edc & Edj


96

!43

Edje: Evas, Ecore之间的关系


96

!44

Edje: EDC 脚本


96

!45

Edje: EDC 脚本


96

!46

Edje:简单⽰示例

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;}

}}


96

!47

Edje:简单⽰示例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;

}}


96

!48

Edje: 简单⽰示例

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”;

}


105

!49

A set of widgets

EFL: Elementary


96

!50

• ⼀一组 Widgets – 약 80여 개 – 容器: Box, Conformant, Grid, Layout, Panes, Scroller, Table, … – ⾮非容器: Bg, Button, Check, Entry, Label, List, Icon, Win, ...

• 特征: – 快速，良好适应⼿手指操作（finger friendly),可伸缩性，⽀支持主题化 – 部件具有层次结构（Widget hierarchy），动态语⾔言变化

Elementary

< Scaled and resized relative to the screen> < Same view but different themes>


96

!51

• 多样的控件

Elementary Widgets

clock

colorselector

entry

frame

flipselector check

diskselector

actionslider

bg

index

map

menuphoto, photocam

panel

toolbar

radio

bubble

slider

ctxpopup

notify

separator

segment control

multibuttonentrypanes

glview

fileselector

Labelthumb


96

!52

• Naviframe – 切换多个⻚页 – s with stack

• Toolbar – Item列表

Elementary Widgets


96

!53

• Entry – ⽂文字输⼊入域 – 输⼊入&粘贴，多种模式(密码，多⾏行，…)

• Genlist – 通⽤用列表 – 灵活但复杂

Elementary Widgets


96

!54

• 控件通过层次化⽅方式构建 • 控件与它的⼦子控件共享它的函数(APIs)

Elementary: 控件层次


96

!55

• UI 伸缩性 – 相对位置

Elementary: 伸缩性

– ⽐比例系数


96

!56

• 主题可以在同样的布局下改变

Elementary: 主题


96

!57

• 元素化提供了API对多种语⾔言的⽀支持

Elementary: 动态语⾔言变化


96

!58

Elementary: Dynamic Language Change


96

!59

• Enventor:动态 EDC 编辑器 • Eflete: EFL Edje 主题编辑器 • ELM Theme Viewer: Elementary Theme

Viewer

GUI定制化布局的⼯工具


105

!60

Optimization of EFL

Cserve2


96

!61

• EFL中的重复资源问题 – ⼀一个主题中⽤用的⼤大多数图⽚片和⽂文字被多个应⽤用同时使⽤用 – EFL包含多种cache

• Images, fonts, ...

• Cserve2的⺫⽬目的: – 通过sharing减少内存消耗 – 通过pre-loading数据优化加载时间

Cserve2: Motivation


96

!62

• 在EFL应⽤用进程间共享图⽚片和⽂文字数据 – 在2012年由ProFusion开始

• Cache服务器 – 加载图⽚片和⽂文字 – 在应⽤用间共享资源

• EFL 应⽤用 – 通过UNIX socket来连接server – 发送请求并等待响应 – ⾃自⼰己不加载任何东⻄西 – Keep local cache pointing to shared data – 保持对共享数据的本地cache pointing

Cserve2


96

!63

Cserve2


96

!64

• Cserve2的问题 – IPC 开销:

• 在socket linke上的信息 • 上下⽂文交换，读，写

– Client端在发送请求不知道server端的cache数据 • 解决办法 – 对所有client暴露共享对象的index

• via /dev/shm

– 当数据已经装载完毕时，Client扫描表，⽆无需等待server端的回应

Cserve2: 共享索引


96

!65

• 3 types of objects: – Data (image data)

• Stored in separate shm files: “img”

– Fixed-size arrays of objects • Indexes • Stored in “array” files

– Variable-size pools of objects • So-called “mempools” • Indexed by offset + length in a separate array

Cserve2: Shared Indexing


96

!66

• Index tables principles – Arrays of simple structures of a single type – Contain:

• ID • Refcount • Other fixed-size data (int, bool, ...)

Cserve2: Shared Indexing


96

!67

• Strings – 使⽤用两个 shm : index 和mempool – Mempool包含实际数据的字符串 – 索引表包含:

• String ID • Refcount • 偏移量Offset (in the mempool) • ⻓长度

• 所以，我们只需要知道string ID 就可以读到⼀一个string

Cserve2: 共享索引


96

!68

• Cserve2 结合了image cache和scale cache • 重⽤用scale cache 逻辑 – 最⼩小化缓存的图像数量 – 伸缩过程在服务端完成

Cserve2:图像伸缩


96

!69

• Cserve2 图像装载器的崩溃 – 客户端不会崩溃（没有数据） – New slave spawned

• Cserve2 服务端崩溃 – enlightenment_start 重启 cserve2 – 客户端重新连接新服务端

• 丢弃⼀一些数据 • 保留旧有的图像指向（⽆无需加载）

• Cserve2 关闭或重启 – cleanup /dev/shm/

Cserve2:健壮性


96

!70

• 真实⼿手机使⽤用 – ⼯工作量 & 环境

• 在 1280 * 720 的屏幕上运⾏行 “elementary_test -to launcher” 的8个线程 – 字体⼤大⼩小

• ~24x16 (small), ~32x24 (normal), ~40x30 (large) • 在正常⼤大⼩小的情况下，1 font， 50 个字符

1x32x24x50=37.5KB – 图标⼤大⼩小

• 50x50 (small), 100x100 (large) in 32-bit color • For one icon, 4Bx50x50=10KB (small), 4Bx100x100=40KB (large)

– Border⼤大⼩小 • width 10px, length 720px, 32-bit color, 2x • 4Bx10x720x2=56KB

Cserve2: Benefits


96

!71

• 开销 – 在Cserved2运⾏行时的⼯工作量达到：72176KB

• Size of /dev/shm: 4376KB

– When Cserve2 退出时: 66716KB – 总开销: 72176KB–66716KB–4376KB=1084KB

• 结论: – 只要1MB的数据（⽂文字&图⽚片）被共享时，Cserve2节省了内存.

• Refer to “Cserve2: Shared cache subsystem of Evas”.

Cserve2: 开销

http://git.enlightenment.org/devs/hermet/misc.git/plain/dev_day2013/cserve2.pdf?id=b12612407a9c4f2ddca208b427d9c0cb3697d716


105

!72

Tizen v2.3 Window Systems: X Window Systems


96

!73

• 历史 – X window 系统是MIT在1984年完成的 – X11: 当前的协议版本，建⽴立在1987年 – X.org server: 由X.Org 组织开发的当前的实现参考

• 为⺴⽹网络连接上的使⽤用⽽而设计 • 特征

– 事件驱动 – ⺴⽹网络透明 – 设备独⽴立 – 政策（policy)独⽴立 – 可扩展

X Window 系统


96

!74

• Client-server 模型 – X client通过由Xlib翻译的X协议与X

server连接 – X client

• 发送图像化请求 • 获取⽤用户输⼊入 • Tizen中的Ecore and Evas

– X server • 获取请求来输出图像 • 将⽤用户输⼊入发送回去

X Window 系统: 结构 (1)


96

!75

X Window System: 结构(2)

• X系统的Client-server结构


96X 协议

• 协议包括X client和X server之间的通信• 特征: – 基于对象的 – 异步的

• 信息的种类: – 请求(Client → Server) – 应答 – 事件(Server → Client) – 错误


96X Server

• 处理输出&输⼊入进程 • 管理屏幕和输⼊入设备• 层次化结构 – DIX Layer, DDX Layer, OS Layer, Extension Layer

• 结构– X Server 通过 “资源”控制所有 – 基于需求创建 – 被client的请求操作使⽤用 – Screens, windows, graphic contexts, pixmaps, regions,

colormaps, fonts, cursors


96

!78

X Server

• 层次化结构: – DIX Layer, DDX Layer, OS Layer, Extension Layer


96

!79

• DIX(Device Independent X) 层 – X client和DDX/extensions之间的接⼝口

• DDX(Device Dependent X) 层 – 处理图像和输⼊入硬件

• OS 层 – Client连接管理，任务分配，内存分配

• Extension层 – 可从X server获取额外功能

X Server


96DIX 层

• DDX/Extensions 与 clients 之间的接⼝口– 从clients向DDX/extensions发送请求 – 将输⼊入事件发送给clients

• Dispatch loop – DIX Layer 通过dispatch loop管理请求

• Screens – 每个物理屏幕⼀一个 – 定义⽤用来处理资源操作的函数 – DIX-DDX的主要通信渠道


96DDX 层

• 该层处理图像和输⼊入HW • 图像输出• 输⼊入处理– ⿏鼠标移动 – 键盘点击 – 键盘映射


96DDX Layer: 图像输出

• 基于像素的 • 屏幕 – 基本数据结构 – 管理所有资源

• 可拖拽的 – 由DDX定义的像素数据形式 – 位图格式屏幕中不变

• XYPixmap -> one bitmap for each plane • Zpixmap -> series of pixel values

– 在展⽰示是，像素值被解释 – Windows, Pixmaps, …

82


96DDX Drawables

• Windows – 屏幕上可视的⻓长⽅方形 – Border drawn by DDX – 由DDX绘制的边界

• Create, move, resize – 由client绘制内容

• Server提供背景商店 • Bit gravity (resizing)

– 由⽗父窗⼝口或兄弟窗⼝口裁剪 • Pixmaps – ⻓长⽅方形数组的像素值 – Reference counted


96OS 层

• Client Monnection 管理• ⼯工作分配– 将work分配给clients – Ignore/AttendClient()

• 内存分配例程– Xalloc()/Xrealloc()/Xfree()


96Porting X Server

• Code 层– DIX: Dev.Independent, don’t touch – OS: OS specific – DDX: Graphics Device specific – Extensions: Add features

• Porting Layer: OS + DDX • Porting process: – 定义DIX需要的⽤用来处理资源的函数


105

!86

Tizen v3.0 Window Systems: Wayland


96

!87

• 展⽰示管理结构&协议 – 窗⼝口管理和组成 – Weston: 主要的开放源实现 – 由Freedesktop.org⽀支持 – Tizen 3.0中使⽤用

• X的代替 – Wayland中没有渲染API

• Evas, Cairo, OpenGL ES已经⽀支持渲染 – SHM(Shared memory) 协议: SW rendering的⽀支持 – 更少的IPC: 单进程结构

Wayland


96

!88

• Wayland Protocol – Weston compositor 与Wayland clients(应⽤用) 通过

Wayland protocol交互.

Wayland 协议


96

!89

• EFL and E17(X compositor) 与X.org(X server) 通过X protocol相连

Tizen Graphic Stack with X.org


96

!90

• EFL 与 Weston/E17 compositor 通过Wayland协议相连

Tizen Graphic Stack with Wayland


96

!91

• Weston 提供Evas需要渲染的surface • Weston 将输⼊入事件发送给Ecore

Wayland with EFL


96

!92

• EFL通过⼀一些后端控制展现和输⼊入设备 – Ecore_Evas: 与后端的胶⽔水（glue)

EFL的后端

• X Server 后端• Software_X11, OpenGL_X11

• Wayland 后端– Wayland_SHM: SW rendering – Wayland_EGL: HW rendering – Ecore_Wayland

• Surface Handling and Input


96

!93

• Wayland的性能 – 60 FPS(Frames Per Second) – 在⼀一个frame中从client到compositor需16ms

• 可视化⼯工具: E-Graph – 查看⽇日志信息和绘制FPS curve的⼯工具 – https://gitorious.org/e-graph/e-graph

Wayland 优化


96

!94

• 问题 – 当资源被等待的Vsync阻塞时的渲染

• 三缓存 – 增加⼀一个buffer给client和compositor – Before: ~40fps → After: ~48fps – ⽤用来composition的时间: 13ms

Wayland 优化


96

!95

• 问题 – 重画重叠的surface -> 在composition时⾼高负载

• 不透明区域 – 重叠surface, Ecore创建且发送给Weston – Compositing time: ~13ms → ~5ms – FPS: 40fps → 60fps

Wayland 优化


105

!96

DALi 3D Engine


105

!97

• Tizen 3D UI – DALi 3D 引擎 & UI ⼯工具包

• DALi 是⼀一个3D 引擎 – UI 被展⽰示为⼀一个3D场景图 – 动画和过渡效果⽤用 3D Math (Vector, Quaternion & Matrix)实现

– 渲染和视觉效果使⽤用Open GL ES Shaders, Vertices 和Textures实现

– OpenGL ES 2 and 3 ⽀支持

• 2D 世界是3D 世界Z轴为0 – 当使⽤用默认的摄像头时

DALi 3D 引擎


105

!98

• DALi 是Tizen Native ⼦子系统的⼀一部分 – 图形 & UI native 模块 – Mobile和 TV 概述

• ⽤用C++实现 • DALi (Dynamic

Animation Library) – 2D 和 3D 应⽤用带有现实效果 & 动画的UIs

– Home Screen, Lock Screen, Gallery, Music Player …

DALi 在Tizen系统中的架构


105

!99

• Evas – EFL 绘制画布 – SW/GL 渲染背景

• DALi – OpenGL 基于 Toolkit – Differential UX/

heavy contents • CoreGL – OpenGL 包装器 – 性能优化

DALi 和图形框架


105

!100

• 核⼼心库 – 事件处理，场景图画，渲染，资源管理

• 适配器 – 线程模型 – 集成主要循环

• 平台抽象 – 资源加载和使⽤用多线程编码

• ⼯工具包 – 可重⽤用的UI控制 – 效果和脚本⽀支持

DALi 架构


105

!101

• 基于UI的场景图画是⼀一棵节点树 – 每个节点可以有0-N个⼦子节点 – 每个节点继承它⽗父节点的变化 – $ Position, Rotation, Scale

• 允许轻易的布局和动画管理 – 每⼀一个节点的变化都与⽗父节点的关联节点相关 • 节点的锚点拥有坐标空间 • ⽗父节点在⽗父节点坐标空间中是起始

– ⼦子节点不需要再⽗父节点区域内

DALi: 3D 场景图画


105

!102

• DALi 使⽤用多线程架构 – 最好的性能和可调节性

• 事件线程 – 主线程运⾏行在应⽤用代码和事件处理中

• 更新线程 – 更新场景中的节点 – 运⾏行动画，约束和物理事件

• 渲染线程 – OpenGL 绘制, 纹理和地理更新等

• 资源线程 – 加载字体，图⽚片和模型资源并解编码到位图中

多线程引擎


105

!103

• Actors & UI 控制 – Stage: root of the world – Actors: image, text, mesh, … – UI controls: 提供额外的布局和滑动

• 动画 • 阴影效果

– 在渲染过程中修改对象的样式 • 图形效果

– Cube transition effect, shadow view, bubble effect, motion blur effect

DALi 功能


105

!104

• ItemView – Scrolling container based on

data source provided by application

• ScrollView – Scrolling container with

scroll effect support • 3D Models & Bone

Animation – Industry standard model

supports(Maya, 3DS, …) • Physical Integration

– Rigid & soft body physics effects

DALi 功能


105

!105

• Tizen Developer Conference 2012 – Creating Fancy UIs with EDJE – Overview of Graphics and

Input in Tizen – Tizen Graphics Core Evas

and Scene Graph • Tizen Developer

Conference 2014 – The Art of Tizen UI Theme

Technology in Various Profiles

– Tizen 3D UI DALi 3D Engine

References

• LinuxCon # – 2012: E17 and EFL – 2013: The EFL Toolkit

• EFL Workshop 2012 # – Tizen Native Display Layer:

Architecture and Usage • Tizen Technical

Workshop # • EFL Dev Day 2013 #

– Cserve2: Shared Cache Subsystem for Evas

– EFL on Wayland

https://www.tizen.org/sites/default/files/lfcs2012_raster.pdf

https://www.tizen.org/sites/default/files/lfcs2012_raster.pdf

ttps://git.enlightenment.org/devs/hermet/misc.git/

ttps://git.enlightenment.org/devs/hermet/misc.git/

Documents

Tizen v2.3 Graphics & UI Frameworks · • Frameworks for UI of core applications & web applications Deprecated (Bada App FW) Embedded Software Lab. @ SKKU 96!5 EFL ... – EFL 也可与Javascript,