Introduction
This repository contains examples of Screenly’s features and API. The repository is split into two main categories: Edge Apps and Other. The code is written in javascript, css, html, python, shell, dockerfile, procfile.
Edge Apps
Edge Apps are small applications that run on the Screenly player. These apps can be used to extend the functionality of Screenly. The examples provided in the repository cover various aspects of Edge Apps.
Asset Metadata
This example showcases how to implement Screenly’s metadata. Metadata is used to describe and organize assets in Screenly. This example shows how to add metadata to an asset, which can then be used to filter, sort, and search for assets in the Screenly interface.
// In /app/js/app.js
var screenly = require('screenly-api');
function assetMetadata(app, config, data, callback) {
// Get the asset ID from the data object.
var assetId = data.asset.id;
// Get the metadata from the configuration.
var metadata = config.metadata;
// Set the metadata on the asset.
screenly.assets.update(assetId, { metadata: metadata }, function(err, asset) {
if (err) {
// Handle the error.
console.error(err);
} else {
// Success!
console.log('Asset metadata updated.');
}
});
callback();
}
Clock App
This is a simple clock app, demonstrating how to build a basic application that displays the current time. The app uses the JavaScript Date object to get the current time and then displays it on the screen.
// In /app/js/app.js
function tick(app, config, data, callback) {
var currentTime = new Date();
// Get the current time in the specified format.
var formattedTime = currentTime.toLocaleTimeString();
// Set the time on the clock element.
document.getElementById('clock').innerText = formattedTime;
// Schedule the next tick.
setTimeout(function() {
tick(app, config, data, callback);
}, 1000);
callback();
}
tick();
Power BI
This example demonstrates how to build a Power BI Edge App for securely accessing Power BI dashboards and reports. The app uses the Power BI embedded API to embed Power BI content in the Screenly player.
// In /app/js/app.js
var screenly = require('screenly-api');
function powerBI(app, config, data, callback) {
// Get the Power BI embed token.
var embedToken = config.embedToken;
// Get the Power BI report ID.
var reportId = config.reportId;
// Get the Power BI workspace ID.
var workspaceId = config.workspaceId;
// Embed the Power BI report.
powerbi.service.service.embed(document.getElementById('powerbi-container'), {
type: 'report',
id: reportId,
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=' + reportId + '&embedToken=' + embedToken + '&workspaceId=' + workspaceId
});
callback();
}
QR Code Generator
This example shows how to build unique QR Codes that embed the screen metadata as UTM parameters. This example can be used to track user interactions with the screen.
// In /app/js/app.js
var screenly = require('screenly-api');
function qrCode(app, config, data, callback) {
// Get the screen ID.
var screenId = app.screen.id;
// Get the screen metadata.
var screenMetadata = app.screen.metadata;
// Generate the QR Code URL.
var qrCodeUrl = 'https://www.screenly.io/qr?utm_source=screenly&utm_medium=qr&utm_campaign=screenly-qr&utm_content=' + screenId + '&utm_term=' + JSON.stringify(screenMetadata);
// Set the QR Code URL on the QR Code element.
document.getElementById('qr-code').src = qrCodeUrl;
callback();
}
RSS Reader
This is a simple RSS reader app that allows you to display RSS feeds on your screens. The app uses the rss-parser library to parse the RSS feed.
// In /app/js/app.js
var screenly = require('screenly-api');
var Parser = require('rss-parser');
function rssReader(app, config, data, callback) {
// Get the RSS feed URL.
var rssFeedUrl = config.rssFeedUrl;
// Parse the RSS feed.
Parser.parseURL(rssFeedUrl, function(err, feed) {
if (err) {
// Handle the error.
console.error(err);
} else {
// Success!
// Display the RSS feed on the screen.
for (var i = 0; i < feed.items.length; i++) {
var item = feed.items[i];
// Create a new element for the RSS item.
var itemElement = document.createElement('div');
// Set the text of the RSS item.
itemElement.innerHTML = '<h2>' + item.title + '</h2><p>' + item.content + '</p>';
// Append the RSS item to the screen.
document.getElementById('rss-feed').appendChild(itemElement);
}
}
});
callback();
}
Weather App
This is a simple weather app that uses the OpenWeatherMap API to display the current weather conditions on your screens. The app uses the axios library to make requests to the OpenWeatherMap API.
// In /app/js/app.js
var screenly = require('screenly-api');
var axios = require('axios');
function weatherApp(app, config, data, callback) {
// Get the API key.
var apiKey = config.apiKey;
// Get the city.
var city = config.city;
// Make a request to the OpenWeatherMap API.
axios.get('http://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey)
.then(function(response) {
// Success!
// Display the weather conditions on the screen.
document.getElementById('temperature').innerText = response.data.main.temp + '°C';
document.getElementById('description').innerText = response.data.weather[0].description;
})
.catch(function(error) {
// Handle the error.
console.error(error);
});
callback();
}
iFrame App
This is a simple iFrame app that allows you to embed web pages in your Screenly screens. The app simply takes a URL and displays it in an iFrame.
// In /app/js/app.js
var screenly = require('screenly-api');
function iFrameApp(app, config, data, callback) {
// Get the URL.
var url = config.url;
// Set the URL on the iFrame.
document.getElementById('iframe').src = url;
callback();
}
Countdown Timer
This is a simple countdown timer app that allows you to display a countdown timer on your screens. The app takes a start time and a duration and then displays the remaining time.
// In /app/js/app.js
var screenly = require('screenly-api');
function countdownTimer(app, config, data, callback) {
// Get the start time.
var startTime = new Date(config.startTime);
// Get the duration.
var duration = config.duration;
// Calculate the end time.
var endTime = new Date(startTime.getTime() + duration * 1000);
// Update the timer every second.
var intervalId = setInterval(function() {
// Get the current time.
var currentTime = new Date();
// Calculate the remaining time.
var remainingTime = endTime.getTime() - currentTime.getTime();
// Format the remaining time.
var formattedTime = formatTime(remainingTime);
// Display the remaining time on the screen.
document.getElementById('timer').innerText = formattedTime;
// Stop the timer when the end time is reached.
if (remainingTime <= 0) {
clearInterval(intervalId);
}
}, 1000);
callback();
}
// Function to format the remaining time.
function formatTime(milliseconds) {
var seconds = Math.floor(milliseconds / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds = seconds % 60;
minutes = minutes % 60;
hours = hours % 24;
return hours + ':' + minutes + ':' + seconds;
}
Simple Message App
This is a simple message app that displays a message on the screen. The app takes a message and a duration and then displays the message for the specified duration.
// In /app/js/app.js
var screenly = require('screenly-api');
function simpleMessageApp(app, config, data, callback) {
// Get the message.
var message = config.message;
// Get the duration.
var duration = config.duration;
// Display the message on the screen.
document.getElementById('message').innerText = message;
// Hide the message after the specified duration.
setTimeout(function() {
document.getElementById('message').style.display = 'none';
}, duration * 1000);
callback();
}
Other
This category contains examples of other aspects of Screenly’s functionality, such as using the API to control playlists and working with JavaScript injectors.
Bootstrap
This is a digital signage optimized Bootstrap theme for the Playground apps. This theme is designed to be used with Screenly’s Edge Apps and provides a basic framework for creating visually appealing apps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenly Playground</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Screenly Playground</h1>
</div>
</div>
</div>
</body>
</html>
Dynamic Playlists
This example shows how to use Screenly’s API to enable/disable a playlist based on weather conditions. This example demonstrates how to interact with the Screenly API to change the playback behavior of a playlist.
// In /app/js/app.js
var screenly = require('screenly-api');
function dynamicPlaylists(app, config, data, callback) {
// Get the playlist ID.
var playlistId = config.playlistId;
// Get the weather API key.
var apiKey = config.apiKey;
// Get the city.
var city = config.city;
// Make a request to the OpenWeatherMap API.
axios.get('http://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey)
.then(function(response) {
// Success!
// Check the weather conditions.
if (response.data.main.temp > 25) {
// Enable the playlist.
screenly.playlists.update(playlistId, { enabled: true }, function(err, playlist) {
if (err) {
// Handle the error.
console.error(err);
} else {
// Success!
console.log('Playlist enabled.');
}
});
} else {
// Disable the playlist.
screenly.playlists.update(playlistId, { enabled: false }, function(err, playlist) {
if (err) {
// Handle the error.
console.error(err);
} else {
// Success!
console.log('Playlist disabled.');
}
});
}
})
.catch(function(error) {
// Handle the error.
console.error(error);
});
callback();
}
Instagram App
This is a basic Instagram app for Screenly that displays photos from a specific Instagram account. The app uses the Instagram API to retrieve photos from the specified account.
// In /app/js/app.js
var screenly = require('screenly-api');
function instagramApp(app, config, data, callback) {
// Get the Instagram access token.
var accessToken = config.accessToken;
// Get the Instagram user ID.
var userId = config.userId;
// Make a request to the Instagram API.
axios.get('https://api.instagram.com/v1/users/' + userId + '/media/recent?access_token=' + accessToken)
.then(function(response) {
// Success!
// Display the Instagram photos on the screen.
for (var i = 0; i < response.data.data.length; i++) {
var photo = response.data.data[i];
// Create a new element for the Instagram photo.
var photoElement = document.createElement('img');
// Set the source of the Instagram photo.
photoElement.src = photo.images.standard_resolution.url;
// Append the Instagram photo to the screen.
document.getElementById('instagram-feed').appendChild(photoElement);
}
})
.catch(function(error) {
// Handle the error.
console.error(error);
});
callback();
}
JavaScript Injectors
This example shows how to use Screenly’s JavaScript Injector. The JavaScript Injector allows you to inject custom JavaScript code into the player’s web page. This can be used to customize the behavior of the player or to add new functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenly Playground</title>
</head>
<body>
<script>
// Example JavaScript code that will be injected into the player's web page.
console.log('Hello from the JavaScript Injector!');
</script>
</body>
</html>
