Publish content to your screens directly from Microsoft Teams
Learn MoreProduct
Playgrounds allows users to build their own custom applications directly inside Screencloud
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.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.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.1. You’ll now see the in-built code editor, where it’s over to you on what you can create.
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 -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.
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.
Q. What are some examples of things I could build?
Here’s a few examples we’ve seen Playgrounds used for:
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.
Connect your first screen today with our 14-day free trial