VS Code - Tizen TV WASM

Generate/Edit/Package/Run/Debug your applications with Tizen Targets

'Tizen TV WASM' is a VS Code extension that provides a lightweight IDE for Tizen Webassembly application developers, helps to generate, update and package an application, also run and debug an application on Tizen targets.

Supported features

• Tizen TV WASM: Create Web Project

  Create a Tizen web application from templates or empty projects.

• Tizen TV WASM: Add Wasm Module

  Add one or more Wasm Module to a Tizen web application.
  C++ HelloWorld / C HelloTriangle / C++ Empty / C Empty samples are included as reference modules.

• Tizen TV WASM: Build Wasm Module

  Build all wasm modules.

• Tizen TV WASM: Build Signed Package

  Build the Tizen application into a Tizen package, the package will be located in workspace's root directory.
  Make sure to create and activate a Tizen Developer Certificate using Certificate Manager before proceding to this step.

• Tizen TV WASM: Debug Application

  Use google-chrome to debug with web inspector, please configure the chrome executable's path in user setting.

• Tizen TV WASM: Launch Application

  Run On TV/Run On TV Simulator/Run On TV Emulator.
  Extension will prompt for configuring respective target types on first attempt.
  Make sure to set Developer Mode to On on TV.

• Tizen TV WASM: Run Certificate Manager

  Create Profile (Tizen) / Remove Profile / Set Active Profile
  Manages certificate for signing Tizen TV Web application package.

• Tizen TV WASM: Wits Start (Install and Live reload)

• Tizen TV WASM: Wits Watch (Live reload)

• Tizen TV WASM: Wits Stop

  More information on using WITS with Tizen TV models released after 2017 is found here

Getting Started

The extension supports most of the basic features required to develop a Tizen TV app. It supports to create application using predefined templates, package the application, sign the application using certificate profile, launch or debug application on TV Simulator, Emulator and Tizen TV.

Setup Environment

1. Install the latest Visual Studio Code.
2. Install the Tizen TV WASM extension from the market place. Tizen TV WASM extension can be installed by searching in the Extensions view ( Ctrl+Shift+X ).
3. Download and extract the Tizen Emscripten SDK suitable for your OS.
4. Setup the Tizen Emscripten and use it with Visual Studio Code.

   These steps guide using emsdk without changing development host environment variables permanently.

   • Windows
     • Launch the Windows Command shell.
     • Go to the emsdk directory.
     • Run the below commands.

     emsdk activate latest-fastcomp
     code
     

   • Mac & Linux
     • Launch the Terminal.
     • Go to the emsdk directory.
     • Run the below commands.

     ./emsdk activate latest-fastcomp
     source ./emsdk_env.sh
     code
     

5. Press F1 to open the Command Palette and input Tizen TV WASM to find out all the supported commands.

6. Press F5 to find out supported debuggers.

Developing a WASM Application

The following section demonstrates the steps essential for developing a Tizen TV WASM application using Tizen TV WASM extension. For simplicity, application is created using existing OpenGL based sample application.

Use CTRL+SHIFT+P to activate the Command Palette.

1. Create and activate a certificate profile for signing the Tizen TV Web application package.
   Even though this step could be followed later, it is better to have certificate profile created and activated before proceding further.

   • Run Certificate manager

     

   • Create Profile (Tizen)

     

   • Provide name for Certificate profile
     Example : Development

     

   • Provide filename to store the Certificate Profile
     Example : TVDevelopmentCertificate

     

   • Provide author name
     Example : My Name

     

   • Enter and confirm password for the certificate

     

   • Set as deafult

     

   • Run Certificate Manager again and set the active profile

     

2. Create an empty web project

   • Run Create Web Project

     

   • Select Empty

     

   • Choose the working directory. By default, it chooses current directory

     

   • Provide name
     Example : HelloWASM

     

3. Add a WASM module choosing from existing C sample.

   • Run Add Wasm Module

     

   • Choose language
     Example : C language for this demo

     

   • Provide name for Wasm module
     Example : WasmModule

     

   • Select the module mode
     Example : Template

   

   - Choose hello Triangle

   

4. Build the WASM module.

   

5. Build the signed package.
   As we have already created and activated certificate profile, this should be smooth.

   

Running on the TV

1. Make sure TV and the development PC are in the same LAN.
2. Set Developer Mode to On on TV.
3. Run Launch applicaion

   

4. Choose Run On TV

   

5. Set TV IP

   

6. If everything went well, you should observe red triangle on the TV as below.

   

Command Configuration

Additional TizenTV SDK configurations could be accessed by following below steps:
File > Preferences > Settings > User > TizenTV SDK Configuration

F.A.Q

Please log your suggestions, & issues