This topic is an introduction to developing Web applications for SSSP. It describes how to get started with the Samsung Smart Signage SDK, the characteristics and structure of SSSP Web applications, some useful APIs and features, and ways you can test your applications.
This topic is intended for developers with experience in creating Web applications.
To begin application development with the Tizen SDK:
If you have questions about using the SDK, share them in the community forum.
When designing a Web application for a SSSP, pay attention to the following application characteristics:
Remote control functionality
The remote control is the main way for users to interact with the Signage. For more information, see User Interaction.
Simple UI
The SSSP has a simpler user interface (UI) than a mobile device. You must consider the user experience when designing the UI.
Scalable application resolution
On SSSP, the screen aspect ratio is 16:9. For the UHD SSSP model groups, the standard application resolution is 1920x1080 px, and for the FHD SSSP model groups, it is 1280x720 px.
To prevent whitespace and scroll bars from appearing when the application screen is scaled, keep the aspect ratio at 16:9 even when the application resolution is different from the standard.
Common Web application features
SSSP Web applications can have most of the same features as Web applications for other devices. You can use Web standard functions, such as mouse support, video elements, animations, and visibility change notifications. You can also use Tizen Web Device APIs and Samsung Product APIs supported by SSSP. For more information, see the API References.
A Tizen Web application consists of HTML, CSS, and JS files, and a "config.xml" file.
Figure 1. Application structure
All Tizen Web application projects must have a "config.xml" file in the project root directory. The configuration file is composed of XML elements, including the
You can implement the following features in your application: TVAudioControl API Samsung Product API and VOD features The following remote control keys are needed to control VOD playback: Screensaver Viewport scaling Input method editor (IME) Multitasking For more information, see Multitasking. When using Web storage and SSSP file system For your application to be published on SSSP, you must make sure that all user login information is deleted when the application is uninstalled. After deleting and reinstalling the application, there must be no user login information available from the previous installation. TLS support To test your application during development, you can use the SSSP simulator and emulator tools provided in the Samsung Smart Signage SDK, or an actual Signage: SSSP device
The following Tizen APIs are useful for SSSP service applications:
You can use Tizen Web Device APIs to show the SSSP screen or external inputs in an application.
For example, you can implement picture-in-picture (PiP) using the show()
function of the TVWindow API:tizen.tvwindow.show(function(){}, null, ['0', '0', '50%', '50%'], 'MAIN');
You can control the volume level or mute status of the SSSP, using the TVAudioControl API:tizen.tvaudiocontrol.setMute(true);
tizen.tvaudiocontrol.setVolume(10);
The Samsung Product API provides additional functionalities beyond those offered by the Tizen Web API, such as retrieving information about the device and platform, displaying subtitles, and playing VODs.
You can implement VOD playback in 2 ways:
You can use the HTML5 standard video
element. For more information, see Using Video Elements.
VOD playback can be implemented using the AVPlay API, which has additional features, such as support for DRM technologies. For more information, see Using AVPlay.
To control VOD playback volume levels, you can use the volume keys of the remote control without registering them, because they are handled at the platform level. Volume control can also be implemented using the Tizen API. For more information, see TVAudioControl API.
The Smart Control "Play/Pause" key combines the functions of the "Play" and the "Pause" keys. Its KeyName
is MediaPlayPause
and the KeyCode
is "10252". VOD service applications must handle this key to toggle between play and pause modes.
To prevent screen burn, the screensaver is shown after a defined amount of time, if the SSSP screen has been displaying a still image or if there has been no user input. For more information, see Setting Screensaver.
If you create an application for resolutions different than the standard resolutions, you can scale the resolution up or down, using the viewport
meta element. For more information, see Managing Screen Resolution.
When an input
or textarea
element is focused, the virtual keyboard is shown. The virtual keyboard is automatically hidden when a key on a connected external keyboard is pressed. For more information, see Keyboard/IME.
When the user switches from your application to another application or SSSP channel, your application must save its current state to RAM and enter the hidden state.
You can receive notifications when an application is shown or hidden by registering a callback for the visibilitychange
event:document.addEventListener(
'visibilitychange', function() {
if (document.hidden) {
...
} else {
...
}
}
);
iframe
elements
You can insert remote pages into your application using the Web standard iframe
element. For more information, see the W3C/HTML5 API References.<iframe width='960px' height='540' src='https://www.youtube.com/embed/7xBT-UDAHX8'></iframe>
Note
iframe
elements in SSSP applications, the following limitations apply:
allow-same-origin
, allow-scripts
, allow-forms
, allow-top-navigation
iframe
elements.iframe
elements for remote sources do not work as expected.
You can store application content and data, such as user information, in Web storage and the SSSP file system. For more information, see Using Web Storage and Managing File Operation.Note
To transmit encrypted information between Web browsers and Web servers, SSSP supports TLS (Transport Layer Security) versions 1.0, 1.1, and 1.2. SSL (Secure Sockets Layer) is not supported.Testing Applications
The TV simulator is a light-weight tool that simulates SSSP APIs using a JavaScript backend. The simulator is useful when quick prototype development is required, such as when developing the UI. You can modify the HTML5, JS, and CSS code, and quickly reload the simulator to view your changes.
API support on the simulator is limited; the simulator does not support any features that have strict dependencies on Signage hardware or core Tizen modules. Some API functions return dummy values.
If you have tested your application on the simulator, it is ready for uploading and testing on a Signage. Even though it is possible to complete most application testing on the emulator, it is highly recommended that you also test your application on a target device. The emulator and Signage environments are very similar, but there are some differences at the hardware level.