{"id":44463,"date":"2017-01-04T23:12:18","date_gmt":"2017-01-04T17:42:18","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=44463"},"modified":"2017-01-04T23:12:18","modified_gmt":"2017-01-04T17:42:18","slug":"how-to-convert-a-tizen-application-to-orsay","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-convert-a-tizen-application-to-orsay\/","title":{"rendered":"How to Convert a Tizen Application to Orsay?"},"content":{"rendered":"

Introduction<\/strong>
\nMost of the Smart TVs applications<\/a> are web based and are primarily developed using HTML and CSS<\/a>. 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\u00a0Orsay, Tizen, LG, Opera, Smart Alliance, Amazon Fire etc.<\/p>\n

You can develop a Smart TV application<\/a> 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.<\/p>\n

Here, AngularJS based application<\/a> is based on HMTL\/UI component instead of Native UI component and the focus handling is done by AngularJS or JavaScript.<\/em><\/p>\n

Prerequisites<\/strong><\/p>\n

To convert a Tizen application to Orsay, \u00a0you must require a running Tizen code, Samsung Smart TV<\/a> SDK with IDE and knowledge about HTML, JavaScript, CSS and AngularJS.<\/p>\n

Steps to Covert the Application<\/strong><\/p>\n

1. Create the sample project for Orsay TV.
\n2. It automatically creates two files –\u00a0widget.info<\/strong>,\u00a0which is used for managing the resolution; config.xml<\/strong>,\u00a0which contains the complete configuration of the project. Now delete the config file of the Tizen application and paste the complete Tizen code in sample.
\n3. Delete the Tizen dependent file from index like –<\/p>\n

[xml]
\n<script src="$WEBAPIS\/webapis\/webapis.js" type="text\/javascript"><\/script>[\/xml]<\/p>\n

4. Now add the common APIpi in Index.html to run your application.<\/p>\n

[xml]
\n<!– Common widget API–><script type="text\/javascript"
\n\tsrc="$MANAGER_WIDGET\/Common\/API\/Plugin.js"><\/script>
\n<script type="text\/javascript"
\n\tsrc="$MANAGER_WIDGET\/Common\/Plugin\/Define.js"><\/script>
\n<script type="text\/javascript" language="javascript"
\n\tsrc="$MANAGER_WIDGET\/Common\/API\/Widget.js"><\/script>
\n<script type="text\/javascript" language="javascript" src="$MANAGER_WIDGET\/Common\/API\/TVKeyValue.js"><\/script>
\n[\/xml]<\/p>\n

5. Now add the caph library in Index.html.<\/p>\n

[xml]
\n<!– Caph Library –>
\n<script src="$CAPH\/1.0.0\/caph-level1-unified.min.js" type="text\/javascript"><\/script>
\n[\/xml]<\/p>\n

6. Add the function to onload of body to start the application.<\/p>\n

[xml]
\n<body onload="func_onLoad();"> <\/body>
\n[\/xml]<\/p>\n

7. Add script to the head of index.html which contains the func_onLoad(), required to start the application.<\/p>\n

[javascript]
\n<script>
\n\tvar flag = false;
\n\tvar widgetAPI = new Common.API.Widget();
\n\tvar pluginAPI = new Common.API.Plugin();
\nfunction func_onLoad() {
\n\tif (typeof curWidget != ‘undefined’) {
\n\t\tcurWidget.setPreference("ready", "true");
\n\t}
\n\tif (!caph.platform.dtv.Browser
\n\t\t\t\t|| caph.platform.dtv.Browser.browserType().sectvbd) {
\n\t\t} else {
\n\t\t\twidgetAPI.sendReadyEvent();
\n\t\t}
\n\t}
\n\twindow.onShow = function(e) {
\n\t\tif (flag === false) {
\n\t\t\tflag = true;
\n \/\/ This line start the application
\n\t\t\twidgetAPI.sendReadyEvent();
\n\t\t}}
\n<\/script>[\/javascript]<\/p>\n

8. Change the mapping of TV keys of Tizen to Orsay. Now your application is running fine along with the focus of the application.<\/p>\n

These are the Orsay keys –<\/p>\n

[javascript]
\nvar tvKeyOrsay = new Common.API.TVKeyValue();
\nvar tvKey = {
\nKEY_RETURN : tvKeyOrsay.KEY_RETURN,
\nKEY_PANEL_RETURN : tvKeyOrsay.KEY_PANEL_RETURN,
\nKEY_EXIT : tvKeyOrsay.KEY_EXIT,
\nKEY_UP : tvKeyOrsay.KEY_UP,
\nKEY_DOWN : tvKeyOrsay.KEY_DOWN,
\nKEY_LEFT : tvKeyOrsay.KEY_LEFT,
\nKEY_RIGHT : tvKeyOrsay.KEY_RIGHT,
\nKEY_ENTER : tvKeyOrsay.KEY_ENTER,
\nKEY_PANEL_ENTER : tvKeyOrsay.KEY_PANEL_ENTER,
\nKEY_VIDEO_REWIND : tvKeyOrsay.KEY_RW,
\nKEY_VIDEO_FASTFORWARD : tvKeyOrsay.KEY_FF,
\nKEY_PLAY_PAUSE : tvKeyOrsay.KEY_PLAY_PAUSE,
\nKEY_VIDEO_PLAY : tvKeyOrsay.KEY_PLAY,
\nKEY_VIDEO_PAUSE : tvKeyOrsay.KEY_PAUSE,
\nKEY_VIDEO_STOP : tvKeyOrsay.KEY_STOP,
\nKEY_MUTE : tvKeyOrsay.KEY_MUTE,
\nKEY_VOLUME_UP : tvKeyOrsay.KEY_VOL_UP,
\nKEY_KEY_PANEL_VOL_UP : tvKeyOrsay.KEY_PANEL_VOL_UP,
\nKEY_PANEL_VOL_DOWN : tvKeyOrsay.KEY_PANEL_VOL_DOWN,
\nKEY_VOLUME_DOWN : tvKeyOrsay.KEY_VOL_DOWN
\n};
\n[\/javascript]<\/p>\n

9. The back navigation is still not working so you need to block the default navigation to handle the return keys of remote control.<\/p>\n

[javascript]
\nwindow.addEventListener("keydown", function (event) {
\nswitch (event.keyCode) {
\ncase tvKey.KEY_RETURN:
\n\/\/do what ever you required.
\nvar widgetAPI = new Common.API.Widget();
\nwidgetAPI.blockNavigation(event);
\nbreak;}}
\n[\/javascript]<\/p>\n

10. Also need to change the exit key functionality.<\/p>\n

[javascript]
\nwindow.addEventListener ("keydown", function (event) {
\nswitch (event.keyCode) {
\ncase tvKey.KEY_EXIT:
\nvar widgetAPI = new Common.API.Widget();
\nwidgetAPI.sendExitEvent(event);
\nbreak;}
\n}
\n[\/javascript]<\/p>\n

Following these 10 simple steps can help you to convert your normal Tizen application to Orsay.<\/p>\n

If your application uses the following features then it is mandatory to convert these features also.<\/p>\n

1. Network connection scanning
\n2. Getting device information like UDID\/Model No etc
\n3. Application resolution
\n4. Key board handling
\n5. Video player<\/p>\n

Few points to remember\u00a0<\/strong><\/p>\n

1. Make a folder according to the platforms which contains the platform dependent js and features so that it is easier\u00a0to locate the features that needs to be changed and removed.<\/p>\n

2. Include all the Platform dependent features in one place and include your comments so that is can easily replaced.
\nFor example –<\/p>\n

[xml]
\n<script src="$WEBAPIS\/webapis\/webapis.js" type="text\/javascript"><\/script>
\n[\/xml]<\/p>\n

3. If the HTML contains the platform dependent features then make a sub-folder such as views in the platforms folder directory.
\n4. Create a separate platform dependent utils to perform the operations such as return, exit etc.<\/p>\n

Conclusion<\/strong><\/p>\n

By this approach, you can easily convert a Tizen application to Samsung Orsay. Through this you can save\u00a0time and effort and can covert applications for different Smart TVs.<\/p>\n

Note:\u00a0<\/strong><\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00a0Orsay, Tizen, LG, Opera, Smart Alliance, Amazon Fire etc. You can […]<\/p>\n","protected":false},"author":864,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":60},"categories":[1439,3479,3477,1],"tags":[4322,4842,4334,4335,4861,4351],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/44463"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/864"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=44463"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/44463\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=44463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=44463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=44463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}