Figure 3 – Limited Dashboard

The Icons on these screens are as follows:

• Schedule - Access the schedule for each display, and schedule new or existing layouts to

displays.

• Layouts - Create, edit or delete layouts

• Library - Create, replace or delete media items

• Templates - View the templates that are offered to users when they create new layouts.

• Users - Allows administration of users on the system (Admins Only)

• Settings - Xibo configuration settings (Admins Only)

• License - Information about the licenses Xibo is released under.

• Manual - Access the online manual

Users and Groups and Permissions Users in Xibo are also assigned to groups. Groups are collections of like individuals that need

permission to access the same items such as different members of the same department or school.

All items in Xibo, including media and layouts have permissions on who can view and change them;

these permissions are set by either user or group, or can be set to public for all users. Therefore,

when you log in to Xibo you will only see those items to which you have permission, and you can feel

safe knowing that only people in your group and administrators will be able to access your content.

Note: Currently all displays on the system are visible to all users (although not editable). In the next

version of Xibo server displays will be groupable, ensuring that users will only see the displays they

are entitled to see.

The Library The library in Xibo is where all the media you upload to Xibo is stored. Note: There is a limit on the

size of media that can be uploaded, and this is currently 128Mb per media item. Larger files such as

videos can always be accessed via the Internet. Figure 4 below shows a sample of the Library screen

with a couple of media items in it.

Figure 4 – Library Screen

The screen shows the name of the item, the type of item (e.g. image, flash, etc...), the default

duration, the permissions on the item, the owner and what actions can be carried out on the item

(e.g. Edit, Delete).

Please note that we are trying to operate a naming convention in the Universities implementation of

Xibo. For media this convention is:

School/Department – Media Type – Description

Where School/Department should be the name of the school or department which owns the content

(e.g. Geography or Finance), for the general Labstats user this should simply be Labstats.

Media type is as follows:

Background – This is an image which is used for a layout background.

Image – All other images (Image formats supported are jpg, jpeg, png and gif).

Video – Video files (supported format are wmv, mpeg and mpg).

Flash – Flash animations, applets and videos (swf files).

PowerPoint – PowerPoint presentations (These are in PowerPoint 2003 format and not

2007, e.g. ppt, pps) and there are a number of steps needed to make a PowerPoint

presentation compatible with Xibo (more about this below).

Description is free text to describe the content.

Adding Media into the Library

From the Library screen you can add media to Xibo, this is not strictly necessary as it is possible to

add media when designing layouts, which will be added to the library as part of the process, but if

you have media you wish to add and use regularly you may wish to upload this before layout design.

Clicking the Add Media option at the top of the

Library screen will open a popup box which

offers you the choice of uploading Images,

Video, Flash or PowerPoint (Figure 5).

Clicking any of these options will open a window asking for the image file, a name (see naming

Figure 5 – Add Media options

convention above), duration (in seconds) and

what Sharing permissions you want to up on

the item (Figure 6).

There will also be some notes on the file

types and size limits in place for each media

type.

To add the item click the Browse button, and

navigate to where the file you wish to upload

is stored. Clicking this will add it to the Image

File field. Enter the name of the item, and the

default duration (in seconds) you want for this item. Clicking the Sharing drop down menu will

present you with three options Private, Group and Public. Select the appropriate option and then

click Save.

All popup windows in Xibo have and X in the upper right hand corner of the window which allows

you close the popup, much like that used in Microsoft Windows.

Viewing the Library

When you want to check the contents of the library, it may hold many pages of media which will

make finding the items you require harder. On the top of the Library screen you will notice a Filter

option. Clicking this opens

up a filter form which will

allow you to limit the

items on the Library

screen (Figure 7).

There are several ways to use this filter to maximum effect.

The Type dropdown menu allows you to select the type of media (such as Image, Video, etc). Use of

the Owner dropdown allows selection of the user who owns the media, and the Shared dropdown

limits the selection to either Private, Group, Public or All permissions.

It is worth noting the Retired option, when removing content from Xibo, if it is in use anywhere in

the system it is not possible to delete the item, and it must then be retired. Retiring an item in the

Library will remove it from the view, but not from the system.

Finally, the Name option on the filter is very powerful and it will become apparent why we are using

the naming convention we have chosen. The system will only return matches for the text entered

into the Name field, so for example if we only wanted to see Background items we could enter

