Frequently asked questions

Archive filtered by ABOX42 Showcases

To remove filter keyword, click on it's name above.

GENERALQ: What are ABOX42 Showcases?

A: When we talk about ABOX42 showcases, we think of all the examples and tutorials you can find within the Chapters of the IDE, in the category Market Proven like the "Smart Solutions" or "Compliance examples".

 

M30Q: Is it possible to equip the onscreen keyboard with another language?

A: Our OnScreen Keyboard, which you might know from some examples, can be equipped with different languages. Try to change the language in the settings app to see it.

The standard languages that come with your Developer STB are:

- English
- German
- French
- Italian

Of course, others are possible as well. Please contact us in case you are looking for different languages.

Filter: M30

M30Q: How can I add a mask to show a video in my application?

A: You have to put the contents of your application inside of an SVG-container. After you've done that, you can add a mask on the container that cuts a hole into the background layer which contains the video. See the referring example in the IDE here: SVG Masked Video

Filter: HTML/CSS M30

M30Q: Is there an OnScreen Keyboard I can use for my application?

A: Yes, there is a software OnScreen Keyboard you can use. Please take a look at Chapter 6 or Chapter 7 to learn more about the OnScreen Keyboard.

Filter: HTML/CSS M30

M30Q: How do I create a simple digital signage app?

A: Combining existing elements/examples, Chapter X - Digital Signage shows you how to create a digital signage app that plays videos in a loop.

Filter: Digital Signage M30

M30Q: How do I combine a navigation and a video canvas?

A: Chapter V - Part 5 will show you how to combine the navigation and the video canvas, in order to get a simple app that plays videos from a list.

Filter: M30 UI Elements

M30Q: How do I create a navigation bar using the grid?

A: You can find a simple instruction on how to create a navigation bar using the grid in Chapter V - Part 4.

Filter: M30 UI Elements

M30Q: How do I show a player control bar when switching to fullscreen mode?

A: In case you need the player control bar to show up in fullscreen mode as well, take a look at Chapter V - Part 3 to see how this can be accomplished.

Filter: M30 UI Elements

M30Q: How do I add a player control bar to the video canvas?

A: How to add a player control bar to your video canvas is explained in Chapter V - Part 2 of the Developer IDE.

Please note that there is a hands-on video tutorial available in the IDE or on YouTube for this part - simply click on the link above.

Filter: M30 UI Elements

M30Q: How do I create a rectangular video canvas and play a video in it?

A: Take a look at Chapter IV - Part 4 or Chapter V - Part 1 to see how a video canvas gets created, so you can play a video in it.

Please note that there is a hands-on video tutorial available in the IDE or on YouTube for these parts - simply click on one of the links above.

Filter: M30 UI Elements

M30Q: How do I add a simple debugging?

A: We explain how to add a simple debugging to your application in Chapter I - Part 2.

Filter: HTML/CSS M30 Resources

M30Q: How do I copy a checkbox to the middle of the page?

A: There is an instruction on how to copy the checkboxes from the "UI Elements" in Chapter VI - Part 5. Take a look at it now.

Filter: M30 UI Elements

M30Q: How do I copy a radio button to the middle of the page?

A: See Chapter VI - Part 4 to learn how to copy radio buttons form the "UI Elements".

Filter: M30 UI Elements

M30Q: How do I create an input field with keyboard?

A: Take a look at Chapter VI - Part 1 in the Developer IDE to see how to create an input field with keyboard.

Filter: M30 UI Elements

M30Q: How can I play content from a USB storage device?

A: Take a look at Chapter XI - Part 4 to see how to create an application that lets you play content from a USB storage device connected to the Smart STB.

Filter: M30 OTT Smart STB Storage

M30Q: How does the “stop” event work when I am using the HTML5 video object?

A: There is no stop event defined in HTML5, you can only pause the video. The video automatically stops when a different page gets loaded because the html5 object gets unloaded:



Download this example to see how to use the PAUSE button to pause/resume the video.

Filter: HTML5 M30

M30Q: How can I enable the navigation on a grid?

A: Please take a look at Chapter 4 - Part 3 to learn how to enable the navigation on a grid.

Please note that there is a hands-on video tutorial available in the IDE or on YouTube for this part - simply click on the link above.

Filter: M30 UI Elements

M30Q: How do I change the page content when selecting a menu item?

A: For each item in the menu bar you can specifically show content. Learn how to do that in Chapter VIII - Part 4.

Filter: M30 UI Elements

M30Q: How can I combine a navigation bar and a player bar?

A: We show you how to combine the 2 elements "navigation bar" and "player control bar" in Chapter 8 - Part 10 of the Developer IDE.

Filter: M30 UI Elements

M30Q: How does the player control bar in the “VOD Library” example work?

A: How the player control bar like in the "VOD Library" works is explained in Chapter VIII - Part 6.

Filter: M30 UI Elements

M30Q: How do I hide the upper lines of the grid when scrolling?

A: When scrolling down in the "UI Elements: Grid (without hiding)", the upper line is displayed half way. This can be changed by adding the "hiding" attribute for the upper line. See how it works in the Developer IDE.

