Building Samsung Smart TV Application
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 users to employ TV-specific features.
Installation Guide:
- Install Java Runtime Environment (JRE)
- Download Samsung Smart TV SDK
- Extract “Samsung_Smart_TV_SDK_Windows_32/64.zip”
- Open “eclipse.exe”, choose your workspace. Check “Use this as the default and do not ask again”.
Installing Emulator:
- Install Virtual Box
- Select File ->Import Appliance
- Select Open Application and select the 2014_Smart_TV_Emulator_5_1.ova
- At import appliance settings, modify CPU to “1”
- After the Emulator is imported, a share folder must be set. Select the 2014_Smart_TV_Emulator and choose Setting -> Shared Folders.
Basic Project Structure:
A Samsung Smart TV JavaScript application consists of the following items:
- HTML pages: Shows the application’s structure.
- CSS files: Defines the application’s style.
- JavaScript files: Controls the application’s behavior.
- Config.xml file: A simple configuration file defining various settings and deployment information. Contains information on the operating environment and the application version.
- Widget.info file: 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.
- Index.html: The main HTML file for your application.
- Images, sounds and other resources.
Making a Basic Application:
- Select the “Create Samsung SmartTV JavaScript App Project”
- Select the menu to open the next window, here enter project name, path and application resolution.
- Click the “Finish” button to finish creating a new project.
Now make changes in Index.html, Main.js and Main.css as follows:
Index.html
[java]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<!– TODO : Common API –>
<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>
<!– TODO : Javascript code –>
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!– TODO : Style sheets code –>
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!– Dummy anchor as focus for key events –>
<a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"> </a>
<!– TODO: your code here –>
<label id="LabelId">Samsung Smart TV</label>
</body>
</html>
[/java]
Main.js
[java]
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main ={};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
document.getElementById("LabelId").innerHTML = "Smart TV – LEFT";
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
document.getElementById("LabelId").innerHTML = "Smart TV – RIGHT";
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
document.getElementById("LabelId").innerHTML = "Smart TV – Center";
break;
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
break;
default:
alert("Unhandled key");
break;
}
};
[/java]
Main.css
[code language=”css”]
*
{
padding: 0;
margin: 0;
border: 0;
}
/* Layout */
body
{
width: 960px;
height: 540px;
background-color: #FFF;
}
#LabelId
{
font-size: 250px;
}
[/code]
A successful run of this sample application result into a fullscreen application with a text written on the screen Samsung Smart TV. 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.
Hope this was useful to the readers.
Happy Coding 🙂
