Smart TV Simulator

Overview

The Tizen TV Web Simulator is a light-weight tool used by developers to simulate an app running on the TV. It provides different functionalities and features that can help save development and testing time.

A simulator is different to the emulator when it comes to their usage. When developing a User Interface (UI), the simulator is faster than the emulator such as checking the UI changes of an app quickly by just clicking the Reload button. When developing functions (APIs), using the emulator is recommended as the emulator supports most of APIs. Unlike the simulator which only uses the simple TV device or Product APIs.

Note

Final application testing is recommendon the Emulator.

Figure 1 Samsung Tizen TV Web Simulator

Figure 1 Samsung Tizen TV Web Simulator

Setting up the Environment

Prepare the following to get started with Tizen TV Web Simulator. Navigate to SamsungDForum (http://www.samsungdforum.com/TizenDevtools/SdkDownload) to download the following.

  • Samsung Tizen TV SDK

  • Tizen IDE

  • Tizen TV Web Simulator

Interface Description

Figure 2 Creating a Basic Project

Figure 2 Creating a Basic Project

  1. Configuration Panel – provides features which can be configured.

  2. Virtual TV Screen – where the application UI is loaded, simulating an actual “TV screen”.

  3. Remote Control – a virtual remote for the web app.

  4. Tools and Settings

    Tools and Settings
    • Reload – reloads the running app based on the last saved version.

    • Choose Remote – selects a remote control..

    • Web Inspector – a debugging tool for the running application.

    • Configuration Settings – toggles the system configuration.

    • Panel Settings – sets the visibility of items in the Configuration Panel.

    • Simulator Info – version and license information of the simulator.

Step 1. Creating a Sample App

a. Launch the Tizen IDE.

b. In the IDE, select File > New > Tizen Web Project.

c. In the style.css file, modify the stylings as shown in the codes below. This will set the appearance of the sample app like fonts, background colors, etc.

Figure 2 Creating a Basic Project

Figure 2 Creating a Basic Project

d. Click Finish.

e. Right click on the project name and select Build Package to generate a widget (.wgt) file.

Step 2. Running a Sample App

a. There are two ways to launch a web application on the Web Simulator. One way is by running it directly from the Tizen IDE and next is to run it on the Web Simulator.

Running an App from the Tizen IDE
Figure 3 Running a Sample App from the IDE

Figure 3 Running a Sample App from the IDE

b. The app runs in the main area of the Virtual TV Screen.

Figure 4 App Running in the Web Simulator

Figure 4 App Running in the Web Simulator

Running an App from the Web Simulator

a. In the web simulator, select Packages and Applications from the Configure Panel.

b. On the Packages tab, set the Package Location by entering the web application URL (location of the .wgt file).

Figure 5 Setting the Package Location of the Sample App

Figure 5 Setting the Package Location of the Sample App

c. Always uninstall an existing app before installing a new one. An error message will appear if not done. To uninstall app:

  • Exit first from the running app using the remote control.

  • Click the Applications tab, select the app then click Uninstall.

  • Click the Yes button on the popup dialog to confirm the uninstallation.

After the uninstallation, reenter the web application URL.

d. When done, the package information will be displayed.

Figure 6 Package Information

Figure 6 Package Information

e. Click Install and run the application.

f. The app will run in the main area of the Virtual TV Screen.

Step 3. Using the Web Simulator

Use the web simulator in making a simple app for UI development, a simple TV device, or with Product APIs. It simulates the run time environment of Tizen Web Apps based on Google Chrome.

Reload App

The Reload button reloads the running app according to last saved version of application.

a. On the web simulator, run the sample app.

b. Click the Reload button on the tool bar to reload the app.

Figure 7 Reload button

Figure 7 Reload button

Switch Remote Controls

The Basic Remote and the Smart Control 2015 are included in the current SDK.

Figure 9 Basic Remote (L) and Smart Control 2015 (R)

Figure 9 Basic Remote (L) and Smart Control 2015 (R)

a. Click the Choose Remote Control button on the tool bar.

Figure 10 Choose Remote Control Button

Figure 10 Choose Remote Control Button

b. Select one of the remote controls and click the Apply. This switches the remote control.

Figure 11 Choosing a Remote Control

Figure 11 Choosing a Remote Control

Launch Web Inspector

a. Debug a running app with the web inspector.

Note

For more details about the web inspector, navigate to https://developer.chrome.com/devtools

b. Click the Web Inspector button on the tool bar.

Figure 12 Web Inspector Button

Figure 12 Web Inspector Button

c. The web inspector window will pop up.

Figure 13 Web Inspector

Figure 13 Web Inspector

Configure Panel Settings

a. Click the Panel Settings button on the tool bar.

Figure 14 Click Panel Settings

Figure 14 Click Panel Settings

b. Uncheck Select All items then click Apply at the Panel Settings Window.

Figure 15 Panel Settings Window

Figure 15 Panel Settings Window

c. Selected panel items are removed from the Configuration Panel.

Figure 16 Configuration Panel

Figure 16 Configuration Panel

Show Simulator Information

a. Click the Simulator Info button on the tool bar.

Figure 18 Click Simulator Info Button

Figure 18 Click Simulator Info Button

b. Observe that a window displaying the simulator information will pop up.

Figure 19 Simulator Info Pop up

Figure 19 Simulator Info Pop up