Filter: M30 UI Elements

M30Q: How do I create a navigation bar like in the “VOD Library” example?

A: Please take a look at Chapter VIII - Part 3 where we explain how to create a navigation bar like in the "VOD Library" example.

Filter: M30 UI Elements

M30Q: How can I create a grid to display content?

A: We have 2 different grids you might want to take a closer look at:

1. Chapter VIII - Part 1:  The default grid: none of the elements in grid are hidden when scrolling.

2. Chapter VIII - Part 2: Elements are hidden when leaving the grid while scrolling - Grid with attribute: hiding.

Filter: M30 UI Elements

M30Q: How do the select boxes in the “UI Examples” work?

A: Please find a detailed instruction on how to work with the select boxes of the "UI Elements" in Chapter IV - Part 7. There is also a screencast available now.

Filter: M30 UI Elements

M30Q: How do I implement a multi-page description?

A: There is an instruction for this question, which can be found in Chapter VIII - Part 8.

Filter: M30 OTT UI Elements

M30Q: Is there an example for a Video-On-Demand (VOD) application?

A: Yes, we have an example of a VOD application in the Developer IDE, which is located here: Chapter VIII - Media Player for Experts There is also a direct link filed under "Market Proven" in the Developer IDE: Smart Solutions - Web Browser runtime.

Filter: M30 OTT UI Elements Web Browser runtime

M30Q: How does the table in the “UI Elements” example work?

A: This is an advanced table that also provides a fluent and enhanced navigation. Take a look at the description of this example in Chapter IV - Part 12

Filter: M20 UI Elements

M30Q: How does the light box in the “UI Elements” example work?

A: The light box is a stylish enhancement in case you are working with images. We prepared a description on how to use it inChapter IV - Part 11.

Filter: M30 UI Elements

M30Q: Using media.play does not work, what am I doing wrong?

A: Before you can use media.play you will have to initialize the media and display object, using the following functions:



It might be that you have a non-transparent background. Please set the background to transparent. It might also be that the screen is hidden by a HTML object. You can set the opacity to 0.5 for these objects. For example, you can set the the opacity of the body tag to opacity:0.5:



so the video will shine through. Then you will be able to find out if the video is really played on the device. If it is, you will have to change something about your HTML. Otherwise, try to find out why media.play does not work.

Filter: JS-API M30 media class API

M30Q: How can I store data on the box?

A: There are several possibilities:

Cookies are best when you want to store litte data (e.g. session keys).

Storage via HTML5 LocalStorage is also available.

- Storage via local SQLite database is another possibility you should look at.

- Play content from a USB storage device.

Filter: JS-API M30 media class API

M30Q: How do I initialize JS-API objects correctly?

A: "Part 5" of Chapter III will show you how to initialize JS-API objects correctly.

Filter: Hello World JS-API M30

M30Q: What is the key event handler and how do I use it?

A: The key event handler is explained Chapter IV - Part 1. Take a look at the tab called "handleKeyCode" to understand how to use it.

Filter: M30 UI Elements

M30Q: How do the radio and normal check boxes in the “UI Elements” examples work?

A: We prepared a description on how to handle the check boxes. You can find it in "Chapter 4 - Part 8".

Filter: M30 UI Elements

M30Q: What is the key event handler and how do I use it?

A: The key event handler is explained Chapter IV - Part 1. Take a look at the tab called "handleKeyCode" to understand how to use it.

Filter: M30 UI Elements

M30Q: How do the popups in the “UI Elements” examples work?

A: Go ahead and take a look at Chapter 4 - Part 9 and you will find sufficient information on how the popups work.

Filter: M30 UI Elements

M30Q: How can I enhance the UI of my application?

A: We prepared some examples, called "UI Examples" with different button sets, menu items and so forth in the Developer IDE. Take a look at "Chapter IV - UI Elements" now.

Note: These examples are best viewed directly on the box. To do so, go to each part and start the application by pressing on "View on Box".

Filter: JS-API M30 UI Elements

M30Q: How do I load HTML pages using a navigation?

A: How to load HTML pages by using a navigation is explained on this page.

Filter: HTML/CSS M30

M30Q: How do I navigate and load HTML pages in PHP?

A: We explain how to navigate and load HTML pages in PHP in this example. Please take a look at it.

Filter: HTML/CSS M30

M30Q: How do I modify the HTML navigation to load PHP?

A: Please take a look at this example we created for this question.

Filter: HTML/CSS M30

M30Q: Is mpeg Dash supported?

A: Yes, mpeg DASH is supported by the Smart STB. Please take a look at the 2017 mpeg-DASH reference stream on the compliance page in the Developer IDE for M30.

Filter: latest M20 mpeg-DASH

M30Q: How do I preload helloworld.png?

A: Take a look at Chapter III - Part 7 to get an answer to your question.

Filter: Hello World HTML/CSS M30

M30Q: How do I add links with onclick media events?

A: We prepared an example for this question - Chapter III - Part 6 provides an answer to your question.

Filter: Hello World JS-API M30

M30Q: How do I initialize JS-API objects correctly?

