The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)

The Art of
Tizen UI Theme
Technology
in Various Profiles
Daniel Juyung Seo
Samsung Electronics
July 23, 2014

Who Am I
 Daniel Juyung Seo
- a.k.a SeoZ
- Senior Engineer at Samsung Electronics
- juyung.seo@samsung.com
- @seojuyung
 Tizen Core UIFW EFL Developer
 Enlightenment/EFL Open Source Committer

What is this talk about?
 Making frameworks and applications scalable in UI perspective.
 Enlightenment Foundation Libraries
 Slide: http://seoz.com/OSCON2014

Audience Introductions
 What is your expertise?
- Application Development
- Platform Development
- Design
- Marketing

 Linux-based Open Source Platform
- A standard based open and flexible platform
- Linux Foundation Project
- Built from the ground up to address the needs of all stakeholders
- Developed by a community of developers, under open source governance, and is open to
all members who wish to participate.
- Comes in multiple profiles to serve different industry requirements.

 The OS of Everything
 Mobile, IVI, Wearable, TV, Camera, PC, …
Various Tizen Profiles

 NX300, NX300M, and etc.  Gear 2, Gear 2 Neo
Tizen Based Products – Camera and Smart Watch

 Test Devices
RD-PQ, RD-210
 2.2.1 SDK
 1.0.0 beta2 Wearable SDK
Tizen – Mobile/Wearable/TV
 2.3 Alpha SDK
- Mobile + Wearable Profiles

Scalability is Important
 Supporting different
resolutions, screen sizes, devices, and profiles.

Applications
Web Framework
Core Framework
Kernel
Native Framework
Linux Kernel & Device Drivers
W3C/HTML5 Device API WRT Social/Content Locations Etc.
Web Applications Native Applications Core Applications
App FW Graphics & UI Multimedia Web Messaging Location
Security System Base Connectivity Telephony PIM
Tizen Architecture

 Native Applications : C++
 Web Applications : HTML5 + CSS + JavaScript + jQuery
 Core Applications : C or C++
Platforms Areas Mobile Gear 2 NX300
Native O X X
Web O O X
Core O O O
Tizen Application Development Model

 But wait, they have something in common
 The Core Framework!
 Core API + EFL
 Many applications are written in EFL on the NX300 and Gear 2.
The Core Framework

 EFL not ELF
EFL may not be an ELF... but it's as pretty as one. :)
NO! YES!
Does anyone know about EFL?

 Toolkit
A set of libraries that provide a wide range of functionality
http://www.enlightenment.org/
 Enlightenment Foundation Libraries
- Created to support E17 development
- Targeted at embedded since day 1
- Always focused on staying lean while providing fanciness
- The heart of the graphics component of Tizen
What is EFL?

Core Framework and EFL
Applications
Web Framework
Core Framework
Kernel
Native Framework
Linux Kernel & Device Drivers
W3C/HTML5 Device API WRT Social/Content Locations Etc.
Web Applications Native Applications Applications
App FW Graphics & UI Multimedia Web Messaging Location
Security System Base Connectivity Telephony PIM

 Performance
 Small memory footprint
 GUI, Logic separation
 Themeable
 Animations
 H/W acceleration
 Various back-end engine
 Flexible
 Scalable
Why is EFL used on Tizen?

Bindings
Elementary
EthumbEdbusEezeEioEfreet Emotion
Ecore
Embryo
Eet
Eina
Edje
Evas
EFL Block Diagram

 A complex graphical design and layout library.
 A graphical user interface without writing a line of C code.
 Creates visual layouts from compiled EDC script
- EDC is completely separate from application code
- Can be changed at or during runtime
 Layouts include
- Images, Colors
- Animations, Behaviors
 Supports relative and absolute positioning.
Edje

 Separation of layout and logic
- a graphical part : GUI Layout binary (edj)
- a functionality : Executable logic binary (C)
 Utility
