The popularity of smart TVs and dedicated set-top boxes continues to grow. We have already written about how to assemble a TV set-top box with your own hands or turn an old computer into an Apple TV analogue with support for AirPlay and Siri.
Now we’ll tell you how you can install the popular Android TV platform on almost any old computer and turn it into a smart TV box for watching YouTube, movies and TV series.
Application testing
Having plunged into the development of SmartTv applications, you will eventually be forced to test your creation one way or another. The Tao of testing for SmartTv consists of the following points:
- Testing in the browser
- Testing in vendor emulators
- Testing on end devices
Next we will look at the last two steps on the tester's path. The first point is not specific, and therefore you will find a lot of interesting things yourself by simply launching the application and pressing the F12 key in the browser. Another testing hack is to automate this process. The library, for example, uses jasmine for tests in the launch environment.
Running in vendor emulators
Far from corresponding to reality, as we found out, are the emulators that come with each SDK. (Samsung, , Philips) Ultimately, running on emulators should be nothing more than a self-test for you. And a working application in the emulator cannot be considered as knowingly working on the device. And on the contrary, if something doesn’t work for you in the emulator, it’s not a fact that it’s a fiasco.
How to run an application in the Samsung emulator
To run the application in the latest version of the emulator, you need: the emulator itself, which is an image for VirtualBox and is available for download on the SDK page. After importing the image, you need to specify the path to the directory with your projects and start the virtual machine. The main thing you should not forget is that the name of the directory in the virtual machine must be Apps, respecting the case. You will find explanations in the screenshots. (pictures are clickable)
How to run an application in the Samsung emulator (old SDK)
If you are developing an application using the official SDK, then there simply cannot be any problems, there is a large launch button. In case you just want to run the application, you need to place the project in the SDK applications directory and launch the emulator by selecting the desired application. The pictures show how to do this. (pictures are clickable)
How to run an application in the LG emulator
After starting the emulator, which is installed along with the SDK, and is actually a virtual machine with the TV OS, you can specify the URL of your application (yes, the application must be accessible via http, it can also be a local service on apache/denwer/nginx). The pictures show the sequence of actions. (pictures are clickable)
>
How to run an application in the Philips emulator
Perhaps the most “wonderful” thing that could happen to GUI developers is to get a console when launching the emulator.
I won’t say anything, see for yourself (pictures are clickable) Samsung took a further step in testing applications by launching a laboratory on remote devices.
In fact, these are real devices that allow you to check all the functions of your brainchild that cannot be seen in emulators (for example, the player’s operation with all formats, interaction with DRM systems). To launch our application, you need to select a device on the laboratory website and follow the instructions:
How to run an application in Samsung Remote Test System
(pictures are clickable)
Adding a TV to the IDE via Device Manager
Screenshot: Device Manager with connected TV
To successfully add a TV to Device Manager, several conditions must be met:
- the TV is switched to Developer Mode;
- in the Developer Mode window the correct IP of our working machine with Tizen Studio installed is indicated;
- devices are on a common network: LAN, WiFi or VPN.
[Optional] After adding a TV to Tizen Studio, you can copy its unique DUID, this will make it easier to create a certificate later. And if there are a LOT of TVs (what if), then it’s better to put all the DUIDs into a text file in the “one DUID per line” format.
Launch on SmartTV TVs
We will look at the easiest, in my opinion, way to install and test applications on end user devices. For this we need:
- Http server with PHP support - for LG. I have posted the app at https://paunin.com/content/demoApp/index.html
- The application itself can be obtained from the Smartbox library repository, in the demo/demoApp directory;
You can use the public demo address https://immosmart.github.io/smartbox/demo/demoApp/ if for some reason you do not have an HTTP server to publish the application. However, I would like to note that to be able to experiment and develop an application, an HTTP server is required (unless, of course, you use alternative installation methods described in the vendors’ documentation)
Brief instructions for all vendors (squeeze)
Samsung
10-12 platforms
:
- The user logs into his account (button A on the remote control)
- Types in the Account field. Samsung: develop
- In the password field: 123456 (any other should also be suitable)
- Selects "Login"
- Press the “Enter” button on the remote control
- Login completed
- Presses the D button on the remote control (on some TV models the TOOLS button)
- Selects "Development"
- Press the “Enter” button on the remote control
- Selects “Server IP Address Setting.”
- Press the “Enter” button on the remote control
- Dials IP address: 82.146.41.200
- Presses the remote control return
- Selects "Sync User Applications"
- Press the “Enter” button on the remote control
- The application is being updated
13 platform
:
- Click on the Smart Hub button
- Login to your develop account (Menu - Smart Features -> Samsung Account -> Login (name: develop; password: sso1029dev!)
- On the Smart Hub screen there is a “More apps” tab at the bottom, you need to click on it
- Select Options in the top right corner of the screen
- Select IP Settings from the dropdown menu
- Dial IP 82.146.41.200
- Select Options again in the upper right corner
- Select App Sync from the dropdown list
* In some cases, TV requires permission to install third-party applications, which is provided by the developer key, which can be obtained by contacting RND Samsung (https://samsungdforum.com/) Made by the vendor to stop the illegal distribution of
LG
- Copy the archive https://paunin.com/content/lg_drm.zip to USB flash
- Unpack the archive so that the path to the files is: Root usb-flash/lgapps/installed/ etc.
- Insert USB flash into the USB connector of the TV
- Turn on the TV (Power On on the Remote Control)
- Press Home on the remote control - it will switch to LG Smart TV
- Press the red button on the remote control - a form for logging into your account will appear
- Type in the login field: %your login% (if you don’t have a login, register, the TV has the means)
- Enter %your password% in the password field
- Click OK - you will be logged into your account and transferred back to Smart TV LG
- Select "My Apps" in the lower right corner
- Press Page down (channel switching button down) on the remote control - you will go to My applications on USB
- Launch the application
Philips
To launch applications on Philips TVs with SmartTV function, open the link https://goo.gl/o93keD in your TV browser
Complete installation instructions
To run the application on Samsung TV/BD.
It is necessary to create widgetlist.xml in the root of the server which can be accessed by IP address. For example, https://xxx.xxx.xxx.xxx/widgetlist.xml. I posted the file at https://82.146.41.200/widgetlist.xml. The file is simply a list of applications to install. In the list of widgets, the main element is the download node, where a link to the zip archive of your application is indicated. The rest of the parameters don't matter, not even the size. As you can see from our widget list, I zipped my application and put it at https://paunin.com/content/smartbox.zip. Now all that remains is to tell the device your IP address from widgetlist.xml and update the applications. This is done using the device, depending on the model:
10-12 platforms
- The user logs into his account (button A on the remote control)
- Types in the Account field. Samsung: develop
- In the password field: 123456 (any other should also be suitable)
- Selects "Login"
- Press the “Enter” button on the remote control
- Login completed
- Presses the D button on the remote control (on some TV models the TOOLS button)
- Selects "Development"
- Press the “Enter” button on the remote control
- Selects “Server IP Address Setting.”
- Press the “Enter” button on the remote control
- Dials IP address: 82.146.41.200
- Presses the remote control return
- Selects "Sync User Applications"
- Press the “Enter” button on the remote control
- The application is being updated
13 platform
- Click on the Smart Hub button
- Login to your develop account (Menu - Smart Features -> Samsung Account -> Login (name: develop; password: sso1029dev!)
- On the Smart Hub screen there is a “More apps” tab at the bottom, you need to click on it
- Select Options in the top right corner of the screen
- Select IP Settings from the dropdown menu
- Dial IP 82.146.41.200
- Select Options again in the upper right corner
- Select App Sync from the dropdown list
Probably the most exciting quest of all the devices under consideration. To install the LG application, you must register it on the developer page (registration/authorization required). We fill out everything as indicated in the pictures and download the resulting file. If anyone needs it, I posted my file at https://paunin.com/content/lg_wrapper.zip.
Registering the application
(Pictures are clickable)
And now all that’s left is to deliver the application (more precisely, its signature, the application itself is on the Internet) to the TV:
Installing the application - formal instructions
- Copy the archive https://paunin.com/content/lg_drm.zip to USB flash
- Unpack the archive so that the path to the files is: Root usb-flash/lgapps/installed/ etc.
- Insert USB flash into the USB connector of the TV
- Turn on the TV (Power On on the Remote Control)
- Press Home on the remote control - it will switch to LG Smart TV
- Press the red button on the remote control - a form for logging into your account will appear
- Type in the login field: %your login% (if you don’t have a login, register, the TV has the means)
- Enter %your password% in the password field
- Click OK - you will be logged into your account and transferred back to Smart TV LG
- Select "My Apps" in the lower right corner
- Press Page down (channel switching button down) on the remote control - you will go to My applications on USB
- Launch the application
To launch the application on Philips SmartTv devices, we only need to launch it in the browser by specifying the HTTP address. In our case, we use the address https://paunin.com/content/demoApp/index.html. However, immediately after starting the browser, you will notice native borders around the elements in focus, which is not acceptable for a combat application, and which in reality will not happen when hosting the application in the LG hub.
Everything is decided by specifying the necessary headers when responding from the server, namely “application/ce-html+xml”. This is done by the philips.php script present in the PHP application. Accordingly, we get an address like https://paunin.com/content/demoApp/philips.php. To speed up dialing an address from the TV remote control, you can use a link shortening service, for example, https://goo.gl/. I got the address https://goo.gl/o93keD
Connecting the receiver to a monitor from a computer
For those who need another screen, but buying a new TV is not yet in their plans, there is another option - using a computer monitor. Its correct connection to a DVB-T2 set-top box will ensure comfortable viewing of your favorite TV channels in digital quality.
Today it has become possible to connect a TV set-top box to any computer monitors: both new and old. Some models are equipped with an integrated speaker, eliminating the need to purchase acoustic devices. Before connecting two devices, it is recommended that you carefully examine all the inputs and connectors on the monitor. Users whose set-top box and screen were manufactured in approximately the same period will be most lucky. In other cases, the connection will also be valid, but some difficulties may arise in the process.
The most successful option are hybrid tuners that have VGA and HDMI output. If the device is also equipped with tulip-type connectors, you can easily connect devices for audio playback. If the receiver and monitor have different interfaces, you will need to purchase a special adapter. An important parameter is the length of the cable used. For each type of product, maximum characteristics are provided.
To prevent signal attenuation and choose the optimal cord length, it is recommended to adhere to the following recommendations:
- VGA cable – up to 3 meters;
- HDMI cable – up to 5 meters;
- DVI cable – up to 10 meters.
If the connection fails and an error message appears, it means that the devices are not compatible with each other or that the wrong cable was selected for the connection.
Application development
I will consider exclusively the development of an application based on the Smartbox library.
If you decide that the library's functionality is not enough for the tasks facing you, you can always use native platform methods by studying the device vendor's documentation. Also, you can participate in the development and improvements of the project on gitHub. For the impatient - a ready-made application
Application structure
Application configuration
Application configs should be stored in several files, and they all relate to the Samsung platform:
Widget.info parameters (Samsung only)
This is a regular text file with self-explanatory parameters, where the parameter we are interested in is Screen Resolution, which determines the resolution for which your application is written, the currently recommended one is HD 1280x720. Acceptable: SD 960×540 and FullHD 1920×1080 Use Alpha Blending = Yes Screen Resolution = 1280×720
config.xml parameters (Samsung only)
Full dock yy 0.1 yynnyyy SmartBox DemoApp 1280 720 Smart https://github.com/immosmart/smartbox Smart icon/sb_demo_115x95.png icon/sb_demo_115x95.png icon/sb_demo_95x78.png icon/sb_demo_85x70.png
Input with num keyboard and maximum 4 signs
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
The most important thing to note here is the organization of navigation.
All visible
elements with the nav-item class can receive focus and later fire events (focus, click, etc). To optimize navigation, the sidebar and video stage use data-nav_type=”vbox”, which tells the navigation plugin to “stop using direction search according to the position of elements on the page, and the focus starts moving from one sibling element to another, which is much faster.” (c) Navigation documentation. Another hack is the data-nav_loop="true" attribute, which allows you to loop the navigation within a given element.
Main application object App
Let's look at the js/app.js file After initializing the Smartbox itself, the application SB.ready(_.bind(App.initialize, App)); is initialized, thereby starting the display of the legend $$legend.show(); and adding event handlers this.setEvents(); from menu elements, player, remote control keys. Additional comments in the file itself.
Legend change triggers
While the application is running, we want to show the user hints on how to use certain remote keys. The easiest way is to update the legend depending on the event that occurred. This is what the js/legendTriggers.js file actually does. When nav_focus gains focus or nav_blur loses focus, we set the window.$$legend.keys legend elements to different values, which are immediately displayed with the corresponding icon.
Collection of video streams
Like any application, ours must have a data source for display, user interaction, or internal configuration. All our data for the videos scene is stored in the videos.js file. This is just an example, so a real application will likely receive data in a different way. All this piece of code does is save an array of objects (with links to streams and their names) into the global application object window.App.videos = […]. Next, in the scene file, this array will be expanded and inserted into html in div.scene_video.
Application Scenes
Scenes are just objects of the same structure, stored in the global window.App object, which are shown and hidden depending on which menu element was clicked on.
Code responsible for displaying scenes
Attaching click events to menu items: //js/app.js $('.menu').on('click', '.menu-item', function ( e ) { var scene = e.currentTarget.getAttribute( 'data-content'); self.showContent(scene); });) Method that initiates the display of scenes: //js/app.js showContent: function ( scene ) { var cur = this.currentScene, newScene = this.scenes[ scene];
if ( cur !== newScene ) { if ( !newScene ) { $$error('Scene ' + scene + ' doesn\'t exist'); } else { if ( cur ) { cur.hide(); } newScene.show(); this.currentScene = newScene; } } } I will not dwell in detail on the implementation of the scenes, but will only describe the specifics related to the Smartbox library.
videos.js
As mentioned above, the collection of video streams, after expanding in html this.renderItems(App.videos);, becomes available for navigation due to the class in the nav-item element. When the scene is initialized, all video streams receive an event handler this.$el.on('click', '.video-item', this.onItemClick);, where the Player.play(…) stream is launched. Player documentation.
input.js
To demonstrate how the keyboard works in the input scene, each individual input field is connected to a keyboard via the SBInput method.
The keyboard documentation also contains information on how to add your own languages and layouts. Keyboard connection example
For example, the following code will display the email keyboard on a field with class js-input-2, naturally after the click event: //js/scene/input.js this.$el.find('.js-input-2′) .SBInput({ keyboard: { type: 'email' } });
navigation.js
The scene demonstrating the nav_focus and nav_blur events for elements with the navigation-item class does not differ in the specifics of navigation and simply implements the replacement of an information block when the element in focus changes.
Main scene code
//js/scene/navigation.js init: function () { var $info; this.$el = $('.js-scene-navigation'); $info = this.$el.find('.navigation-info'); this.$el .find('.navigation-item') .on( { 'nav_focus': function () { $info.html('Item with text "' + this.innerHTML + '" focused'); }, 'nav_blur': function () { $info.html(); } }); _inited = true; }
Selecting an operating system
The computer to which you plan to connect a TV with the Smart TV software package must meet the following requirements:
- Windows operating system versions 7-10;
- bit depth – 32 or 64 bits;
- RAM capacity – at least 2 GB;
- processor frequency – not lower than 1.8 GHz;
- Availability of a medium or high power video card.
Google's operating system, called Android TV, was previously only available on TVs with the Smart TV app package. Today it is possible to install it on any PC. Thanks to this, the user can evaluate the Android OS interface both on a desktop computer and on a laptop or tablet.
The Android operating system provides devices with the following functions:
- audio and video playback;
- voice search;
- standard launcher (desktop);
- Find and download games and apps that are fully optimized for your TV.
The development company guarantees updates and is responsible for their installation.
How to download, install and configure the Smart TV program on your computer for free:
Smartbox Library
- Repository - github.com/immosmart/smartbox.
- Full demo - immosmart.github.io/smartbox/demo/demoApp/.
- Authors of the solution: Denis Chinin (chininden[at]gmail.com),
- Poletsky Artyom (artempoletsky[at]gmail.com),
- Popovich Ilya (Loshadushka[at]gmail.com),
- Shamgunov Ildar (il.shamgunov[at]gmail.com),
- Paunin Dmitry (Zmeeed).
- Loginov Pavel (PLoginoff),
- Smorodin Anton (melkov).
Thanks everyone and have a nice week!
