A "Hello World" app for Samsung Internet@TV

Samsung Internet@TV is a platform that aims to bring content from the Internet into people's living rooms through certain Samsung televisions and Blu-ray players (be careful to check app availability though). The system uses HTML “widgets” to bring an app like experience to the TV set. For developers this is a chance to experience developing for an embedded system while needing only HTML, CSS and Javascript skills. As another bonus Samsung are currently running a competition for developers in Europe (at the time of writing there is about one month left until closing) where you can win some decent prizes. In this post I will attempt to pull together some information on how to build a simple “Hello World” app and then deploy it to a real Internet@TV device for testing.

There was a US version of the developer challenge but it is now closed for submissions. However you can view the submissions to that competition for an idea of what is possible. The US site is at http://www.freethetvchallenge.com/. The European version of the challenge is still open for submissions (closing January 14th 2011) and details can be found at http://www.samsungsmarttvchallenge.eu/. The rules are a bit odd on this stating that the competion is open to residents of the UK, France and Germany and organisations located in the EU, which sounds a bit restrictive. Lots of technical documentation detailing how the platform works as well as the SDK itself are all available on the Samsung D Forum: http://www.samsungdforum.com/. You will need to register to gain access.

Installation

Within the SDK you get four tools: a visual designer, an integrated development environment, an emulator of the Internet@TV system and a copy of the Apache Web Server. To use the SDK you will need to install it on Windows 7. Sadly it does not install on WINE (I've tried). It is a real shame when companies bring out Windows-only software, it is completely unnecessary these days and cuts them off from a big pool of developers who don't want to use Windows. Anyway, installing the SDK is quite straightforward in itself. Something to note though is when you are offered the option to install Apache you should accept (the default settings seem to work fine). It also needs to be running on the standard port for web servers (port 80), so if you need to run something like IIS as well be sure to be careful to be just running one at a time. The reason for this is that you need an Apache installation to be able to install your app on an actual device, and in this process you cannot specify a port.

A simple “Hello World” widget

Apps for Samsung's Internet@TV system are basically HTML web widgets where the web page, CSS, Javascript and images needed for your app are bundled together and run on the device itself. The browser on these systems is called MAPLE (Markup engine Platform for Embedded Systems ), it is an HTML4 browser with CSS 2 (and CSS TV Profile 1.0) and Javascript 1.6. It also provides Javascript classes that you can include in your app in order to interact with the capabilities of the device. This makes it easier to work with features that you might not get on a desktop, like the remote or on screen display notifications.

In the Samsung D Forum go to Apps Guide → Documents and grab the latest copy of App Development Guide for Internet@TV. Make sure you have the latest version. This contains full details on how to get going with app development. I've extracted a few details here to put together a basic app. Open up the SDK and create a new project called “HelloWorld”. A new project will be created but as yet you will only have a config.xml file. In this file you can set the properties for your app, including the icon. For now you don't need to worry too much about this file and you can also get away without setting an icon.

As this is a web widget we will need an HTML file and a CSS file to style it. Unlike a normal web page though we also create a JavaScript file for our code and to include some JavaScript code that is included with the browser on the device. The reason for this is that we need to call a Javascript function on the machine to tell it that our page is ready to be displayed. The entry point file should be called index.html so go ahead and create it in the SDK and make sure it includes the code below.






Hello World!!


Hello world!


Notice the reference to $MANAGER_WIDGET/Common/API/Widget.js. This is a library of functionality to interact with the Internet@TV system, one of the functions we will use from this library is the function to tell the system to display our page. There is also a link to a CSS file, worth including in this as it makes the text on the widget much more visible. Create a new folder in your project named CSS and a file underneath named Main.css (these file samples are from the Samsung guide).


body {
margin: 0;
padding: 0;
background-color: transparent;
}

#welcome {
position: absolute;
left: 50px;
top: 50px;
width: 500px;
height: 50px;
background-color: #AFAFAF;
color: #99FFFF;
font-size: 30px;
text-align: center;
}

