STB - dive

Good day to all.

I think that many of you have heard about home television, and the offer to buy a TV decoder (set-top box) in your home so that you can enjoy high-quality TV, buy movies, check the weather, and do much more without leaving the TV.

Now I will tell you what it is - this prefix, from the developer of software products.
If it is interesting to you - welcome under kat.
')

What is a prefix?

The prefix ( STB, Set-Top Box, Box ) is a single board computer that has the most truncated axis from the GNU / Linux family installed.

Uname -a command:

# uname -a Linux (none) 3.1.5-1.7 #66 SMP Wed Oct 22 14:40:19 EEST 2014 mips GNU/Linux 

Boxes are usually weak.
Strong representatives (and, accordingly, expensive) may have:

• RAM - from 300Mb to 1Gb
• Total space on the console - ~ 250Mb
• Free space - ~ 5-20Mb (maybe more, but these are the numbers you have to work with)
• Processor - up to 1.3Ghz (up to two cores)

Each box has (the list contains only important elements):

• Ethernet input - needed for IPTV (if IPTV box), integration with services, to connect to the console
• HDMI output - no comment
• Analog output - no comments
• S / PDIF - no comment
• USB inputs - as a rule, one input, but there are boxes that are designed to connect different flash drives and external hard drives at the same time, and therefore may have more inputs. Some boxes even support USB hubs.

Depending on the task of boxing and some other factors, boxing may have:

• Sign in with a SIM card - some consoles have a 3G module, and through the SIM card, the user can access the Internet without an Ethernet cable. In addition, messages from the operator can come to the SIM, and the platforms API allows you to work with SMS messages.
• Signal input (satellite / cable input) - if a satellite or cable box, it is necessary for receiving digital broadcasting (in other words, so that you can connect to TV channels). In addition to broadcasting via cable can come service information.
• Log in under the smart card - I will describe it below.
• Connector for Wi-Fi antenna - some boxes can work with Wi-Fi networks.

This is how it might look (pictures from the network, for example):

And here is javascript?

When a subscriber launches a set-top box at home, he sees a beautiful convenient portal that he can use using the console's console.

This portal is nothing more than a single-page application ( SPA - Single Page Application ) written in JavaScript , and opened in the tab of the browser running on the console.

When we turn on the box (on nutrition) in the general case the following occurs (I do not describe all the excess):

1. The axis of the console started up
2. The prefix launches the browser, and opens the HTML file in it.

It has its own features:

• On some set-top boxes, the configuration file is available for writing - for example, you can change the path to the HTML file that will open in the browser tab when you start or restart the browser. In general, many settings are used to optimize the debugging process code, no more.
• On some consoles, it is not the HTML file of your portal that is launched, but the own portal of the console, in which you use the remote control to enter the address of the file (or the address of your server that distributes the sources), and then the browser simply opens the link you entered.

Added by rule :

Not all consoles allow you to change the portal page or portal address. For example, Amino on your first page requires you to have special keys for this manufacturer. There are several access levels for this.

It turns out that almost no skills are needed to develop a portal on the console? Is it enough just to set up the console, and learn how to deploy your application on it? - this is not quite so .

A prefix is ​​a platform with very low performance , and therefore development for the web and for boxing are completely different levels of complexity. That is why almost any coding error makes itself felt - your application will be incorrectly rendered, rendered a “ladder”, slow down, refuse to work, “crash” the browser, issue artifacts, consume memory, and much, much more. I will tell about it a bit later.

Why do you need a prefix?

• I am a subscriber - I want to keep a plasma on the wall, connect a set-top box to it, and watch movies, satellite TV in high quality, will I know if there are traffic jams in the morning when I go to work, and not make any effort.
• I am a telecom operator - I can sell (or, for example, lease) set-top boxes to my subscribers, and sell services through it (selling films, channel packages, etc.) and make a profit.

Accordingly, the vast majority of portals on the console are aimed at solving one big task - on the one hand, to create the possibility of selling services (selling films, watching pay channels, and much more), and on the other hand, to make the most convenient application integrated with other services (map, mail, social networks, news, SMS, surfing the Internet and more), which allows you to watch TV and solve many other problems in one “box”.

If this is a regular browser, can we really implement all this? A television? Films? SMS? - we can, because the prefix is ​​not just a box with a browser inside . Each box offers its own JavaScript API.

JavaScript API consoles

In the general case, API consoles can be divided into groups:

