top

CAPH Framework Overview

Published 2014-10-27 | (Compatible with SDK 5.0,5.1 and 2013,2014 models)

Give some descriptions for creating CAPH application

Overview

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.

Architecture

  • The following picture is the architecture of CAPH Framework.

    Figure 1: Architecture of CAPH Framework

  • Layers:

    1. This is CAPH WUI Engine layer. This layer translate the CAPH WUI Widgets to DOM object and render the object to page.
    2. This layer provide an API interface for CAPH WUI Widgets to call CAPH WUI Engine.
    3. This layer provide CAPH WUI Animations, CAPH WUI Widgets and CAPH Data Acceleration API for developer in order to develop new web applications.
    4. This layer Web apps. Application developer can use the modules of layer 3 to make applications with the high performance.
  • Blocks:

    1. CAPH WUI Engine: Manage hierarchical structure for UI and implement event management, graphics acceleration, including CSS Renderer, 2D Canvas Renderer, WebGL Renderer, Timeline/Animator and Object Manager modules.
    2. CAPH WUI Engine API: Provides APIs of CAPH WUI Engine for other modules using.
    3. CAPH WUI Animations: Support many kinds of high performance animations and effect based on Smart TV Motion Guide.
    4. CAPH WUI Widgets: The basic widget template for creating new web application.
    5. CAPH Data Acceleration API: High level API for response(loading) time optimization.
    6. Web Apps: Use above widgets template, animations & effect, engine and data acceleration library to develop new web applications.

Features

  • Providing Web UI Template

    1. Web UI Templates are provided by CAPH WUI Animations and CAPH WUI Widgets.

    2. 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.

    3. The following picture is the example of CAPH WUI Widgets.

      Figure 2: Example of CAPH WUI Widgets

  • Animations & Effect

    1. Animations & Effect is provided by CAPH WUI Animations

    2. 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.

    3. The following picture is the example of animations & effect.

      Figure 3: Example of animations & effect

  • High-speed Scene Rendering

    1. High-speed Scene Rendering is provided by the CAPH WUI Engine.

    2. CAPH Framework manages Scene and Event, Accelerate Physics and Graphics. It’s for Optimized & High Performance Web UI. Mange Hierarchical structure for UI (Page/Container). Implement Event Handler. Offering basic functionalities for matrix transform and animation using Web graphics acceleration.

    3. The principles of CAPH WUI Engine are as below picture.

      Figure 4: Principles of CAPH WUI Engine

  • Data Acceleration

    1. Data Acceleration is provided by CAPH Data Acceleration API

    2. CAPH Framework provides High Level API for optimizing Response (Loading) Time. It offers JavaScript level cache management for resources downloaded from server.

    3. The following picture is the principle of Data Acceleration.

      Figure 5: Principle of Data Acceleration

Improvement from the previous one

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.

Figure 5: Comparison between before and after optimization

The introduction about the coordinate system CAPH Framework uses

  • CSS3

    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)
    

    a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4 are the numbers describing the linear transformation. a4 b4 c4 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.

    1. 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.

    2. 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.

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

Environment

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.