Screen Synchronization & Video Walls

 

Screen synchronization allows you to have 2 or more screens running the same template and having the same content playing at the same time. As an example, this could be used in a general store where you have multiple screens throughout the store and you want customers to see the identical content playing simultaneously.

Requirements

---

• Android player version 2.0.70 or later

• Players must be on the same network preferably over ethernet

 

Setting up Screen Synchronization

---

You will need two separate templates, one for the controller and one for the responders. The template must contain at least one zone containing the media we wish to synchronize. In this example we are using a Gallery zone named Video Gallery. There should only be one controller display on the network. You can have any number of responder displays. The controller sends commands to the responders on your network.

It's easiest to simply copy an existing template you wish to synchronize then include the text controller or responder in the name to help keep them organized.

 

Controller Template

Next, edit your controller template and open the Script Editor from the template editor menu.

 

Then paste the following control script into that editor. Bear in mind that in order for this script to work as listed, your media gallery zone in your template will have to be named Video Gallery.

/* [GENERATED] Basic scripting template for the Android platform */
/*
   The media_1 zone is ONLY displayed if an image is tagged to a movie of the same name 
   that movie must be in the media_1 multimedia playlist
   
   The zone called will appear ONLY if the current image playlist / image being displayed has a  tag
*/

import java.util.List;
import java.util.Iterator;
import android.view.*;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.animation.*;
import android.animation.*;
import android.os.*;
import com.reveldigital.player.api.*;

/* [GENERATED] The listener interface for receiving template events */
Controller.addTemplateListener(new TemplateListener() {
onInitialized() { /* Triggered when the template is created */
    Video_Gallery.setAutoStart(false);
}
onSuspended() { /* Triggered when the template is stopped */
}
onResumed() { /* Triggered when the template resumes playing */
   Video_Gallery.next();
}
onTerminated() { /* Triggered when the template is destroyed */
}
onClicked() { /* Global click handler for entire template */
}
});

Controller.addOnCommandListener(new OnCommandListener() {
    onCommand(String name, String value) {
        if (name.equals("synchronize")) {
            setSource(value);
        }
    }
});

Video_Gallery.addPlaylistListener(new PlaylistListener() {
    onSourceStarted(Source source) {
    }
    onSourceCompleted(Source source) {
        Controller.sendCommand("synchronize", getNext(source).getName());
    }
});

setSource(String name) {
    Iterator it = Video_Gallery.getPlaylist().getSources();
    while (it.hasNext()) {
        Source s = it.next();
        if (s.getName().contains(name)) {
            Video_Gallery.setSource(s);
        }
    }
}

getNext(Source source) {
    Source first = null;
    Source found = null;
    boolean gotit = false;
    
    Iterator it = Video_Gallery.getPlaylist().getSources();
    while (it.hasNext()) {
        Source s = it.next();
        if (first == null) {
            first = s;
        }
        if (gotit == true) {
            found = s;
            break;
        }
        if (s == source) {
            gotit = true;
        }
    }
    if (found != null) {
        return found;
    }
    return first;
}

Save and then close the template.

 

Responder Template

Now its time to modify the responder template, which if you haven't renamed, would be Copy of template name. As with the controller, edit the template and open the RevelScript Editor. Note that your media gallery zone will have to be named Video Gallery in order for this script to function. The name can be changed, but must be reflected in the script to match.

/* [GENERATED] Basic scripting template for the Android platform */

import java.util.List;
import java.util.Iterator;
import android.view.*;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.animation.*;
import android.animation.*;
import android.os.*;
import com.reveldigital.player.api.*;

/* [GENERATED] The listener interface for receiving template events */
Controller.addTemplateListener(new TemplateListener() {
onInitialized() { /* Triggered when the template is created */
    Video_Gallery.setAutoStart(false);
}
onSuspended() { /* Triggered when the template is stopped */
}
onResumed() { /* Triggered when the template resumes playing */
}
onTerminated() { /* Triggered when the template is destroyed */
}
onClicked() { /* Global click handler for entire template */
}
});

Controller.addOnCommandListener(new OnCommandListener() {
    onCommand(String name, String value) {
        if (name.equals("synchronize")) {
            setSource(value);
        }
    }
});

setSource(String name) {
    Iterator it = Video_Gallery.getPlaylist().getSources();
    while (it.hasNext()) {
        Source s = it.next();
        if (s.getName().contains(name)) {
            Video_Gallery.setSource(s);
        }
    }
}

Save and then close the template.

Ensure your settings have player synchronization enabled. With the player app running and with a keyboard attached hold Shift then press F12. This will bring up the player settings. Ensure that Enable player synchronization is checked. Update the devices with your newly modified templates. Now your screens should be in sync with each other.

 

Video Wall

---

Video walls can be implemented using the same technique with some clever modification to your template zones. Since the content is synchronized it's just a matter of sizing the video zone in your template to display the correct portion of the video.

You can see in the example below that our template is a standard 1920x1080 dimension, while our gallery zone is sized so that only the top-left portion of the zone is visible. Duplicate this process for the 3 other quadrants to create a 2x2 video wall.

This same technique can be utilized for virtually any number of displays in various configurations and orientations.