Show TV Signal on specific area of a Samsung Smart TV application

Samsung Smart TV

Samsung Smart TV development SDK enables the developers to access various features of the TV through programmatic code. In one of my previous posts, I have mentioned about how to get the TV details using the Samsung Smart TV SDK. This article will be discussing about how to get hold of the TV signal data and then manipulating it based on the application needs. We are going to show the TV signal data to a specific part in an application. The manipulation task makes use of the Samsung Smart TV webapis library.

Before continuing with this article, I am going to assume that Samsung Smart TV SDK version 4.5 or 5.1 is installed in the developer machine. The user knows how to start and run an application. For those of you who do not know the installation setup, please refer to my video tutorial given in the link below.

http://thehiddendeveloper.com/samsung-smart-tv-development-tutorial-video-tutorial/



So before taking further explanations, lets just go further into this concept. Once the new basic JavaScript project is created using the Samsung Smart TV SDK, the folder structure looks like the following. I am using the 5.1 version of the Samsung Smart TV SDK. The following is the picture depicting the folder structure.

Folder structure of default js application in smart tv

Folder structure of default js application in smart tv

Getting the details of the TV signal needs help from external libraries provided by Samsung. The Samsung Smart TV webapis library is the one that we are going to use in this tutorial. The webapis library is the one that is provided by Samsung, and it comes bundled along with the Samsung Smart TV SDK. To include the webapis library into the Smart TV application we have to use the following url.

<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>

Once the above script is included, all the functionality provided by webapis will be available as a global variable named webapis. To get the TV program window, we are going to use the getAvailableWindow function. The newly created JavaScript file Main.js along with the new project wizard will have the default content. Replace the existing content with the one given below.



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();
	this.resizeTVWindow();
};

Main.resizeTVWindow = function () {
	try {
		webapis.tv.window.getAvailableWindow(Main.successCB, Main.errorCB);
	} catch (error) {
		console.log('error occurred ', error.name);
	}
};

Main.successCB = function (windowIdList) {
	if (windowIdList === 0) {
		alert('Default tv window obtained');
		Main.setTvSize(0);
	} else {
		alert('Got a list of ' + windowIdList.length + ' windows');
		Main.setTvSize(windowIdList[0])
	}
};

Main.tvSpecs = {
	x: 10,
	y: 10,
	width: 250,
	height: 250
};

Main.setTvSize = function (windowId) {
	webapis.tv.window.setRect(Main.tvSpecs, windowId)
}

Main.errorCB = function (error) {
	console.log('error callback', error);
};

Main.detectDeviceType = function () {
	alert('The device type is ' + deviceapis.tv.info.getProduct());
};

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");
			break;
		case tvKey.KEY_RIGHT:
			alert("RIGHT");
			break;
		case tvKey.KEY_UP:
			alert("UP");
			break;
		case tvKey.KEY_DOWN:
			alert("DOWN");
			break;
		case tvKey.KEY_ENTER:
		case tvKey.KEY_PANEL_ENTER:
			alert("ENTER");
			break;
		default:
			alert("Unhandled key");
			break;
	}
};

The above file contains a function called resizeTVWindow. This function calls the getAvailableWindow function from the webapis library. This function will have two input parameters. Each parameter is a callback function that gets called based on the result of this function execution (a success or a error). The error callback is a function that accepts the error object as the parameter. The error object provides various information regarding the name of the error, type of error, location, stack trace etc. The success callback gets the list of available windows as input. If the input parameter is 0, this means that there is just the default TV window and no other TV windows. If other windows are found in the TV screen, then those IDs are returned as the input parameter. In the default emulator environment, the default TV window ID, 0 will be returned.

Once we get the window ID list, we are going to resize the corresponding window using the setRect function. This function accepts two parameters. The first one being the rectangle viewport specs. The specs is an object that contains, the x and y positions and the width and the height. This object looks like the one below

Main.tvSpecs = {
	x: 10,
	y: 10,
	width: 250,
	height: 250
};

The second parameter of the setRect function is the window ID parameter. This should be the ID of the window of which is going to be resized. In our case it’s ok. So the following will be the syntax to call the setRect function.

Main.setTvSize = function (windowId) {
	webapis.tv.window.setRect(Main.tvSpecs, windowId)
}

Once this function will be called, the window will be resized according to the specs given for the setRect function. To differentiate the resized TV application window from the TV window, we are going to assign a background color to the TV window. Add the following style to the Main.css file.

*
{
	padding: 0;
	margin: 0;
	border: 0;
}

/* Layout */
body
{
	width: 960px;
	height: 540px;
	background-color: #ccc;
}



Once the content is set we can view the resized tv window. If any other application window needs to be resized, the corresponding window ID is passed as the second parameter to the setRect function. Hence we have successfully resized the TV application window to a user set location on the TV screen. After setting the size, whatever content that is played on the TV will be played inside that resized TV portion. This has a lot of uses when designing custom apps.

I have published a video tutorial explaining the stuff that is gone through in this post. The video link can be found below

http://thehiddendeveloper.com/showing-tv-contents-on-a-custom-area-in-a-smart-tv-video-tutorial/

Hope everyone will try this. Any queries regarding this can be posted in the comment section below.




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *