This article explains how the "Video Wall - Display" and "Video Wall - Remote Control" experiences found in our Examples Catalog are built and how you can reuse them for your own needs.
To download these samples, use the links below:
Both experiences use Intuiface Headless CMS (H-CMS). If you are unfamiliar with Headless CMS, we suggest you familiarize yourself with it first - either via the Headless CMS chapter in our Help Center or the Headless CMS course in Intuiface Academy.
About the "Video Wall - Display" & "Video Wall - Remote Control" Experiences
This sample uses two experiences: "Video Wall - Remote Control" and "Video Wall - Display".
Using the Video Wall - Remote Control experience, you can drag and drop a video thumbnail into one of four zones, which will cause that video to play in the Video Wall – Display experience in the specified zone.
The Video Wall - Display experience is intended to be run on a large-format display or at an event running on a video wall, while the Video Wall - Remote Control is intended for a touch display or tablet.
Below is a diagram of the overall experience architecture.
How is this experience built?
To enable communication between both experiences, Web Triggers are required. The Video Wall - Remote Control experience utilizes a drag-and-drop mechanism, enabling the user to drag and drop a video thumbnail into one of two predefined deployment layouts (1x1 or 2x2). After the thumbnail is dropped, the Video Wall - Remote Control experience sends a web trigger message with parameters to the Video Wall - Display experience. Depending on the received message, the Video Wall – Display experience can change layouts, play a video, or stop a video.
The Video Wall - Remote Control experience uses the System Info Interface Asset to get the Device Name to allow the Video Wall - Remote Control experience to know which of possibly multiple Video Wall - Display experiences to send the Web Trigger messages to.
Data Structure of the H-CMS bases
Two Headless CMS (H-CMS) bases are used, one for Video Wall - Remote Control and the other for Video Wall - Display.
As you can see in the screenshots below, both bases make use of three Property types: Text, Video, and Image.
The Video Wall - Remote Control H-CMS Base contains the following:
- "Videos" collection
- "Tags" collection
- "Settings" group
- This group contains a "Remote/Videowall Pairing" child collection
The Video Wall - Display H-CMS Base contains the following:
- "Videos" collection
Content of the H-CMS bases
"Videos" content (for Video Wall - Remote Control)
The content for the "Videos" collection is a list of the videos you want to make available to the user. You must ensure each video has a unique Video ID and is assigned both a Thumbnail and one or more Tags. This collection is used in the Video Wall - Remote Control experience to determine which video to play in the Video Wall - Display experience.
"Tags" content (for Video Wall - Remote Control)
The content for the "Tags" collection is a list of the possible tag values you would use in the "Videos" collection. These values will appear in a filter you can control in the Video Wall - Remote Control experience.
"Settings" content (for Video Wall - Remote Control)
The content for the "Settings" group is critical because you need to specify your Intuiface account's credential key. Use of your credential key will ensure that only you can remotely control the Video Wall - Display experience. You can find all of your account's credential keys on the Credential Keys page.
When creating or using a credential key, make sure you have selected the "Web Triggers" scope for that key. If you don't do this, you won't be able to send web trigger messages between the two Video Wall experiences.
"Remote/Videowall Pairing" content
The content for the "Remote/Videowall Pairing" collection is used to specify the name of the device running the Remote Control experience and the name of the device running the Display experience. If these values are not specified, you will not be able to send or receive web trigger commands between the two Video Wall experiences.
"Videos" content - (for Video Wall - Display)
The content for this "Videos" collection is used within the Video Wall - Display experience only. Here you specify each video and that video's unique ID. This information must match the same videos and IDs found in the "Videos" collection for Video Wall - Remote Control.
Experiences and Scenes breakdown
There are two experiences needed to make this sample work: the Video Wall - Remote Control experience and the Video Wall - Display experience. Both experiences contain a single scene.
Video Wall - Remote Control |
Video Wall - Display |
"Video Wall - Remote Control" Experience
The "Main" scene consists of several assets. There are two buttons that permit the user to choose between a 1x1 and a 2x2 layout in the Video Wall - Display experience. You can design an experience with other layouts, but for each new layout you will need to add additional zones with the "is Dropped on" trigger. Each unique instance of this trigger would call an action to change the image placeholder for the new zone and adjust the "sendMessagePost" request for the new layout.
To change the layout you can check either the 1x1 or 2x2 Image Toggle buttons. This will send a Web Trigger message to the Video Wall - Display experience which will change the layout.
For the scene layers "Layout 1x1" and "Layout 2x2", we have used property-to-property binding to link layer visibility to the checked state of the respective Image Toggle Buttons. This means when the 1x1 toggle button is checked "True" , the "Layout 1x1" layer will become visible. The same applies to the 2x2 Image Toggle Button.
When the "Template for Items of Videos" Group is dropped on a zone, it uses the sendMessagePOST Interface Asset (created using API Explorer) to send a message via the Web Triggers API to the Video Wall - Display experience.
The breakdown of each action parameter for sendMessagePOST is detailed below:
- apiKey: Bound to the Global Variable called "Credential Key". The Global Variable is bound to the "Settings" H-CMS collection in which you specify your "Credential Key"
- message: Can contain one of three messages: changeLayout, changeVideo, removeVideo.
- parameter1: Contains the Video ID of the video to be played.
- parameter2: Defines which video is displayed in which zone. For example, if parameter3 is "1x1," then parameter2 value would be "1" for zone 1. If parameter3 is "2x2," then parameter2 value can be "1,2,3,4" for zones 1-4.
- parameter3: Defines the layout you wish to use with each request. The available layouts are "1x1" and "2x2."
- playerDeviceNames: Bound to the Global Variable called "DisplayDeviceName." This is the device name specified in the "Remote/Videowall Pairing" collection to identify which device to send the Web Trigger message to.
When any of the "TB Tag" Toggle Buttons are checked, the "Videos" collection is filtered to show only the Thumbnail associated with the specified tags. Drag-and-dropping one of these thumbnails on a zone specifies that the associated video should be played in that zone on the Video Wall - Display experience.
The "Remote Videowall Pairing" collection displays which Remote Control device and which Display device will be communicating with each other.
"Video Wall - Display" Experience
The "Main" scene consists of several assets, including Images and Video Assets. There are two layers: one for "Layout 1x1" and another for "Layout 2x2." These layers are shown or hidden depending on the Web Triggers message received.
The main logic is within the triggers and actions of the Web Triggers Interface Asset, which has twelve triggers with conditions that manage which layouts to display, what video to show in which zone, and ultimately what video to play.
If the message received equals "changeLayout" and Parameter3 equals "1x1", the experience will show "Layout 1x1" and hide "Layout 2x2".
If the message received is "changeVideo", Parameter2 equals "1", and Parameter3 equals "1x1" are met, then the video identified in Parameter 1 will run in the only zone of the 1x1.
If the message received is "removeVideo", and Parameter2 equals "1", and and Parameter3 equals "1x1", THEN it will show the "No Video 1x1" image and change the video to VideoID "1", which is the reset state for the next incoming Web Trigger message.
How to reuse both Experiences
The easiest way to reuse both experience is to carry out the following steps:
- Open the "Video Wall - Remote Control" Experience in Composer.
- Use 'Save as" to create a copy with a preferred name. For example, "Video Wall - Remote Control v2".
- When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. You will need to select "Duplicate" to duplicate the Headless CMS Base.
- In the "Video Wall - Remote Control" H-CMS base, go to the "Settings" collection and change the Credential Key to your own from your Intuiface Account.
- In the "Video Wall - Remote Control" H-CMS base, go to the "Remote/Videowall Pairing" collection and change the remote device name and display device name to your device names. These will communicate with each other via Web Triggers. If this is not detailed, you will not be able to send or receive Web Trigger commands between the experiences.
- In the "Videos" collection, upload your own video thumbnails.
- If you want to filter the videos by category "Tags" you will need to edit the categories within the Tags collection.
Next, for the second experience, follow these steps:
- Open the "Video Wall - Display" Experience in Composer
- Use 'Save as" to create a copy with a preferred name. For example, "Video Wall - Display v2".
- When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. You will need to select "Duplicate" to duplicate the Headless CMS Base.
- In the "Video Wall - Display" H-CMS base, go to the "Videos" collection and change the videos to those of your choice.
Comments
0 comments
Article is closed for comments.