- edje_cc : compile edc to edj
- edje_decc : de-compile edj to edc
.edc
.edj
.c
executable
edje_cc compile
running
runload
Edje
< Compile Time >
< Run Time >

 EDC Script
collections { // list of groups.
group { // the list of parts and programs that compose a given edje object.
images { } // list each image file that will be used in the edc.
parts {
part { // the most basic design elements of the group.
// (ie. RECT, TEXT, IMAGE, SWALLOW, TEXTBLOCK, GROUP, BOX, TABLE, EXTERNAL)
}
}
programs {
program { // manipulates the different interface elements and serve as a bridge between
// the application and interface.
}
}
}
}
Edje

 Widget Set
 75 widgets
- Non-Containers - Bg, Button, Check, Entry, Label, List, Icon, Win, …
- Containers - Box, Conformant, Grid, Layout, Panes, Scroller, Table, …
 Fast, Finger friendly, Scalable, Themeable, …
Elementary

< Bubble >
< Button >
< Calendar >
< Check >
< Toggle >
< Clock >
< Ctxpopup >
< Radio > < Frame >
< DaySelector >
< Slider >
< FlipSelector >
< FileSelector > < Genlist >
< Gengrid >
< Spinner >
< Map >
< Panes >
< Progressbar >
Elementary

 Elementary also uses edje for its layout
group { name: "elm/button/base/default";
images.image: "button_normal.png" COMP;
images.image: "button_clicked.png" COMP;
parts {
part { name: "base"; mouse_events: 0;
type: IMAGE
description { state: "default" 0.0;
image.normal: "button_normal.png";
rel1.relative: 0.0 0.0;
rel2.relative: 1.0 1.0;
image.border: 4 4 3 5;
image.middle: SOLID;
}
description { state: "clicked" 0.0;
inherit: "default" 0.0;
image.normal: "button_clicked.png";
image.border: 5 5 4 6;
}
...
programs {
program {
signal: "mouse,down,1"; source: "event";
action: STATE_SET "clicked" 0.0;
target: "base";
}
...
Elementary

 Relative Positioning (1)
Part A
rel1
(x=0.0 y=0.0)
rel2
(x=1.0 y=0.3)
Part B
rel1
(x=0.0 y=0.3)
rel2
(x=1.0 y=1.0)
How to achieve Scalability? - Part 1

Bigger
Scree/n
/
Higher
Resolution
(y=0.1)
(y=0.9)

Bigger
Scree/n
/
Higher
Resolution
(y=0.1)
(y=0.9)
Fix
Header

 Scale Factor
Higher Resolution

 Scale Factor
Higher Resolution + Scale Up
Higher Resolution

 Using container widgets
- Box, Conformant, Grid, Layout, Panes, Scroller, Table, …
 Ex) Conformant → Naviframe → List

 Border
< Original Background Image >
< Expand With Border >
< Expand Without Border >

 Finger Size

 Elementary Configuration
- Configurations
Scale, finger size, engine, scroll, focus, profile, …
- You can change the configuration based on your
own needs.
- Profile: a set of the configurations
default, standard, mobile, tv, wearable, …
There are more!

 Elementary Test
 Terminology
Demo

 Enventor
 Eflete
 Elm theme viewer
EFL Tools for a better Scalability

 Install Platform SDK  EFL Application Template
EFL Applications on Tizen SDK

 Tizen supports various profiles over a lot of device categories.
 EFL makes you write scalable GUI applications over various profiles with a good
performance and small memory foot prints.
 It's open. You can start it now.
Summary

Visit Samsung Booth for Tizen SDK Demo
ONE installer Develop App on IDE Run on Emulators
 Visit Samsung Booth and check Tizen SDK Demo at OSCON 2014!
 Tizen SDK for multiple profiles

More Information
 Daniel Juyung Seo <juyung.seo@samsung.com>
- @seojuyung
- https://www.facebook.com/seojuyung
 https://tizen.org
 http://enlightenment.org

The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)

More Related Content

Similar to The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014) (20)

More from Daniel Juyung Seo (20)

Recently uploaded (20)

The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)