Adding additional cards to Picture elements card

Configuration
1

I’d like to use gauge cards within my picture elements card and be able to place them using css. Is this possible? I’m laying out a card to show my vehicles status’ (doors, locks, oil level, DTE, odometer, battery voltage etc). Some of those I’d like to be visual opposed to just an icon or label. I’ve managed to get icons to “toggle” so I can start the car and lock the doors, but would really like a gauge card as well. Any suggestions/

Ford Explorer (2018 - present)-updated
Ford Explorer (2018 - present)-updated1920×1200 183 KB

2

I am something like this in my picture elements yaml:

  - type: custom:hui-element
    card_type: gauge
    name: Indoor temp
    needle: true
    min: 10
    max: 30
    segments:
      - from: 0
        color: '#000099'
      - from: 18
        color: '#009900'
      - from: 25
        color: '#990000'
    entity: sensor.thermostat_air_temperature
    style:
      left: 93.5%
      top: 39.75%
      width: 10%
      height: 15%

I tend to create the control in a Test dashboard using the UI and then copy the code into the picture elements.

I think this requires the HACS hui-element.

3

Thanks @templeton_nash ! Do I have to do something special to utilize “hui-element”? I’m getting an error that says: "custom element doesn’t exist: hui-element

4

I think this requires the HACS hui-element.

5

Thanks! That did it. Now one more question…any idea how I can make the background of the gauge card transparent?

6

Maybe HACS card-mod 3 could do this. I’ve not tried this.

7

@crankycowboy did you figure out how to make the background of the gauge card transparent?

9

How did you managed to put this in HA

10

I used a picture glance card and then added all the elements.