And all kinds of crazy stuff you can do

Enlightenment Developers Day 2014 @ Düsseldorf, Germany

Jean-Philippe ANDREjp.andre@samsung.com

jpeg@videolan.org

   

Who am I?

● Jean-Philippe ANDRE aka. JP aka. jpeg● French (⇒ cheese, wine & b0rkage)● Former VLC developer● Samsung Korea since May 2011

– EFL team since June 2013

● Evas work mostly– cserve2, filters, ETC1/2, Evas GL

   

Evas filters

● Motivation & objectives● Design concepts● Implementation status● Demo● Future plans

   

Motivation & objectives

● Shiny, fancy text effects● Mobile devices: high dpi● Easy UI integration

– True text object, not static image

– Real time rendering

● Be better than:– HTML/CSS effects (font-shadow)– In-house custom font effect libraries

– Photoshop

   

CSS font-shadow

Source:http://www.midwinter­dg.com/permalink­7­great­css­based­text­effects­using­the­text­shadow­property_2011­03­03.html

Cool effects, but only series of blurs

color: #fff;text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95

color: #fff;text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;

   

Galaxy S3 lockscreen

   

Other font effect libraries

● Easy-to-use APIs– Shadow, glow, contour, emboss, etc...

– Font name

– Font size

– Colors

●

   

Other font effect libraries

● Easy-to-use APIs– Shadow, glow, contour, emboss, etc...

– Font name

– Font size

– Colors

● Limited to specific effects only– Not robust to UX requirements changes

– Little room for designer creativity

   

Design concepts

● Photoshop in real-time (Okay, maybe not all of Photoshop...)

● Multiple buffers● Basic operations combined●

   

Design concepts

● Photoshop in real-time (Okay, maybe not all of Photoshop...)

● Multiple buffers● Basic operations combined● Scripted

   

Buffer & operations

inputinput

   

Buffer & operations

Grow

buffer1buffer1inputinput

A = buffer{"alpha"}grow {20, dst = A}

   

Buffer & operations

GrowBlurBlue

buffer1buffer1inputinput outputoutput

A = buffer{"alpha"}grow {20, dst = A}blur { 15, src = A, color = "darkblue" }

   

Buffer & operations

GrowBlurBlue

BlurCyan

buffer1buffer1inputinput

outputoutput

outputoutput

A = buffer{"alpha"}grow {20, dst = A}blur { 15, src = A, color = "darkblue" }blur { 15, color = "cyan" }

   

Buffer & operations

GrowBlurBlue

BlurCyan

buffer1buffer1inputinput

outputoutput

outputoutput

outputoutput

BlendYellow

A = buffer{"alpha"}grow {20, dst = A}blur { 15, src = A, color = "darkblue" }blur { 15, color = "cyan" }blend { color = "yellow" }

   

Buffer & operations

GrowBlurBlue

BlurCyan

buffer1buffer1inputinput

outputoutput

outputoutput

outputoutput

BlendYellow

A = buffer{"alpha"}grow {20, dst = A}blur { 15, src = A, color = "darkblue" }blur { 15, color = "cyan" }blend { color = "yellow" }

real filterreal filter

   

Base functions

● Blend●

●

●

●

●

   

Base functions

● Blend● Blur●

●

●

●

   

Base functions

● Blend● Blur● Color curves●

●

●

●

   

Base functions

● Blend● Blur● Color curves● Grow● Mask (A⋅B)●

●

   

Base functions

● Blend● Blur● Color curves● Grow● Mask (A⋅B)● Bump map●

Raster + Bump map

   

Base functions

● Blend● Blur● Color curves● Grow● Mask (A⋅B)● Bump map● Displacement map

Raster + Displacement map

   

Proxies

● External sources– Any Evas Object, same as image proxy sources

● Texturing, masking, bump maps, …● Render the object in a buffer and get pixels

   

API

● For TEXT & IMAGE objects only– Textblock support really hard– EO beta APIs

– “EXPERIMENTAL” since it's out...● Not many changes since, filter API should be stable

– Edje support for TEXT

● Entry points– filter_program_set(“lua code”)– filter_source_set(“name”, Evas_Object*)

   

Demo time

Yep

   

Current status

● Software rendering– No extra optimization

● OpenGL based on SW rendering– Calls glReadPixels with source objects!

● Yep, that's damn slow

● Some incompatible functions– Work either with Alpha or RGBA... needs clean up

● Error messages very cryptic

   

Future plans

● OpenGL acceleration– Implement basic filters with shaders

– Implement buffer system based on FBOs● Get rid of glReadPixels

   

Future plans

● Animations and scalability– Input more data to the scripts

● Edje animation state● Font geometry, buffer size

   

Future plans

● GUI editor● More PR and examples...● Improve use of Lua (q66 I'm looking at you)