Below is the JavaScript file, created as Main.js under a new folder named JavaScript. There isn't much in this bare bones version but note the call to tell the system that we are ready for the widget to be displayed (widgetAPI.sendReadyEvent(); ), if this isn't present the app will just hang.


var Main = {
// Main object
}

var widgetAPI = new Common.API.Widget(); // Create Common module

Main.onLoad = function () {
// called by

's onload event
widgetAPI.sendReadyEvent(); // Send ready message to Application Manager
}

You should now be able to test the app in the emulator, which does a good job at showing you how your app will look. It also provides an image of a remote control so when you come to build more complex apps you can interact with them as a user would.

The Samsung TV SDK and emulator in action

Deploying to a device

Emulators are great, but as with mobiles (but more so in this case) it is common for set top boxes and devices to be restricted in terms of CPU power and memory so it is worth checking that your app will work on a real device. However I had a bit of trouble tracking this information down! Google came to the rescue though and with the words “upload app to Samsung TV” I was able to track down a document called User Application for Samsung Applications into a TV Set which fully details the steps needed. The process follows the steps of packing the app, putting it on your Apache server (the one you set up when installing the SDK), setting up a developer account on the Internet@TV device and copying your app to the device.

Go to ToolsPreferencesPackage Settings and then select “Use the Apache (2.2.11) installation folder ”. In the config.xml file check that there is a line that says:


user

Now the app can be packaged. Right click on the app name and select Package. Fill in a name and a version number. Tick Update the packaged files on the server and enter a display name and description. Click OK and the app should be packaged and sent to your web server. If you go to http://localhost/widgetlist.xml you should see your app listed.

Now to set up your Internet@TV device. Here I am going to assume that you already have the device on your local network and that you have had experience of setting up an account on it. If not consult the manual that came with the device. To get your app on the device you need to be able to access a special Development menu under Settings. The way to do this is to set up a new account called develop (you can use any pin number you like) and then log in under this account.

The Settings menu on a Samsung device showing the development menu

When you go to the Settings menu under Internet@TV you should see a new Development entry. Scroll down to it and then select Setting Server IP and enter the IP address of your development machine running Apache and press the Enter key on the remote (in the centre of the directional keys). Now you can select User Application Synchronization to get your app onto the machine. If you get an error check that the IP address is correct, that your machine does not have port 80 closed by a Firewall to machines on the same network and that there is some free memory on the machine. If all goes well you should be able to return to the screen showing installed apps and your app will be displayed with part of the icon replaced with the word “User” on a red background.

You can now test your app for real to check it looks and performs as you expect on a real device. Debugging information generated by the device is available in the SDK in a window at the bottom. Lots of documentation and tutorials are available on the Samsung D Forum to enable you to do more exciting things than display “Hello World!”. If you do decide to go in for the competition then the best of luck to you and it would be great to hear how you get on.

Comments

I Just instal Euro version of Samsung SDK, and it work wel with wine even instal regular shortcuts on desktop (Centos 5.5, KDE, Wine from RPM)

I've tried the recent 2.3 SDK under wine and it install but not much works. Apache fails to start. Emulator fails to start. Even the help doesn't really work. Hmm - poor.

Hi,
when i hit syncronize it show the message with the name of the app "the following new service will be installed automatically..." but it does not fill the bar. So the app is not installed.
Any advice?

Go through the packaging process again and ensure that you put 0.1 as the version when naming the app. That is on the space just before the date.

I stumbled across this post. I have a similar issue with a sample samsung app I created and tried to deploy on a Samsung BD6700. The progress bar just remains stuck at ~75% and nothing happens. I tried 2-3 samples from the SamsungSDK docs with no luck. Any idea why this may be happening?

I'm having the same issue of the bar not moving at all when I make the user app synchronization, and I tried repackaging the app with "0.1" as the version but still the problem persists...

