all my platform runs inside dockers
What does your picture entity card config look like ?
I cannot get mine to show the image.
Br Morten
This is the picture entity card code:
entity: camera.grafana_termo_consumo
name: termo
type: picture-entity
aspect_ratio: 50%
I got Grafana Image Rendering working on my Raspberry Pi 4 with Docker.
More info here:
2 Likes
After a few days of trying and searching for possible solutions on the forum here, I would like to post the problem I’m having with getting Grafana charts in a lovelace card through the suggested ‘generic camera’ approach.
configuration.yaml:
camera:
- platform: generic
name: grafana_current_power
still_image_url: 'http://192.168.1.250:8123/api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/render/d-solo/Wz8Wde8mz/energy-usage?orgId=1&panelId=4'
username: !secret grafana_user
password: !secret grafana_password
- platform: generic
name: weather_oslo
still_image_url: https://www.yr.no/place/Norway/Oslo/Oslo/Oslo/meteogram.svg
content_type: 'image/svg+xml'
ui-lovelace.yaml:
- title: Stroom & Gas
cards:
- type: picture-entity
entity: camera.grafana_current_power
- type: picture-entity
entity: camera.weather_oslo
- type: iframe
id: grafana_iframe
url: http://192.168.1.250:8123/api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/d-solo/Wz8Wde8mz/energy-usage?orgId=1&theme=light&panelId=4
aspect_ratio: 65%
This results in 2 out of 3 cards working:
- The generic camera with the Grafana still image is not working (camera.grafana_current_power)
- The weather image is working (camera.weather_oslo)
- The iframe card with Grafana chart is working. However, this is not my preferred solution because it sometimes gives me a 401: Unauthorized error.
Clicking the picture-entity card opens a pop-up with an empty image:
Opening the still_image_url in the browser works fine.
The only related log entries I see (debug level):
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.auth] Authenticated 192.168.1.210 for /api/camera_proxy/camera.grafana_current_power using signed request
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.view] Serving /api/camera_proxy/camera.grafana_current_power to 192.168.1.210 (auth: True)
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.view] Serving /api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/render/d-solo/Wz8Wde8mz/energy-usage to 192.168.1.250 (auth: False)
Hopefully someone can help me out.
Can somebody push me in the right direction here? I tried to do the same configuration from scratch but I’m still running into the same issues. Any suggestion is appreciated.
I spent quiet some time reading about the options, but did not see comments on using the iframe with the “embedded” export from Grafana, and it look very sharp!!
The link I used on the iFrame can be grabed from the “share->embedded” menu option. The url looks like this:
<iframe src="http://192.168.1.6:8123/api/hassio_ingress/JJV8Sjky1sZEcgdfgdfgdfgheXoEhIqRHaM8eII8A/d-solo/rf8EBfWRk/temperature?orgId=1&from=1579943642055&to=1580548442055&panelId=2" width="450" height="200" frameborder="0"
But you only want the URL, from http… to …frameborder=“0”
Then you get something like this:
I still could not find out how to update the time window on the iframe, since updating it back in the chart does not reflect on the iframe.
Edit:
As @darkd mentioned below, you can make the time window variable by removing the from=1579943642055&to=1580548442055&
3 Likes
If you remove this part : from=1579943642055&to=1580548442055
the graph will show the last period specified with grafana for this graph (auto update)
5 Likes
Thank you @darkd, this solves it. Now we can easily map Grafana graphs/objects into Lovelace and have them auto update.
1 Like
You’re welcome 
btw, noticed it works well via chrome on the PC but via the mobile app I get 401: Unauthorized and no image
It’s probably because grafana URL is http not https. Mobile browsers/app are less permissive about security.
Following @joaofl @darkd suggestion re embedded link from Grafana, using that url in an iFrame in lovelace.
However on other devices, it sends me to login page of grafana.
Any ideas how to pass the user / pass as part of the iFrame Grafaba https url?
Add this under config in Grafana addon:
“env_vars”: [
{
“name”: “GF_AUTH_ANONYMOUS_ENABLED”,
“value”: “true”
}
]
@realmadridsi Thanks, assume this is hassio.
Using separate docker containers here but adding GF_AUTH_ANONYMOUS_ENABLED means anyone with my https grafana address can gain access without login no?
this morning I’m getting 401 Unauthorized across all access methods. Images & updates are not getting through to Lovelace 
Yes, that is a problema that seems to affect the hassio due to the containers.
What you have to do to overcome that is:
- Make grafana available from a different port:
Then update your uri to the one corresponding to the new port.
In principle, the same chart with the same api would be available on the new port. However, in my case, I had to copy and paste my dashboard from the instance at port 8123 to that one on port 3000.
After that, I can access my charts from the mobile app as well.
Yes assuming Hassio, you can also just adjust the grafana.ini file by setting it to true.
I’ve seen a lot of posts about this and I’m not sure if I’m just missing some big caveat or something else, but all I had to do to get my Grafana graphs and gauges rendering (and refreshing) in Lovelace was add an iframe card and set the URL to my graph with refresh set and the view mode on Grafana’s “Kiosk” mode (fullscreen).
Step by step instructions are below, but if you want to shortcut them just make sure that you’ve added the following to the query string of your URL:
&refresh=10s&kiosk&fullscreen
Step 1: Open the Grafana dashboard that holds the chart you want to display on your Lovelace card
Step 2: Click the Refresh drop-down at the top right and select the desired refresh rate (this is required if you want your graphs to automatically update)
Step 3: Click the Time Range drop-down and select or specify the time range that you would like to display data from
Step 4: Click the “Cycle view mode” button at the top until you enter Kiosk mode (fullscreen-like view)
Once you enter Kiosk mode, you should see a green notification to let you know that you can press “ESC” to exit Kiosk mode:
Step 5: Click on the title for the chart you wish to display and choose "Share"
Step 6: Disable the “Current time range” toggle on the resulting window, then copy the URL into your Lovelace UI configuration (the “Current time range” toggle effectively converts your selected time range into an absolute time range, thus if this is selected your chart will never update)
The finished product: (note that I managed to take this screenshot while the “Brightness (%)” graph was refreshing, which is why you can see the spinner GIF at the top right of the chart)
28 Likes