Build a signage system
Discover how to create a digital signage display for an open source conference using Xibo digital signage and the help of Matt Holder.
Creating a digital display for an open source conference, so everyone knows what’s going on, using Xibo digital signage and the help of Matt Holder.
Most Linux Format readers will have noticed an increase in the number of large-format screens in public places, displaying a range of information. This is called digital signage. In this tutorial we’ll be looking at Xibo, a flexible system that can be used to show images, videos, RSS feeds, weather data, mapping data, tables of information, websites, embedded HTML and more. We’ll show how to set up a server and client, before finally designing a layout and scheduling this content.
The system comprises a server component, which is open source, as well as a number of clients for different display types. The Windows and Linux clients are both free and open source, whereas the other platforms are paid-for, licenced clients. The server can be self-hosted, or hosting can be provided by the team themselves.
Before going any further, let’s talk about some of the terminology utilised by the system. Displays is the name of the device which runs the player software and displays the content. This could be a Windows/ Linux PC, Android device or large-screen TV running embedded software. Display groups can be used to group multiple displays and content can be scheduled to multiple devices at once. Schedules are then used to define when content should appear on Displays.
Layouts are designed by the end user to define what content should be displayed on specific areas of the display. Layouts are then split into Regions and each Region contains a playlist. See the diagram (top right), which explains the basic concepts of the Xibo digital signage system.
Each Region can then display a number of pieces of content within its timeline. These concepts will become clearer as we work our way through this tutorial.
Installing the server
The Xibo server utilises a LAMP stack (which refers to the Linux operating system, Apache web server, MySQL database server and PHP programming language) as well as other tools to provide messaging between the clients and server. In recent years the entire setup has been wrapped inside Docker containers to make installation and updates as simple as possible. The server we’ll use to install this on is Ubuntu 20.04, but container systems make the base OS fairly unimportant, so feel free to work with what you’re most familiar with.
The software will work equally as well on bare metal or in a virtual machine (VM). When used in production, however, a VM wouldn’t necessarily be the most suitable choice, especially due to possible issues with video playback using the VM’s drivers.
Once the base machine has been installed, open a terminal, run updates and then install Docker and
docker-compose. Commands should be run as root or prefixed with sudo: apt update && apt upgrade
apt install apt-transport-https ca-certificates curl software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/ gpg | apt-key add add-apt-repository “deb [arch=amd64] https:// download.docker.com/linux/ubuntu $(lsb_release -cs) stable” apt install docker-ce curl -L https://github.com/docker/compose/releases/ download/1.24.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose chmod +x /usr/local/bin/docker-compose
With the prerequisites installed there are a few steps required to configure the docker-compose files to enable the Docker containers to run and communicate with each other. mkdir /opt/xibo cd /opt/xibo wget -O xibo-docker.tar.gz https://xibo.org.uk/api/ downloads/cms tar --strip-components=1 -zxvf xibo-docker.tar.gz cp config.env.template config.env nano config.env
On the relevant line, enter a strong password for the MySQL database and configure any other required options. Find out more about the docker-compose file here: https://xibo.org.uk/docs/setup/xibo-cms-withdocker-on-ubuntu-18-04#create_config.env_file.
Next, bring up the containers using docker-compose up -d and allow Docker to complete its work. The server has now been installed and the server can be accessed from your favourite browser, by entering http://IP_ ADDRESS_OF_XIBO_SERVER – enter your username and password at the login screen.
The player
There are open source players for Windows and Linux as well as paid-for options for other platforms as well, such as Android, Tizen and Web OS. In this article we’ll install the player on Ubuntu 20.10. The Xibo team uses Canonical’s Snap packaging system, which makes the installation of the client straightforward and updates are applied automatically. Again, back in the terminal the client can be installed by entering:
$ snap install xibo-player --channel=stable
To enable the client to communicate with the server, there are a couple of steps that need to be followed.
First, in a web browser, login to the CMS using the default credentials of xibo_admin and password.
Navigate to the Settings tab and copy the key from the CMS Secret Key field. The player can be opened from the Desktop or from a terminal, by entering xibo-player.
The first time this is opened, the configuration screen will load. Enter the URL of the CMS (server) component, paste the value from the CMS for the Key and a location that the client can use to save files to (see screenshot, left). The information shown in the screenshot is required to configure the client.
When selecting the Save option, the client will contact the server, which will report back that the Display isn’t currently registered. Now, back in the web browser navigate to the Displays tab and one entry will be shown. On the right-hand side of the screen select the Options menu and then click Authorise. Finally, back at the client click Save and the client will report that the Display is active and ready to start. The options screen can then be closed and when the client is opened again the default layout will be displayed (see screenshot, previous page). Once configured, the client will download the files required for the default layout. These will then be displayed.
Conference time
The example that we’ll be walking through are displays that could be set up around a conference venue. The layout (see diagram above) will contain a title in Region 1, text in Region 2 which will relate to videos and images
in Region 3. Region 4 will contain a scrolling ticker of an open-source RSS feed.
Before creating the example, we should investigate the GUI (see below). 1. Layouts are scheduled at a date and time. 2. Layouts are created here. 3. Media is managed here. 4. Displays are managed here.
Back in the web browser, login to the Xibo digital signage CMS, navigate to the Layouts section and create a new one. Once a name has been entered, the defaults should suffice. When created, the Layout editor will open. The first step is to resize the default Region, which is created by default. Select the option to edit Regions, which looks like an image of a pencil and notebook, and use the drag handles to resize the orange rectangle. Add further Regions to the layout, so that the image in the diagram has been replicated and four Regions exist within.
Regions can be set to loop, which is useful when they contain certain types of content. To do this, select the Region and then read the guidance before deciding whether to enable the loop option or not. Before saving the changes that have been made to the layout, set a light background colour or upload a background image by using the options in the right-hand panel.
Before carrying on with the setup of the digital signage, it’s a good idea to take stock of what has been accomplished. So far, the server/CMS has been installed, the client has been installed and configured to communicate with the server, and the basic Layout has been set up with the correct number of Regions. In the next step, the Regions will be populated with information and finally the Layout can be scheduled and then viewed on the player.
Establish your Region
To start with, the top Region will be populated with a title. Add the title into Region 1 by selecting the icon that shows four squares, click the plus on the Text widget and then select Region 1 in the playlist editor. Select the Edit icon on the text item and enter a name for the conference as well as formatting the text. When completed, select Save (see screenshot, below right). When editing Regions, options appear on the right-hand side of the preview. This is an example of the options associated with the text widget.
The next step is to add an RSS feed of Linux news to the bottom Region. This is very similar to entering text, but requires the usage of the Ticker widget. This widget is formatted from the configuration panel in the topright of the Layout editor. The defaults should suffice on the General tab. On the Configuration tab select the Feed URL field and add the link to a suitable RSS feed. On the Templates tab select Title Only and finally, on the appearance tab, select Marquee Left. When these changes have been made, save the changes.
One of the many powerful things about Xibo is the ability to schedule content in two different Regions that can change at the same time. This will be useful for the final part of this tutorial because we’re going to populate the final two Regions with textual information on the left-hand side and a video and image on the right-hand side. The textual information will relate to the video being shown. When the video changes to a second piece of content, the text should also change at the same time.
The content that we’ll be adding is a video of Big Buck Bunny as well as some information about it. The second piece of content will be a photograph of Linus Torvalds, as well as some information about him and the
Linux kernel. First of all, download a Creative Commons licenced photo of Linus Torvalds as well as the Big Buck Bunny film from https://download.blender.org/demo/ movies/BBB.
To add the video, select the Region you wish to display it from and from the toolbox at the bottom hover over the video button and then use the Grab option to drag it to the Region you wish it to appear in. At this stage it’s important to know the length of the video file, so that you can set the timing for the text in the adjacent Region to be the same.
Add text to your display
To add some text, grab some from a suitable source and store it temporarily in a text file. To add this to Xibo, select the Region from the Region editor and then navigate to the Text button. Again, use the Grab button to drag this to the relevant Region. When the Text widget has been added, set the duration to be the same as that of the video file and click the pencil icon on the left of the Options panel. Paste the content into this Region and then format appropriately, before saving the Region settings on the right-hand side. Add a marquee effect to the Region if you want the text to scroll.
These previous steps can now essentially be repeated. With the Layout design tool, select the same Region that contains the video of Big Buck Bunny. From the Widget selection tool at the bottom of the screen, select Image and use the grab handle to drag this to the selected Region. When asked, select Add Files to select the photograph to be uploaded. When a thumbnail appears in the Upload media window click Start Upload. Now click Done and you’ll see that in the Region in question there are now two items: a video and an image (you may need to scroll to the right). Select the image, click ‘Set a duration’ and set this to 60 before saving the Region.
Now select the adjacent Region and use the grab handle on the Text widget to drag it to the Region. This Region will then contain two text widgets. Make sure you check that the text widgets appear in the correct order and therefore match the order of the content in the other Region. If necessary this can be changed by dragging the order. With the final text widget selected, set a duration of 60 again and then use the pencil icon on the Region preview to enable Edit mode, where you can paste in your content and format. As before, set a marquee effect if the text should move in your Region.
Now that the content has all been added to the layout, this can be previewed within the web browser. To do so, click the back arrow button, which is underneath the Region editing preview. This will then display an overview of the entire layout. Simply selecting the Play icon, which will show a preview in the browser. Please note that not all content can be previewed in this way.
Once the layout has been completed, the final stage is to use the Actions option at the top of the screen to publish the Layout. This means that the changes will be saved and ready to be displayed. When making further changes to the layout, these can be saved part-way through and then published at a later time. Also, publishing changes can be made on a schedule, which can come in very handy.
The final stage in the process is to schedule the Layout to the display. To complete this, on the left-hand side select Schedule and add a new entry. When the pop-up loads add the Layout, select the Display, Layout and select the date and time options for the Display. Use the option to save the schedule addition and this can be seen on the calendar (make sure to select the Display in the option at the top of the screen if the calendar appears empty).
Now, moving back to the Desktop, open the Xibo player and within a couple of minutes the content will be downloaded and displayed on the player.
So far we’ve merely scratched the surface of what this digital signage system is capable of. For some more advanced things to try, look at using datasets to display table data (datasets can also be used in a ticker) and the use of PHP functions to display certain parts of the dataset data, based on the date and time. For further information, the Xibo team has spent a considerable amount of time crafting documentation to support all users with the software. This can be found at https:// xibo.org.uk/manual/en/index.html.