Background into this box and the list would change to only show background items. This is a

Figure 6 – Add New Image Screen

Figure 7 – Filter Options

powerful tool when you have a lot of content in the system, and you should experiment with how it

is used.

Updating Media

From the Library screen you can also update media; you may wish to change the duration, replace

the media with a new version or delete/retire the media.

To change a media item

click the Edit button next

the item. A screen which is

similar to the add media

option will then appear

(Figure 8).

In this screen you can

change the default duration

of the item, the name or

the permissions.

To replace the version of the media with a new version, use the Browse button, select the media and

upload. See the “Note:” at the bottom though. As this media could have been used in several

existing layouts, replacing it with a new version will not automatically cause all the layouts that use it

to start using the new version. You must manually remove/add the media from those layouts to get

the newest version.

Deleting media is more complex. Because media can be reused multiple times, and sometimes by

many different users on different displays, the system won't let you delete media unless it has never

been used in a layout (or it has been removed from all layouts in which it has been used). Xibo

instead offers to retire media. That means that it will continue to be available in layouts that are pre-

existing, but will not be offered for use in any new layout.

Clicking the Delete button next to a media item will show you what is possible. If you're happy to

proceed, you can click OK to take that action.

PowerPoint Media Items

PowerPoint and Xibo have a special relationship and there are a number of requirements and

options you need to be aware of before using PowerPoint slides.

• Most importantly, Xibo is not currently compatible with PowerPoint 2007 or 2010, slides

must be saved in PowerPoint 2003 format (e.g. ppt & pps).

• Make sure your presentation is the right shape. PowerPoint slides are 4:3 ratio by default.

Use “Design Ribbon � Page Layout” to change the width to 31.8cm for a 16:9 ratio slide.

Figure 8 - Edit Image

• Make sure your presentation has slide timings. If you run the slide show on your PC and the

slides and animations advance without your interaction, then you've done it right. To setup

automatic advance on the slides, go to “Slideshow Ribbon � Rehearse Timings”.

• Turn off scrollbars. Go to “Slideshow Ribbon � Setup Show” and choose “Browsed by an

individual (windowed)” and ensure

“Show scrollbar” is NOT ticked.

Once you have these settings, you can save

your presentation ready to upload to Xibo.

Note: It is worth considering splitting you slideshow up if there are regular changes and additions to

the content, as each smaller slide can be separate layouts letting Xibo manage the display of each

one.

Layouts A layout is made up of a background picture or colour. On top of that, one or more transparent

boxes are drawn - “regions” - which can contain one or more media items (pictures, videos etc). Let’s

look at a finished layout as shown on the digital sign, and then work out how it was constructed

(Figure 10).

Figure 10 - Example Layout

Figure 9 - Slide Show Settings

Here you can see a screen that you might find in a hotel conference centre. It's showing the itinerary

for two conference suites and a news feed from the BBC. Let's take a look at how it has been

constructed (figure 11):

Figure 11 - Example Layout Construction

This is the designer view for Xibo. You can see the background image, and on top of it are drawn six

regions (each identified by the dashed lines). The regions contain images, text and an RSS Ticker.

Note for Opera Users: The Opera browser does not allow Xibo to substitute its own context menu

when right-clicking in the layout designer. It is therefore not possible to perform certain operations

in the Opera Browser. Users are advised to use Mozilla Firefox, Google Chrome, Safari or Internet

Explorer instead as these browsers do not have such a limitation.

The Layout Screen

Clicking the Layout option opens the Layout screen (Figure 12). On this screen you can see all the

layouts your user has rights to see.

Figure 12 - Layout Screen

The layout screen lists the Name of the Layout, a Description, Permissions, Owner, Group and a

series of actions that can be performed on the layout (Design, Edit and Delete).

As with the Library we have designed a naming convention to try and make the display of the layouts

more manageable. This naming convention is as follows:

School/Department – Layout

or for Labstats displays

Labstats – Building - Room

Where School/Department should be the name of the school or department which owns the content