• Prefix Player API - methods to control playback.
• API for getting current stream information - subtitles, audio tracks, teletext, other ...
• API to work with the inputs of the console - check for HDMI, Ethernet cable, satellite cable, the presence of 3G, other ...
• API for checking the connection - the presence of the Internet in the inserted cable, the presence or quality of the satellite signal, other ...
• The API for working with the STB storage is not on all boxes, but quite often the browser's local storage is cleared after the STB restarts, so a separate API is used to save data between reboots.
• API for getting data - getting IP box, MAC addresses, box model, and more ..
• Broadcast Network API - channel scan, other.
• The API for customizing boxing is an image format, aspect ratio, other ..
• API for working with files and file systems - get file duration, get a list of files on a flash drive, find out the video codec, other ...

This is more than enough for most tasks.

How does the user interact with the portal?

Each console comes with a remote control. Usually it contains buttons for solving the main tasks related to TV:

• Navigation buttons - “Up”, “Right”, “Down”, “Left”, “Enter”, “Menu”, “Back”.
• The volume control buttons - “Make it louder”, “Make it quieter”, “Mute sound”
• Buttons for channel switching - “Next channel”, “Previous channel”
• Playback control buttons - Play, Stop, Pause, Wind Forward, Wind Back, Start Recording. Depending on the manufacturer, some buttons may be missing or be combined.
• Numeric keypad - numbers and letters drawn on them. Needed to simplify character input,
• Colored buttons - to simplify interaction with the pages. Some logic is hung on these buttons depending on the state of the current page.
• Switch on switch off
• Other custom buttons - buttons leading to specific pages of the application, ext. navigation control, and more.

How does the portal interact with the console?

When developing an application, you need to catch a button click and process it. Everything is quite simple here - pressing a button on the remote is treated like a normal keystroke. One difference - the key codes for each vendor are their own.

Bonus-track - on some boxes, the events “keyup” and “keydown” come at the same time. Therefore, if you want to do the processing of the clamping of the remote control key (there are such cases), think about the picture of crutches and bike.jpg

What we have?

Let's summarize a small intermediate result of this quick introductory:

• Boxing is a weak Linux based machine.
• When turned on, the box starts the browser, and therefore the application on the console is a web application in its essence.
• Work with boxing occurs via SSH or Telnet.
• Boxing provides API accessible from the browser for solving a wide range of tasks related to TV, audio / video files, and much more.

Thus, any prefix is ​​a low-performance platform with which you can solve tasks one way or another connected with TV. All the necessary tools for this in this platform.

It sounds good? - sounds great! However, in practice everything does not sound so good, and now we move on to the more interesting, second part of the article: Notes

Notes

I repeat - the prefix is ​​a computer with a sawn Linux, and the browser in which an additional API is screwed in, thanks to which most of the tasks facing the portal on the prefix become realizable.

For us, only the second part of this statement is important - box manufacturers finish browsers!

In the boxes, various browsers are installed, but Opera or webKit browsers are most common. As a result, browsers start to have a variety of bugs: memory leaks in unexpected places, partially inactive garbage collector, browser crashes as a result of the most common method call, drawing bugs, and much more.

Notes that are written below are subjective conclusions based on stuffed cones and rakes found. I really hope that they will be useful to you.

Go..

DOM operations

DOM operations are the hardest operations . On the console, it is very (!) Noticeable (literally).

If the number of DOM operations is not minimized, then there is a possibility:

• Get a very unpleasant effect - you'll see (literally) how the page is drawn. In fact, this is a Composite Layers, which works very slowly, and therefore the redrawing of the grid of the page can be seen with the naked eye (one sector of the grid is replaced after another, but not all at once).
• Spend a lot of time rendering the page.

The main problem arising from this is that the UX deteriorates significantly. I, as a user, want to press a button, and see the instantly opened page, without a mash from redrawn layers and waiting for 1-3 seconds. If I see it all the time - I will get unpleasant feelings from interaction with the portal. As a user, I first of all want to experience the pleasure of interacting with the application, and to think that I spent my money for a reason.

Dig a little deeper - What specifically needs to be mined?

It is necessary to minimize or eliminate:

