This topic is an introduction to developing Web applications for KIOSK. It describes how to get started with the Samsung Smart Signage SDK, the characteristics and structure of KIOSK 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:
Important
Keep your certificates backed up in a safe location. When you update your published applications, the update must be signed with the same author certificate as the original application. If the applications are signed with different author certificates, the update can be recognized as a different application and not an update.
If you have questions about using the SDK, share them in the community forum.
When designing a Web application for a KIOSK, 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 KIOSK has a simpler user interface (UI) than a mobile device. You must consider the user experience when designing the UI.
Scalable application resolution
On KIOSK, the screen aspect ratio is 16:9. For the UHD KIOSK model groups, the standard application resolution is 1920x1080 px, and for the FHD KIOSK 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
KIOSK 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 KIOSK. 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:
show()
function of the TVWindow API:
tizen.tvwindow.show(function(){}, null, ['0', '0', '50%', '50%'], 'MAIN');
TVAudioControl API
You can control the volume level or mute status of the KIOSK, using the TVAudioControl API:
tizen.tvaudiocontrol.setMute(true); tizen.tvaudiocontrol.setVolume(10);
Samsung Product API and VOD features
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:
video
element. For more information, see Using Video Elements.The following remote control keys are needed to control VOD playback:
KeyName
is MediaPlayPause
and the KeyCode
is "10252". VOD service applications must handle this key to toggle between play and pause modes.Screensaver
To prevent screen burn, the screensaver is shown after a defined amount of time, if the KIOSK screen has been displaying a still image or if there has been no user input. For more information, see Setting Screensaver.
Viewport scaling
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.
Input method editor (IME)
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.
Multitasking
When the user switches from your application to another application or KIOSK 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 { ... } } );
For more information, see Multitasking.
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
When using
iframe
elements in KIOSK applications, the following limitations apply:
- Only the following sandbox attributes are available:
allow-same-origin
,allow-scripts
,allow-forms
,allow-top-navigation
- Tizen and Samsung Product APIs cannot be used in
iframe
elements.- The "frame flattening" feature, supported in Tizen mobile Web applications, is not supported in KIOSK applications.
- On the emulator,
iframe
elements for remote sources do not work as expected.
Web storage and KIOSK file system
You can store application content and data, such as user information, in Web storage and the KIOSK file system. For more information, see Using Web Storage and Managing File Operation.
Note
For your application to be published on KIOSK, 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 transmit encrypted information between Web browsers and Web servers, KIOSK supports TLS (Transport Layer Security) versions 1.0, 1.1, and 1.2. SSL (Secure Sockets Layer) is not supported.
To test your application during development, you can use the KIOSK simulator and emulator tools provided in the Samsung Smart Signage SDK, or an actual Signage:
KIOSK device
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.