How to Convert a Tizen Application to Orsay?

04 / Jan / 2017 by Varun Mishra 1 comments

Introduction
Most of the Smart TVs applications are web based and are primarily developed using HTML and CSS. In case the native component of Smart TV is not used, it is easy to develop an application that can run on different Smart TVs such as Orsay, Tizen, LG, Opera, Smart Alliance, Amazon Fire etc.

You can develop a Smart TV application for a specific TV and port the same application for another TV. Here in this blog, I will explain how to convert an Angular based Tizen application to Samsung Orsay.

Here, AngularJS based application is based on HMTL/UI component instead of Native UI component and the focus handling is done by AngularJS or JavaScript.

Prerequisites

To convert a Tizen application to Orsay,  you must require a running Tizen code, Samsung Smart TV SDK with IDE and knowledge about HTML, JavaScript, CSS and AngularJS.

Steps to Covert the Application

1. Create the sample project for Orsay TV.
2. It automatically creates two files – widget.info, which is used for managing the resolution; config.xml, which contains the complete configuration of the project. Now delete the config file of the Tizen application and paste the complete Tizen code in sample.
3. Delete the Tizen dependent file from index like –

<script src="$WEBAPIS/webapis/webapis.js" type="text/javascript"></script>

4. Now add the common APIpi in Index.html to run your application.

<!-- Common widget API--><script type="text/javascript"
	src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
<script type="text/javascript"
	src="$MANAGER_WIDGET/Common/Plugin/Define.js"></script>
<script type="text/javascript" language="javascript"
	src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

5. Now add the caph library in Index.html.

<!-- Caph Library -->
<script src="$CAPH/1.0.0/caph-level1-unified.min.js" type="text/javascript"></script>

6. Add the function to onload of body to start the application.

<body onload="func_onLoad();"> </body>

7. Add script to the head of index.html which contains the func_onLoad(), required to start the application.

<script>
	var flag = false;
	var widgetAPI = new Common.API.Widget();
	var pluginAPI = new Common.API.Plugin();
function func_onLoad() {
	if (typeof curWidget != 'undefined') {
		curWidget.setPreference("ready", "true");
	}
	if (!caph.platform.dtv.Browser
				|| caph.platform.dtv.Browser.browserType().sectvbd) {
		} else {
			widgetAPI.sendReadyEvent();
		}
	}
	window.onShow = function(e) {
		if (flag === false) {
			flag = true;
    // This line start the application
			widgetAPI.sendReadyEvent();
		}}
</script>

8. Change the mapping of TV keys of Tizen to Orsay. Now your application is running fine along with the focus of the application.

These are the Orsay keys –

var tvKeyOrsay = new Common.API.TVKeyValue();
var tvKey = {
KEY_RETURN : tvKeyOrsay.KEY_RETURN,
KEY_PANEL_RETURN : tvKeyOrsay.KEY_PANEL_RETURN,
KEY_EXIT : tvKeyOrsay.KEY_EXIT,
KEY_UP : tvKeyOrsay.KEY_UP,
KEY_DOWN : tvKeyOrsay.KEY_DOWN,
KEY_LEFT : tvKeyOrsay.KEY_LEFT,
KEY_RIGHT : tvKeyOrsay.KEY_RIGHT,
KEY_ENTER : tvKeyOrsay.KEY_ENTER,
KEY_PANEL_ENTER : tvKeyOrsay.KEY_PANEL_ENTER,
KEY_VIDEO_REWIND : tvKeyOrsay.KEY_RW,
KEY_VIDEO_FASTFORWARD : tvKeyOrsay.KEY_FF,
KEY_PLAY_PAUSE : tvKeyOrsay.KEY_PLAY_PAUSE,
KEY_VIDEO_PLAY : tvKeyOrsay.KEY_PLAY,
KEY_VIDEO_PAUSE : tvKeyOrsay.KEY_PAUSE,
KEY_VIDEO_STOP : tvKeyOrsay.KEY_STOP,
KEY_MUTE : tvKeyOrsay.KEY_MUTE,
KEY_VOLUME_UP : tvKeyOrsay.KEY_VOL_UP,
KEY_KEY_PANEL_VOL_UP : tvKeyOrsay.KEY_PANEL_VOL_UP,
KEY_PANEL_VOL_DOWN : tvKeyOrsay.KEY_PANEL_VOL_DOWN,
KEY_VOLUME_DOWN : tvKeyOrsay.KEY_VOL_DOWN
};

9. The back navigation is still not working so you need to block the default navigation to handle the return keys of remote control.

window.addEventListener("keydown", function (event) {
switch (event.keyCode) {
case tvKey.KEY_RETURN:
//do what ever you required.
var widgetAPI = new Common.API.Widget();
widgetAPI.blockNavigation(event);
break;}}

10. Also need to change the exit key functionality.

window.addEventListener ("keydown", function (event) {
switch (event.keyCode) {
case tvKey.KEY_EXIT:
var widgetAPI = new Common.API.Widget();
widgetAPI.sendExitEvent(event);
break;}
}

Following these 10 simple steps can help you to convert your normal Tizen application to Orsay.

If your application uses the following features then it is mandatory to convert these features also.

1. Network connection scanning
2. Getting device information like UDID/Model No etc
3. Application resolution
4. Key board handling
5. Video player

Few points to remember 

1. Make a folder according to the platforms which contains the platform dependent js and features so that it is easier to locate the features that needs to be changed and removed.

2. Include all the Platform dependent features in one place and include your comments so that is can easily replaced.
For example -

<script src="$WEBAPIS/webapis/webapis.js" type="text/javascript"></script>

3. If the HTML contains the platform dependent features then make a sub-folder such as views in the platforms folder directory.
4. Create a separate platform dependent utils to perform the operations such as return, exit etc.

Conclusion

By this approach, you can easily convert a Tizen application to Samsung Orsay. Through this you can save time and effort and can covert applications for different Smart TVs.

Note: 

The process to convert the application is just not restricted to Orsay but can be used for most of the web-based TVs such as LG, Opera, Amazon Fire and Smart Alliance.

FOUND THIS USEFUL? SHARE IT

comments (1 “How to Convert a Tizen Application to Orsay?”)

Leave a comment -