• Bundling elements - let's be friends with document.createDocumentFragment ().
• Changing the style of elements - if you can design a page so that in a particular case (for example, moving elements) you can change the style of one or two elements instead of a whole pack of elements, you need to use it.
• Layout + redrawing the tree of elements. To understand what is at stake, I will give an example. For example, you have 3 layers (div) located next to each other. If you add a border of 1px to the first one, then all layers will be redrawn instead of one. This extra load can be eliminated by designing the page differently.
• Image resizing - if you take an image of 100x100 in size, and place it by setting it to 90x90, it will be an extra load on the browser (the browser will compress the image). If you make a catalog with a tile, where each element contains an image, it will be an extra load. If possible, pull the images you strictly need from the server, and do not overload the browser with unnecessary actions in this case.
• Animations . The prefix may allow you to add animation to the application, but only lightweight animation (scrolling a small list, menu, scrolling text). In other cases, the console does not have enough performance, and the animation will be jerky. You can forget about the animation of large page elements. There are two exceptions - canvas and CSS3 transformation. They work more or less (they do not significantly slow down, but not “60fps.” Let's call it tolerable), but this is an additional complexity in development.

We summarize. Recipes when working with DOM:

• Use document.createDocumentFragment - one operation with DOM is much more efficient than several (captain obvious again with you).
• Design the page with the minimum number of modifications to the DOM when interacting with the page.
• Use layout with absolutely positioned elements.
• Do not use images that do not fit you in size.
• Strive to eliminate the extra load on the browser.
• Strive not to use transparency - this causes the browser to do more calculations.
• Discard animations, or use canvas.

CSS

Without extra water, recipes for optimizing style sheets, and interacting with classes :

• Try not to use nesting more than one level - this is the load on the browser. If you make more nesting, when you change the markup, element classes or element styles, the browser will bypass much more nodes in order to generate an element style than with minimal nesting.
• Do not use heavy selectors.
• If you need to perform several operations (change the style of the element) that can not be combined - do them together in a row. The browser determines this and does not redraw (including does not recalculate styles) elements are extra n-times.

As a result, using CSS frameworks (for example, Bootstrap) is undesirable.

There is a great solution that gives a powerful performance boost - try to drop classes, and generate a layout with inline-styles (style tag). Perhaps there are even plugins for Gulp / Grunt.

A little about the support of CSS properties. Most boxes have WebKit, and a lot of CSS3 is supported. If you are developing an application not for one box, but for several at once, then I do not recommend using various new “buns”. It is possible that on one platform they will work perfectly, and on the second you will not get bugs.

Add specifics. What is often supported (from CSS3; the list is very incomplete, based on real cases, from memory):

• border-radius
• rgba
• linear-gradient
• text-overflow
• background-size
• Transformations
• Animations
• opacity
• box-shadow
• overflow-x
• overflow-y
• line-break
• word-wrap
• text-shadow
• @ font-face
• box-sizing
• text-overflow

Bugs

In addition to the usual bugs that may arise as a consequence of incorrectly programmed logic, boxing quite often can bazhit in not obvious places.

What are the bugs?

The most common bugs are related to the rendering of the page: the div's background was not drawn, the old background was not unloaded when the element was redrawn, while the transparent border is drawn, the browser ignores all the layers under it (you can see the background of the page), and many other bugs.

Rarely there are bugs in the engine: calling the native method brings down the browser, if the browser collapses in special conditions, iterating over the keys of the object takes place in an un- sorted form ( perhaps not a bug is not a bug: from gibson_dev “That's all and there are, in the sorted form, only arrays, and the construction for..in does not guarantee this ”), and other even rarer cases.

A separate group of bugs, these are vendor bugs: streams work crookedly, the file system is incorrectly read, answers are generated incorrectly when using the API, and much more.

The moral of the above is always to thoroughly check your solution on all platforms supported by you. If your solution works on one platform, then there is no guarantee that it will work on all your other platforms.

Memory leaks

A memory leak on the console can be out of nowhere. No examples, because there is no universal recipe for how to get around this.

The rule is simple - periodically run your application for memory leaks. If there are leaks, we are looking for from where, and close the “leak”.

Other

How is the application usually deployed (during development)?

There are few ways, and they are all simple. The whole deployment is to copy files from your machine to a folder on the box, or (even easier) to set up the console so that it pulls the source code not from your file system, but from the network (for example, from your local server).

I wrote about each method (as an instruction), but in order not to overload the article, everything is wrapped up in a spoiler.

Smart card

Boxes may have a smart card. I am not an expert in this field, so we read about it in Wikipedia .

In boxing, it can be present in two forms:

• External card - you need to independently stick it into a special entrance in the box.
• The integrated card is sewn inside the box, and in fact it is always “inserted” when the box is turned on.

I will not write anything more about this — not an expert, and I understand how it works only at the “touched-felt” level. I don't want to lie to you by accident.

Finish

Boxing (prefix) is an interesting platform, working with which you can gain experience on how to write the most productive applications. Moreover, tons of interesting tasks and bugs when working with this platform, you will be provided with iron.

If you like hardcore (in the good sense of the word) programming, single-page applications, and are looking for an invaluable experience that will be useful for you - try writing an application for the console.

PS

, - . , , .

, , - .

, — , .