With the BrightSign XC5 series devices, it's possible to run multiple screens from a single player and offset the bezel of the screens for your content... this provides a seamless viewing experience of content flowing 'behind' the bezels.
With embed, we've made it super simple to do this and here's how.
4x1 Example with Bezel Compensation Applied
As a general process, the best way to approach setting up an XC5 series player is to:
Know the screen configuration you're working with
Set up the player to run for that configuration
Then build the layout and publish
Part 1: Setting up the player
To kick things off there are a few things you need:
The dimensions and bezel sizes of the screens you are using
The orientation and resolution of the screens
In our example, we're going to be using 4x Samsung QM43B displays mounted in landscape orientation side by side. The sizes of the panels are:
Panel size: 967.5mm wide x 557.7mm high
Bezel size: 9.2mm(T/L/R), 11.2mm(B)
Resolution: We'll be setting this up to run as 1920x1080p per panel as the content we are using is designed for 4x1 HD
Now we know what we're working with we can set up the player.
With the device registered to your account, click into the device edit page. Scroll down to 'Output' and then configure the options.
Note: When configuring using the preset options, the resolution, orientation and bezel compensation is applied to all outputs.
For example:
Configuration = 4x1 (there are other options here too including a custom option for configuring a combination of different screens, resolutions or orientations)
Orientation = Landscape
Resolution = 1920x1080x60p
Bezel Compensation = Enabled
Screen Width (mm) = 967.5
Screen Height (mm) = 557.7
Bezel Top (mm) = 9.2
Bezel Bottom (mm) = 11.2
Bezel Left (mm) = 9.2
Bezel Right (mm) = 9.2
With this applied, click Save Device.
On saving these settings the BrightSign player will now reboot to apply the changes. Once it's rebooted, you can refresh the Devices dashboard and you'll see the resolution of the device has updated to include the 4x1 resolution + the bezels of the screens. In our example this equals 7791 x 1080px resolution.
Part 2: Making a Layout and Publishing
Know the device is configured, we can go into the Layouts section and create a new layout.
When choosing the orientation we choose landscape and when choosing the resolution, we choose the 7791 x 1080 option for the XC4055 we've just configured.
We can then choose a blank template and save and continue to the builder.
In the builder, we can set up a simple 'all screen' layout that will play a 7680px by 1080px video. We'll also add in some circle zones where the screens join so we can see the impact of the bezel correction in more detail.
To setup the all screen takeover zone, we can set the zone dimensions to fill the entire layout canvas:
Width (px) = 7791
Height (px) = 1080
And position to
Top (px) = 0
Left (px) = 0
Now, we can add the video content to the zone and be sure it's sizing is set to stretch.
If you're planning to add other zones of content on top of the video, you'll need to set the video placement. Click the playlist item edit icon and you'll have two options:
Above Content - this puts the video(s) in this zone on top of all other content (good for full screen takeovers)
Behind Content - this puts the video(s) in this zone behind all other content (good for layering other content such as images or text on top)
Next, we'll add the circle zones which are purely to highlight the bezel correction function in this example... you don't have to do this but for the sake of demonstration we've added them.
So, to demonstrate the bezel compensation feature we'll add 3x circles to place between the screen bezels. We've set the video placement to 'Behind Content' so these new zones will appear on top.
To add the first circle we simply add a new zone and configure it as below to place it over the join of Screen 1 and Screen 2.
Circle 1:
Dimension
Width (px) = 1000
Height (px) = 1000
Position
Top (px) = 40
Left (px) = 1447.75
BG Colour = Anything obvious, e.g. #d334d0
Border Radius (px) = 500
Let's duplicate this zone and move it to be placed over the join of Screen 2 and Screen 3
Circle 2:
Dimension
Width (px) = 1000
Height (px) = 1000
Position
Top (px) = 40
Left (px) = 3395.5
BG Colour = Anything obvious, e.g. #d334d0
Border Radius (px) = 500
And finally, let's duplicate the zone and move it to be placed over the join of Screen 3 and Screen 4
Circle 3:
Dimension
Width (px) = 1000
Height (px) = 1000
Position
Top (px) = 40
Left (px) = 5343.25
BG Colour = Anything obvious, e.g. #d334d0
Border Radius (px) = 500
With the four zones added to the layout and the video in the main all screen zone, our layout looks like this:
We can now save the layout and go the Channel section where we can create a new channel and publish the layout to the XC4055 we have registered on the account.
With the content downloaded to the device, the bezels will be compensated for and the content will run seamlessly behind them....like this:
