206 lines
10 KiB
HTML
206 lines
10 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><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 class="active"><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="editing_tools">Editing Tools <a href="#editing_tools" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
|
||
<p>OTS Signs Command Center has a variety of editing tools to assist Users when using the Layout Editor to build and create designs to show on Displays.</p>
|
||
<h2 id="rectangle_selector">Rectangle Selector <a href="#rectangle_selector" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Multiple items can be moved together to maintain alignment in a block by using the <strong>Rectangle Selector</strong> tool:</p>
|
||
<ul>
|
||
<li>
|
||
<p>Click on the canvas background.</p>
|
||
</li>
|
||
<li>
|
||
<p>Hold and drag over the area you want to select to create an outline.</p>
|
||
</li>
|
||
<li>
|
||
<p>Ensure that all items to be moved together are contained.</p>
|
||
</li>
|
||
<li>
|
||
<p>Drag all items to position on the canvas.</p>
|
||
</li>
|
||
<li>
|
||
<p>Once in position, click outside to exit the rectangle selector.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 id="grouping_elements">Grouping Elements <a href="#grouping_elements" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Make it easier to build designs in the Layout Editor by <strong>Grouping Elements</strong> together:</p>
|
||
<ul>
|
||
<li>Add Elements to the canvas.</li>
|
||
</ul>
|
||
<p>When grouping Data Elements, they must be of the same Data Widget type (all Weather Elements for example) and share the same Data Slot and Effect.</p>
|
||
<ul>
|
||
<li>Position and style each Element using the <strong>Appearance</strong> tab.</li>
|
||
<li>Holding down the shift key, click in each <strong>Element</strong> to select to group together.</li>
|
||
<li>Once selected, release the shift key and right click.</li>
|
||
<li>From the menu, select <strong>Group elements</strong>.</li>
|
||
</ul>
|
||
<p>The group can now be moved around the canvas to re-position and re-size.</p>
|
||
<blockquote class="tip"><p>Grouped Elements can be easily duplicated using the Context Menu!</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>To make further edits to individual Elements whilst grouped, click the <strong>Edit Group</strong> icon in the top right corner of the group.</li>
|
||
<li>Click in an Element to make changes in the Properties Panel.</li>
|
||
<li>Select <strong>X</strong> to exit editing the group.</li>
|
||
</ul>
|
||
<p>To <strong>Ungroup</strong>, use the Context Menu.</p>
|
||
<h2 id="layer_manager">Layer Manager <a href="#layer_manager" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>View and manage the layer and durations of all items added to the Layout using the <strong>Layer Manager</strong> located at the bottom left of the Layout Editor:</p>
|
||
<ul>
|
||
<li>Use this list to drag and drop the order to show items in front or behind other content.</li>
|
||
<li>Alternatively right click a selected item to use the <strong>Send/Bring</strong> options from the <strong>Context Menu</strong>.</li>
|
||
</ul>
|
||
<p>Elements have their own Canvas Layer which can be used to determine where they appear in relation to other natively rendered Elements such as Playlists and Videos.</p>
|
||
<h2 id="context_menu">Context Menu <a href="#context_menu" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Right click items that have been added to a Layout or Playlist to select from a menu of further options (relevant to the selected item).</p>
|
||
<p>When clicking on a <strong>Widget</strong>, further options are available, shown under the Widget name/type.</p>
|
||
<h2 id="options_menu">Options Menu <a href="#options_menu" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Use to show/hide <strong>Tooltips</strong> as well as provide a <strong>Delete confirmation</strong> warning for all items added to the Layout.</p>
|
||
<p>From here select to <strong>Clear Canvas</strong> to start your design over or <strong>New</strong> to create a brand new Layout.</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.html">Creating Layouts using the Layout Editor</a></p>
|
||
<p><a href="layouts_editor_global_elements.html">Using Global Elements on Layouts</a></p>
|
||
<h2 id="faqs">FAQs <a href="#faqs" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p><em><strong>Why can’t I group a Currency Element with a Menu Board Element?</strong></em></p>
|
||
<p>Data Elements must be of the same Data Widget type in order to group. They must also share the same Data Slot and any set Effects!</p>
|
||
<p><em><strong>Can Global Elements be grouped with Data Elements?</strong></em></p>
|
||
<p>Yes, including Global Elements in groups is a great way to easily compliment Data Elements by adding text, shapes and lines!</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>
|