1. Check your apache directory. (the one serving up web pages)
2. Check that the files listed in 'widgetlist.xml' are accurate and do not contain spaces.
3. If you needed to change the file names be sure the actual zip files get changed to.
4. Test the link to your zip files in a web browser. If it works, it should also work on your tv.

When I installed the SDK, I also installed the Apache option, but when I try to change my package settings the "Use the Apache (2.2.11) installation folder" option is greyed out. Any idea why? The user guide sys that the emulator can't be running. I see an emulator process that automatically restarts when I kill it. Looks like the SDK automatically starts that up. I tried just using the other option with the apache path, but I don't see anything being created there when I run the package command.

Any suggestions about what I'm doing wrong or should try? I searched the samsund forum but didn't find anything helpful.

See if Apache is running by typing http://localhost in your browser. If you have IIS running at the same time you will need to stop it. If so, you might be able to get round this issue by just pointing the SDK at the Apache "htdocs" folder (which will be under C:\Program Files\Apache.. somewhere, I can't quite remember where!). If that fails it might be worth making sure Apache and the SDK are removed under Add/Remove programs (they will be separate entries) and reinstalling.

I found that when installing the Samsung SDK, Apache 2.2.16 was installed resulting in the "Use the Apache (2.2.11) installation folder" option being greyed out for me as well.

I was able to fix it by uninstalling Apache 2.2.16 and installing Apache 2.2.11.

Good luck

Hello,

I hope you can help me with my problem.
I created an application based on Flash App Creation Tutorial(Flash_SWF_Sample_1.04.zip)
http://www.samsungdforum.com/Board/AppsGuideTemplateView?BoardID=32999

The application runs fine on the emulator.
I then installed the app on my TV (LE40B651) but when I run the widget it says "Unsupported object!"
I think it cannot play the Flash content.

Can you please help with any advice please?

Thanks!

I got a D5705.
Do you know were to get more info aboout flash app?

Reagards

Can someone please tell me how to connect the sdk with mysql..... Is it possible?.....I want to retrieve data from database

Is there a way for flash to have access to the audio except for controlling volume or mute? I need flash to listen to the audio coming from the TV input. So if there is a cable box connected to input 1 would I be able via the api to listen to the audio coming in on input 1?

Hello,

I wanted to register in the www.samsungdforum.com to download the sdk.
But I did´t receive any feedback for some weeks. Can someone provide me the TV-SKD?

Best Regards,
Max

I have developed an app for samsung smart TV. I want to upoad it and test it. But the upload button in Samsungdforum website is not enabled.
I am located in India. I dont have Samsung Smart TV here to test it. I have developed the app out of my personal interest. But now I want to test it, either by some one who have the Samsung SmartTV or help me upload the same.

Can anyone help me with instruction to upload the app?

Hello, I am currently started developing application for Samsung internet TV. I have all materials which is required for developing apps. So, I have started using "Hello World" program. My question is , To where I will get app developing related issues? I want to know some forum for Samsung app development. so that they can solve the technical issues or problems from programming.

Hi Onkar, Try http://www.samsungdforum.com/, since this article was written they have added a discussion board to this site where people can talk about development issues.

"In application can we receive information when channel is changed?"

html page associated with samsung application does not feels interactive for user when i run the application on samsung IDE.It is showing the UI but does not reacting by remote control.how do i fixed this problem?do anybody have solution?please replay...

FYI,
I'd to walkthrough Flash Video Tutorial SDK 2.1
1.Develope using SDK 2.3.2
2.Emulator using Samsung 2.3.2
3.Create RTMP_Playback.fla (flash CS3 action script 2.0) published to RTMP_Palyback.swf and index.html
4.when i perform testing in flash player or in IE its can streaming the video from FMS 3.5 properly

But whenever i try to open app or play in emulator or play from icon in emulator

debug info iw show as bellows:-
alert() : SmartHomeMain.showWidget()
alert() : UISmartHome.hide() pMoveOut true
alert() : [IME] deinit() called
alert() : [IME] -------- start remote destory -------
alert() : sendEvent
alert() : pType : 202
alert() : pParam : stat=ok&type=create&id=RTMP_Playback
alert() : pStatus : 1
alert() : This event is Not Register!!

