Speaker control cards

[acesyde]

Preview

Description

Create a specific sub card type (control-card) inside the speaker control card

• Icon
• Text
• Background color

Todo

• translations
• editor
• card
• documentation

Button card code

type: custom:button-card
icon: mdi:volume-plus
name: Volume omhoog
tap_action:
  action: call-service
  haptic: medium
  service: media_player.volume_up
  service_data:
    entity_id: media_player.sonos
styles:
  icon:
    - width: 24px
    - color: var(--contrast20)
  img_cell:
    - justify-content: flex-start
    - margin-top: 0px
  name:
    - justify-self: start
    - font-size: 14px
    - margin-top: 0px
    - color: var(--contrast20)
  card:
    - height: 84px
    - border-radius: 24px
    - padding: 8px 0px 16px 20px
    - background-color: var(--contrast2)
  grid:
    - grid-template-areas: '"i" "n"'

type: custom:button-card
icon: mdi:play
entity: media_player.sonos
name: Afspelen
tap_action:
  action: call-service
  haptic: medium
  service: script.sonos_play_pause
styles:
  icon:
    - width: 24px
    - color: var(--black)
  img_cell:
    - justify-content: flex-start
    - margin-top: 0px
  name:
    - justify-self: start
    - font-size: 14px
    - margin-top: 0px
    - color: var(--black)
  card:
    - height: 184px
    - border-radius: 24px
    - padding: 108px 0px 16px 20px
    - background-color: var(--green)
  grid:
    - grid-template-areas: '"i" "n"'
state:
  - value: playing
    name: Pauzeren
    icon: mdi:pause
    styles:
      card:
        - background-color: var(--yellow)