195 lines
12 KiB
HTML
195 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>OTS Signs Command Center Documentation</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<!-- favicon -->
|
|
<link href="../img/favicon.ico" rel="shortcut icon"/>
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
|
|
<!-- Stylesheets -->
|
|
<link href="../manual.css" rel="stylesheet" media="screen">
|
|
|
|
<!-- META -->
|
|
<meta name="keywords" content="digital signage, signage, narrow-casting, ots-signs, open source, agpl, documentation" />
|
|
<meta name="description" content="OTS Signs Command Center is an open source digital signage solution. It supports all main media types and can be interfaced to other sources of data using CSV, Databases or RSS." />
|
|
</head>
|
|
<body data-toc="layouts">
|
|
<!-- Copyright 2020 Xibo Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
|
|
<nav id="top-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ss-navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a href="#" class="navbar-brand">OTS Signs Command Center Documentation</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse" id="ss-navbar">
|
|
<ul class="nav navbar-nav">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="ss_body container">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<ul id="side-nav" class="nav nav-pills nav-stacked">
|
|
<li><a href="index.html" data-toc-name="getting_started">Getting Started</a></li><li><a href="layouts_editor.html" data-toc-name="layouts">Layouts</a></li><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
|
|
<html><body><ul>
|
|
<li>
|
|
<p class="active"><a href="layouts_editor.html">Layout Editor</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_using_templates.html">Using Templates</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_library_search.html">Library Search</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_global_elements.html">Global Elements</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_data_widgets.html">Data Widgets</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_editing_tools.html">Editing Tools</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_design_changes.html">Design Changes</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_playlists.html">Add Playlists</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_editor_widgets.html">Widgets</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_interactive_actions.html">Interactive Actions</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="layouts_templates.html">Layout Templates</a></p>
|
|
</li>
|
|
</ul>
|
|
</body></html>
|
|
<li><a href="media_library.html" data-toc-name="media">Media</a></li><li><a href="media_modules.html" data-toc-name="widgets">Modules</a></li><li><a href="scheduling_events.html" data-toc-name="scheduling">Scheduling</a></li><li><a href="displays.html" data-toc-name="displays">Displays</a></li><li><a href="users_administration.html" data-toc-name="users">Users</a></li><li><a href="configure_cms_settings.html" data-toc-name="configure">Configuration and Organisation</a></li><li><a href="troubleshooting.html" data-toc-name="troubleshooting">Troubleshooting</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-9" role="main">
|
|
<h1 id="layout_editor_overview">Layout Editor Overview <a href="#layout_editor_overview" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
|
|
<p>The Layout Editor is used to create new Layout designs and when an existing Layout needs a Design change.</p>
|
|
<p>A Layout presents content to be shown on Displays and are made up of just 1 or multiple content items. Designs can include a combination of <strong>Elements</strong>, <strong>Widgets</strong> and <strong>Library Media</strong> and can be added to be shown in different sections of the Layout to show simultaneously.</p>
|
|
<p>The OTS Signs Command Center Layout Editor gives Users a range of tools to add and arrange a variety of content, regardless of skill level, to easily create eye catching Layouts to capture attention on Displays.</p>
|
|
<h2 id="creating_layouts">Creating Layouts <a href="#creating_layouts" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
|
<p>Layouts are created from the <strong>Layouts</strong> page under the <strong>Design</strong> section of the main CMS menu.</p>
|
|
<p>Clicking the <strong>Add Layout</strong> button will open the <strong>Layout Editor</strong> used to add content to design Layouts.</p>
|
|
<h2 id="navigating_the_layout_editor">Navigating the Layout Editor <a href="#navigating_the_layout_editor" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
|
<p><img src="img/layout_editor_overview_explainer.png" alt="Layout Editor Overview" /></p>
|
|
<p>To <strong>Rename</strong> the Layout, click the “Untitled” text at the top of the Layout Editor.</p>
|
|
<p>From here, also view the <strong>Status</strong> and total <strong>Duration</strong> of the Layout as you build your design. The total Layout duration is always based on the item added to the Layout with the highest set duration.</p>
|
|
<p>Layouts will function best when shown on a Display with a matching resolution. To change the <strong>Dimensions</strong> of a Layout, select the <strong>Resolution</strong> to use from the drop down menu in the <strong>Properties Panel</strong>.</p>
|
|
<p>Using the <strong>Properties Panel</strong>, select a <strong>Colour</strong> or add a static <strong>Image</strong> from the <strong>Toolbox</strong> or upload a new file to use as a <strong>Background</strong> for the Layout.</p>
|
|
<p>All content is added to the canvas from the <strong>Toolbox</strong>.</p>
|
|
<h3>Adding and Arranging Content</h3>
|
|
<p>The <strong>Toolbox</strong> contains a variety of content types, which when selected will open the items to add.</p>
|
|
<p>Content is added to the canvas using the flexibility of drag and drop, along with rotation and resizing tools to enable Users to position items exactly where they are needed.</p>
|
|
<p>On adding an item to the Canvas, “Snap to” buttons are available from the bottom right under the canvas, which allow for easier positioning when moving items around the canvas.</p>
|
|
<h3>Properties Panel</h3>
|
|
<p>As items are added, the <strong>Properties Panel</strong> will show the configuration options available for the selected item.</p>
|
|
<p>The <strong>Advanced</strong> tab can be used to override the duration of an item.</p>
|
|
<ul>
|
|
<li>Click in <strong>Set a duration</strong> and provide the new <strong>Duration</strong> in seconds.</li>
|
|
</ul>
|
|
<p>If this item now has the longest duration on the Layout, it will also update the total Layout duration shown at the top of the Layout Editor.</p>
|
|
<h3>Layout Preview</h3>
|
|
<p>The full Layout can be played to preview how your design will look when showing on Displays.</p>
|
|
<ul>
|
|
<li>Click out of any selected items by clicking on the background.</li>
|
|
<li>Select the <strong>Play</strong> button icon at the bottom left under the canvas.</li>
|
|
</ul>
|
|
<blockquote class="tip"><p>Play a preview in full screen by using the icon in the top right of the canvas before selecting the Play button!</p>
|
|
</blockquote>
|
|
<h3>Publishing Layouts</h3>
|
|
<p>Layouts need to be <strong>Published</strong> in order to be shown correctly on Displays when included in Schedules.</p>
|
|
<p>Use the 3 line menu located in the top right of the Layout Editor to select the <strong>Publish</strong> option.</p>
|
|
<p>Layouts can be Published straight away or a <strong>Publish Date</strong> can be set, by unticking the <strong>Publish Now</strong> option to determine a specified date and time in the future to Publish.</p>
|
|
<p>Once Published or after setting a Publish Date, the Layout can now be Scheduled to Displays.</p>
|
|
<h2 id="further_reading">Further Reading <a href="#further_reading" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
|
<p><a href="layouts_editor_global_elements.html">Using Global Elements on Layouts</a></p>
|
|
<p><a href="layouts_editor_library_search.html">Using the Library Search Functions</a></p>
|
|
<h2 id="faqs">FAQs <a href="#faqs" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
|
<p><em><strong>When should a User create a new Layout?</strong></em></p>
|
|
<p>The recommended usage for a Layout is for it to only contain the design and media required for a set of related content that should be shown at the same time. Keeping your content concise will make it easier for your audience to understand your messaging!</p>
|
|
<p><em><strong>Are there any restrictions to the amount of Layouts I can have?</strong></em></p>
|
|
<p>There are no limits to the number of Layouts in the system or the number a User can have.</p>
|
|
<p><em><strong>My Layout status is always showing as an orange exclamation mark, I how do I make it a green tick?</strong></em></p>
|
|
<p>The orange exclamation mark is an expected status to have if your Layout contains online content, such as a Webpage. In this situation, the CMS cannot determine what the Display will play as this type of content is not sent directly from the CMS and is instead assessed Player side. The Layout should still be Published and Scheduled to Displays, which will need to have a reliable internet connection in order to successfully show this content.</p>
|
|
<p><em><strong>I want to divide my Layout and have static content on one side and a carousel of content fill the other side, how do I achieve that?</strong></em></p>
|
|
<p>Add and position a Playlist to the side you want to show a rotation of items and resize to fit the area as needed.</p>
|
|
<p><em><strong>How do I make design changes to an existing Layout?</strong></em></p>
|
|
<p>Use the row menu for the Layout you need to make changes to and select Design to open the Layout Editor. If the Layout has been Published you will need to first Checkout the Layout which will create a draft copy of the Layout so as to not disrupt any current schedules the Layout is in.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div> <!-- container-->
|
|
<footer class="ss_footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="pull-right">
|
|
<img class="img-responsive logo" src="../img/logo.png" alt="OTS Signs Command Center" />
|
|
</div>
|
|
|
|
<p class="ss_back_to_top">Back to Top</p>
|
|
|
|
<p class="ss_footer_links">Currently v4</p>
|
|
|
|
<p class="ss_languages"><a href="../en/index.html">en</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="../vendor/jquery/jquery.min.js"></script>
|
|
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$(".ss-sidebar .list-group li").addClass("list-group-item");
|
|
$(".ss_body img").addClass("img-thumbnail");
|
|
$(".ss_body table").addClass("table");
|
|
|
|
// Set the selected page based on the TOC name
|
|
// Mark the appropriate top nav element as the selected page
|
|
$("#top-nav a").each(function() {
|
|
if ($(this).data().tocName == $("body").data().toc)
|
|
$(this).parent().addClass("active");
|
|
});
|
|
|
|
$(".ss_back_to_top").click(function() {
|
|
$('html, body').animate({scrollTop : 0},800);
|
|
});
|
|
|
|
if (inIframe()) {
|
|
console.log("In Frame");
|
|
$("#top-nav").css("display", "none");
|
|
$(".ss-sidebar").parent().css("display", "none");
|
|
}
|
|
});
|
|
|
|
function inIframe () {
|
|
try {
|
|
return window.self !== window.top;
|
|
} catch (e) {
|
|
return true;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|