Birdbox camera dashboard now with live weather data

I added a live weather widget to my grafana birdbox camera monitoring dashboard, in case I can't be bothered to look out of the window.

Dark Sky weather data 

I did an earlier post that described getting my camera feeds into this setup here.
I used info on Michael Green's blog post here as inspiration for my setup.

This is the updated version, not a lot going on apart from the wind rattling the windows...

The weather bit is in the top left corner, it pulls weather data from an online weather visualisation app called Dark Sky.  It's added via a short piece of modifiable html code into an iframe panel on the grafana dashboard that runs in a docker container on a Raspberry pi.  It was a bit of a pain to get running , so I'm going to document it in case anyone else wants to do this.
Note that the 'accelerometer' style graphs are populated by a temperature and humidity sensor in one of the bird boxes themselves.

Steps / considerations
I'm running grafana version v6.3.6 in a docker container on a Raspberry pi.  If you go to the grafana website you'll see a darksky plugin that can also be used... I didn't go that route, instead opted for (what I thought) would be simpler, namely adding a short bit of html to a text panel in html mode (see my original post on this) , this proved not to be the case...  The iframe embed method is described in this helpful blog post.

In theory, you just add the iframe html into a new grafana panel and set it to txt/html mode.
It's quite configurable, e.g. the colour of the text and background/font used and temperature units used - I'm in the UK so have set it to degrees celsius.
You'll need to substitute the XXXX and YYYY for your latitude and longitude so that the weather data is relevant to your location.  I sourced my location via this handy postcode to lat/long converter

<iframe id="forecast_embed" frameborder="0" height="245" width="100%" bgColor="transparent" src="//forecast.io/embed/#lat=XXXX&lon=YYYY&units
=uk&color=#ced6cb&text-color=#ced6cb"></iframe>

The fiddly bit.

So in theory its as simple as dropping in a bit of html - no it isnt...
There's a configuration option that needs to be changed, otherwise an ifram wont render, and you just get a string of text.  In the grafana server admin screen, if you scroll down to the [panels] section there is a setting called 'disable_sanitise_html = false', this needs to be changed to ' = true' or your iframe wont load.  You would think that changing it directly here would be possible?  ...but it isn't

Note - I've updated it in my version.  the default is 'false'

How to fix it depends on how you're running garafana.  If you've installed grafana locally, then you just need to directly edit the grafani.ini file, which is located in /etc/grafana/grafana.ini.

In my case I've set it up in a docker container which makes editing the file a bit more tricky- editing it directly does not work either but I'll describe the process as its handy to know how to connect to a running docker container and modify ts contents:

SSH into the Rassberry pi running Docker, and by definition your grafana container
Find the container ID of the grafana container

docker container ls -a

Connect to the container as root

docker exec -it <container-name> bash

To edit the grafana.ini file, you'll need to install a txt editor inside the docker container first

apt-get update
apt-get install nano

Then edit the file in nano, updating the disable_sanitise_html = false to true

nano /etc/grafana/grafana.ini

Save the file, exit the container.

SO.. that should fix it?  WRONG.  The config screen in the web interface as described above will still show this setting as = false.  Loads of forums recommend restarting the docker container, which has not effect either.  Running the command 'service grafana-server restart' within the docker container also has not effect.

The solution..
The trick is to pass 'disable_sanitise_html = true' to a docker image as an environmental variable at the point that a docker image is spun up into a container.  To make this work, I committed my existing grafana container back to an image file (this is essentially making a backup/snapshot of a container),  then re-launched the new local image file with the environmental variable added:

#run newly saved image file with environmental variable set
docker run -d -p 3000:3000 -e GF_PANELS_DISABLE_SANITIZE_HTML=true  grafana:1_Nov

Note that I wanted to keep my modification to the stock docker image for my modified version of grafana.  If you want to apply it to the stock grafana image on dockerhub.com then use this command to spin up a new container:

#or add environmental variable option to the image on docker hub:
docker run -d --name=grafana -p 3000:3000 -e GF_PANELS_DISABLE_SANITIZE_HTML=true grafana/grafana:6.3.6

I've squished the DarkSky iframe down a bit on my dashboard, if you make it bigger within its grafana panel, you get this which has some pretty cool animated effects too