The descriptions for CAPH Framework. Before developing, the SDK needs to create caph.js file, it is the whole library of Web UI Framework project, it includes all kinds of CAPH WUI Widgets and Animations & Effect, CAPH WUI Engine, Data Acceleration library. CAPH WUI Widgets are the basic widgets such as Label, Navigator, GridWidget, ListWidget, Image and so on, they are the widget template for creating new web application. CAPH WUI Animations & Effect are main support high performance animation and effect based on Smart TV Motion Guide, including fade, transfer, rotate, scale, bounce, flip animation effect and so on. The function of CAPH WUI Engine is manage hierarchical structure for UI and implement event management, graphics acceleration. The function of Data Acceleration library is high level API for response (loading) time optimization. All the parts above mentioned are Smart TV Web UI Framework for high performance Web applications.

CAPH Framework provides specialized and Optimized UI Template for Smart TV. Web UI Template for UI Widgets including Panel, Navigator, ListWidget and others. Develop Fast & Rich UI Templates using GPU acceleration (WebGL, CSS 3D, ...). User just needs to write a little code to generate a very beautiful widget with some animations effect that he or she desired.

The following picture is the example of CAPH WUI Widgets.

Figure 2: Example of CAPH WUI Widgets

Animations & Effect

Animations & Effect is provided by CAPH WUI Animations

CAPH Framework provides Animations & Effect Dynamic Web Experience. It supports high performance animations and effect based on Smart TV Motion Guide, including Fade, Transfer, Rotate, Scale, Bounce, Flip effect and so on. User can use these animations and effect, easily apply to CAPH WUI Widgets. And the CAPH WUI Widgets will have the animation effect as user designed.

CAPH Framework can effective improve the efficiency of the browser render, thus the performance of web applications can improve significantly. The following picture compares between before and after optimization. The methods are main including develop CAPH WUI Engine for High Performance Web UI and use Web Graphics GPU Acceleration of Modern Browser and so on.

CSS3 is the latest standard for CSS. CSS3 has been split into “modules”. It contains the “old CSS specification”. In addition, new modules are added. Some of the most important CSS3 modules are: Selectors, Box Model, Backgrounds and Borders, Image Values and Replaced Content, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface.

Matrix3D

Matrix3D class represents a transformation matrix that determines the three dimensional (3D) display position and orientation of the object. The conversion matrix may perform functions including translation (along the x, y and z axes repositioning), rotation, and scaling (resizing). Matrix3D class can also perform perspective projection, which will be a point in 3D coordinate space is mapped to a two dimensional (2D) view.

Matrix

Matrix is linear transformation and projecting 3D images onto a 2D screen. That’s precisely what the matrix functions matrix() allows us to create linear transformations. The point to understand is that a transform multiplies a matrix by the coordinates of a particular point (or points). Matrix objects are always accessed natively in a “natural” inner-to-outer dimensional order, e.g. x, y, z for a 3D matrix. For 2D images, units within a layer, this is natural in that you index x, y. The matrix3D() CSS function describes a 3D transform as a 4x4 homogenous matrix of 16 values. The 16 values are described in the column-major order. For example:

matrix3D(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)

a1b1c1d1a2b2c2d2a3b3c3d3d4 are the numbers describing the linear transformation. a4b4c4 are the x, y, z coordinate of the point literal for the translation to apply.

x - The x coordinate of the point literal.

y - The y coordinate of the point literal.

z - The z coordinate of the point literal.

If you want to get the information about all elements of matrix more detail, you can find the following reference.

Why CAPH Framework uses the three dimensional coordinate system?

CAPH Framework needs the coordinate system setting the matrix transform (CSS3 Transform Matrix3D). Besides, Matrix3D can achieve three dimensional animation effect and three dimensional matrix transformation. So CAPH Framework uses the three dimensional coordinate system to develop.

How to modify the coordinate of an object at inspector (modify any kind of value)?

When we are developing a web application, we can open the developer tools of Google Chrome browser to inspect the coordinate of matrix3D properties, you can look at the following picture.

If you double click the matrix3D value part to modify some values, the CAPH WUI Widget you used in your application maybe move to another location or transform with an angle as following, which just modify has the effect to the CAPH WUI Widget.

Above the pictures, we modify the values of the x, y coordinate of the point from 350px to 40 px, in this way, You can see the effect in the following figure.

If you want to know more details about CSS3, Matrix3D and Matrix, follow link to find the useful knowledge.

Use Samsung Smart TV SDK and caph.wui to create applications that run on a TV screen, you need: Samsung TV connected to the Internet SDK or a text editor for creating HTML, JavaScript and CSS files. You can also use the emulator provided with the SDK to debug and test the applications before uploading them in your TV.