248 lines
14 KiB
HTML
248 lines
14 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 class="active"><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="data_widgets">Data Widgets <a href="#data_widgets" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
|
||
<p>Data Widgets rely on an external data source to show information on Layouts by using <strong>Elements</strong>.</p>
|
||
<h2 id="feature_overview">Feature Overview <a href="#feature_overview" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<ul>
|
||
<li>Data source driven content.</li>
|
||
<li>Separate Elements allow for flexibility.</li>
|
||
<li>Provide fallback data to show.</li>
|
||
<li>Control paging of data with Data Slots.</li>
|
||
<li>Create Groups for easy duplication.</li>
|
||
<li>Pull data from an alternative source on the same Layout.</li>
|
||
<li>Utilise pre-made designs.</li>
|
||
</ul>
|
||
<p>Each Data Widget has a set of <strong>Elements</strong> which are fed by a data source which allow a User flexibility in the placement of returned data rather than being bound by a rigid <strong>Static Template</strong> design:</p>
|
||
<ul>
|
||
<li>Click on a <strong>Data Widget</strong> to show all available <strong>Elements</strong>.</li>
|
||
</ul>
|
||
<p><img src="img/v4_layouts_data_elements.png" alt="Data Elements" /></p>
|
||
<h3>Configure</h3>
|
||
<p>Each Element has a set of configurable options available from the <strong>Properties Panel</strong> once added:</p>
|
||
<p><img src="img/v4_layouts_element_properties.png" alt="Element Properties" /></p>
|
||
<blockquote class="tip"><p>An exclamation icon will be shown to prompt a User as to what needs to be actioned. The above example has yet to have a URL entered for an ICS feed!</p>
|
||
</blockquote>
|
||
<p>Options set from the <strong>Configure</strong> tab will apply to all Elements added to the Layout of the same Widget type.</p>
|
||
<blockquote class="tip"><p>Create a <a href="layouts_data_widgets.html#content-new-configuration">New Configuration</a> to select data from alternative data sources associated with the Widget!</p>
|
||
</blockquote>
|
||
<h3>Appearance</h3>
|
||
<p>The <strong>Appearance</strong> tab includes options to configure how the data returned from the Element should look and includes transition effects and <a href="layouts_data_widgets.html#content-data-slots">Data Slot</a> configuration.</p>
|
||
<h3>Fallback Data</h3>
|
||
<p>Create <strong>Fallback Data</strong> for selected Data Widgets and specify under what conditions it should be shown:</p>
|
||
<p><img src="img/v4_layouts_editor_data_widgets_fallback.png" alt="Fallback Data" /></p>
|
||
<ul>
|
||
<li>Click <strong>Add New</strong>.</li>
|
||
<li>Complete the form fields with the required information.</li>
|
||
<li>Save.</li>
|
||
</ul>
|
||
<blockquote class="tip"><p>Fallback Data options will vary dependent on the Data Widget selected!</p>
|
||
</blockquote>
|
||
<h3>Advanced</h3>
|
||
<p>The Advanced tab is used to set Naming, provide specific durations, set the collection level of proof of play stats and enable items to be repeated to fill all <a href="layouts_data_widgets.html#content-data-slots">Data Slots</a>.</p>
|
||
<h3>Positioning</h3>
|
||
<p>Use the <strong>Positioning</strong> tab (grid icon) to set precise positioning and Layering.</p>
|
||
<blockquote class="tip"><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>
|
||
</blockquote>
|
||
<h2 id="data_slots">Data Slots <a href="#data_slots" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>When adding more than one of the same <strong>Element</strong>, handle the paging of returned data by specifying a <strong>Data Slot</strong> to use for each Element:</p>
|
||
<p><img src="img/v4_layouts_editor_data_slots.png" alt="Data Slots" /></p>
|
||
<blockquote class="tip"><p>For example, the image above shows 2 <strong>Description Elements</strong> from the <strong>Calendar Widget</strong> have been added. One has a <strong>Data Slot of 1</strong> the other a <strong>Data Slot of 2.</strong> If 10 (Calendar Events) items were returned, Data Slot 1 would show items 1,3,5,7,9 with Data Slot 2 showing items 2,4,6,8,10.</p>
|
||
</blockquote>
|
||
<p>Data Slots are set from the <strong>Appearance</strong> tab of the <strong>Properties Panel</strong> for the selected Element.</p>
|
||
<blockquote class="tip"><p>Adding more than one of the same Element will automatically increase in <strong>Data Slot</strong> number!</p>
|
||
</blockquote>
|
||
<p>In addition Elements have the option to <strong>Pin this slot</strong> so that the first data item to appear in that slot will remain for the entire duration of the Widget and won’t cycle through data items.</p>
|
||
<blockquote class="tip"><p>Users can set whether to <strong>Repeat items</strong> in order to fill all data slots to ensure there are no empty slots by using the checkbox on the <strong>Advanced</strong> tab of the Properties Panel!</p>
|
||
</blockquote>
|
||
<h2 id="grouping_elements">Grouping Elements <a href="#grouping_elements" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Group Elements of the same Data Widget together to make it easier to build designs:</p>
|
||
<ul>
|
||
<li>Add Elements to the Layout, position and style using the <strong>Appearance</strong> tab.</li>
|
||
<li>Hold down the shift key and click into each Element you wish to group.</li>
|
||
<li>Once selected, release the shift key and right click.</li>
|
||
<li>Select <strong>Group elements</strong>.</li>
|
||
</ul>
|
||
<p><img src="img/v4_layouts_grouping_elements.png" alt="Grouping Elements" /></p>
|
||
<blockquote class="tip"><p>Groups can also include <strong>Global Elements</strong>.</p>
|
||
</blockquote>
|
||
<p>Groups can be easily duplicated:</p>
|
||
<ul>
|
||
<li>Right click and select <strong>Duplicate</strong>.</li>
|
||
</ul>
|
||
<p><img src="img/v4_layouts_duplicated_elements.png" alt="Duplicated Elements" /></p>
|
||
<p>Edit <strong>Data Slots</strong> for each group to control data paging:</p>
|
||
<p><img src="img/v4_layouts_data_slots_groups.png" alt="Data Slots Groups" /></p>
|
||
<p>Make edits to the <strong>Appearance</strong> of each Element in a group:</p>
|
||
<ul>
|
||
<li>
|
||
<p>Click the pencil icon in the top right corner.</p>
|
||
</li>
|
||
<li>
|
||
<p>Click in each Element and use the Appearance tab to make changes.</p>
|
||
</li>
|
||
<li>
|
||
<p>Click out of the group or click the X to exit editing.</p>
|
||
</li>
|
||
</ul>
|
||
<blockquote class="tip"><p>Edits can be made to the <strong>Configuration</strong> but it will apply to all Elements added.</p>
|
||
<p>Ungroup elements from the right click menu!</p>
|
||
</blockquote>
|
||
<h2 id="new_configurations">New Configurations <a href="#new_configurations" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>New Configurations can be created in order to have alternative configuration options/different data source associated with the Widget:</p>
|
||
<ul>
|
||
<li>Right click an Element or Element Group and select <strong>New Configuration</strong> from the menu.</li>
|
||
<li>Select an alternative data source / alternative configuration from the <strong>Configure</strong> tab.</li>
|
||
</ul>
|
||
<h2 id="stencils">Stencils <a href="#stencils" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Selected Data Widgets include pre made designs of Element Groups called <strong>Stencils</strong> to assist Users with creating content simply and quickly:</p>
|
||
<ul>
|
||
<li>Stencils are added in exactly the same way, positioned and resized.</li>
|
||
<li>Complete the fields to <strong>Configure</strong>.</li>
|
||
<li>Edit the <strong>Appearance</strong> by clicking on the pencil icon in the top right of the group.</li>
|
||
<li>Select an Element in the group to make edits.</li>
|
||
</ul>
|
||
<blockquote class="tip"><p>Right click to ungroup to customise further!</p>
|
||
</blockquote>
|
||
<h2 id="static_templates">Static Templates <a href="#static_templates" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Static Templates are included for specific Widgets. Templates can be configured to affect the behaviour of returned results as well as alter styling options.</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>
|