With Screenly, it could not be easier to view your Grafana visualizations on the wall. Once you have your Screenly Pro player up and running, you can manage everything from Screenly's web interface.
Getting your API key from Grafana
Before you get started, you need to get your API key from Grafana. This is what Screenly uses to authenticate against Grafana. This API key can be used across multiple screens.
To generate an API key in Grafana, you need to have administrative permissions. Assuming you do have that, simply login to your Grafana interface and take the following steps:
- Scroll down in the left-hand menu and Select Configuration
- Choose "API Keys" from the Configuration sub-menu
- Click on "Add API Key"
- Enter a name for your API Key and select "Viewer" as the role and press "Add"
You will now get a dialogue window with a command that looks like this:
curl -H "Authorization: Bearer abc123=" https://grafana.yourdomain.com/api/dashboards/home
What you need to take note of here is "Authorization: Bearer abc123=". You will use this in Screenly when you are adding your assets.
Adding your Grafana dashboards to Screenly
Adding a Grafana dashboard to Screenly is very straight forward. You can either add an individual chart, or an entire dashboard. Once you have identified the URL that you want to display, we recommend that you append "&kiosk" to the end of the URL. This will automatically hide the menu bars, which makes for a better viewing experience.
With the URL ready, simply add this as an asset to Screenly. You can watch this tutorial VIDEO to see how to add content to Screenly.
Once you've added the asset, you need to to add the credentials so that the device can actually access it. To do this, take the following steps:
- Navigate to the asset you just added
- Select "Advanced"
- Press "Add Header"
- In the "Header" field, enter "Authorization"
- In the "Value" field, enter the "Bearer abc123=" (replace this with your token)
- Press "Save"
With this done, you can now add this asset to your playlist as you would normally do in Screenly. Watch tutorial video on Screenly playlist here.
Please note that these dashboards tend to be heavy, so we do not recommend setting the duration to anything less than 30 seconds (more if you have multiple graphs).
Tip: When designing your dashboards, it is recommended that you optimize the height and width of your dashboard to 1920x1080px, which is most likely the resolution used by the screen.
Steps for adding an individual graph
- Navigate to the dashboard in Grafana
- Click on the title and select "Share"
- Copy the link from generated and open it in a new browser tab
- Modify the time range to the desired range (such as "Last 30 days")
- Copy the new URL, and append "&kiosk" to the end
- Add the URL as an asset for Screenly as described in video linked earlier.
- Add the bearer token credentials to the newly created asset as described above.