LightSpeed Vision Design

From LightSpeed Help Guide
Revision as of 15:59, 28 August 2017 by Lightspeed (Talk | contribs) (Created page with "'''Return To''' | Guides Home | LightSpeed Vision ==Overview== The Design tab, located on the Navigation Ba,r takes you to t...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Return To | Guides Home | LightSpeed Vision


The Design tab, located on the Navigation Ba,r takes you to the Layout area. A Layout is a complete screen design, including content and a background image, which can be scheduled across multiple Displays at multiple times. A Layout can have one or more Regions for media to display and are designed in an Aspect Ratio.

Design Tab

Layout Administration

Layouts are viewed by selecting the Design tab in the Navigation Bar. There, you are presented with a table containing all the Layouts the user has access to.

  • Name - The name of the Layout
  • Description - A description of the Layout
  • Owner - The user who originally designed the Layout
  • Permissions - A list of users with permission to access the Layout
  • Status - The current status of the Layout (hover over for more information)

Filtering the Results

You can use the Filter to search for the Layout that you would like to view/modify. To open the filter form, press the "Filter" button on the top right of the Design table.

Filtering Layouts
  • Name - Name matching with the Layout you are searching for. Tip: Use + or - in front of words to include/exclude them from the results.
  • Owner - Layout with the specified owner
  • Tags - Specific keywords given to a Layout
  • Retired - Inactive Layouts

Layout Actions

Each Layout has a number of actions that can be performed on it, these are accessible using the Action button at the right hand edge of each row:

Layout Action Menu
  • Schedule Now - Immediately push this Layout to a selected number of Display clients
  • Preview Layout - Run a preview of the Layout in real time
  • Design - Opens the Layout Designer to make edits to the Layout
  • Edit - Adjust the Layout name or description
  • Copy - Copy the entire Layout
  • Delete - Delete the Layout

Adding a Layout

Adding Layout Form

New Layouts can be added using the Add Layout button next to the Filter button. Clicking this button will show the Add Layout form. The fields on the Add Layout form are as follows:

  • Name - A name for this Layout. It provides a reference for later scheduling or editing. This is the information which will appear in the name column of the Layout list.
  • Description - The optional description field is used to add additional information about the Layout such as the purpose of the Layout.
  • Tags - A space-separated list of keywords to apply to the layout. Tags are used to help search for the layout.
  • Template - Optionally, you can choose a template to base the new layout on. Templates typically provide an aspect ratio, a background image and one or more empty region timelines.

NOTE: When a new layout is created by hitting the Save button, the user is automatically taken to the Layout Designer.

Editing a Layout

Edit Layout Form

Each Layout in the table can be edited by going to "Action > Edit". Selecting Edit will show the Edit Layout form.

NOTE: It is not possible to edit the Template for a Layout once it has been created. Instead use the Layout Designer to alter the Layout manually. Also, Retired Layouts are hidden by default, but can be shown using the filter options. Once shown, they can be edited and un-retired.

Delete Layout

Delete Layout Form

Layouts can be deleted using the Delete form. It may be the case that the Layout is in use elsewhere and cannot be deleted. In this case, a prompt to Retire the layout will be shown instead.

Copy Layout

Copy Layout Form

A Layout can be copied so that an exact duplicate is made which contains all of the same media, or so that a duplicate of all the media is created and linked to the new Layout.

The schedule information for the source Layout is not copied.

Layout Designer

Creating a New Layout

The Layout Designer is the heart of content creation in Vision. Each time a new Layout is created, or an existing one needs a design change, the Layout Designer is used. Vision makes Layout Design simple through the use of drag and drop, interactive previewing and design flexibility. When designing a Layout from scratch, the default templates comes with one full screen empty region, pictured at left. This region can be resized and more regions added to allow additional content for display.

NOTE: All Layouts are designed using the aspect ratio and then resized accordingly on the Display client. The Layout Designer has a small design resolution so that the Design can occur without panning around the browser with scroll bars. The small design window does not matter and is seamlessly resized without losses on each Display Client. However, it is important that the Aspect Ratio is chosen correctly.

Options Menu

At the top left of the screen, below the Navigation Bar, is the Options menu. This provides access to the higher level functions in the Designer.

Layout Options Menu
  • Add Region - Adds a new Region to the Layout that can then be positioned (drag/drop) and resized. It can then have content assigned to it.
  • Background - Change the Background image, color and aspect ratio.
  • Properties - Adjust the Layout Properties, such as the name, description and tags.
  • Preview Layout - See a live preview of the Layout.
  • Schedule Now - Schedule the Layout onto one or more Displays directly from the Layout Designer.
  • Save Template - Want to use the design again? It can be saved as a Template from here. Templates only save the aspect ratio, background and region positions, not the actual content.

For more information about regions, please continue in the Regions section.

Layout Background

Background Propoerties Form

Changing the background is done from the Layout Options menu in the Layout Designer. Once the menu item is selected, the following form is shown:

  • Background Color - Select a color from the list of available background colors.
  • Background Image - Choose a background image that has been uploaded already. If a new image needs to be added select the "Add Image" button from the button bar at the bottom of the form.
  • Resolution - Choose the aspect ratio of the layout.

NOTE: It is advisable to choose a background color as a fall back, even when using a background image.

Jump List

The Layout Designer Jump List provides navigation between all Layouts the current user has permissions to edit, without having to jump out to the Layout Administration page each and every time. It is accessible from an icon at the bottom right corner of the browser window, entitled "Layout Jump List". Once clicked, it presents a list of Layout names - clicking the name will load corresponding layout into the designer window.

  • Accessing the Layout Jump List
  • Jump List Options


A Region Inside a Layout

Regions are defined areas on the Layout that can hold sets of content, called Timelines. Regions can be moved around inside the Layout using drag and drop, and resized using the resize handle in the lower right hand corner of the Region.

With each change to a Region, a "Save Position" button will appear at the top of the Layout. This must be clicked to save the changes that have been made.

NOTE: If a Layout has been created from a Template, it will most likely have a full screen Region pre-created. Regions are shown on the Layout Designer as semi-transparent overlays. Additionally, Displays have limited support for overlapping Regions. For the best compatibility, please sure the Regions do not overlap.

Adding Regions

Regions are added using the Layout Designer Options Menu. Once the menu item is clicked a new region appears and is ready to be moved or resized in the Designer.

  • Layout Designer Options Menu
  • New Regions Inside a Layout

Region Menu

Each Region has its own menu of Actions, similar to the Action menu found on the Design tab. The Action menu for Regions always appears at the top right of the Region and also shows the Width, Height and Coordinates.

Region Menu
  • Edit Timeline - Assign content to this Region or change the sequence of existing content.
  • Options - Assign the Region a name and manually adjust its width, height and coordinates.
  • Delete - Completely remove this Region and all its associated content.
  • Permissions - Control which users and user groups can view/edit/delete this Region.

Deleting a Region

Note that you will lose any media items contained in the Region that are not in the Library (eg: Text, RSS Tickers, etc).

Relete Region Window


Region Options Form

The Region Options form allows for naming a Region, giving the Region precise sizing and positioning, and exit transitions.

NOTE: To get a full screen Region, go into the Region Options and select "Set Full Screen".


The owner of the Layout has full control on how the new Layout is to be shared. A globally shared Layout may have one of its Layout Region's access rights disabled for other Users. Select "Permissions" from the Region menu to define the selected Region access rights to other Users of the Vision CMS.

Region Timelines

Each Region on a Vision Layout has its own Timeline of content, which will be shown in order by the Display. If required, a Timeline can consist of a single item (such as a company logo), or multiple items (such as an image slideshow). A Region's Timeline is viewed/edited by using the Region Action button and selecting Edit Timeline. The below form is shown. The sequence of media in the Timeline is vertical - top down.

Region Timeline

Assigning Content to Regions

Content is assigned to a Region Timeline using the "Media Toolbox" shown on the left hand side of the Region Timeline. The Media Toolbox lists all of the enabled media types on the CMS.

Adding from the Library

Adding Content from the Library using the Assignment form

The first link in the Media Toolbox is the "Library" link. This allows stored content to be assigned directly from the CMS Library. This content may have been uploaded in a different Layout, or directly into the Library.

Pressing the "Library" link in the Media Toolbox will open the Assignment form (right). The Assignment form is a standard CMS form with a "staging area" for media which has been queued for assignment.

Media is assigned using the + icon. Once pressed, the media item is automatically moved to the staging area. Items can be removed from the staging area using the - icon.

Editing Assigned Content

Media content that has already been assigned to the Timeline can be edited or removed using the links on the Timeline media bars. Each bar has its own "Action" links.

Editing Content

Deleting Content

Delete Media Form

Each media type has its own unique delete form which takes into account the specific behavior of that media type during the delete operation. Typically, the CMS will offer 3 options: Unassign, Retire or Delete.

NOTE: Media that exists only on the Layout (e.g. Text) only offers a single delete option.

Reordering Items in the Timeline

The sequence of a media item in the Timeline can be changed simply by drag and drop. Once the item(s) is in the desired position, press the "Save Order" button at the bottom of the Region Timeline form.

Reordering the Timeline

Non-Library Content


Text Media Module

The Text Media Module allows rich text to be added to a Region Timeline on a Layout. Text is specific to a layout rather than saved in the Library. This means that text items are not reusable and will need to be copy and pasted between Layouts, if the same text is required on more than one. When adding a Text Media Item, the CMS provides a text editor embedded directly in a form. This editor has the same background color as the Layout so that it is easier to get the foreground text coloring correct.


  • Direction - Text can be scrolling left, right, top and bottom. Text can also be static using the "None" direction.
  • Duration - The duration in seconds that this text item should remain in the Region.
  • Scroll Speed - Speed up or slow down the scroll rate - assuming you have a Direction selected.
  • Fix text to region? - Should the text resize to fill the entire available space in the Region? This option should only be used for a single line text item. The default behavior is to scale the text to fill the Display Client resolution.


The Ticker Module allows dynamic Feed content to be added to a Layout. The Ticker module primarily consists of a data source location and a template to apply to each data item retrieved from that data source. For example, if the data source is a RSS Feed, the feed will have multiple items and the template will be applied to each of these items. Tickers are specific to a layout rather than saved in the Library. This means that text items are not reusable and will need to be copy and pasted between Layouts, if the same text is required on more than one.

Adding a Ticker
Ticker Add Form

When adding a new Ticker, the CMS provides a simple form asking for the Data Source and duration of the Ticker.

  • Source Type - Whether the Ticker uses a Feed (RSS) or a CMS DataSet as its Data Source.
  • Feed URL - If using a Feed, the URL of the Feed.
  • DataSet - If using a DataSet, the DataSet to use.
  • Duration - The Duration this media item should be shown in the Timeline. In seconds.

After choosing the Source of the Ticker, the Edit form will automatically open.

Editing a Ticker
Edit Ticker Form

All Tickers have some common settings in the CMS, regardless of the Data Source.

  • Direction - Tickers can scroll left, right, top and bottom. Tickers can also be static using the "None" direction and can be split into pages that are automatically cycled using the "Single" mode.
  • Scroll Speed - Speed up or slow down the scroll rate. You must have a Direction selected.
  • Items per Page - When using "Single" mode, how many items should appear on each page.
  • Fix text to region? - Checking this will allow text to resize to fill the entire available space in the Region. This option should only be used for a "Single" line text item. The default behavior is to scale the text to fill the Display Client resolution.
  • Copyright - Allows the Display Client to insert a copyright notice at the end of the feed.
  • Duration - The duration in seconds that this text item should remain in the Region.
  • Update Interval - Vision Display Clients can cache the content of this media type to prevent repeated download of identical resources. They are also cached for off-line playback.
  • from the - Where should items be taken from? Used in conjunction with the "Number of Items" setting.
  • Duration is per Item - If the Duration is per Item, the configured Duration will be extended by the number of items that is returned by the Data Source. This should be used carefully as it can create long running media items. Typically it is preferable to use this setting in conjunction with a setting to limit the number of items shown.
  • Show side by side - When there is more than 1 item per page, should the items be shown side-by-side.

Web Page

Add Web Page Form

The Web Page Module allows an entire Web Page to be embedded inside a Region on a Layout. There is support for scaling and offsetting the target web page inside the Region so a particular section of the web page can be displayed.

  • Link - The URL of the Web Page, including http://
  • Duration - The duration in seconds that this item should remain in the Region.
  • Offset Top - The top position for the page to start.
  • Offset Left - The left position for the page to start.
  • Scale Percentage - The percentage zoom to apply to the web page.
  • Background transparent? - Should the web page be rendered with a transparent background? Vision will try its best to do this when checked, however it cannot be supported on some web pages.

NOTE: Web Pages are not cached by the Display Client and will not operate when disconnected from the network.


The Layout Designer offers a preview of many media types directly in the Designer window. This preview is accessed using the Preview Controls that appear in the bottom left of all Region windows.

Layout Preview


Vision supports basic transitions between Region Timeline items.

Timeline Transitions

Transitions between two media items on a Timeline are called "Timeline Transitions". They are used to transition between two media items and are set as "In" and "Out" transitions.

Timeline Transition Options

The Transition form allows you to select the necessary duration for the transition in milliseconds.

Transition Form