Manual:Layouts:Design

From Xibo

Important note: When you edit this page, you agree to release your contribution under the Creative Commons Attribution-Share Alike License. If you don't want this or can't do this because of license restrictions, please don't edit. This page is one of the Xibo Manual Pages.

Back to the Contents

Please Note: This page is incomplete. If the section you require has not been written yet, please ask for help in Launchpad Answers: https://answers.launchpad.net/xibo

Contents 1 Overview 1.1 Notice for Opera Users 1.2 Adding Layouts 1.2.1 Choosing the right template 1.3 Layout Designer 1.3.1 Changing the Background 1.4 Adding Regions 1.5 Removing Regions 1.6 Region Permissions 1.7 Assigning Media 1.7.1 Image 1.7.2 Video 1.7.3 Flash 1.7.4 Powerpoint 1.7.5 Text 1.7.6 MicroBlog 1.7.7 Counter 1.7.8 Permissions 1.8 Previewing Regions 1.9 Changing the Region Timeline 1.9.1 Limitations

Overview

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). Lets look at a finished layout as shown on the digital sign, and then work out how it was constructed.

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:

This is the designer view for Xibo. You can see the background image, and on top of it is drawn six regions (each identified by the dashed lines). The regions contain images, text and an RSS Ticker. Now that we understand the basic makeup of a Xibo layout, we can make a new one.

Notice 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.

Adding Layouts

To add a new layout:

1. From the dashboard, click on "Layouts".
2. Click "Add Layout"
3. A new layout form will appear:

1. Fill in all the required fields, and any other fields you wish to complete.
2. Click Save

