screenly / playground

iFrame App - screenly/playground

The iFrame App is a powerful tool that allows you to embed web content directly into your Screenly playlists. This can be particularly useful for displaying dynamic content, such as real-time data visualizations, RSS feeds, or even entire web pages.

To get started with the iFrame App, you’ll need to have a basic understanding of HTML, CSS, and JavaScript. The iFrame App is built using the A-Frame framework, which is a web framework for building virtual reality experiences. However, you don’t need to be a VR expert to use the iFrame App - it can be used for much more than just VR.

Here’s an example of how to create a basic iFrame App:

<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="iframe-container" position="0 0 -5">
<a-entity id="iframe" src="https://www.example.com" width="10" height="5" position="0 0 0" scale="0.5 0.5 0.5"></a-entity>
</a-entity>
</a-scene>
</body>
</html>

In this example, we’re creating an A-Frame scene with a single entity that contains an iFrame. The src attribute of the iFrame entity specifies the URL of the web page that we want to embed. The width and height attributes specify the dimensions of the iFrame, and the position and scale attributes allow us to position and size the iFrame within the A-Frame scene.

Once you’ve created your iFrame App, you can deploy it to your Screenly player using Git and GitHub. The Screenly Playground project provides detailed instructions on how to do this.

In addition to basic iFrame embedding, the iFrame App also supports a number of advanced features, such as:

  • Templating: You can use templating languages like Handlebars or Mustache to dynamically generate the content of your iFrame. This can be particularly useful for displaying real-time data or for creating custom layouts.
  • QR Codes: You can generate QR codes that link to the content of your iFrame. This can be a great way to allow users to easily access the content on their mobile devices.
  • Clock: You can display a clock in your iFrame, which can be useful for displaying the current time or for creating countdown timers.
  • Power BI: You can embed Power BI dashboards and reports directly into your iFrame. This can be a great way to display real-time data and analytics on your Screenly player.

For more information on these and other advanced features, be sure to check out the Screenly Playground documentation.

Sources: