cordova-plugin-toast

Cordova plugin that provides TV Specific functionalities.

About this project

This plugin defines a global toast object, which provides an API for TV specific functionalities that is based on Cordova project.

Although the object provides the global scoped toast object, it is not available until after the deviceready event which is provided by Cordova.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(toast);
}

TOAST references

If you want more details, please refer belows.

• Guide
  • wiki.
• Youtube
  • Youtube link for 2016 SDC tech session : Write Once and Run Everywhere with TOAST for Smart TV.
• TOAST introduce video
  • TOAST video contains introduce for TOAST briefly. It would help you understand easily.

Project Structure

    ./
     |-cordova-test-runner/ ... TestRunner/TestSuite Cordova application
     |-docs/ .................. Documents which are including API Specification
     |-sample/ ................ Sample applications using TOAST API
     |-src/ ................... Platform dependent modules for the plugin TOAST
     |  |-browser/ ............ Plugin implementation for the platform `browser`
     |  |-sectv-orsay/ ........ Plugin implementation for the platform `sectv-orsay`
     |  |-sectv-tizen/ ........ Plugin implementation for the platform `sectv-tizen`
     |  `-tv-webos/ ........... Plugin implementation for the platform `tv-webos`
     |-tasks/ ................. custom grunt tasks to build the toast.js
     |-www/ ................... Platform independent modules for the plugin TOAST
     |-Gruntfile.js ........... Gruntfile to build the toast.js
     '-plugin.xml ............. Cordova Plugin configuration for TOAST

Associated Projects

• cordova-sectv-orsay is an application library that allows for Cordova-based projects to be built for the Legacy Samsung Smart TV Platform.(A.K.A Orsay)
• cordova-sectv-tizen is an application library that allows for Cordova-based projects to be built for the Samsung Tizen TV Platform.
• cordova-tv-webos is an application library that allows for Cordova-based projects to be built for the LG WebOS TV Platform.
• grunt-cordova-sectv is a grunt task to prepare and build package from a cordova project for sectv-orsay and sectv-tizen and tv-webos platforms.

Supported platform

• browser
• Legacy Samsung Smart TV (sectv-orsay)
• Tizen Samsung Smart TV (sectv-tizen)
• WebOS LG Smart TV (tv-webos)

Prepare to start

• Prepare to start contains contents such as precondition, configuration or compile before using TOAST.

Precondition

First, TOAST needs the followings. Please install these.

• nodejs
• git
• Chrome Browser
• Samsung Tizen SDK (It is only for Tizen packaging, please refer to grunt-cordova-sectv, Build and package

• npm modules: cordova, grunt

  $ npm install -g cordova
  $ npm install -g grunt-cli

git clone

• For copying repositories, please mkdir a root directory.

  $ mkdir <root directory>

• In the root directory, please git clone the following repositories.

  $ git clone https://github.com/apache/cordova-js.git
  $ git clone https://github.com/apache/cordova-browser.git
  $ git clone https://github.com/Samsung/cordova-plugin-toast.git
  $ git clone https://github.com/Samsung/cordova-sectv-orsay.git
  $ git clone https://github.com/Samsung/cordova-sectv-tizen.git
  $ git clone https://github.com/Samsung/cordova-tv-webos.git
  $ git clone https://github.com/Samsung/grunt-cordova-sectv.git

Configuration

• Please npm install to install dependencies in cordova-js, cordova-plugin-toast, cordova-sectv-orsay, cordova-sectv-tizen, cordova-tv-webos, grunt-cordova-sectv.

  $ npm install

• In cordova-js/Gruntfile.js, please add compile tasks.

  module.exports = function(grunt) {
  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      compile: {
          ...
          "sectv-orsay": {},
          "sectv-tizen": {},
          "tv-webos": {}
      },

• In cordova-js/package.json, please add the platforms to cordova-platforms like below.

  "cordova-platforms" : {
      ...
  "cordova-sectv-orsay"   : "../cordova-sectv-orsay",
  "cordova-sectv-tizen"   : "../cordova-sectv-tizen",
  "cordova-tv-webos"   : "../cordova-tv-webos"
  }

Compile

• In cordova-js, please grunt compile for packaging.

  $ grunt compile:sectv-orsay compile:sectv-tizen compile:tv-webos

• In cordova-plugin-toast, please grunt compile for packaging.

  $ grunt compile:sectv-orsay compile:sectv-tizen compile:tv-webos

Create Project

• Create Project contains how to create TOAST Project step by step.

How to create Toast project

• recommended workspace

  ./
   |-cordova-js/ ............
   |-cordova-browser/ .......
   |-cordova-plugin-toast/ ..
   |-cordova-sectv-orsay/ ...
   |-cordova-sectv-tizen/ ...
   |-cordova-tv-webos/ ......
   `-grunt-cordova-sectv/ ...

