Creating "Hello WebAssembly" TV Application

This section describes how to create a basic Hello World - type TV application with WebAssembly.

Creating WebAssembly TV Application

The WebAssembly TV application will be the main "container" for both the HTML/JavaScript and WebAssembly parts.

To create the TV application:

  1. In the Tizen Studio main menu, select "File > New > Tizen Project".

  2. Select "Template" or "Sample", and click "Next".

    Figure 1. Select Project Type

  3. Select the profile ("TV") and version from the drop-down list and click "Next".

    To be able to develop WebAssembly you need to choose at least "TV-samsung v5.5".

    Figure 2. Select Profile and Version

  4. Select the "Web Application" application type, fill the "WebAssembly (C/C++)" check box, and click "Next".

    Figure 3. Select Application Type

  5. Select either a template or sample, and click "Next".

    The Tizen Project Wizard creates the project based on the selection.

    Figure 4. Select Application Template

  6. Define the project properties and click "Next".

    Figure 5. Define Project Properties

  7. Enter paths to the Emscripten SDK configuration file and cache directory.

    The Emscripten SDK configuration file (.emscripten) is the one that was created in the Downloading and Installing stage. You can read more about setting up Emscripten SDK for WebAssembly modules here "Setting Emscripten SDK for WebAssembly".

    The paths can either be entered manually or you can click the "Browse..." button to select them with the mouse. Click "Finish".

Figure 6. Select Toolchain

Adding Hello WebAssembly Module to the TV Application

  1. In the Tizen Studio "Project Explorer" view, right-click the TV application project that you have created in the previous section.

  2. Select "New > WebAssembly Module".

    Figure 7. Add a WebAssembly Module

  3. Specify C++ as programming language and click the HelloWorld sample, and then click "Next".

Figure 8. Define Module Content

  1. Define the module name. The module name must be unique in the current workspace.

    Figure 9. Define Module Name

  2. Define the canvas and text area (if required) for displaying the WebAssembly module on the Web page, and click "Finish".

Figure 10. Configure Module Visibility

The module is created within the wasm_modules folder in the TV application project. It also appears as its own project in the "Project Explorer" view, so you can configure and develop the module separately.

Figure 11. Project Explorer Tree

Previous | Next