Picture Card Image

Share your Projects! Dashboards & Frontend
1

I am trying to get an image generated from Grafana to show in a picture card, but can’t seem to get it to show up.

In my configuration file I have Camera 2 like such:

camera 2:
  - platform: local_file
    name: Grafana Speed Test
    file_path: /local/downloads/speed_test.png

And then in Lovelace, I have:

card:
  type: picture-glance
  image: camera.grafana_speed_test
  entities:
    - camera.grafana_speed_test

I think its possibly a file path issue?

I created a downloads folder in both my www location and as well in config location trying both, with the speedtest.png file. So the file is there, I just can’t figure out how to show it.

2

I utilize Grafana in a docker container and then utilize grafana-rederer so this may or may not help:

# from my camera.yaml which is "camera: !include camera.yaml" but can the follow can also just be in configuration.yaml if you put "camera:" and then indent everything else

#Grafana
- platform: generic
  name: grafana_AQI
  still_image_url: 'http://10.74.1.224:3000/render/d-solo/hmhTkNOMk/environmental?height=500&orgId=1&panelId=6&refresh=30m&tz=America/Los_Angeles&width=1000'
  username: !secret GrafanaUser
  password: !secret GrafanaPw
  verify_ssl: false
- platform: generic
  name: grafana_AQI_hist
  still_image_url: 'http://10.74.1.224:3000/render/d-solo/hmhTkNOMk/environmental?orgId=1&refresh=30m&from=now-1d&to=now&panelId=7&width=1000&height=500&tz=America%2FLos_Angeles'
  username: !secret GrafanaUser
  password: !secret GrafanaPw
  verify_ssl: false
1 Like
3

I have also noticed that picture cards sometimes do not like to display images that change.
On my desktop I can use the picture card to display an animated GIF with no issues, but looking at the same exact card on the companion app will not work. If I make it a camera then display it then it works:

  - type: picture-entity
    entity: sensor.mail_usps_mail
    camera_image: camera.mail_usps
    show_name: false
    show_state: false

Make sure you leave the “Image” blank or it will overwrite the camera.

4

Thanks,

I went that route and I see the images now. I just need to figure out how to add that into this overall card like saw on this post here: Best way to get Grafana chart into Lovelace card

I set it up the same way, just using custom card-mod instead of the card-modder.

But I get a strange “r.setConfig is not a function”. I think its related to the custom card-mod but haven’t found a solution yet.

type: entities
title: Network
show_header_toggle: false
entities:
  - entity: sensor.myip
  - entity: sensor.speedtest_ping
  - entity: sensor.speedtest_download
  - entity: sensor.speedtest_upload
    icon: 'mdi:ip-network'
  - type: weblink
    name: Internet Speed Trends
    url: >-
      http://192.168.XX.XX:8123/api/hassio_ingress/HYQj2E69oRyybX33_yKx_1olLnsxeJ_TfUMvapqmuo8/d/bHoOi0tGz/network?orgId=1&from=1603556496990&to=1603578096990
    icon: 'mdi:cloud-download-outline'
  - type: 'custom:card-mod'
    style: null
    background: transparent
    card:
      type: picture-glance
      camera_image: camera.grafana_speed_test
      entities:
        - camera.grafana_speed_test
      style: |
        ha-card {
          text-align: center;
          background-color: '#3D758B'; 
          color: '#FFAA00';
          brder-radius: 10px;
          border: solid 2px rgba(100,100,100,0.3);
          box-shadow: 4px 4px rgba(0,0,0,0.4);
        }
5

Glad I could help.
I have not played with either of those cards (at least I don’t recall) so can’t help much there. You could for now just use the entities card with a picture glance for now to have the information available to show.

When I modify a card, I copy it then modify the copy to see if it works, it has saved me lots of time.