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.
Final application testing is recommendon the Emulator.
Figure 1 Samsung Tizen TV Web Simulator
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 TV Web Simulator
Figure 2 Creating a Basic Project
Configuration Panel – provides features which can be configured.
Virtual TV Screen – where the application UI is loaded, simulating an actual “TV screen”.
Remote Control – a virtual remote for the web app.
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.
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
d. Click Finish.
e. Right click on the project name and select Build Package to generate a widget (.wgt) file.
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.
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
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
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
e. Click Install and run the application.
f. The app will run in the main area of the Virtual TV Screen.
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.
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
The Basic Remote and the Smart Control 2015 are included in the current SDK.
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
b. Select one of the remote controls and click the Apply. This switches the remote control.
Figure 11 Choosing a Remote Control
a. Debug a running app with the web inspector.
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
c. The web inspector window will pop up.
Figure 13 Web Inspector
a. Click the Panel Settings button on the tool bar.
Figure 14 Click Panel Settings
b. Uncheck Select All items then click Apply at the Panel Settings Window.
Figure 15 Panel Settings Window
c. Selected panel items are removed from the Configuration Panel.
Figure 16 Configuration Panel
a. Click the Simulator Info button on the tool bar.
Figure 18 Click Simulator Info Button
b. Observe that a window displaying the simulator information will pop up.
Figure 19 Simulator Info Pop up