Developing hub apps for dual monitors/displays

Table of Contents

  1. Introduction
  2. Guidelines and technical details
  3. Example app
    3.1. Load and run the app

1. Introduction

The Dolby Voice Hub supports both single- and dual-monitor configurations; the Dolby Voice Hub web app should accommodate either configuration.

2. Guidelines and technical details

The following must be taken into consideration when programming the web app:

  • For a single-display configuration, the virtual screen is the same size as the one monitor's screen.
  • When the hub is connected to two displays, the view-port (window) for the app covers the real estate of both monitors. In other words, the app gets one large virtual screen which covers both displays.
  • The app needs to render the UI based on the number of monitors the Dolby Voice Hub is connected to.
  • Use the Display API to return the Monitor object that contains the properties that define the number of monitors, their resolution, and their position on the virtual screen. These are read-only properties that are set based on information transmitted electronically from the monitor(s). Subscribe a callback to monitor changes in any of these Displays properties. The following table lists APIs for the display properties.

Parameter Notes Sample values (two 1080p monitors)
window.dapi.displays.MonitorCount Number of monitors, 1 or 2 2
window.dapi.displays.Monitor1.Height Height of monitor 1 in pixels 1080
window.dapi.displays.Monitor1.Width Width of monitor 1 in pixels 1920
window.dapi.displays.Monitor1.X X position of the monitor1 in the virtual screen 0
window.dapi.displays.Monitor1.Y Y position of the monitor1 in the virtual screen 0
window.dapi.displays.Monitor2.Height Height of monitor 2 in pixels 1080
window.dapi.displays.Monitor2.Width Width of monitor 2 in pixels 1920
window.dapi.displays.Monitor2.X X position of the monitor2 in the virtual screen 1920
window.dapi.displays.Monitor2.Y Y position of the monitor2 in the virtual screen 0
  • After the dapi has been initialized, the web app can read the displays properties to determine how to display the UI. Before the dapi is initialized, the app should show a 'loading screen' suitable for both single and dual monitor cases since at this point of time, the app cannot know the monitor configuration details.
  • The app needs to define its own virtual monitor views based on the above properties and place UI elements into those virtual monitor views.
  • The app needs to update the virtual monitor views if the number of monitors or if a monitor property changes.

3. Example app

This example web app illustrates single- and dual-monitor usage. If only one monitor is connected to the Dolby Voice Hub, it will show this:

image

If two monitors are connected to the Dolby Voice Hub, one will display "Monitor 1" and the other will show "Monitor 2":

image

This example app consists of three files:

  • index.html
  • index.js
  • dualmonitor.css


The source code for these files is listed in three sections on this example code page.

3.1. Load and run the app

This example will take advantage of the nginx web server running on a Dolby SDK virtual machine; its IP address is 10.112.102.205.

Create an apps folder. Then create an app folder tree under the nginx/apps folder as follows:

[root@dcp-sdk ~]# mkdir /usr/share/nginx/html/apps

[root@dcp-sdk ~]# cd    /usr/share/nginx/html/apps

[root@dcp-sdk apps]# mkdir display-app
[root@dcp-sdk apps]# mkdir display-app/resources
[root@dcp-sdk apps]# mkdir display-app/resources/css


Copy the hub app sample code into three files; the result should be the following:

File Description
/usr/share/nginx/html/apps/display-app/index.html Default HTML file; invokes hub app
/usr/share/nginx/html/apps/display-app/index.js Dolby Voice Hub web app
/usr/share/nginx/html/apps/display-app/resources/css/dualmonitor.css Style Sheet


Since this example uses the nginx web server running on a Dolby SDK virtual machine at IP address 10.112.102.205, the app location must use this address. Use a browser to log into the Dolby Voice Hub's web UI to change the app setting:

Parameter Value Web UI Location
Dvms.HubApp.Url http://10.112.102.205/apps/display-app Settings > Dolby Voice Conferencing Service > Hub Application

Clicking the Save button in the web UI will start the app download process. The one or two displays that are connected to the Dolby Voice Hub will display the output shown above.