Time To Share Config: Sonos Playlists in Dashboard - Lemmy.world

Want to share my config to make sonos playlist buttons in dashboard as the picture shows: [https://lemmy.world/pictrs/image/01019c07-0f52-4517-8cca-2f1ace91ef69.png] How to? - enable “sonos_favorites” sensor in settings > devices > entities - goto hacs and install frontend auto-entities card - goto hacs and install button-card - put the below in your dashboard - type: custom:auto-entities view_layout: grid-area: mb card: square: true type: grid columns: 5 card_param: cards sort: method: state filter: template: > {% for item in state_attr('sensor.sonos_favorites', 'items').values() %} {{ { 'entity': 'null', 'name': item, 'icon' : 'mdi:music', 'type': 'custom:button-card', 'template': 'base_music_switch', 'tap_action' : { 'action': 'call-service', 'service': 'script.multimedia_sonos_play_selected_playlist', 'service_data': { 'media_player': 'media_player.sonos_livingroom', 'source': item } } } }}, {% endfor %} - put a template for the custom button in your lovelace file to format the button base_music_switch: show_icon: false show_state: false show_name: true aspect_ratio: 1/1 tap_action: haptic: success styles: card: - border: transparent - border-radius: 8px - box-shadow: | [[[ if (states['sensor.theme_style'].state == 'light') { return ' -3px -3px 3px rgb(255, 255, 255, 0.5), 3px 3px 3px rgb(0,0,0,0.05), inset 1px 1px 2px rgb(255, 255, 255, 0.8), inset -1px -1px 2px rgb(0,0,0,0.05)'; } else { return ' -2px -2px 3px rgb(102, 102, 102, 0.1), 3px 3px 3px rgb(0,0,0,0.9), inset 1px 1px 2px rgb(102, 102, 102, 0.3), inset -1px -1px 2px rgb(0,0,0,0.35)'; } ]]] lock: - height: 10px - width: 10px - justify-content: flex-end - align-items: flex-end grid: - grid-template-areas: | "n" - grid-template-columns: 1fr - grid-template-rows: auto name: - padding-left: 5px - padding-right: 5px - width: 90% - word-break: break-word - overflow: hidden - line-height: 1.3 - display: block;/* or inline-block */ - text-overflow: ellipsis - max-height: 3.9em - white-space: normal - color: var(--divider-color) extra_styles: > @media (min-width: 1800px) { #name{ font-size: 60%; } } @media (max-width: 1800px) { #name{ font-size: 60%; } } @media (max-width: 1000px) { #name{ font-size: 60%; } } - when you click an icon a script is started - add a script, my example is highly customized to my auto follow feature that I implemented alias: multimedia_sonos_play_selected_playlist sequence: - choose: - conditions: - condition: template value_template: > {{ states('input_boolean.multimedia_' + media_player | replace('media_player.sonos_','') + '_automusic') == 'on' }} sequence: - service: input_boolean.turn_off data: {} target: entity_id: input_boolean.multimedia_sonos_autofollow - service: media_player.shuffle_set data: shuffle: true target: entity_id: | {{ media_player }} - service: media_player.select_source data: source: | {{ source }} target: entity_id: | {{ media_player }} - delay: hours: 0 minutes: 0 seconds: 4 milliseconds: 0 - service: input_boolean.turn_on data: {} target: entity_id: input_boolean.multimedia_sonos_autofollow default: - service: media_player.shuffle_set data: shuffle: true target: entity_id: | {{ media_player }} - service: media_player.select_source data: source: | {{ source }} target: entity_id: | {{ media_player }} mode: single