Wednesday, December 29, 2010

Drawing Gradients in 12 different ways on TI Graphics SDKs !

Gradients are very critical for enabling rich user interfaces to provide a pseudo 3D effect. This short update provides an overview of all the Graphics methods supported on various TI Graphics offerings, including HTML5, Qt, AS3, WinCE and Android.

Sl No

Drawing API and Web Link

Rendering Model

TI Implementation

1

Usage in Webkit (CSS3 based)




http://webkit.org/blog/175/introducing-css-gradients/

Immediate

Available in Qt, and Angstrom/OE





2

Usage in Mozilla (CSS3 based)


Available in Qt, and Angstrom/OE


https://developer.mozilla.org/en/Using_gradients

Immediate






3

Qt Gradients in 4.7 with QML


Available in Qt, and Angstrom/OE


http://doc.qt.nokia.com/4.7-snapshot/qml-gradient.html

Immediate






4

Qt Gradients with the Qt non-QML API


Available in Qt, and Angstrom/OE


http://processors.wiki.ti.com/index.php/XgxPerf_HMI#Article_2-_Using_Gradients_and_Masks_in_Qt_for_Industrial_HMI_development

Immediate






5

Gradients with ActionScript 3 in Flash10


http://focus.ti.com/docs/toolsw/folders/print/adobeflash-a8.html


http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7dd7.html

Deferred






6

Gradients with Cairo

Immediate

Available in Angstrom/OE


http://cairographics.org/documentation/cairomm/reference/classCairo_1_1Gradient.html







7

Gradient configuration for widgets in GTK

N.A

Available in Angstrom/OE


http://library.gnome.org/devel//gtk/2.91/GtkCssProvider.html







8

Gradients with Clutter (OpenGL/ES based. OpenGL/ES itself does not have direct Gradient support, so is a mixture of Vertex colours, Shaders, or Texture blending)

Deferred by nature of the OpenGL/ES engine implementation in TI SOCs

Available in Angstrom/OE


http://lists.o-hand.com/clutter/1787.html







9

Gradients with .NET (including the Compact Framework supported in WinCE)

Immediate (Deferred mode available for some)

http://focus.ti.com/docs/toolsw/folders/print/wincesdk-a8.html


http://msdn.microsoft.com/en-us/library/s6fxh562%28v=vs.71%29.aspx







10

Gradients with GDI

Immediate (Deferred mode available for some)

http://focus.ti.com/docs/toolsw/folders/print/wincesdk-a8.html


http://msdn.microsoft.com/en-us/library/cwka53ef.aspx







11

Gradients with Inkscape for SVG

N.A

http://inkscape.org/


http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients







12

Gradients in Android Graphics

Immediate

http://code.google.com/p/rowboat/


http://developer.android.com/reference/android/graphics/LinearGradient.html




Tools and Benchmark examples with source code for CSS3, Flash and Qt

1. XgxPerf samples for Gradients and source code for complex examples with SVG Gradients

https://gforge.ti.com/gf/download/docmanfileversion/256/4266/xgxperf_svn78.tar.gz

2. GUIMark2 comparison of Flex and HTML5 performance

http://www.craftymind.com/guimark2/

3. Online CSS3 Gradient code generator

http://gradients.glrzad.com/

4. Online ActionScript3 based Gradient code generator

http://active.tutsplus.com/tutorials/actionscript/how-to-create-gradients-with-actionscript/

No comments:

Post a Comment