• create empty project

  # Create cordova project
  $ cordova create TestApp
  $ cd TestApp
  
  # Beware of hidden file
  $ cp -rf ../grunt-cordova-sectv/sample/. ./
  $ npm install ../grunt-cordova-sectv
  # Grunt task for build and package
  
  # Install dependency modules
  $ npm install
  
  # For toast browser simulator
  $ cordova platform add browser
  
  # Mandatory plugins for using browser simulator (not for other platforms)
  $ cordova plugin add cordova-plugin-device
  $ cordova plugin add cordova-plugin-network-information
  $ cordova plugin add cordova-plugin-globalization
  
  # Add toast plugin
  $ cordova plugin add ../cordova-plugin-toast

• www/index.html

  
  <!-- REMOVE meta tag for setting CSP(Content-Security-Policy)
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  -->

<body>
    ...
    <script type="text/javascript" src="https://github.com/Samsung/cordova-plugin-toast/raw/master/cordova.js"></script>

    <!-- Add toast.js to use toast api -->
    <script type="text/javascript" src="https://github.com/Samsung/cordova-plugin-toast/raw/master/toast.js"></script>
    ...
</body>
```

Prepare and Build

• Prepare and Build contains how to prepare and build TOAST project for each platforms. "Prepare" task could help to compose necessary components of TOAST project for each platforms. "Build" task could help to package TOAST project as format for each platforms.

How to prepare

• browser

  $ cordova build browser

• sectv-orsay

  $ grunt sectv-prepare:sectv-orsay

• sectv-tizen

  $ grunt sectv-prepare:sectv-tizen

• tv-webos

  $ grunt sectv-prepare:tv-webos

How to build and package

• browser

  # Test on browser platform
  $ cordova emulate browser

• sectv-orsay

  # Test on sectv-orsay platform
  $ grunt sectv-build:sectv-orsay
  # Run the application on target by using SDK

• sectv-tizen

  # Test on sectv-tizen platform
  $ grunt sectv-build:sectv-tizen
  # Run the application on target by using SDK

• tv-webos

  # Test on tv-webos platform
  $ grunt sectv-build:tv-webos
  # Run the application on target by using SDK

• For more details, please refer the tizen package

How to Test with TestRunner

• You can test on each platforms with Test Runner cordova application which is located at 'cordova-test-runner' directory of this project.

• Please refer to below for running the tests: (Assuming that the grunt-cordova-sectv project is cloned at the same level with this project)

  # Create cordova project
  $ cordova create TestRunner --template=cordova-plugin-toast/cordova-test-runner
  $ cd TestRunner
  
  # Beware of hidden file
  $ cp -rf ../grunt-cordova-sectv/sample/. ./
  $ npm install ../grunt-cordova-sectv
  # Grunt task for build and package
  
  # Install dependency modules
  $ npm install
  
  # For toast browser simulator
  $ cordova platform add browser
  
  # Mandatory plugins for using browser simulator (not for other platforms)
  $ cordova plugin add cordova-plugin-device
  $ cordova plugin add cordova-plugin-network-information
  $ cordova plugin add cordova-plugin-globalization
  
  # Add toast plugin
  $ cordova plugin add ../cordova-plugin-toast

Converting Tizen to Toast

• Converting Tizen to Toast contains how to convert application which is made with Tizen to TOAST.

Converting Orsay to Toast

• Converting Orsay to Toast contains how to convert application which is made with Orsay to TOAST.

API Reference

• toast.Media
• toast.MediaPlugin
• toast.drminfo
• toast.application
• toast.inputdevice
• toast.tvaudiocontrol
• toast.tvwindow
• toast.tvchannel

Sample App

• Media
• drmmedia
• ime
• tvwindow
• deviceinfo

Contribution Guideline

• Contribution Guideline contains several tips to participate in contribution.

Known Issues

Not yet