Playgrounds App Guide

The ScreenCloud Playgrounds app opens up a world of possibilities to our users who wish to stretch the boundaries of their digital signage. Playgrounds enables users to quickly build their own applications within ScreenCloud, without worrying about hosting or getting started. Simply grab some HTML, CSS and JavaScript, paste it into our code editor, then watch it run on your digital screens.

The app is aimed at users comfortable working with CSS, Javascript and HTML to build their own custom applications within ScreenCloud. There are a few basic templates offered out of the box, including a meme generator and a giphy layout, but you can start with a blank template and get creative. 

We also recommend checking out sites like Codepen and jsFiddle where you’ll find scripts that can be pasted into the code editor.

For those interested in building something more complex, with your own tools and APIs, check out our Developer SDKs.

Here’s how it works:

1. Select and install ScreenCloud’s Playgrounds App

1.1. Get started by logging into your ScreenCloud account here and choosing the ScreenCloud App Store from the left-hand menu.

1.2. From the App Store, type in “Playgrounds” in the search bar to populate the Playgrounds App.

1.3. Click on the app, then select the yellow “Go to App'' button to open the configuration window for the Playgrounds app.

2. Create a New Instance

2.1. Once you’ve opened the Playgrounds app from the ScreenCloud App Store, click ‘New Instance’ in the top right to begin.

2.2. Next, you’ll see some starter templates, but you can also choose to start with a blank template using the ‘Start with a blank template’ button at the bottom of the page.

3. Build Your App

3.1. You’ll now see the in-built code editor, where it’s over to you on what you can create.

4. Application Data

4.1. The “Application Data” feature gives you a very basic but powerful tool to easily automate your new scripts, without setting up your own databases and APIs.

Using the Application Data, you get a URL that you can post JSON to. Whatever JSON you post, we’ll store, and it will be available to your application.

For example, you might write a script in Python, JavaScript or Shell, which links to your source system and posts an update to that URL when there’s a change.

Using the Big Number template as an example to update the Application Data use the API URL and send a PUT request with the JSON shown below in the body of the request. Once the request has been sent it will update the Application Data accordingly. The Application Data is required to be in JSON format.

Note that if updates are made via the API URL outside of Studio if a user has the app open in the editor window they will need to exit the editor and reload the app instance to be able to see the changes.

{
    "data": {
        "number": 1234
    }
}

Curl Example

curl -X PUT -d '{"data": {"number":"1234"}}' -H "Content-Type: application/json" <API URL>

4.2. After reviewing your preview, you can add a unique name to your app instance and select “Save” to add the Playgrounds app into your managed apps in ScreenCloud.

5. Add the Playgrounds app to your digital screens

You can add the Playgrounds app to your screen directly by casting it, adding it into a playlist, scheduling into a channel, and more. You can click here to view ways to set content on your screens with ScreenCloud.

To learn more about how to use this app, get a demo here. Please let us know if you have any questions by emailing support@screencloud.com.

Frequently asked questions:

Q. What are some examples of things I could build?

Here’s a few examples we’ve seen Playgrounds used for:

• Custom design - If you have a particular design you want to use on screens that is not covered by ScreenCloud templates or apps, using the Playgrounds app, you could build out the style you want.
• Custom weather app -a weather app that displays more in depth weather information than our dedicated weather app allows.
• Live video - You could connect to a live video stream for security monitoring.
• Bespoke metrics dashboards - Connect to a data source and display your own bespoke metrics Dashboard on screen.

Q. Can I connect to my own data source?

Yes, check out our Application Data feature in the top right corner of the app.

Q. I'm having trouble getting my content on screen, what can I do?

Please ensure that you have saved your app instance by clicking 'Save' in the top right corner. You must do this before you can display your app on screens.

Q. Concerning 'Retrieval of application data in Playgrounds' - Once you “Put” Json data in, how does the process work to retrieve / request it back from the url storage?

In the "Big Number" Playgrounds template , the Javascript contains the following line:

getData().then(data => render(data));

getData is an asynchronous method that we provide in the static javascript, which is downloaded with the Playgrounds app, and it fetches any data associated with the app. In the code above, the data retrieved is then being passed into a render method which was defined in the app's JS.