How to have icon change based on state and have a pop up for a dimmer?

Configuration
1

So, I know this is a very basic question, but I am just now experimenting with HA (I am coming from CQC). I have a Radio RA2 lights, and when I add a basic light with a dimmer, it gives me a big dial that I can use to adjust, etc…

How would I make something like this, where there is smaller Icons, that change color based on the state.

Also, how would I put a button next to it that when I click a pop up (in the same window) opens that lets me adjust brightness, etc…

Thank you

2

The slider entity row custom card may be what you are after. It has the option to include a toggle button next to the slider. You can still click on the entity name or icon to get the more info pop-up card to adjust other settings like colour or colour temperature or effects (if your light supports effects).

ex

3

Thank you, that would solve my issue with lights.

But for example, if I would want to have a media button, and when I press, it a few media options would pop up, is there a way to have a card pop up on top of the rest?

Than kyou

4

You can use browser mod to do that:

Also if you are not a fan of the media player there’s this mini media player custom card:

This has some styling applied but basically just an entity card of mini media players:

Off:
Screenshot_2019-10-27%20Home%20Assistant(1)

On:
Screenshot_2019-10-27%20Home%20Assistant

Lovelace config

entities:
  - entity: media_player.lounge_av_rx
    group: true
    icon: 'mdi:audio-video'
    min_volume: 20
    name: Lounge Amp
    style: |
      ha-card {
        border: solid 2px var(--primary-color);
      }
    type: 'custom:mini-media-player'
  - entity: media_player.lounge_av_rx_zone_2
    group: true
    icon: 'mdi:audio-video'
    min_volume: 20
    name: Dining Zone
    style: |
      ha-card {
        border: solid 2px var(--primary-color);
      }
    type: 'custom:mini-media-player'
  - entity: media_player.cinema_av_rx
    group: true
    icon: 'mdi:audio-video'
    min_volume: 20
    name: Cinema Amp
    style: |
      ha-card {
        border: solid 2px var(--primary-color);
      }
    type: 'custom:mini-media-player'
  - entity: switch.cinema_subwoofer
    type: 'custom:toggle-lock-entity-row'
show_header_toggle: false
style: |
  ha-card {
    border: solid 2px var(--primary-color);
  }
title: Amplifiers
type: entities

I use card-mod for the styling.

You can leave the styling out like this:

entities:
  - entity: media_player.lounge_av_rx
    group: true
    icon: 'mdi:audio-video'
    min_volume: 20
    name: Lounge Amp
    type: 'custom:mini-media-player'
  - entity: media_player.lounge_av_rx_zone_2
    group: true
    icon: 'mdi:audio-video'
    min_volume: 20
    name: Dining Zone
    type: 'custom:mini-media-player'
  - entity: media_player.cinema_av_rx
    group: true
    icon: 'mdi:audio-video'
    min_volume: 20
    name: Cinema Amp
    type: 'custom:mini-media-player'
  - entity: switch.cinema_subwoofer
    type: 'custom:toggle-lock-entity-row'
show_header_toggle: false
title: Amplifiers
type: entities
5

Thank you. My overall goal was so the interface is not so cluttered. For example, instead of having each light with a slider next to it, I just have the lights, I click on it, a pop up pops and there is a slider there.

THanks