Screenly Playground

This repository holds various examples that showcases Screenly's features and API.

Edge Apps

If you are not familiar with Edge Apps, we suggest you review our developer documentation.

• 3D Text - A 3D text display app that renders text with depth and shadow effects.
• Asset Metadata - An example implementation of Screenly's metadata.
• Clock App - A simple clock app.
• Countdown Timer - A simple countdown timer app.
• Charlie HR App - Displays employee birthdays, work anniversaries and other HR events from Charlie HR.
• Flying Toasters App - A simple toaster app that flies around the screen.
• iFrame App - A simple iFrame app.
• Power BI - A Power BI Edge App for securely accessing dashboards and reports.
• QR Code Generator - An example of how to build unique QR Codes that embeds the screen metadata as UTM parameters.
• RSS Reader - A simple RSS reader.
• Sonar Dashboard - A dashboard that displays the status of the Sonar - BLE Device Counter.
• Strava Club Leaderboard - A leaderboard of Strava club activities.
• Simple Message App - A simple message app.
• TFL Bus Status App - An app to display TFL Bus Status for a given bus stop. A list of all bus stops can be found here - Bus Stop Lookup Tool
• Weather App - A simple weather app.
• Welcome App - A customizable welcome screen app.

Creating a new Edge App from the template

Important

Make sure that you have the following installed before proceeding:

• Bun (1.2.2+)
• Screenly Edge App CLI (v1.0.3+)

After installing bun and the Screenly CLI, run the following command to create a new Edge App:

cd edge-apps/
bun create --no-git edge-app-template <edge-app-name>

Created <edge-app-name> project successfully

# To get started, run:

  cd <edge-app-name>
  bun run build:dev # On one terminal session
  bun run dev # On another terminal session

This will create a new Edge App with the name <edge-app-name> in the edge-apps directory.

Note

Don't forget to update README.md and screenly.yml as needed.

You can now run the local development server by running the following commands in two separate terminal sessions:

cd <edge-app-name>
bun run build:dev

bun run dev # This will start the development server.

Follow the instructions in the README file of the new Edge App for more details.

TypeScript Library

The Playground also offers an Edge Apps library that contains utilities for building Edge Apps including helper functions and reusable Vue components. The source code is located inside the edge-apps/blueprint directory.

To install the library, run the following command:

bun add github:Screenly/Playground

This will install the latest version of the library in the default branch.

You can also specify a specific version or branch:

bun add github:Screenly/Playground#vX.Y.Z
bun add github:Screenly/Playground#[branch-name]

Details on how to use the library can be found in this guide.

Other

• Bootstrap: A digital signage optimized Bootstrap theme for our Playground apps.
• Dynamic Playlists: An example of how to use Screenly's API to enable/disable a playlist based on weather conditions.
• Instagram App: A basic Instagram app for Screenly.
• JavaScript Injectors: Examples showing Screenly's JavaScript Injector.