Create an Application

Estimated reading time: 2 minutes

This part describes how to create an application.

BRAVIA Professional Display HTML5 Application is based on the HTML5 Specification. You can develop your applications by using basic functions and third party libraries just as your common web applications. Of course, You can do so using your favorite development tools such as a source code editor, building tools, etc.

However, there are some technical restrictions. Please visit W3C HTML5 API for details about support information.

BRAVIA Professional Display also provides vendor specific functions. This section shows examples of how to achieve your applications with vendor customized object tags and JavaScript APIs.

Customized Object Tag

BRAVIA Professional Display provides the following customized object tags:

  • “application/x-decimated-video” to play HDMI videos
  • “application/x-multicast-video” to play multicast videos
  • “application/x-4k-photo” to show 4K images

The vendor customized object tags need both the tag and JavaScript code.

Below is an sample of the “x-4k-photo” object.

“x-4k-photo” Object Tag

Please download and extract a sample application. After extracting, put files as below. And put files as below.

USB: /sony/
          +--- autorun.txt
          +--- apps/webapps/high_quality_image/app/
                                                  +--- manifest.json
                                                  +--- doc/
                                                          +--- high_quality_image.html
                                                          +--- 4k_image.jpg
  1. Copy 'sony' directory to the root directory of an USB storage.
  2. Connect an USB storage to BRAVIA Professional Display. The application will be launched and show an application.

This sample uses the <object type="application/x-4k-photo"> tag. It also needs JavaScript code.

<object class="hq-img" id="hq-img" type="application/x-4k-photo" width="100%" height="100%"></object>
  window.onload = function() {
    var object = document.getElementById('hq-img');
    object.open();
    object.onpreload = function(url, result) {
      object.show(url);
    };
    object.preload('4k_image.jpg');
  };

Please visit Customized Object Tag for details of each tag.

JavaScript API

BRAVIA Professional Display provides the following vendor specific JavaScript APIs:

  • sony.tv.DirectoryReader
  • sony.tv.systemevents
  • sony.tv.picturemode

Below is a sample of the SystemEvents interface.

SystemEvents Interface

Please download a sample application and extract it. And put files as below.

USB: /sony/
          +--- autorun.txt
          +--- apps/webapps/systemevents/app/
                                            +--- manifest.json
                                            +--- doc/systemevents.html
  1. Copy the 'sony' directory to the root directory of a USB storage.
  2. Connect a USB storage to BRAVIA Professional Display. The application will be launched and show an application.

This sample uses the sony.tv.systemevents.addListener() and sony.tv.systemevents.removeListener().

  // system event handler
  function onNetworkStatusChanged(event){
    printResult("eventMessage.connectionInfo.netif = " + event.eventMessage.connectionInfo.netif);
    printResult("eventMessage.connectionInfo.errorDetail = " + event.eventMessage.connectionInfo.errorDetail);
  }
  // add/remove system event listener
  function addListenerNetworkStatusChanged(){
    sony.tv.systemevents.addListener('networkStatusChanged', onNetworkStatusChanged);
  }
  function removeListenerNetworkStatusChanged(){
    sony.tv.systemevents.removeListener('networkStatusChanged', onNetworkStatusChanged);
  }

As described above, you can use vendor specific JavaScript APIs easily. Please visit JavaScript API for details of each API.

Last modified: 10 Jun 2022