A: "Part 5" of Chapter III will show you how to initialize JS-API objects correctly.

Filter: Hello World JS-API M30

M30Q: How do I use HTML5 to play a video inside the transparent area?

A: To complete Chapter II a HTML5 video object will be displayed inside the transparent area. See "Part 5" for details.

Filter: Hello World HTML5 M30

M30Q: How do I create a safe area around the “Hello World” app?

A: The answer to this question is part of Chapter II. Go ahead and take a look at "Part 2".

Filter: Hello World HTML/CSS M30

M30Q: How can I create a simple “Hello World” app?

A: "Chapter II - Hello World with HTML5 video object" provides an answer to this question. A simple instruction for your first application. In "Chapter III - Hello World with JS-API video object" you learn how to use the JavaScript API to play videos instead of the HTML5 video object.

Filter: Hello World HTML5 JS-API M30

M30Q: Can I work with media queries for my layout?

A: Yes, you can. The browser gives an output of 720p (1280x720px) to the screen.

So you can add "@media only screen and (width: 1280px) and (height: 720px){[...]}" to your other queries in the CSS file and define special layout options for the box. See also Chapter I - Part 5.

Filter: M30

M30Q: Can the box handle the SVG (Scalable Vector Graphics) format?

A: Yes, SVG is supported. Please take a look at this example in the Developer IDE: "Compliance - Web Browser runtime"

Filter: M30 Smart Solutions Web Browser runtime

M30Q: Can I use the HTML5 canvas functionality on the box?

A: Yes, HTML5 canvas is supported as specified in the HTML5 standard. See also Chapter I - Part 4

Filter: HTML5 M30

M30Q: Where can I find demo applications?

A: Simply start all the application filed under "Market Proven" in the Developer IDE, directly on the box. Make sure to enter your network settings correctly in the IDE.

screenshot IDE network settings 1-1

Filter: M30 Smart Solutions

M30Q: Using media.play does not work, what am I doing wrong?

A: Before you can use media.play you will have to initialize the media and display object, using the following functions:



It might be that you have a non-transparent background. Please set the background to transparent. It might also be that the screen is hidden by a HTML object. You can set the opacity to 0.5 for these objects. For example, you can set the the opacity of the body tag to opacity:0.5:



so the video will shine through. Then you will be able to find out if the video is really played on the device. If it is, you will have to change something about your HTML. Otherwise, try to find out why media.play does not work.

Filter: JS-API M30 media class API

M30Q: I am getting javascript errors in my browser, but on the abox everything’s working fine. What could be the reason for this ?

A: When you initialize the media and display object (using new tv2_stb_media(); and new tv2_stb_display();) you will have to make sure that these objects are defined, because they do not exist in the scope of a normal browser. However, they exist when running the script on the device. So make sure that you check if the types of tv2_stb_display and tv2_stb_media are not undefined. Moreover, every call to media should either be caught using a try catch block or before making a call to media or stb_display, make sure that the object exists, otherwise the browser will error.

Filter: M30 Web Browser runtime

M30Q: I am trying to request a URL on our server using an ajax function (XMLHttpRequestObject), but all I get is an error. Why ?

A: You can only create requests to the server where the javascript for the ajax request is located. In order to create requests to a different domain, use CURL, which you can then call by your ajax function in order to retrieve the content which is located on a different server:



(replace the ajax function through your own)

Filter: M30 Web Development

M30Q: What is “gridJS”?

A: "gridJS" is a javascript library which makes it easy to setup horizontal and vertical navigations for HTML lists, solving the difficulties a regular browser might have with cursor key navigation in HTML. It provides hooks for different use cases. Take a look at Chapter IV - Part 1 to see an introduction to gridJS.

Filter: JS-API M30

M30Q: What is the best way to learn about the gridJS library that you are offering?

A: The "gridJS" library is located in "ceScript", but if you have not used it before, we recommend to take a look at the RSS Channel Template. It contains a simplified version of the grid, called "demogrid.js". It is completely commented and does not contain any heavy math.

M30: RSS Channel Template

In Addition, we offer more information and an introduction to gridJS as well as it's extended functionality in Chapter IV - Part 1. Please pay attention to the different tabs of this part.

Filter: JS-API M30 Resources summary

M30Q: The gridJS library is very large – what are the functions that I am going to need to use ?

A: You do not need to use the library to its full extent. These are the functions which are mainly used:

init – you must call this, and in the callback handler mostly calls to “gridJS.element” are made (and calls for selection)

element – make one call for every <ul> element you want to create a grid on

use – select a different <ul> element

sel – select a different <li> element

navigate – use this from your handleKeyCode function to forward cursor up, down, left and right presses to the grid

Filter: M30 Web Development

M30Q: What is the difference between sel and forceSel ?

A: forceSel allows you to select a different <ul> element and making a <li> selection of the newly selected element, while sel keeps the selection on the current <ul> element active and only selects a different <li> element.

Filter: M30

M30Q: What is the difference between gridJS.use and gridJS.sel ?

