Custom light card that lets you change the image?

Configuration
1

Is there a card similar to the light card that allows you to change the image in the centre? Maybe replace it with an MDI image? I have template lights set up to control my receiver volume, but I can’t stand the light bulb :slight_smile:

2

I think the light and climate integrations are the only ones that use this web component:

You would have to roll your own.

https://developers.home-assistant.io/docs/en/lovelace_custom_card.html

3

Ugh. A web developer, I am not.

If @thomasloven is listening, I would love one of these that can fit around a media_player's volume_level, and have configurable min/max/step values so I can match the control to what actually shows up on my receiver’s front panel. Currently I have to guess every time that -40db = 42% :slight_smile:

1 Like
4

@SteveDinn, that’s a cool idea with the template light.
How do you control the volume with it?

You can set the icon of a light card.

              - type: light
                entity: light.couch
                icon: mdi:sofa

Auswahl_222
Looks like the docs are outdated.

Btw, it would be great to have that round slider available for other entities, like input_number, volume, …

5

You can “fake it” with the light by using templates I have it set up to mute/unmute and control the volume of my livingroom receiver. I just wish the slider values could match my actual receiver instead of being from 0 - 100%

I’m going to change the icon right now!

light:
  - platform: template
    lights:
      livingroom_receiver_volume:

        # Name and icon
        friendly_name: "Livingroom Receiver Volume"
        icon_template: "{{ 'mdi:volume-high' if is_state('light.livingroom_receiver_volume', 'on') else 'mdi:volume-off' }}"

        # Capturing state and turning on/off, but really muting/unmuting
        value_template: >
          {{ is_state('media_player.livingroom_amp', 'on') 
            and not state_attr('media_player.livingroom_amp', 'is_volume_muted') }}
        turn_on:
          service: media_player.volume_mute
          data:
            entity_id: media_player.livingroom_amp
            is_volume_muted: false
        turn_off:
          service: media_player.volume_mute
          data:
            entity_id: media_player.livingroom_amp
            is_volume_muted: true

        # Capturing and setting "brightness"...I mean volume.
        level_template: >
          {{ (state_attr('media_player.livingroom_amp', 'volume_level') |float * 255) |round(0) | int }}
        set_level:
          service: media_player.volume_set
          data_template:
            entity_id: media_player.livingroom_amp
            volume_level: "{{ (brightness | float) / 255 }}"

Edit: Added icon_template and some comments

1 Like
6

I should have thought of this, but I just added this to my template light, and left the card alone:

        icon_template: >
          {{ 'mdi:volume-high' if is_state('light.livingroom_receiver_volume', 'on') else 'mdi:volume-off' }}
7

It’s all in the docs, the icon and the volume slider. :rofl:

8

Ha, that’s hilarious. I didn’t look at the docs at all for the light itself. I was expecting to be able to set the icon on the card, which it doesn’t look like is possible. I realized after the fact that it was just displaying the icon of the entity.

It’s weird how the icon template example in the docs is explicitly setting the icon to lightbulbs instead of the volume icon. And they repeat the same conditions as the value_template instead of just checking if the light’s state is on or off.