so,is there any recommend for me to get it straming in emulator .... please help me...
Thank you in advanced....

Thanks!!

I followed your tutorial and I installed on my Samsung C650 my first app.

When I download the apps to my tv I do not see them listed as an app I can click. I have tried re-sorting my list of apps (by all options). I've tried changing the application around and re-packing it. I've tried changing application version numbers. I double checked apache logs and I see the TV has downloaded the zip files.

Starting to pull my hair out on this. Thanks for the tutorial, not a lot of information around the net on these.

Did you figure out what was wrong? I can't get it to work either!?!?!

I am a mac user and Im not a big fan of VMs but I found that if you create a windows VM for the SDK, close down the viewer and then RDC into it, the SDK runs perfectly well. For some reason, the RDC takes off that millisecond of latency that even the best vm kit seems to have.

I came across a problem when developing. I try to open new window use html. This opened but I dont use remote controls key this new window. I must open previous page with clicked return key, and enter key must open next page.
This is my code.

case tvKey.KEY_ENTER:
mywindow=open("http://www.example.com",'_blank','width=1280,height=720','false');
break;
case tvKey.KEY_RETUNR:
mywindow.close()
WidgetAPI.blockNavigation(event);
break;

Can anyone help me?

Can any1 tell me how 2 add logo to our samsung smart tv application. Instead of displaying ?&user , I want my logo to b display.

smiles

I am facing a problem while writing code for opening a url link in explorer or web browser, and the having that explorer controlled by the remote keys
can anybody help?

regards

Hi there,
Could you please help me with this. I have a Samsung LE40C650 LCD TV with Internet@TV service.
I really wish to upgrade the firmware or application to the new SmartTV service.
Can you please assist me or point me in the right direction. I have been looking at Samygo but can't find anything there - maybe I'm a bit short sighted though ;-)
Thank you

sf.scen.show("Main") is not working.
I have chekced evry thing, but still stuck

well I just figure out that you need to write $.sf.
it is well explained in http://zageek.hubpages.com/hub/SamsungD

I have a 45UE809 (2011 TV set) and can't find that "server" or "development" setting to run my program on the TV.
The documentation of the SDK does't have a word about that topic at all. :/

I have the same issue. After upgrading my Samsung Smart TV to the latest firmware i can't use the developer account. You have to login with your email address and password now. Once you login there is no development/developer menu to set server IP :(

Found this on the Samsung Developer site: http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/g... Looks like it is for a later version of the platform than I have access to. Let me know if it works!

Hello everone, i just downloaded samsung smart tv sdk 3.1 and run the emulator but i can't find a browser app in the emulator. can somebody tell me how to open a browser inside the emulator?

can we use same step for bluray playes, if not please guide us to install any app in bluray BD-D6500 or any latest player. thx in advance.

Hello, i'm new at this kind of development and i'm trying to develop an app with multiple scenes/pages at this moment i can't make a link to change the scene, can anyone help me? Does anyone have an example?

Best Regards
Ricardo Jesus

Add new comment

Comments are always very welcome, but please note the following:
  • Sadly due to the high number of spam comments recently all comments are now manually moderated. You comment will therefore not appear on the site instantly.
  • Comments on this web site are monitored for spam using Mollom. By posting a comment, you accept that your message and other personal details about you will be analysed and stored for anti-spam and quality monitoring purposes, in accordance with Mollom's privacy policy.
  • Please use your own name not a company or website name to submit comments. Your comment will be removed if you don't do this.
  • All links in comments will be marked with a no follow attribute. That means posting a link to your site here won't help your search engine rankings.
  • By submitting a comment you agree that your comment can be reproduced under the same licensing terms as the rest of the content on the site.
  • Comments can be removed at any time without explanation, but won't be removed just because you disagreed with something I said.