Lovelace - gauge within picture elements card

Configuration Frontend
1

Hi,

Have been experimenting with lovelace and made some really great picture element cards for my heating system. I have made a picture element card for each room with thermostat and lighting but I am now trying to make a picture element for my boiler. I have an ebusd bridge so can get all sorts of data from my boiler controller such as flow and return temperatures, water pressure, pump status etc. I have created a picture element but would like to display the water pressure and a few other stats as gauges within the picture element if at all possible. I have attached a very rough early version or the card, a work in progress and I will make sure I do an update with the finished card when I am done.

Having looked at all the documentation a gauge only seems to be available as a seperate card. Is there a way to display a gauge as an element within a picture element card?

Thanks

Tim

Screenshot_20181028-192119
Screenshot_20181028-1921191440×2880 243 KB

2

I use the custom gauge here: Lovelace: Gauge card

Works great as a picture elements in lovelace:
Picture

lovelace-ui.yaml:

resources:
  - url: /local/custom-lovelace/gauge-card/gauge-card.js?v=2.0.3
    type: module

....

    - type: custom:gauge-card
      title: Luftkvalitet
      name: Luftkvalitet
      entity: sensor.airquality_iaq_estimate
      scale: 30px
      min: 0
      max: 500
      severity:
        red: 300
        green: 0
        amber: 150
      style:
        top: 73.4%
        left: 60.2%
2 Likes
3

Hello
I’m reviving this thread because I have the exact same question.
The gauge map has been integrated into Home assistant but I can’t include it in a picture elements map
Do you have a solution ?

4

GitHub - radimkeseg/lovelace-mini-gauge-card: A custom Lovelace UI of a mini meter gauge usable in standard cards or picture-element cards. work but there aren’t many options, you can’t hide the title for example, too bad, I keep looking.

5

Hello Sigalou
Perhaps use card_mod to hide te tile

6

Of course - but a custom hui-element card is needed as a “wrapper”.

type: picture-elements
elements:
  - type: custom:hui-element
    card_type: gauge
    entity: sensor.system_monitor_disk_free
    style:
      top: 50%
      left: 50%
image: /local/images/test/orange.jpg

image
image979×684 19 KB

Then by card-mod you can make a transparent background, get rid of borders, …

1 Like