top

How To Use CAPH Data Acceleration API

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

Data Acceleration is provided by CAPH Data Acceleration API. The function of Data Acceleration library is high level API for response (loading) time optimization.

Data Acceleration is provided by CAPH Data Acceleration API. The function of Data Acceleration library is high level API for response (loading) time optimization. DAL includes cache and loader. In case of Cache, there are two type of cache, once some resources are inserted into cache, widget can get the resources from the DAL’s cache instead of web. The cache divides into two types such as Local Storage and File system. Local Storage cache is a HTML5 local storage cache. File system cache is implemented to use local file system. In case of Loader, there are three type of loader, once loader is on, the loader read some resources from web before widget access resource. So, loading time will be reduced. The loader divides into three types such as Pre loader, Tag loader, and XHR loader. Pre loader pre-loads some resources from the web. Tag loader loads some resources by Tag. XHR loader loads some resources by XHR. The goal of DAL is optimization of response (loading) time. Today, there are so many contents in web site or DTV widget. Also image resources’ size is increased in order to display high resolution. For example, the total size of image resources is 3MB. If a widget uses DAL, it can be reduced loading time for resources. But, if a widget doesn’t use DAL, it should load and caching image resources at accessing time from web or some repository. Also this widget decline loading performance. DAL help enhance performance response (loading) time aspect.

Prerequisites

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 (using Samsung Smart TV SDK is recommended).

Environment

Use Samsung Smart TV SDK to create the application. You can also use the emulator provided with the SDK to debug and test the application before uploading it in your TV. Later, you can run the application on a TV. Note that applications may perform better on the TV than on the emulator.

You can find general instructions for creating applications in Implementing Your Application Code.

  • Put caph-level1-unified.js into your HTML file:

        $CAPH/1.0.0/ caph-level1-unified.js

  • Put caph.css into your HTML file:

        $CAPH/1.0.0/caph.css

Then you may include your application .js file. Let's say your application's JavaScript file is "localstoragecache.js." and it has an app object and app.run() method. Then, you may run your Samsung Smart TV application by putting the following code in the <head> and <body> sections of your HTML, just as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <style>
        .boxcls {
            background: green;
        }
    </style>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>LocalStorageCache samples</title>

        <!-- load caph-level1-unified.min.js, caph.css -->
        <script src="$CAPH/1.0.0/caph-level1-unified.min.js" type="text/javascript"></script>
        <link href="$CAPH/1.0.0/base.css" rel="stylesheet" type="text/stylesheet">
        <!-- load the app -->
        <script src="LocalStorageCache.js"></script>
    </head>
    <body onload="app.run();">
    </body>
</html>

Source files mentioned above are explained in the following table.

File Description
caph-level1-unified.min.js It is include all kinds of is basic widget of UI will be used. It includes.
Localstoragecache.js The localstoragecache application source file.
caph.css The class style of caph.wui.

Source File

Source files in directory are explained in the table.

File Description
caph-level1-unified.min.js Basic component of UI. It includes external libraries also.
localstoragecache.js
preloader.js
The app source file

DAL APIs Overview

Local storage cache:
Provides caching for some resource files. It uses HTML5 local storage cache. Once some resources are inserted into local storage cache, widget that uses local storage cache gets the resources from local storage cache instead of web.
File system cache:

Provides caching for some resource files. It uses local file system. Once some resources are inserted into file system cache, widget that uses file system cache gets the resources from file system cache instead of web.

Pre loader:

Pre-loads some resources. Loading procedure is divided according to priority, dependency or no condition loading.

Tag loader:
This is loads some resources by tag.
XHR loader:
This is loads some resources by XHR.

How to Develop

