Add light card to dashboard (with vertical slider) | Home Assistant | Page 1

latent halo Sep 20, 2024, 9:34 PM

#

When I click on a light entity I get this card: (Img1 attached) -> it's exactly what I want to achieve
But when I add the light to the board it will show as (Img2 attached)
I was able to achieve something very close with the following yaml (img3):

type: grid
columns: 1
cards:
  - features:
      - type: light-brightness
    type: tile
    entity: light.living_room_2
    state_content:
      - state
      - brightness
      - last-changed
    vertical: true
    hide_state: false```

 I mostly surfed over 
https://www.home-assistant.io/dashboards/light/
https://www.home-assistant.io/dashboards/features/
https://www.home-assistant.io/dashboards/tile/
https://www.home-assistant.io/dashboards/features

I wish there was an easy way to copy default entity/device cards to your dashboard, but they most of the times are different when you try to add them to dashboards.

These examples are with IKEA TRÅDFRI integration.

Thanks in advance and I'm sorry if anything is misplaced as this is my first post here.

slender shard Sep 20, 2024, 10:45 PM

#

When you click that is the more-info dialog, and yes it has a different design than the default light cards. There's no way right now to replicate more-info dialogs into cards on your dashboard, but maybe some custom cards provide additional functionality.

south hound Sep 21, 2024, 12:47 AM

#

more-info-card on hacs might do what your looking for?
https://github.com/thomasloven/lovelace-more-info-card
will show the more info box in a card

failing that there are loads of custom cards and there may be one that does what you like.

you could also probably use card_mod to rotate the card

south hound Sep 21, 2024, 1:42 AM

#

type: grid
columns: 1
cards:
  - features:
      - type: light-brightness
    type: tile
    entity: light.mk_room_bulb
    state_content:
      - state
      - brightness
      - last-changed
    vertical: true
    hide_state: false
    card_mod:
      style: |
        ha-card {
          padding-bottom: 60px;          
          rotate: -90deg;
          ha-tile-icon {
            padding-left: 0px;            
            ha-state-icon {            
              rotate: 90deg;
            }          
          }
          ha-tile-info {
            padding-top: 0px;
            padding-left: 100px;
            rotate: 90deg;
          }
          }

#

it feels dirty but i made card_mod do it

#

made the card square then rotated it then rotated the icon and text back and moved it around a bit

#

there has gotta be better options but i wanted to see if i could do it 😛

#Add light card to dashboard (with vertical slider)