238 lines
11 KiB
HTML
238 lines
11 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><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 class="active"><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="interactive_actions">Interactive actions <a href="#interactive_actions" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
|
||
<p>Create <strong>Interactive actions</strong> on <strong>Layouts</strong> to trigger content changes to show on your <strong>Displays</strong>.</p>
|
||
<p>You could have a product display that includes an ‘internet of things’ device, such as a light sensor, which could be used to trigger a webhook. Product specific information could be included on a Layout to show on Displays for the specific product that has been interacted with by a customer.</p>
|
||
<p>You could use touchscreens to show specific information triggered from pressing a button on a Layout, shown on the Display, or by pressing a key, which has been defined as a trigger type, from an attached keyboard.</p>
|
||
<p>Actions are created for:</p>
|
||
<ul>
|
||
<li>A complete <strong>Layout</strong>
|
||
</li>
|
||
<li>Individual <strong>Widgets</strong> on a Layout</li>
|
||
<li>An <strong>Image within a Playlist</strong> on a Layout</li>
|
||
</ul>
|
||
<p>These actions can be triggered by <strong>Touch/Click</strong>, by pressing a <strong>key</strong> on a keyboard or programmatically by a <strong>Webhook</strong>.</p>
|
||
<h2 id="create_an_interactive_layout">Create an interactive layout <a href="#create_an_interactive_layout" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<ol>
|
||
<li>
|
||
<p>Create and design a Layout, adding <strong>Widgets</strong> to configure as interactive <strong>Triggers</strong> and <strong>Targets</strong>, if required.</p>
|
||
<p>Further <strong>Interactive Widgets</strong> are available from the <strong>Toolbox</strong>.</p>
|
||
<blockquote class="tip"><p>Toggle Interactive Mode to OFF to open the Toolbox</p>
|
||
</li>
|
||
</ol>
|
||
</blockquote>
|
||
<ol start="2">
|
||
<li>
|
||
<p>Click the <strong>Widgets</strong> button at the top of the Toolbox</p>
|
||
</li>
|
||
<li>
|
||
<p>Click on <strong>Interactive</strong> to open:</p>
|
||
</li>
|
||
</ol>
|
||
<ul>
|
||
<li>
|
||
<strong>Button</strong> can be used as a Trigger which can be fully customised to suit your designs</li>
|
||
<li>
|
||
<strong>Link</strong> can be added to provide text to be used as a Trigger</li>
|
||
<li>
|
||
<strong>Interactive Zone</strong> to define an area on the Layout to be used as a Target or Trigger</li>
|
||
</ul>
|
||
<h2 id="adding_and_editing_actions_on_a_layout">Adding and editing actions on a layout <a href="#adding_and_editing_actions_on_a_layout" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<ol>
|
||
<li>
|
||
<p>Toggle <strong>Interactive Mode to ON</strong>, using the button at the top of the Layout Editor</p>
|
||
<p>The design elements will be locked to focus on adding and editing <strong>Actions</strong> only.</p>
|
||
</li>
|
||
<li>
|
||
<p>Use the drop-down menu to select the <strong>Action Type</strong>:</p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>Next/Previous Layout</strong> to show the next or previous Layout in the schedule for the selected Display(s)</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>Navigate to Layout</strong> using a <strong>Code</strong> to identify the Layout</p>
|
||
</li>
|
||
</ul>
|
||
<p>Use the <strong>Search for Layouts</strong> button at the bottom of the canvas, to easily search for Layouts by code. Ensure that Layouts to be used as Interactive Targets have a <strong>Code Identifier</strong> entered in the <strong>Edit Layout form</strong></p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>Next/Previous Widget</strong> to show content from inside a <strong>Playlist</strong> for the next/previous item shown on the timeline</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>Navigate to Widget</strong> to specify which Widget to Load, or click to <strong>Create Widget</strong> and select an item from the Toolbox to add to the specified Target</p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>From the Layout, click on an item to select the <strong>Trigger Type</strong>
|
||
Alternatively, use the drop-down menu from the Properties Panel</p>
|
||
<ul>
|
||
<li>
|
||
<p>Selecting <strong>Touch/Click</strong>, requires devices that will be used as a touch screen to have touch capabilities enabled</p>
|
||
</li>
|
||
<li>
|
||
<p>To use a <strong>Webhook</strong> a <strong>Trigger Code</strong> needs to be entered which must be present in the URL ``trigger=` parameter</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>Key Press</strong>, requires an attached keyboard with a key selected as the <strong>Trigger Key</strong></p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>Draw an arrow to a <strong>Target</strong> item, or use the drop-down menu</p>
|
||
</li>
|
||
<li>
|
||
<p>Click <strong>Save</strong> on the Properties Panel</p>
|
||
</li>
|
||
</ol>
|
||
<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">Using the Layout Editor</a></p>
|
||
<p><a href="layouts_editor_playlists">Using Playlists in Layouts</a></p>
|
||
<h2 id="faqs">FAQs <a href="#faqs" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p><em><strong>Where do I enable Touch capabilities for my Android device?</strong></em></p>
|
||
<p>From Display Settings under the Displays section of the main CMS menu and use the row menu to select Edit. From the Advanced tab, check the Enable touch capabilities on the device setting at the bottom of the form.</p>
|
||
<p><em><strong>How can I use an image as a trigger?</strong></em></p>
|
||
<p>You need to add a Playlist to a Layout from the Toolbox, and then add the image to the Playlist Timeline.</p>
|
||
<p><em><strong>Why do I not see key press as a trigger type?</strong></em></p>
|
||
<p>Assigning a keyboard key as a trigger type was introduced in v4.4. Update your CMS to benefit from this feature!</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>
|