SmartTV development underwater rake

Hi, Habr!

It has long been the idea to write an article about the problems of SmartTV development, but as we dive into this area, we invented our own bike, which helped us solve these problems. Therefore, in this article, we will not only highlight some of the problematic aspects of SmartTV development, but also tell you how to solve them with the help of another new PureQML framework.
')
Anyone who is interested in this topic or just curious to look at the new framework, which can and SmartTV, please under the cat.

Zoo

To begin with, in nature there are many SmartTV platforms and many of them are sharpened for launching web applications. From here an illusion may appear that it is enough to write code once and use it on all platforms. But in fact, all platforms have some differences that have to be taken into account. Among such features are the following:

• Handling remote control buttons . Not all manufacturers use the same keycode for the same remote buttons. As an example, you can compare key codes for the orsay platform and webos . For tizen, you need to explicitly register some buttons for future use.
• Video player Many platforms support html5 video player, but, for example, AVPlay is used for tizen , and orsay uses its own API for working with the native player.
• Information about the device . Obtaining information about the device in each platform is also implemented differently, NetCast creates a special object with a special id-schnick, in other cases methods specific to each platform are used.
• Focus SmartTV application is primarily focused on the control of the console, and therefore UI / UX should be implemented taking into account the use of the navigation buttons: up, down, right, left, OK and back, it is important not to lose focus and clearly designate where it is now .

Documentation

In addition to the variety of platforms and documentation for these platforms, the problem lies in the fact that some manufacturers release new versions that sometimes lose compatibility in some places, or even go to new platforms that are in principle incompatible with the old ones (such as LG with NetCast on webOS). At the same time, there is an intensive promotion of new platforms, which makes it difficult to find information on the old platforms, as some sections of the documentation are deleted or transferred, because of which you can sometimes stumble upon dead links in form boards.

Installation

Again, due to the variety of platforms, the process of installing applications on the debugging devices themselves is also different. For example, for AndroidTV you can use adb, tizen has its own counterpart - sdb , for webOS special CLI scripts, etc. Each of these tools needs to be installed and configured. Here you can add the problem of intensive platform updates, with the accompanying SDK and IDE updates. An example of such a problem is the case of Tizen Studio. By downloading the latest version, you can install applications only on TV-samsung tv4 TVs, while there is no easy way to install the application on earlier TVs, which are much more in nature now (if you suddenly encounter this problem, see the link ) and even after successful dance with a tambourine, IDE loses the ability to install applications on TVs TV-samsung tv4 ¯ \ _ (ツ) _ / ¯

Moderation

To publish an application, you must be moderated by the respective manufacturer, and each of them has its own rules and features. In this case, you need to be patient, because Applications can keep on checking for more than one week and this should be taken into account when scheduling, i.e. The application needs to be published well in advance of the release (if you are worried that the application will appear before any marketing activities - do not be afraid, when sending for moderation there is a point where you can specify a date before which the application will not be published).

You should also be prepared for the fact that the cause of failure may be any trifle, for example, an erroneous answer in the self checklist (a list of questions that the developer must answer before sending the application, for example: “Does your application contain viruses”, etc.) or because of a misunderstanding in the description of the UX application. It may come to funny situations, for example, there was a case when an application with streaming of channels was turned on, because it took a ticker on one of the channels as an artifact of graphics, taking it as part of OSD .

AndroidTV & tvOS

Separately, it is worth noting AndroidTV and tvOS, because These platforms do not support the explicit launch of web applications. For tvOS, you use your own xml-like language: TVML, and what is especially interesting, you can typeset in this language, but only within a certain set of templates , it is quite difficult to do something completely arbitrary. With the help of such restrictions, all applications for tvOS are forced to adhere to a single style guide, and if you don’t get far from it, the process of writing the application will be simple.

On the android situation is better, because There are ways to launch web applications, we will tell about one of them below.

How do we do it

Faced with reality, we first studied the existing solutions, but unfortunately nothing universal and convenient attracted: the smartbox is inconvenient, the reactor does not solve specific TV problems, like other frameworks that are more web-oriented.

Now let's look at how PureQML handles it (about which we have somehow written here and here ). In short, it is a js-framework that allows declaratively describing UI in qml-like language, which helps to quickly create applications abstracting from html, css, and others. To specifically address SmartTV problems, a separate qmlcore-tv module was written under the license CC-BY-4.0, which supports the following platforms:

• LG webOS
• LG NetCast
• Samsung tizen
• Samsung Orsay
• Opera TV
• Hisense
• AndroidTV

And here is how he solves the above problems:

• Processing buttons on the remote . For supported platforms, mapping of keycodes is implemented and in the client code it is enough just to write the required handler, for example, for the red function button of the console, you can write a handler:
  

  onRedPressed { /*   */ } 

• Video player To work with the player there is a special component VideoPlayer, which describes the interface for working with video, and the platform implementation is selected for the target platform at the assembly stage. Below is an example of use: playing a looped video on the link to the full screen:
  
  

   VideoPlayer { width: 100%; height: 100%; autoPlay: true; source: "http://media.w3.org/2010/05/bunny/movie.mp4"; } 

• Information about the device . In order to get information about the device, it is enough to use the Device control, by analogy with the player, it describes the interface, and the implementation is taken for the assembled platform. Below is a sample code to display text with a device ID on the screen:
  
  

   Device { id: device; } Text { text: “DeviceID: ” + device.deviceId; } 

• Focus Here the basic feature of the framework itself helps, the fact that at one point in time there is only one single focus, which is and does not disappear anywhere. To work with the focus, you can use declarative properties:
  focus - a boolean flag indicating that this element is focusable or not
  activeFocus is a boolean flag that is true when this element contains focus, and false otherwise
• Installation For a convenient installation of PureQML applications on TV, you can use the smart-tv-deployer script, just tilt it to the root of the PureQML project. To build a project, say, for a webos TV with the name “myTV” (just before that you need to set up the TV, for details on setting up the webOS of the TV, see here ), you need to call the command:
  
  

   ./smart-tv-deployer/build -p webos -t myTV 

• AndroidTV . Here, as well as for android, the native language is java, and in order to port the web application there we used the cordova project. This framework allows you to generate android application with WebView, which already runs the web application itself. Also, active work is being done on translating PureQML code into the native.

Example

As an example, we will show how to port an application from a previous article to SmartTV.

As we mentioned above, the UX on TV is different from the desktop browser and you will have to add some edits to the code to support the operation of the remote control buttons:

 onSelectPressed: { osd.toggleActive() } onBackPressed: { if (osd.active) osd.toggleActive() else _globals.closeApp() } 

In this code, we added the processing of pressing the “Select” and “Back” buttons, when you click the first, turn on / off the OSD (the one with the map and station location point) when you click “Back”, if the OSD is open, close it, if it is closed, then close the application itself.
The end result can be seen in the video:

Conclusion

As a result, PureQML has shown itself as a good tool for developing SmartTV applications, we ourselves use it intensively for these purposes.
If you have any questions or want more articles about SmartTV development or PureQML - write in the comments or on the telegram channel , we will try to answer everything.

Thanks for attention! =)

Links

Project website
Github page
Sources earth-online
Telegram channel support