PNG PhantomJS Workaround

First of all, thank you for this awesome plugin. I was amazed at how easy it was to get everything up and running. This plugin adds so much value to my setup

One feature I really wanted for a project I'm working on was png exports. My project was regualrlry hitting the render API and I noticed that after about an hour I couldn't render any charts until I restarted the plugin. I assume this is the issue you refer to in one of your sticky topics?

Reading through the Grafana forums I noticed they were moving away from PhantomJS (as you also make mention of) to a Chrome solution. I researched headless Chrome and discovered that I could render the charts using the standard Mac Chrome install and an Indigo schedule. The schedule runs a bash script which runs a Chrome command that renders the chart as a png and saves it to the Indigo Web Server's public folder. From there I can access the png from my project. I've been running it for 4 days without issue.

Using the same process the image could be used in an Indigo Control Page.

The bash script I'm using is below.

Code: Select all

#!/usr/bin/env bash

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot='/Library/Application Support/Perceptive Automation/Indigo 7/IndigoWebServer/public/my_image_name.png' --window-size=450,180 --hide-scrollbars 'http://localhost:3006/d-solo/NWEfJlNik/home?refresh=1m&orgId=1&panelId=2" frameborder="0"'

You need to change the screenshot , window-size and the Grafana URL settings as desired.

The image is then accessible from http://localhost:8176/public/my_image_name.png

I got the Grafana URL from the Share Panel menu on the Embed tab. Uncheck "Current time range" and strip out the <iframe> tags. The Grafana URL width and height entires aren't required and can be removed. Chrome ignores them and renders to its window-size setting regardless.

My Indigo schedule runs every 5 minutes and uses about 15% CPU for about 5 seconds each time on my 2011 MacMini. Just a consideration.... trying to run 10 charts every minute may cause some resource issues.

I'm going to investigate if the Chrome --headless command can send authentication as I'd like to lock Grafana back down.

Pete

This is great info. I had no idea that they have the feature working. I was under the impression they were phasing the PhantomJS out in replacement for this, but are still working on it. I was reading over the release notes for the v5.2.0 that just came out for anything of interest to the Indigo community (I don't see anything, so I'll likely take my time with upgrading).

I'll give this a try. To be honest, I don't see myself adding many items to my Control Pages, but I can see the benefit of 1 or 2 panels. That is a high CPU usage, we should watch that.

How does Chrome know what time range to visualize? I didn't see that parameter in your query string.

How does Chrome know what time range to visualize? I didn't see that parameter in your query string.

The chart loads with the default time range of the dashboard. You can override it by adding "to" and "from" commands in the url. E.g. " from=now-6h to=now". This overrides the default time to the past 6 hours. So the entire url is http://localhost:3006/d-solo/NWEfJlNik/home?orgId=1&refresh=1m&panelId=2&from=now-6h&to=now. There are more options for date/time. you can use YYYYMMDDTHHmmss format or epoch time.

You can also use variables in the url if you've configured them in your chart. Format is "var-your_var_name=your_var_value" where var_name is the name of the dashboard variable and your_var_value is the value your passing. E.g. http://localhost:3006/d-solo/NWEfJlNik/home?orgId=1&refresh=1m&panelId=2&from=now-6h&to=now&var-your_var_name=your_var_value. This will let you create one chart for say temperature and pass the Indigo device name dynamically. Saves you creating a chart for every sensor if you only wan them in a Control Page.