The fields on the Add Layout form are described as follows:

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 (eg 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 fullscreen 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

Once you've created a new layout, you should see a screen like this:

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.

Changing the Background

You can change the background colour or choose a background image if you wish. Click the “Background” button.

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”.

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 loose any media items contained in the region that aren't in the library (eg Text, RSS Tickers, Embedded HTML).

Region Permissions

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:

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

MicroBlog

Search the Identi.ca and Twitter Microblogging services and display the results formatted by a template

Counter

An on-screen count up/down timer for use with paper ticket systems

DataSets

Display data sets data

Your administrator may have turned some of these media types off, or added new ones. We'll look at each of the standard Xibo media types in detail here.

Image

You can upload your images to show on a Xibo layout. Currently JPEG, PNG, and GIF files are supported. Transparency is supported in PNG and GIF files, (although NOT if used as background images).

Add an image

1. Click the "Add Image" icon
2. A new dialogue will appear:
   
3. Click "Browse"
4. Select the image file you want to upload from your computer. Click OK
5. While the file uploads, give the image a name for use inside Xibo. Type the name in the "Name" box.
6. Use the Sharing box to decide who else can see this image.
7. Finally enter a duration in seconds that the image should remain in the region until the next media item should appear.
   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.
8. Click "Save"

Video

You can upload your videos to show on a Xibo layout. Currently MPEG, and WMV files are supported.

Add a video

1. Click the "Add Video" icon
2. A new dialogue will appear:
   
3. Click "Browse"
4. Select the video file you want to upload from your computer. Click OK
5. While the file uploads, give the video a name for use inside Xibo. Type the name in the "Name" box.
6. Use the Sharing box to decide who else can see this video.
7. Finally enter a duration in seconds that you want the video to play for, or 0 to play the entire video.
   Note that if this is the only media item in a region, then this is the minimum amount of time the video 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. Videos do not loop automatically so you need to add a second media item in the region with the video to cause it to play again.
8. Click "Save"

Flash

You can upload your Flash swf files to show on a Xibo layout.

Add a Flash File

1. Click the "Add Flash" icon
2. A new dialogue will appear:
   
3. Click "Browse"
4. Select the Flash file you want to upload from your computer. Click OK
5. While the file uploads, give the flash file a name for use inside Xibo. Type the name in the "Name" box.
6. Use the Sharing box to decide who else can see this flash file.
7. Finally enter a duration in seconds that you want the flash file to play for.
   Note that if this is the only media item in a region, then this is the minimum amount of time the presentation 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.
8. Click "Save"
   Note that the C# control used in the Xibo .net client cannot render the background of Flash files transparently. Flash is always rendered on a white background.

Powerpoint

You can upload your Microsoft Powerpoint files to show on a Xibo layout.

Add a Powerpoint Presentation

1. First prepare the Powerpoint Presentation. Powerpoint will, by default, put scroll bars up the side of your presentation, unless you do the following for each Powerpoint file BEFORE you upload it:
   1. Open your Powerpoint Document
   2. Slide Show -> Setup Show
   3. Under "Show Type", choose "Browsed by an individual (window)" and then untick "Show scrollbar"
   4. Click OK
   5. Save the Presentation
   6. Note also that Xibo will not advance the slides in a Presentation, so you should record automatic slide timings by going to "Slide Show -> Rehearse Timings" and then saving the presentation.
2. Once your Powerpoint file is prepared, click the "Add Powerpoint" icon
3. A new dialogue will appear:
   
4. Click "Browse"
5. Select the Powerpoint file you want to upload from your computer. Click OK
6. While the file uploads, give the presentation a name for use inside Xibo. Type the name in the "Name" box.
7. Use the Sharing box to decide who else can see this presentation.
8. Finally enter a duration in seconds that you want the presentation to play for.
   Note that if this is the only media item in a region, then this is the minimum amount of time the presentation 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.
9. Click "Save"

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.

Add Text

1. Click the "Add Text" icon
2. A new dialogue will appear:
   
3. You'll see the text editor. Xibo uses FCKeditor for text input. It's format is very similar to many word processing applications you may have used in the past. Complete documentation for all the buttons is available over at FCKEditor's website here: [1]
4. Type in the text you want to add.
5. To change the font, highlight your text and choose a new font from the "Font" dropdown menu.
6. To change the size, highlight your text and choose a new size from the "Size" dropdown menu.
7. To change the colour, highlight your text and choose a new colour from the font colour pallet icon
8. Bold, italic and underline are available using the respective icon:
9. 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.
10. Optionally select a direction for the text to scroll in. Available options are Up, Down, Left and Right.
11. 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.
12. When you're happy with your text, click the "Save" button.

MicroBlog

The MicroBlog module searches Identi.ca and/or Twitter for the search term you specify and then displays posts that contain that term one at a time with a fade transition between items.

Adding a MicroBlog search:

1. Click the "Add MicroBlog" button
2. A new dialogue will appear:
   
3. First choose which service or services you want to search. Tick either the Twitter or Identica boxes, or both.
4. Next enter a search term. This is the word you want to search for.
5. Enter a duration in seconds. This is the total time you want the media to be shown for (as you would for any other Xibo media item)
6. The FadeInterval box controls how long in seconds the fade in and fade out animations run for. 1 second is a sensible default.
7. Speed controls how long each post is displayed for in seconds. 5 seconds is a sensible default.
8. Update Interval controls how often the client will connect to the microblog services and search for new content in minutes. Twitter limits the number of searches you can do over a fixed period so I'd suggest setting this to around 10 minutes. Cached content is shown between updates.
9. History Size tells the client how many items to hold in local cache. When the client connects to the microblog services for new content, all new posts that match the search term are collected and displayed, however only the newest number of posts specified by History Size are cached to disk for display later.
10. The Template tells the client how to format the posts. You can put in several tags to represent content from the posts.
    1. [text] - The main message from the post
    2. [from_user] - The username of the person that made the post
    3. [service] - The service that the post came from
    4. [profile_image_url] - The url of the posts authors avatar image. You can put the template editor in to source mode to add in an image using that url directly. Note that those images aren't cached to disk so require a working internet connection to be displayed.
    5. You can extract any value returned by the Twitter or Identica API. Twitter Search for Xibo will show you the JSON result of a query on their API for the term "Xibo". You can use this to get the names of any other tags you may want to display.
11. The Default block is what the client will display if the search returns no results or if there is no cached content and the services could not be contacted.

Counter

The counter module provides an on screen counter which counts up or down in response to key presses (or to key presses generated by a wireless presenter style remote control - often used to control PowerPoint presentations).

It was originally written to cater for paper ticket systems where customers entering a business premises take a number from a dispenser and wait for their number to be called before obtaining a product or service.

In it's most basic form, there's no need to add a Counter media type at all. From v1.3.0 of the Python client, you can simply press Page Up or Page Down keys on the client machine (or via a wireless presenter style remote) and a popup overlay will appear displaying the current counter number.

This popup overlay can be styled and configured using the configuration variables in the client site.cfg file as follows:

• nextScanCode=112 - Keyboard scan code used to increment the counter
• resetScanCode=0 - Keyboard scan code used to zero the counter
• prevScanCode=117 - Keyboard scan code used to decrement the counter
• maxCount=99 - Number the counter should count up to or down from
• osdBackColour=000000 - HTML/Hex colour for the popup background
• osdBackOpacity=0.7 - How opaic the background of the popup should be
• osdFontSize=270 - Font size of the number displayed in the popup
• osdFontColour=ffffff - Font colour of the number displayed in the popup in HTML/Hex
• osdWidthPercent=40 - Percentage of the width of the screen that the popup should occupy
• osdTimeOut=5000 - How many milliseconds the popup should be displayed for

If you're not sure what scan codes there are, you can press "i" then "l" with the client running. That will popup the on-screen logging. Any key press that isn't currently being used will generate a log message with the scan code for that key - so you can get the code you need and alter the client configuration.

You can also embed the counter number in a region. If you choose to do that, you can optionally disable the popup overlay whilst that region/media item is on the screen.

1. Click the "Add Counter" icon
2. A new dialogue will appear:
   
3. The "Popup Notification" box enables or disables the popup overlay. Leaving the box unticked will disable the popup while this media item is being shown on screen.
4. The "Duration" box is the number of seconds the counter should be shown on screen for.
5. The final box is a WYSIWYG HTML editor. You'll see a \[Counter\] tag. You can style that tag however you want the counter value to be shown on the screen. You can also add additional text before and/or after the tag which will also be displayed.

Permissions

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.

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.

Limitations

We appreciate this features UI is not ideal. If you are having problems after following this article please refer to the below links:

• Suggested Improvements (https://blueprints.launchpad.net/xibo/+spec/region-timeline-improvements)
• Bug for UI issues (https://bugs.launchpad.net/xibo/+bug/376585)