(e.g. Geography or Finance.

Layout is free text intended to describe the content.

For Labstats displays the entries are self explanatory. Example of layout names include:

Geography – News

Law – Events

Labstats – Trent – LG25

As with media, this screen

has a Filter option (Figure

13), which includes the

ability to filter by Name,

Owner, Share Permissions,

Retired and a new field

Tags.

This screen functions the

same way as the library.

The Actions listed next to each item on the list have various functions which will be covered in

greater detail later in this document.

Creating a New Layout

To create a new layout select the Layouts screen from the Dashboard and then click Add Layout.

You will be presented with a popup entitled

“Add/Edit a Layout” (Figure 14).

The Add Layout screen asks for various information,

some of which is Mandatory the rest is Optional.

The fields on the Add Layout form are described as

follows:

Figure 13 - Layout Filter

Figure 14 - Add Layout

Name (Mandatory)

A name for this layout. This is how you will refer to it later on when scheduling or editing the

layout.

Description (Optional)

An optional description for the layout.

Tags (Optional)

A space-separated list of keywords to apply to the layout. These could be used to identify

groups of layouts or sometimes have special meaning if you have specialised versions of the

Xibo client.

Shared (Mandatory)

Choose who can see this layout in Xibo. Private means only you (and Admins) can see the

layout. "Group" means people in your group can see the layout and "Public" means

everyone can see it.

Template (Mandatory)

Optionally you can choose a template to base your new layout on.

Choosing the right template

Xibo comes with a selection of default templates which we think will cater for most digital signage

applications (e.g. LCD TVs, projectors, portrait screens).

The Xibo client will make its best effort to fit whatever shape layout you choose on to the screen,

however sending a client a layout in a 4:3 aspect ratio when it's connected to a 16:9 TV wastes two

bars on either side of your content.

Try to choose an template with the closest aspect ratio to the screen you'll be showing the layout

on. Here's a list of typical displays and the template to choose:

LCD/Plasma Widescreen TV

LCD TVs tend to be either 16:9 aspect ratio. Try "Full Screen 16:9" first. If you find there are

slim black bars to the top and bottom of your full screen content, try switching to "Full

Screen 16:10".

Widescreen Projectors

Widescreen projectors can be 16:9 or 16:10 so you'll need to try both and see which fits

best.

Widescreen Computer Monitors

Widescreen Computer Monitors are usually 16:10 but there are a few 16:9 ones out there.

Try "Full Screen 16:10" first.

Computer Monitors

Non-widescreen computer monitors are usually 4:3 aspect ratio. Try "Full Screen 4:3".

CRT Televisions

Old TVs tend to be either 4:3 or 3:2 aspect ratio. Try "Full Screen 4:3" or "Full Screen 3:2"

and see which fits best.

There are also specialist versions of all the above displays that are turned on their side. Called

"Portrait" displays, they are taller than they are wide. Xibo supports all the above aspect ratios for

portrait screens - 2:3, 3:4, 9:16, 10:16. Consult your display manufacturer to find out which aspect

ratio to choose.

Layout Designer

Having entered all the details on the Add Layout screen, clicking save will open the Layout Designer

screen (Figure 15).

Figure 15 - Layout Designer

Here we can see the new layout we've created. Since we based it on one of the “Full Screen”

templates, you can see it's a wide screen aspect ratio and has one region that fills the entire screen.

You can change the

background colour or

choose a background image

if you wish. Click the

“Background” button

(Figure 16).

Figure 16 - Change Background

Background Colour

Select a colour from the list of available background colours.

Background Image

Choose a background image that has been uploaded already.

Resolution

Choose the aspect ratio of the layout. Since you used one of the Full Screen templates that

came with Xibo, there is usually no need to change this.

Try choosing a new background colour and click “Save”.

To resize the region, click and drag the green handles on the left and bottom edges of the region to

make it smaller, then click and drag on the region itself to move it around the layout.

Adding Regions

As you make the region smaller, you'll see the background behind. Right click on the background and

choose “Add Region” (Figure 17).

Figure 17 - Add Region

You'll see a new region appear. You can move it around or resize it in the same way as you did

before.

Removing Regions

If you decide you don't want a region any more, right click on it and choose "Remove Region". Note

that you will lose any media items contained in the region that aren't in the library (e.g. Text, RSS

Tickers, and Embedded HTML).

Assigning Media

Now you have one or more regions, we need to put some media in the regions so there's something

to show.

To edit a region's timeline (the sequence of media items that the region plays), double click on the

region. You'll see the timeline appear (Figure 18):

Figure 18 - Region Time Line

The top of the Region Timeline is a sequence of icons representing the different types of Media you

can assign to the region.

Library

