{"id":36836,"date":"2016-06-27T20:57:36","date_gmt":"2016-06-27T15:27:36","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=36836"},"modified":"2016-06-28T10:52:17","modified_gmt":"2016-06-28T05:22:17","slug":"building-samsung-smart-tv-application","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/building-samsung-smart-tv-application\/","title":{"rendered":"Building Samsung Smart TV Application"},"content":{"rendered":"

Samsung Smart TV allows developers to develop TV-oriented applications<\/a> with extended functions using plugins. Smart TV applications are web-based software application that run on digital TVs connected to the Internet.<\/p>\n

With Samsung Smart TV applications<\/a>, TV users can access web content via their TV screens. Unlike general web pages, applications for Samsung Smart TV allow users to employ TV-specific features.<\/p>\n

Installation Guide:<\/strong><\/p>\n

    \n
  1. Install Java Runtime Environment (JRE)<\/li>\n
  2. Download Samsung Smart TV SDK<\/a><\/li>\n
  3. Extract \u201cSamsung_Smart_TV_SDK_Windows_32\/64.zip\u201d<\/li>\n
  4. Open \u201ceclipse.exe\u201d, choose your workspace. Check \u201cUse this as the default and do not ask again\u201d.<\/li>\n<\/ol>\n

    Installing Emulator:<\/strong><\/p>\n

      \n
    1. Install Virtual Box<\/li>\n
    2. Select File ->Import Appliance<\/li>\n
    3. Select Open Application and select the 2014_Smart_TV_Emulator_5_1.ova<\/li>\n
    4. At import appliance settings, modify CPU to \u201c1\u201d<\/li>\n
    5. After the Emulator is imported, a share folder must be set. Select the 2014_Smart_TV_Emulator and choose Setting -> Shared Folders.<\/li>\n<\/ol>\n

      Basic Project Structure:<\/strong>
      \n\"Project<\/p>\n

      A Samsung Smart TV JavaScript application consists of the following items:<\/p>\n

        \n
      • HTML pages:<\/strong> Shows the application\u2019s structure.<\/li>\n
      • CSS files:<\/strong> Defines the application\u2019s style.<\/li>\n
      • JavaScript files:<\/strong> Controls the application\u2019s behavior.<\/li>\n
      • Config.xml file:<\/strong> A simple configuration file defining various settings and deployment information. Contains information on the operating environment and the application version.<\/li>\n
      • Widget.info file:<\/strong> A very small file with a few lines used to define the opacity of the application’s body. This may not be required for full-screen applications.<\/li>\n
      • Index.html:<\/strong> The main HTML file for your application.<\/li>\n
      • Images, sounds and other resources.<\/strong><\/li>\n<\/ul>\n

        Making a Basic Application:<\/strong><\/p>\n

          \n
            \n
          1. Select the \u201cCreate Samsung SmartTV JavaScript App Project\u201d<\/li>\n<\/ol>\n<\/ol>\n

            \"Add<\/p>\n

              \n
                \n
              1. Select the menu to open the next window, here enter project name, path and application resolution.<\/li>\n<\/ol>\n<\/ol>\n

                \"HelloTV\"<\/p>\n

                  \n
                1. Click the \u201cFinish\u201d button to finish creating a new project.<\/li>\n<\/ol>\n

                  Now make changes in Index.html, Main.js and Main.css as follows:<\/p>\n

                  Index.html<\/strong><\/p>\n

                  [java]
                  \n<!DOCTYPE html>
                  \n<html>
                  \n<head>
                  \n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8">
                  \n<title>Hello World<\/title><\/p>\n

                  <!– TODO : Common API –>
                  \n<script type="text\/javascript" language="javascript" src="$MANAGER_WIDGET\/Common\/API\/Widget.js"><\/script>
                  \n<script type="text\/javascript" language="javascript" src="$MANAGER_WIDGET\/Common\/API\/TVKeyValue.js"><\/script><\/p>\n

                  <!– TODO : Javascript code –>
                  \n<script language="javascript" type="text\/javascript" src="app\/javascript\/Main.js"><\/script><\/p>\n

                  <!– TODO : Style sheets code –>
                  \n<link rel="stylesheet" href="app\/stylesheets\/Main.css" type="text\/css">
                  \n<\/head><\/p>\n

                  <body onload="Main.onLoad();" onunload="Main.onUnload();">
                  \n\t<!– Dummy anchor as focus for key events –>
                  \n\u00a0\u00a0\u00a0 <a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"> <\/a><\/p>\n

                  \u00a0\u00a0\u00a0 <!– TODO: your code here –>
                  \n\u00a0\u00a0\u00a0 <label id="LabelId">Samsung Smart TV<\/label>
                  \n<\/body>
                  \n<\/html>
                  \n[\/java]<\/p>\n

                  Main.js<\/strong><\/p>\n

                  [java]
                  \nvar widgetAPI = new Common.API.Widget();
                  \nvar tvKey = new Common.API.TVKeyValue();<\/p>\n

                  var Main ={};<\/p>\n

                  Main.onLoad = function()
                  \n{
                  \n\t\/\/ Enable key event processing
                  \n\tthis.enableKeys();
                  \n\twidgetAPI.sendReadyEvent();
                  \n};<\/p>\n

                  Main.onUnload = function()
                  \n{
                  \n};<\/p>\n

                  Main.enableKeys = function()
                  \n{
                  \n\tdocument.getElementById("anchor").focus();
                  \n};<\/p>\n

                  Main.keyDown = function()
                  \n{
                  \n\tvar keyCode = event.keyCode;
                  \n\talert("Key pressed: " + keyCode);<\/p>\n

                  switch(keyCode)
                  \n{
                  \n\tcase tvKey.KEY_RETURN:
                  \n\tcase tvKey.KEY_PANEL_RETURN:
                  \n\t\talert("RETURN");
                  \n\t\twidgetAPI.sendReturnEvent();
                  \n\t\tbreak;
                  \n\tcase tvKey.KEY_LEFT:
                  \n\t\talert("LEFT");
                  \n\t\tdocument.getElementById("LabelId").innerHTML = "Smart TV – LEFT";
                  \n\t\tbreak;
                  \n\tcase tvKey.KEY_RIGHT:
                  \n\t\talert("RIGHT");
                  \n\t\tdocument.getElementById("LabelId").innerHTML = "Smart TV – RIGHT";
                  \n\t\tbreak;
                  \n\tcase tvKey.KEY_UP:
                  \n\t\talert("UP");
                  \n\t\tbreak;
                  \n\tcase tvKey.KEY_DOWN:
                  \n\t\talert("DOWN");
                  \n\t\tbreak;
                  \n\tcase tvKey.KEY_ENTER:
                  \n\t\tdocument.getElementById("LabelId").innerHTML = "Smart TV – Center";
                  \n\t\tbreak;
                  \n\tcase tvKey.KEY_PANEL_ENTER:
                  \n\t\talert("ENTER");
                  \n\t\tbreak;
                  \n\tdefault:
                  \n\t\talert("Unhandled key");
                  \n\tbreak;
                  \n}
                  \n};
                  \n[\/java]<\/p>\n

                  Main.css<\/strong><\/p>\n

                  [code language=”css”]
                  \n*
                  \n{
                  \n\tpadding: 0;
                  \n\tmargin: 0;
                  \n\tborder: 0;
                  \n}<\/p>\n

                  \/* Layout *\/
                  \nbody
                  \n{
                  \n\twidth: 960px;
                  \n\theight: 540px;
                  \n\tbackground-color: #FFF;
                  \n}<\/p>\n

                  #LabelId
                  \n{
                  \n\tfont-size: 250px;
                  \n}
                  \n[\/code]<\/p>\n

                  A successful run of this sample application result into a fullscreen application with a text written on the screen Samsung Smart TV<\/strong>. When user press left, right, center or enter button on the remote the text is changing simultaneously. Run this application and enjoy coding with Samsung Smart TV.<\/p>\n

                  Hope this was useful to the readers.<\/p>\n

                  Happy Coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

                  Samsung Smart TV allows developers to develop TV-oriented applications with extended functions using plugins. Smart TV applications are web-based software application that run on digital TVs connected to the Internet. With Samsung Smart TV applications, TV users can access web content via their TV screens. Unlike general web pages, applications for Samsung Smart TV allow […]<\/p>\n","protected":false},"author":167,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":37,"footnotes":""},"categories":[3479,3477,1772],"tags":[3519,3628,3629,3632],"class_list":["post-36836","post","type-post","status-publish","format-standard","hentry","category-connected-tv","category-media-entertainment","category-mobility","tag-samsung-smart-tv","tag-samsung-tv","tag-smarttv","tag-smarttv-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t