LocalStorageCache sample

  • You should import the files to *.html file.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <style>
        .boxcls {
            background: green;
        }
    </style>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>LocalStorageCache Samples</title>
    
        <!-- load caph-level1-unified.min.js, caph.css -->
        <script src="$CAPH/1.0.0/caph-level1-unified.min.js" type="text/javascript"></script>
        <link href="$CAPH/1.0.0/base.css" rel="stylesheet" type="text/stylesheet">
    
        <!-- load the app -->
        <script src="LocalStorageCache.js"></script>
    </head>
    <body onload="app.run();">
    </body>
    </html>
    

    The codes describe as follow.

    Line 13– 14 Load caph-level1-unified.min.js, caph.css.
    Line 16 Load app source file.
  • The LocalStorageCache.js file is as below:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    
    /**
     * DAL Localstoragecache sample
     */
    var app = app || {};
    
    app.run = function() {
        var Localstoragecache = caph.core.dal.LocalStorageCache;
        var localstoragecache  = new Localstoragecache();
    	
        var blobResponseArray = [];
        var imgURLArray = [];
        imgURLArray.push('http://memory.loc.gov/ammem/collections/habs_haer/images/eal41.jpg');
        imgURLArray.push('http://memory.loc.gov/ammem/collections/habs_haer/images/baz132.jpg');
    
        function saveBlob(url) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            }
            xhr.responseType = 'blob';
            xhr.open(GET,url,true);
            xhr.send();
        };
    	
    	
        localstoragecache.init("localstoragecache", 1024*1024*5/2, function() {
            for (var i = 0; i < imgURLArray.length; i++) {
                saveBlob(imgURLArray[i]);
            }
        });
    	
        //blobResponseArray[i] contains Blob for each bitmap image resources in URL, imgURLArray[i]
        for (var i = 0; i < blobResponseArray.length; i++) {
            blobOption.url = imgURLArray[i];         blobOption.blob = blobResponseArray[i];
            blobOption.size = blobResponseArray[i].size;
    
            localstoragecache.insertBlob(blobOption);
        }
    	
        for (var i = 0; i < imgURLArray.length; i++) {
            var br = localstorageache.find(imgURLArray[i]);
            if (br){
                var br = localstorageache.get(imgURLArray[i]);
                if (br){
                var url = item;
                var img = document.createElement"localstoragecache";
                img.url = url;            
    
                localstoragecache.insertBlob(blobOption);
                }
            }
        }
    };
    
  • The codes describe as follow.

    Line 7 Import the components will be used.
    Line 8 New the LocalStorageCache object.
    Line 10-14 Define array and insert default url value.
    Line 16-20 Init the LocalStorageCache object.
    Line 23-29 Do the insertBlob operation of cache, you can also do other operation about cache such as find, get and remove.

preloader sample

Line 7 Import the components that will be used.
Line 8 New the preloader object.
Lines 10-13 Define array and insert default url value.
Line 15-26 Make blob type data based on image.
Line 28 Init the preloader object.
Lines 29-38 Load resources and start preloader.
Lines 40-42 Complete callback function. If subscribe function is completed, invoke this callback.
Lines 43-45 Error callback function. If subscribe function occur error, invoke this callback.
  • You should import the files to *.html file.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <style>
        .boxcls {
            background: green;
        }
    </style>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>preloader samples</title>
    
        <!-- load caph-level1-unified.min.js, caph.css -->
        <script src="$CAPH/1.0.0/caph-level1-unified.min.js" type="text/javascript"></script>
        <link href="$CAPH/1.0.0/base.css" rel="stylesheet" type="text/stylesheet">
    
        <!-- load the app -->
        <script src="preloader.js"></script>
    </head>
    <body onload="app.run();">
    </body>
    </html>
    

    The codes describe as follow.

    Lines 12–16 Import the dependencies files.
    Line 18 Load app source file.
  • The preloader.js file is as below:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    /**
     * DAL preloader sample
     */
    var app = app || {};
    
    app.run = function() {
        var Preloader = caph.dal.Preloader;
        var preloader = new Preloader ();
    
        var blobResponseArray = [];
        var imgURLArray = [];
        imgURLArray.push('http://memory.loc.gov/ammem/collections/habs_haer/images/eal41.jpg');
        imgURLArray.push('http://memory.loc.gov/ammem/collections/habs_haer/images/baz132.jpg');
    
        function saveBlob(url) {    
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 4){
                    var blob = xhr.response;
    				blobResponseArray.push(blob);
                }
            }
            xhr.responseType = 'blob';
            xhr.open(GET,url,true);
            xhr.send();
        }
    	
        preloader.init();
        preloader.setFlagThrottled(true);
        preloader.setMaxIssuePerTurn(1);
        preloader.setFlagSync(true);
        preloader.subscribe('oncomplete', onComplete);
        preloader.subscribe('onerror', onError);
        rc = preloader.loadWithPriorityManifest({
            files : imgURLArray
        });
        
        preloader.start();
    };
    function onComplete() {
    
    }
    function onError() {
    
    }
    
  • The codes describe as follow.

    Line 7 Import the components that will be used.
    Line 8 New the preloader object.
    Lines 10-13 Define array and insert default url value.
    Line 15-26 Make blob type data based on image.
    Line 28 Init the preloader object.
    Lines 29-38 Load resources and start preloader.
    Lines 40-42 Complete callback function. If subscribe function is completed, invoke this callback.
    Lines 43-45 Error callback function. If subscribe function occur error, invoke this callback.

Differences between LocalStorageCache and PreLoader

 

LocalStorageCache and PreLoader have differences concept aspect. LocalStorageCache uses HTML5 local storage cache, so it saves contents such as image, text, binary, and so on. PreLoader can take contents on the Web or other remote repository before using it. The basic difference point is the timing of take the contents. LocalStorageCache is for enhancement of loading time that the contents are already loaded. Below are inserted items (Google Chrome’s inspector). If click “insert” button, then the items are inserted HTML5 localstoragecache.

But, PreLoader is for enhancement of loading time that the contents are not loaded. It is useful if pre-loading another web page’s contents and web page will be visit soon. Because don’t have to take contents at visit web page time, loading time will be shorten.