Dev:Multiscreen synchronized content

Introduction

To create multiscreen synchronized content without the help of Elementi, you need to ensure that the content is time-synchronized and that it includes the multiscreen information.

If you are using Elementi, refer to Synchronized content and Multiscreen content pages instead.

Synchronized content

The content can be synchronized on multiple HMPs by using either the schedule technique or the "begin attribute" technique.

The schedule technique

Even though it can be used in all cases, this technique applies especially for content that requires strict scheduling, as in "play this video synchronously on all screens from 9:15 to 9:24 on workdays and one hour later during weekends".

To use this technique, simply include a schedule file inside the main index.svg and the rest of the content inside this schedule file.

In case a multiscreen widget is used, the begin attribute should be removed from index.svg.

The "begin attribute" technique

The "begin attribute" technique applies for content that doesn't require strict scheduling. So, instead of using a calendar file just to assure the synchronization, simply set the entire project to start at a precise date & time using the begin attribute on the main index.svg file.

Here are the steps to follow:

Open the index.svg file for editing.
Find the <svg> node within the XML code.
Inside it, add an begin attribute and set it to a date from the past using the wallclock-sync syntax, for instance
```
begin="wallclock(2011-11-25T00:00:00)"
```
Make sure that the content has a duration, either a fixed duration (e.g., dur="0:10:00") or an indefinite one (e.g., dur="indefinite").
- That means an "Automatic" (or "media") value as duration must be avoided.
- The video layers usually have the duration set to their length, but it's always good to check if that's set or not.
- Layers like text, images, backgrounds, clocks etc. don't need any changes (can be left with their default values).
- Some widgets might come by default with the duration set to "media" - make sure to change that to a fixed duration.

Multiscreen content

Multiscreen content refers to a special type of synchronized content which is meant to be displayed over a video wall.

How to create multiscreen content

To turn time-synchronized content into multiscreen synchronized content, the information about the position of each screen within the multiscreen content must be specified, either by using the jSignage Multiscreen add-on or custom XML tags (as detailed below).

If you want to use custom XML tags, follow this procedure:

Select the svg document (preferably the main index.svg) that is meant to be displayed over multiple screens.
Open this file in a text / xml editor.
Find the <svg> element and change its viewBox attribute to match the entire rectangular area of your video wall.
- The viewBox attribute takes a string value containing four numbers (e.g., viewBox="min-x, min-y, width and height") describing the rectangular area occupied by the entire video wall. Usually, the min-x and min-y coordinates are both 0. The width and height can refer to any type of measuring units (e.g., pixels, millimetres, inches etc.), yet the same unit must be used all over.
Inside the <svg> element, add an <spx:multiScreen></spx:multiScreen> element.
- Note that this element is part of the spx namespace which should be specified under the <svg> element.
Inside <spx:multiScreen>, add the information for each screen, using <spx:screen id="screenID" viewBox="x y w h" /> elements.
- id
  A string matching the "Multiscreen ID" configured for each HMP.
- viewBox
  A string containing four numbers describing the rectangular area occupied by the screen within the video wall area. The same units must be used as for the viewBox attribute of the <svg> element.

Conditional content

In some cases, you might need to have content displayed only on a particular screen from the video wall. To identify a particular HMP device from your setup, you can use a simple if statement within your JavaScript code and test the value stored within one of the global variables implemented on the HMP, in particular MULTI_SCREEN_ID or deviceInfo.multiScreenId which contain the "Multiscreen ID" configured for each HMP.

 if ( MULTI_SCREEN_ID == 'Tokio' ) {
   // show one type of content
 } else {
   // Show another type of content
 }

Examples

2x2 grid layout

The following code can be used for a 2x2 video wall composed of 4 screens having the following characteristics: 40" diagonal, 5mm frame, 16:9 aspect ratio and 1080p resolution. The chosen measuring unit is pixel, thus the 5mm screen frame corresponds to 11 pixels and this is taken into account by adding an empty space between the viewing areas.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns:spx="http://www.spinetix.com/namespace/1.0/spx" 
        begin="wallclock(2011-01-01T00:00:00)" 
        dur="indefinite" 
        viewBox="0 0 3862 2182" 
        color="black" width="100%" height="100%" >

    [...]

    <spx:multiScreen>
        <spx:screen id="screen-1-1" viewBox="0 0 1920 1080" />
        <spx:screen id="screen-1-2" viewBox="1942 0 1920 1080" />
        <spx:screen id="screen-2-1" viewBox="0 1102 1920 1080" />
        <spx:screen id="screen-2-2" viewBox="1942 1102 1920 1080" />
    </spx:multiScreen>

    [...]

</svg>

Custom layout

Multiscreen content with custom layout

The following code for video wall composed of 4 screens that are positioned in a non standard way (see the image on the right).

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        xmlns:spx="http://www.spinetix.com/namespace/1.0/spx" 
        begin="wallclock(2011-01-01T00:00:00)" 
        dur="indefinite" 
        viewBox="0 0 4260 1920" 
        color="black" width="100%" height="100%" >

    [...]

    <spx:multiScreen>
        <spx:screen viewBox="50 50 1280 720" id="screen-1" />
        <spx:screen viewBox="1706 240 1280 720" id="screen-2" />
        <spx:screen viewBox="852 1150 1280 720" id="screen-3" />
        <spx:screen viewBox="2800 800 1280 720" id="screen-4" />
    </spx:multiScreen>

    [...]

</svg>