A: "gridJS.use" is for selecting different elements (<ul> items). You can call "gridJS.use" with the id of the <ul> element, or use "gridJS.use(0)" to select the first element, "gridJSu.use(1)" to select the second etc., whereby the order is the order in which  the elements got initialized. Whereas "gridJS.use" is used for the <ul> elements, you can call "gridJS.sel" to change the selection of the <li> elements, which are contained inside the currently selected <ul> element. For example, to select the second <li> element simply call gridJS.sel(1); (and to select the first <ul> element with the id “navigation” use gridJS.forceSel(“navigation”, 0);

Filter: M30 Web Development

M30Q: Do I always have to call the grid with the same id and name?

For example you are using this to call the grid:

A: No. Although we recommend it for simplicity, the first 'mainmenu' is the id of the <ul> element you want to call the grid on.  This id must exist. The second appearance is used in connection with calling "gridJS.use" and can be any name you like - as long as you use it for "gridJS.use ..." for example, you cannot use "gridJS.element("mainmenu")" when you have given it a different name (the name must be the same - use "gridJS.use("mainmenu")" when you have given it the name "mainmenu").

Filter: M30

M30Q: At what position does the index start when using gridJS.use(number) instead of gridJS.use(ul_id) ?

A: Besides calling gridJS.use("id_of_ul_element") it is also possible to call "gridJS.use" with an integer index. The index is the order in which "gridJS.element" got called - the first initialized element has the index 0.

Filter: M30

M30Q: What parameters and subfunctionality will be used when initializing the grid using gridJS.element ?



gridJS.use('different_panel'): You can have several HTML <ul> boxes with different <li> elements. Selects a different <ul> element. Have a look at the question "What do the parameters mean which get used when calling gridJS.element?" for details on this.

gridJS.doit('action'): Executes the action tag of the currently selected list element. This makes it possible to scroll over different list elements and when the user presses OK ("VK_ENTER"), different functionality can get called depending on what list item is currently selected.

gridJS.doitHover('hoveraction', 1): Makes it possible to call something right when a list item (<li>) gets selected. After 1ms (immediately), evaluates the javascript in the "hoveraction" attribute of the newly selected list item.

Filter: JS-API M30

M30Q: What do the parameters mean which get used when calling gridJS.element ?

"name"
Provide a name you would like to use when calling gridJS.use

"type"
Provide the direction of the selection (so the up/down/left/right cursor keys have different actions): vertical or horizontal

"is_moveable"
If enabled, the element is scrollable, otherwise the selection goes out of range and is not displayed (when there are too many items in the element)

"border"
Different action depending on the direction which is provided here. Gets called when the currently selected item is the first or last item in the selection. In this case, the element "scroll_panel" gets selected when the last item was selected and the user presses cursor right. There must be no further item inside this element which could get selected. If the direction was "LEFT", you could specify the action for when the first item inside the element was selected and the user presses the cursor left button.

"key"
Here you can specify special keys which get called when the user presses that button. In this case, the function doit gets called, which evaluates the action attribute of the currently selected <li> element. Keys which you define here must be forwarded from your keycode handler (i.e. function handleKeyCode):



"enterlastitem"
Different from what its name might suggest, enterlastitem defines if the previously selected item should get selected again (after an element was previously focused, lost its focus and gets focused again). If set to false, when the selection appears, always the first <li> item is selected (except if you give it a different selection using gridJS.sel).

"callback"
Called after element has finished

Filter: JS-API M30

M30Q: How do I create an index page?

Build your own index page: If you have multiple apps or you want to access multiple URLs, you can set up a simple index page linking to those apps or URLs. Find detailed instructions on our Step by Step page. Click on the tab labeled "Step 4: Your technical evaluation" and scroll down to "Create your own index page".

Filter: M30 Web Browser runtime Web Server runtime

M30Q: How are Cookies handled on the box?

A: Take a look at our example in the IDE to see how to handle cookies correctly. In addition, you can take a look at the documentation of this example filed under Chapter XI - Storage.

Filter: M30 Storage

M30Q: How do I store something locally using a database?

A: We suggest to use a database called with the PHP API for read / write actions to avoid system damage. Especially the risk of damaging the flash memory will be decreased by that approach. For the the control of the maximum sizing, the application is responsible itself, so without a careful handling of (especially writing) persistence data, an application can run the system in a deadlock situation as it could be possible with a "regular PC".

Regarding the interaction with the browser, it is necessary to read / write the data in the following way:

a. php with database as "server" - locally running with localhost.

b. Ajax calls against the localhost, so the application in the browser has a fully supported persistent layer on the box.

Local Storage Example...

Filter: M30 Storage Web Server runtime

M30Q: How can I store data on the box?

A: There are several possibilities:

Cookies are best when you want to store litte data (e.g. session keys).

Storage via HTML5 LocalStorage is also available.

- Storage via local SQLite database is another possibility you should look at.

Filter: HTML5 M30 Storage Web Browser runtime Web Server runtime

M30Q: Can I use HTML5 local storage?

A: Yes, this feature is supported by the browser. Take a look at our IDE example and read the documentation filed under Chapter XI - Storage.

Filter: M30 Storage

M30Q: I found a bug in the code. Where can I report?

A: You can always report everything here.

Filter: M30 summary

M30Q: Does the box support HLS (HTTP Live Streaming)?

A: Yes, the box does supports HLS. We prepared an example called "TV Channelswitcher" for this reason. You can find it on the "Smart Solutions" page in the "Market proven" category of the Developer IDE.

Note: In case the streams won't start playing, you might be blocked due to geo-IP check-up.

Filter: HLS M30

M30Q: Is there an example for a screensaver?

A: You are probably familiar with the screensaver used for the "Developer Standard" brand already. In case you are looking for something visually more attractive, take a look at this example screensaver we offer.

Filter: M30 Web Browser runtime

M30Q: Can I launch the Updater application from within the IDE?

A: Yes, you can launch the Updater application on your Smart STB from within the IDE. Please visit this page to do so. Remember to set your box's IP address correctly in the IDE.

Filter: M30 Web Server runtime

M30Q: Where can I find an overview of the UI Elements?

A: Here is an overview of the UI Elements and other templates used in our examples and "Smart Solutions": UI Elements Index

Filter: HTML/CSS HTML5/CSS3 JS-API M30 UI Elements Web Technology

M30Q: Is it possible to disable the screensaver?

A: Yes, you can use the JS-API call "enableScreensaver()" to "turn off" the screensaver. There is an example code available in the API documentation which is best used in your own application. This makes sure the screensaver won't get activated while your application is running.

Filter: common class API JS-API M30

M30Q: Are teletext subtitles supported by the platform?

A: Yes, teletext subtitles are supported by the platform. Please take a look at Chapter XXI - IPTV package 1 and view this example on the box. When the teletext is shown, please enter 888 on your RCU to show teletext subtitles for the running stream.

Filter: IPTV JS-API M30 tsstack1 class API

M30Q: How do I initialize ul elements with $.fn.grid.element when using gridJS?

A: You will find an introduction including a screencast (video tutorial) that shows you how to initialize ul elements with $.fn.grid.element in Chapter IV - Part 2.

Filter: M30 UI Elements Web Technology

M30Q: How can I start my service over a TV channel like Red Button does?

A: Take a look at how to load a web app from a remote server while your video stream is running - similar to the Red Button you might already know from conventional TV.

Filter: IPTV JS-API M30 Web Technology

M30Q: How does the Soft RCU in the Developer IDE work?

A: The Soft RCU is working with the Rest-API provided by the ABOX42 Smart SDK. You can also find another application working in the same way in Chapter XIV - How the Smart SDK enables the Cloud Connection. The Smart RCU in Part 1 of this chapter enables you to control the box with, for example, your smartphone. Further information regarding this topic can also be found in Chapter XV - Mobile Toolkit.

Filter: companion device IDE M30 Mobile Toolkit REST-API Second Screen Smart RCU Smart SDK Web Browser runtime

M30Q: How can I create my own Speed Check application?

A: On every developer unit you will find the ABOX42 Speed Check. In case you are looking for your own, branded speed check, take a look at what we have to offer on our Smart Solutions - Web Server Runtime page. Choose "My Own Speed Check" and download the zip file provided there. Upload it to your Smart STB and test it right away. With some adjustments you can easily brand this application according to your product/corporate identity.

In addition, there is a complete description of the speed check app's code in Chapter XXV - Speed Check. You can either run this application locally or in the cloud.

Filter: common class API HTML/CSS JS-API M30 Smart Solutions Web Server runtime

M30Q: How can I create my own settings app?

A: We've recently received several requests asking whether it is possible to create an own settings application. Therefore, we have created Chapter XXIII in the Developer IDE that shows you how our settings app was built and thereby provides you the information needed to create your very own.

We split up the different tabs like "System information", "Audio & Video", "Network" and so forth into individual parts which should make it easier for you to find your way along. The chapter is not fully completed yet, but we'll take care of that within the next two weeks. Nevertheless, the full application is already available for download in the "Resources" section of the summary page.

Filter: JS-API M30 Smart SDK

M30Q: How does the initialization work when creating my own settings app?

A: The first part of Chapter XXIII gives you an introduction and explains the very basics of the settings application. We recommend to take this step in order to get the full picture and as a preparation for the following parts.

Filter: JS-API M30 Smart SDK

M30Q: How do I distinguish between keys that use the same key code?

A: There are several keys that share a key code. We prepared a key code test for you to test it. The main difference though is the event triggered by the "fn" button beforehand. Monitor this event to prevent difficulties.

Launch the following URL on the box (via the IDE): http://m20-webkit.workbench.abox42.com/showcases/shared_key_codes/

Filter: M30 Smart STB

M30Q: How do I setup the System Information in my settings app?

A: In Chapter XXIII - Part 2 we explain how the "System Information" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: JS-API M30 Smart SDK Smart STB

M30Q: How do I setup the Time & Language tab in my settings app?

A: In Chapter XXIII - Part 3 we explain how the "Time & Language" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: JS-API M30 Smart SDK Smart STB

M30Q: How do I setup the Audio & Video tab in my settings app?

A: In Chapter XXIII - Part 4 we explain how the "Audio & Video" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: JS-API M30 Smart SDK Smart STB

M30Q: How do I setup the Network tab in my settings app?

A: In Chapter XXIII - Part 5 we explain how the "Network" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: JS-API M30 Smart SDK Smart STB

M30Q: How do I setup the Reset tab in my settings app?

A: In Chapter XXIII - Part 6 we explain how the "Reset" tab is built up and what it takes to make it work correctly. Feel free to explore the information given in the code tab of this part.

Filter: JS-API M30 Smart SDK Smart STB

M30Q: Is multi-audio supported by the platform?

A: Yes, the platform supports multi-audio. Please see Chapter XXII - IPTV package 2 for details and a sample application where you can insert your own multi-audio stream URL.

Filter: IPTV JS-API M30 Smart SDK

M30Q: How does the .m3u8 playlist has to look like for HLS streams with multiple audio tracks?

A: There is an example for an .m3u8 playlist on the summary page of Chapter XXII. Please take a closer look at it to get an idea how it is built up.

Filter: HLS IPTV M30 Web Technology

M30Q: There is no stream running when I start the example from Chapter 22 – IPTV package 2. What do I have to do to make it work?

A: As you might have noticed when looking at the IPTV application we offer in Chapter 22 - IPTV package 2, the first channel in the list is "My Channel". This is where your own stream should be running, all other channels work. There is a description available in Chapter 22 - Part 1 which shows you where to put your stream URL in order to make it work.

Filter: IPTV M30 Web Technology

M30Q: How do I create a speed check application in the cloud?

A: We already explained how the speed check application that runs locally on the Smart STB works. In Chapter XXV - Speed Check you will find an application that you can also run in the cloud. This provides the possibility to fully customize and brand your speed check application.

Filter: JS-API M30 Web Browser runtime Web Technology

M30Q: Is there a detailed description of the template used for the speed check app?

A: In case you need a detailed description of the template which is used for the Speed Check application in the cloud, take a look at Chapter XXV - Part 1, you will find all you need to know.

Filter: JS-API M30 Web Browser runtime Web Technology

M30Q: What do I have to do to carry through a ping test in the speed check app?

A: Go to Chapter XXV - Part 2 to see how to carry through a ping test in your speed check application in the cloud.

Filter: JS-API M30 Web Browser runtime Web Technology

M30Q: What do I have to do to measure the download speed of a file in the speed check app?

A: In Chapter XXV - Part 3 we explain how to measure the download speed of a file in the speed check application in details. Go ahead and take a look at it now.

Filter: JS-API M30 Web Browser runtime Web Technology

M30Q: How do I create a proper result message in the speed check app?

A: When the speed check app actually has some result to display, you will have to create a proper result message. In the last part of Chapter XXV (Part 4) you will find an example of how we do it.

Filter: JS-API M30 Web Browser runtime Web Technology

M30Q: When does the media player runtime switch the quality of the currently playing stream?

A: There are several cases in which the player will switch the bandwidth:

1. Normally, the player calculates the currently available bitrate it receives. After downloading a couple of chunks it comes up with the total download time and data size accordingly. If the calculated bitrate is much lower than the selected bandwidth, it will decide to switch to a lower quality.

2. When the player tries to download a chunk and does not receive any data anymore (meaning that it may not receive the whole chunk or the forecast that downloads the next chunk - this might cause A/V stuttering), the player will stop to download the current chunk and automatically switches to the lower quality.

3. Let's say the current bandwidth is ok, but there is something wrong with the segment/playlist. In this case the player will switch to another quality to avoid a dead lock. For example, the current bandwidth is 5M/bit and there is a playlist for it, but the playlist is unreachable due to an encoder error. The player then tries to load this playlist first and in case it fails it will automatically switch to the lower quality.

Go to My Own Video – Media Player runtime to start your stream on the box and get the bitrate information and other meta data now.

Filter: HLS IPTV M30 Media Player runtime

M30Q: Which standards are supported by the platform in regards to multiple audio streams?

A: The platform supports multi audio for HLS and transport streams. In transport streams the audio is changed by setting the audio PID via the JS-API. The available pids can be retrieved with getAudioPIDs(). In the JS-API you will find the right calls to set or get the audio PID(s) of your transport stream. We prepared an example for this case which you can run directly on your Smart STB from within the IDE.

For HLS it's slightly different. The .m3u8 playlist provides the info on the audio settings available. It has to be built in a certain way which we explain in Chapter 22 - Part 1. The media player runtime then provides the functionality to switch the audio via the play() call of the JS-API in combination with set/getConfig. In the case of HLS with multi audio, we also offer an IPTV example in the Developer IDE that shows you how the .m3u8 playlist has to look like and beyond provides a fully working IPTV application example.

Filter: HLS IPTV M30 Media Player runtime

M30Q: Is there a description of the functionality contained in the “IPTV Example in 3 days”?

A: Yes, we prepared several screencasts for that cause - one for each part. They are available in the Developer IDE, Chapter XX - IPTV Example in 3 days or directly on our YouTube channel.

Filter: HbbTV IPTV JS-API M30 tsstack1 class API Web Technology

M30Q: How can I find out the URL of the media currently shown on the box?

A: In "Market Proven" you will find "My Own Video - Media Player runtime" where you can play any video URL. In case you want to find out the URL of a video that is currently playing, use the "Get current URL" feature to retrieve the URL you are looking for.

Filter: JS-API M20 Media Player runtime REST-API

M30Q: How does the Network error page application work?

When redirecting to a different page, there is the possibility that a 404 error occurs. In Chapter XXVII we show you how the application works which handles such use cases.

Filter: M30 Web Development Web Server runtime

M30Q: How does the IPTV package 3 work and what are the main features?

A: The main feature of IPTV package 3 is the support of DVB subtitles. You can launch or download the application on the summary page of Chapter XXVI. The main differences to the other IPTV packages are described in Part 1.

Filter: HTML5/CSS3 IPTV JS-API M30 tsstack3 class API

M30Q: How do I use the browser tabs to achieve a DVB-like Red Button experience?

A: In Chapter XXVIII - Red Button, we show you how to use the browser tabs to achieve a DVB-like experience. You can download the source code on the summary page, Part 1 shows you how it works.

Filter: HbbTV IPTV M30 Web Browser runtime

M30Q: Where does showRedButton() get called and how does it work?

A: This is explained in part 3 of Chapter 28 - Red Button. It teaches you how to open a red button app inside a tab in detail.

Filter: HbbTV IPTV M30 Web Browser runtime

M30Q: How do I check if stopping a video and returning from the red button really restarts the original video?

A: This question rounds up chapter 28 and helps you complete the last step towards your red button application in a browser tab. Take a look at Part 4 now.

Filter: HbbTV IPTV M30 Web Browser runtime

M30Q: How do I copy a select box to the top of the page?

A: In Chapter VI - Part 2 you can find an instruction on how to copy select boxes. Go ahead and take a look at the tutorial video now.

Filter: M30 UI Elements

M30Q: Is sliding window supported by the platform?

A: Yes, the sliding window feature is supported by the platform. There is a separate chapter in the IDE which handles the topic of the sliding window and also provides an example for you to download.

Filter: JS-API M30 Media Player runtime

M30Q: What is the basic idea of the sliding window application and what are the variables used in the example?

A: In Chapter XXIX - Sliding Window you can find all the information you need and in Part 1, the basic idea and the variables are explained in details.

Filter: JS-API M30 Media Player runtime

M30Q: How do I copy a button to the middle of the page?

In Chapter VI - Part 3 we show you how to copy a button to the middle of the page when working with UI Elements. There is a screencast available on YouTube for this part now. Go check it out.

Filter: HTML/CSS M30 UI Elements

M30Q: How can I achieve a split screen for the TV stream and the teletext?

A: For most users, it is standard usage to have the teletext and the actual TV image in a split screen. When combining standard teletext and an IPTV stream in an application on the Smart STB, this functionality needs to get implemented. Chapter XXXIV - Splitscreen for Teletext shows you how to do exactly that - as usual with a documentation and code sample for you to download or you can start it on your Smart STB from within the IDE in the well known manner.

Filter: HTML/CSS IPTV M30

M30Q: What commands are unique for changing the video dimensions in a TV/Teletext split screen?

A: The second part of Chapter XXXIV - Splitscreen for Teletext gives you a detailed description what commands are needed to achieve a split screen view. As usual, Part 2 also includes a code documentation and a code sample for you to download. This part is needed to complete chapter 34.

Filter: HTML/CSS IPTV M30

M30Q: How does the horizontal navigation in the IPTV example work?

A: Please take a look at Chapter XX - Part 5 to see how the horizontal navigation works. We also provide a hands-on screencast that shows you how to do it.

Filter: HTML/CSS IPTV M30

M30Q: How does dvb_use_channellist in the IPTV Example work?

A: Please take a look at Chapter XX - Part 6 to see how to use dvb_use_channellist. We also provide a hands-on screencast that shows you how to do it.

Filter: HTML/CSS IPTV M30

M30Q: How does the localization in the IPTV Example work?

A: A: Please take a look at Chapter XX - Part 7 to see how the localization works. We also provide a hands-on screencast that shows you how to do it.

Filter: HTML/CSS IPTV M30

M30Q: What do the key handlers and variable names in the IPTV Example mean?

A: A: Please take a look at Chapter XX - Part 8 to see what the key handlers and variable names mean. We also provide a hands-on screencast that shows you how to do it.

Filter: HTML/CSS IPTV M30

M30Q: How do I play and record video streams on an external storage device?

A: In Chapter XXXVI - PVR we show you how to play and record video streams on an external storage device, for example a USB stick. Chapter 36, Part 1 is the one you want to start with. Go ahead and take a closer look.

Filter: M30 Recording class API Storage class API

M30Q: Is it possible to set the DRM type of my stream with the setconfig() call?

A: The setconfig() call provided by the ABOX42 JS-API provides several possibilities to manipulate the playout. For example, you can set the DRM type to enable the streaming of your encrypted content. Take a look at the JS-API documentation in the Developer IDE.

Filter: HLS JS-API M30 media class API Media Player runtime

M30Q: How do I check if installing a new version really works in the App Installer?

A: In Chapter XXIV - App Installer, Part 5 you will find an instruction that shows you how to check whether installing a new version actually works by comparing the files that got installed with the existing ones.

Filter: JS-API M30 Web Browser runtime Web Server runtime

M30Q: What are the 2 different update modes in the App Installer?

A: In Chapter XXIV - App Installer, Part 6 you can learn about the two different update modes of the App Installer application. This part concludes Chapter XXIV - App Installer.

Filter: JS-API M30 Web Browser runtime Web Server runtime

M30Q: How does the event listener work?

A: The Smart STB is able to make calls to a function according to the state of the video, which means it’s able to listen to occurring events. In Chapter XXXIX - Event listener and parameters we describe how to use the event listener correctly.

Filter: M30 Media Player runtime Resources Web Technology

M30Q: Is there an example for a virtual RCU?

A: In case you are looking for extended functionality for your users, you might want to think about implementing a virtual RCU as you can find it in the Developer IDE. Simply click on the RCU icon next to the settings button (gear wheel) of the Developer IDE.
settings and soft rcu button IDE
Please contact us for details.

Filter: M30 Smart RCU

M30Q: How does the Digital Signage App in chapter XL work?

A: We provide more information, including a complete documentation, in the Developer IDE. In Chapter XL - Digital Signage 2, Part 1 we give a detailed insight on how the application works.

Filter: Digital Signage M30 Web Browser runtime Web Server runtime

M30Q: How does the downloader of the Digital Signage app work?

A: In order to have some content to play out, you will have to make the application download it from a server. How you accomplish that is explained in Part 2 of Chapter XL - Digital Signage 2 in the Developer IDE.

Filter: Digital Signage M30 Web Browser runtime Web Server runtime

M30How does the viewer of the Digital Signage app work?

A: Once the content got downloaded to your external storage device, you have to enable the application to actually play the content. Part 3 of Chapter XL will show you how to do that. Make sure to check it in the Developer IDE.

Filter: Digital Signage M30 Web Browser runtime Web Server runtime

M30Q: How does the storage tool of the Digital Signage app work?

A: The Digital Signage application in Chapter XL uses a storage tool. What it is and what is does is explained in Part 4 of the chapter. You can find this information in the Developer IDE.

Filter: Digital Signage M30 Web Browser runtime Web Server runtime

M30Q: What is the configuration file of the Digital Signage app good for?

A: The digital signage application in Chapter XL needs a configuration file which sort of represents the settings of this application. To see what the file contains and how you can modify it, take a look at Part 5.

Filter: Digital Signage M30 Web Browser runtime Web Server runtime

M30Q: How can I visualize the events and the bitrate of the media player?

A: The event log and the bitrate provided by the media player runtime can be used to create a visualization of the state and performance of a playing stream. In Chapter XLI - Bitrate and Event Log in the Developer IDE, you'll get all the information you need.

Filter: latest M30 Media Player runtime

M30Q: How can I show stats about the bitrate and events?

A: The stats about the bitrate and events are the basis for their visualization. The application is divided into several files which hold the different functions. Those files are explained in detail in Part 1 of Chapter XLI.

Filter: latest M30 Media Player runtime

M30Q: Why doesn’t the event handler process the first event when the screensaver is active?

A: Please be aware that when the screensaver is active, the first key event is not processed by the eventhandler because it deactivates the screensaver first. You can find more info about the screensaver related API calls here.

Filter: latest M30 Web Browser runtime

M30Q: How do I store the events provided by the Media Player runtime?

A: In the example of "Chapter XLI - Bitrate and Event Log" all our events are stored in a database, which is a sqlite3 database. Those events are used for the visualization later on. Learn how the events are stored in Part 2 of this chapter.

Filter: latest M30 Media Player runtime

M30Q: How do I visualize the media player events to show a diagram?

A: As you might have learned in the previous parts, all the events are stored in a database. Part 3 of Chapter XLI now shows you how to use these events to actually show them in a diagram. All details are documented - take a look at it now.

Filter: latest M30 Media Player runtime

M30Q: Is there a reference stream available for mpeg-DASH?

A: Yes, please take a look at the 2017 mpeg-DASH reference stream on the compliance page.

Filter: latest M20 mpeg-DASH

M30Q: Does the platform support “Swipe to TV”?

A: Yes, Swipe to TV is available for the M30 platform. In Chapter XLIV we show you how to pair second screen applications to a first screen application utilizing the ABOX42 Smart Set-Top Box Platform.

Filter: ABOX42 Platforms JS-API latest M30 Smart Solutions

M30Q: Is there an application example for the Swipe to TV feature?

A: In a dedicated chapter of the Developer IDE we show how to pair second screen applications to a first screen application utilizing the ABOX42 Smart Set-Top Box Platform. After the pairing is done the applications can exchange data and one real world example is opening the content you are currently watching on your smartphone directly to the TV screen. You can find the resources to download at the bottom of the summary page.

Filter: ABOX42 Platforms JS-API latest M30 Smart Solutions