Files
OTSSignsTheme/manual/en/media_module_mastodon.html
Matt Batchelder bbe8c1860c pre-img swap
2026-03-23 21:09:27 -04:00

230 lines
10 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="widgets">
<!-- 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><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><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><ul>
<li>
<a href="media_modules.html">Modules</a>
</li>
<li>
<a href="media_modules_connectors.html">Connectors</a>
</li>
<li>
<a href="media_module_audio.html">Audio</a>
</li>
<li>
<a href="media_module_calendar.html">Calendar</a>
</li>
<li>
<a href="media_module_clock.html">Clock</a>
</li>
<li>
<a href="media_module_countdown.html">Countdown</a>
</li>
<li>
<a href="media_module_currencies.html">Currencies</a>
</li>
<li>
<a href="media_module_dashboard.html">Dashboard</a>
</li>
<li>
<a href="media_module_dataset.html">DataSet</a>
</li>
<li>
<a href="media_module_embedded.html">Embedded</a>
</li>
<li>
<a href="media_module_emergency_alerts.html">Emergency Alert</a>
</li>
<li>
<a href="media_module_flash.html">Flash</a>
</li>
<li>
<a href="media_module_googletraffic.html">Google Traffic</a>
</li>
<li>
<a href="media_module_hls.html">HLS</a>
</li>
<li>
<a href="media_module_htmlpackage.html">HTML Package</a>
</li>
<li>
<a href="media_module_image.html">Image</a>
</li>
<li>
<a href="media_module_localvideo.html">Local Video</a>
</li>
<li class="active">
<a href="media_module_mastodon.html">Mastodon</a>
</li>
<li>
<a href="media_module_menuboards_category.html">Menu Board Category</a>
</li>
<li>
<a href="media_module_menuboards_products.html">Menu Board Products</a>
</li>
<li>
<a href="media_module_national_weather_service.html">National Weather Service</a>
</li>
<li>
<a href="media_module_notifications.html">Notifications</a>
</li>
<li>
<a href="media_module_pdf.html">PDF</a>
</li>
<li>
<a href="media_module_powerpoint.html">PowerPoint</a>
</li>
<li>
<a href="media_module_shellcommand.html">Shell Command</a>
</li>
<li>
<a href="media_module_stocks.html">Stocks</a>
</li>
<li>
<a href="media_module_ticker.html">Ticker</a>
</li>
<li>
<a href="media_module_video.html">Video</a>
</li>
<li>
<a href="media_module_video_in.html">Video In</a>
</li>
<li>
<a href="media_module_weather.html">Weather</a>
</li>
<li>
<a href="media_module_webpage.html">Webpage</a>
</li>
<li>
<a href="media_module_world_clock.html">World Clock</a>
</li>
</ul>
</body></html>
<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="mastodon">Mastodon <a href="#mastodon" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
<p>Display Mastodon social feed content anywhere on a Layout using Elements or include Static Templates with pre-styled designs in Layouts/Playlists.</p>
<p>The Mastodon Widget returns content from the URL entered for the <a href="media_modules.html">Module</a> which feeds into configured Elements and Static Templates.</p>
<h2 id="mastodon_elements">Mastodon Elements <a href="#mastodon_elements" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<p>Elements are available for selection when adding a Mastodon Widget to a <a href="layouts_editor.html">Layout</a> to give Users more control over what components of the Mastodon Widget to use and where they can be placed.</p>
<p><img src="img/v4_media_modules_mastadon_elements.png" alt="Mastodon Elements" /></p>
<p>Each Element has a set of configuration options in the Properties Panel. A <strong>Hashtag</strong> must be provided to return results from the <strong>Configure</strong> tab for each Element used on the Layout. Control how items should be cycled by specifying a <a href="layouts_editor.html#content-data-slots">Data Slot</a> to use for each of the added Elements. Data Elements can be further complimented by adding Global Elements to add shapes and text which can all be put into an Element Group for easier configuration and positioning.</p>
<p>Take advantage of Stencils to add a predesigned group of Elements to your Layout.</p>
<blockquote class="tip"><p>All Elements in the Stencil are treated as one when configured and can be easily duplicated from a right click!</p>
</blockquote>
<h2 id="mastodon_static_templates">Mastodon Static Templates <a href="#mastodon_static_templates" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<p>Static Templates define how returned items should be laid out and styled and are a simple way to show items using pre-styled templates.</p>
<p><img src="img/v4_media_modules_mastadon_templates.png" alt="Mastadon Templates" /></p>
<p>Templates can be configured to affect the behaviour of returned results as well as make changes to the design appearance using a range of options in the Properties Panel. A <strong>Hashtag</strong> must be provided to return results from the <strong>Configure</strong> tab for each Template added to the Layout/Playlist.</p>
<h2 id="overview">Overview <a href="#overview" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<ul>
<li>Display posts only with attached media.</li>
<li>Remove Mentions, Hashtags and URLs from posts.</li>
<li>Show posts only from local or remote servers.</li>
<li>Include a Mastodon Username to return public statuses.</li>
<li>Set the duration per item.</li>
</ul>
<blockquote class="tip"><p>Most URLs do not compliment Digital Signage.</p>
</blockquote>
</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>