The first button is the Library. This takes you through to a list of media items that have

already been uploaded – either in the “Library” section or in a previous layout.

Image

Add Image lets you upload a new Image.

Video

Add Video lets you upload a new Video.

PowerPoint

Add PowerPoint lets you upload a PowerPoint file.

Text

Add Text lets you type in some text and format it.

Flash

Add a Adobe Flash swf file

Webpage

Embed an external webpage

Ticker

Reformat an RSS feed in to a Ticker (scrolling or static text)

Embedded HTML

Embed some HTML

Your administrator may have turned some of these media types off, or added new ones. We'll look

at how to define various media types here.

Images, Videos, Flash and PowerPoint

Whilst each dialogue box for these media is a little different they are essentially the same and will be

dealt with in the same section.

Clicking on the Add Item, where Item is Image,

Video, Flash or PowerPoint, will result in a pop

up window (Figure 19) appearing. The screen

shown is that of an Image item, but they are all

essentially the same.

We use the Browse button to select the image

file we want to upload, the name we want to

give them item (see naming conventions

above), what permissions we want to assign the

item, and duration in seconds we want the item

on screen for. Note that if this is the only media item in a region, then this is the minimum amount of

time the image will be shown for as the total time shown will be dictated by the total run time of the

longest-running region on the layout.

Clicking save will save the item.

Each form will have notes under the Duration box to indicate any file restrictions that are in place for

this item type.

Text

You can add text directly to Xibo layouts. Text is specific to the layout it's added to. It doesn't go in

the library so you'll need to copy/paste between layouts if you want to use text on more than one

layout. The reason for this is that it very quickly becomes unmanageable to have named text strings

in the library - especially when you have minor variations.

Note: A certain amount of

experimentation is required

when sizing text. The text

preview in the web interface

can be misleading about how

the text will finally fit on the

layout. If possible, preview a

new layout on a display to see

how the text fits, and make

any adjustments required to

get the layout as you want it.

From the Design screen you

need to click Text to add a

Text element to the region

timeline.

Figure 19 - Add Image

Figure 20 - Text Item

A new window will appear (Figure 20), which should look very familiar to users of Word Processing

packages. Xibo uses FCKeditor for text input, and full documentation for all the buttons it available

from http://docs.cksource.com/FCKeditor_2.x/Users_Guide/Common_Tasks/Text_Formatting. The

Menu Bar is shown in greater detail in Figure 21 below.

Type in the text you want to add.

Common formatting tools are:

Change the font, highlight your text and choose a new font from the "Font" dropdown

menu.

Change the size, highlight your text and choose a new size from the "Size" dropdown menu.

Change the colour, highlight your text and choose a new colour from the font colour pallet

icon .

Bold, italic and underline are available using the respective icons :

Enter a duration in seconds for the text to be on the layout. Note that if this is the only media item in

a region, then this is the minimum amount of time the text will be shown for as the total time shown

will be dictated by the total run time of the longest-running region on the layout.

Optionally select a direction for the text to scroll in. Available options are Up, Down, Left and Right.

If you've selected to scroll the text, you can control the speed of the scrolling by editing the "Scroll

Speed" value. Lower numbers cause the text to scroll faster.

When you're happy with your text, click the "Save" button.

There are many more functions available from FCKeditor, and the best way to discover them is to

experiment.

Web Page

The Web Page option allows you to embed a

webpage into your region. It is important that the

region is large enough to display the web page

otherwise scroll bars will show. Clicking the web

page option opens a pop up (Figure22) which asks

for a Link and Duration.

Figure 21 - Text Editing Options

Figure 22 - Add New Web Page

Add New Ticker

Add new ticker is Xibo’s way of saying RSS Feed. For those who are unfamiliar with RSS Feeds, RSS

(most commonly expanded as Really Simple Syndication) is a family of web feed formats used to

publish frequently updated works—such as blog entries, news headlines, audio, and video—in a

standardized format. Clicking Add New Ticker will open a pop up window (Figure 23).

Figure 23 - Add New Ticker

When adding an RSS Feed you will enter the Link of the RSS Feed, the Direction of scrolling if

required (for a ticker tape style display for example), the Scroll Speed, Duration and the Update

Interval in minutes (how frequently the display goes back to the RSS Feed to check for updated

content). You will see the text [Title] - [Date] - [Description] in the text editor box. This is the

