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

233 lines
9.0 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="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>
<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 class="active">
<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="webpage">Webpage <a href="#webpage" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
<p>Include content from a webpage to be displayed on Layouts and Playlists.</p>
<h2 id="overview">Overview <a href="#overview" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<ul>
<li>View a full webpage without any alterations.</li>
<li>Open Natively, Manual Position and Best Fit embed options.</li>
<li>Scale and offset the target webpage to show a particular section of the webpage.</li>
<li>For content with a transparent background tick to show the Widget with a transparent background.</li>
<li>Preload content off screen.</li>
<li>Trigger a web hook to navigate to an active <a href="layouts_interactive_actions.html">action</a> in the event of a webpage load error.</li>
</ul>
<h3>Open Natively</h3>
<p>When selected, the Player will open the webpage without any alterations and will open and render in the browser as if the URL had been visited on the device outside OTS Signs Command Center.</p>
<blockquote class="tip"><p><strong>Please note:</strong> There is no preview available with this option!</p>
</blockquote>
<h3>Trigger a web hook</h3>
<p>Trigger a web hook for an active action (navigate to Widget, navigate to Layout a Scheduled Command etc.) to be shown in the event the webpage returns an error and fails to load.</p>
<ul>
<li>Enter the <strong>Trigger Code</strong> of a configured Action to match against a supplied web hook <code>trigger</code> parameter.</li>
</ul>
<h3>Manual Position</h3>
<p>This option will embed the webpage in an iframe where users can specify the dimensions required.</p>
<ul>
<li>Use the Offset and Scale settings to force the page/sections of the page to fit within the dimensions to show just a section of the webpage.</li>
</ul>
<h3>Best Fit</h3>
<p>This option will embed the webpage in an iframe where users can specify the dimensions required.</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>