standard layout for RSS, and all the RSS Fields much be enclosed in []. You can however format this

using the usual format buttons such as bold, etc...

Other Display Types

There are some additional displays, such as Embedded Web which we will not go into detail on at

this stage, as they are for more advanced usage.

Additionally, in the next version of Xibo, Micro Blog feeds will be available (such as Twitter).

Previewing Regions

In the Layout Designer, each region has two blue

arrows on it when the mouse is over the region.

Clicking on the blue arrows steps forwards and

back through the media items assigned to that

region. Where possible, a preview of the media

is shown in the region. If it's not possible for us

to show you a preview, an icon is shown in its

place. A media information popup is also shown

giving the name of the media and its duration in

seconds. (Figure 24)

Figure 24 - Region Preview

Changing the Region Timeline

You may wish to change the order that media items appear in a region. The Layout Designer has the

ability to reorder media in a region after it has been added. This is achieved through drag and drop.

1. Find the region you wish to edit

2. Double click the region to open the Region Timeline

3. Each item on the timeline is separated by a vertical line. Click and hold your mouse pointer

over the item you want to move and drag it.

4. Release the mouse button when it touches the vertical line next to your desired final

position.

Figure 25 - Changing the Region Timeline

Editing Layouts, Changing Designs and Deleting

From the Layout Screen there are three options next to each layout.

Design

Clicking Design will open the Layout Design Screen, where you can change the regions on a layout, or

alter the Region Timeline.

Edit

Edit allows you to edit the details of the Layout such as Name, Description, Tags, Permissions and

Retire or Un-Retire a layout.

Delete

Clicking Delete will do one of two things. If the Layout is in use, you will be warned that the system

cannot delete the Layout and it will offer you the chance to retire the layout. This will mean that any

displays currently showing the Layout will continue to show it, but it will not be available for other

displays. If the layout is not in use, then you will be given the opportunity to delete the layout.

Schedule The final piece of the jigsaw for Xibo is the Schedule Screen. It is through the Schedule screen that

we assign a Layout to a Display.

The Schedule screen (Figure 26) shows a calendar and list of Displays across the top of the screen

(note that it is more than likely that there will be more displays than can fit on the screen, although

this will be addressed in the next version of the server software).

Figure 26 - Scheduling Screen

You'll see each digital sign (display) on the system that you have access to down the left hand side

under the mini calendar. Clicking on any of those screens will show you the current schedule for the

month for that display.

Xibo supports “clash scheduling” - ie scheduling more than one thing to run at a time. Where

multiple layouts are scheduled to be shown at once, they are shown in sequence one after the next

until the clash finishes.

To Schedule a Layout we first tick each display we want the layout to appear

Now click on the day you want to schedule the layout to appear on. NB you must click the day

numbers at the top of the block ie (1,2,17,18 etc).

Figure 27 - Schedule an Event

Fill in Start Time and End Time. You can click on the little calendar between the date and time boxes

to get a calendar popup to choose a date rather than typing it.

Below the End Time box, choose the layout you want to schedule.

To the right is a list of displays. Notice the display we were looking at the schedule for is already

selected for us. If you want to show the same thing on more than one display, you can hold down

the “Ctrl” key and click on additional displays to select them.

Finally click “Save”.

The layout is then scheduled. You'll see a new entry in the schedule view for it.

Xibo is set up in such a way that each layout scheduled for display is cycled, so if you have 5 layouts

scheduled for a single display each one will appear in sequence for its scheduled duration. If you

have a 6th

layout which runs between 1pm and 3pm on a Friday afternoon, this will be automatically

brought into the cycle at the correct time, and stopped when it’s schedule is finished.

This effectively means you can schedule layouts months in advance of an event and forget about

them letting the server handle it.

Changing and Deleting a Scheduled Layout

To change or delete a scheduled item, open the scheduling screen and select the correct screen

from the top bar. Click the date you want to change and the Scheduling screen will pop up (as Figure

28).

Figure 28 - Changing a Schedule

To change a schedule click on the layout you want and change the Start and End dates/times, etc...

If you want to delete the item click the delete button.

You will notice that below the Save Button are two radio buttons, ‘Update events for all displays in

this series’ and ‘Update event only for this display’. Selecting the first of these will write the changes

you are making to every display that has this event scheduled. The second will only apply to this

display. As similar option will be presented when you delete an event.