Lovelace Card to Display and Select Presets

[thlucas1]

Describe the solution you'd like

Ability to display a preset list that is automatically syncronized with updates made by SoundTouch App and other sources.

Here is what I have so far, that does not work:

type: custom:auto-entities
card:
  type: grid
  columns: 3
  title: Bose Preset List
  card_param: cards
filter:
  template: >-
    {% set serviceResponse = None -%} 

    {%- set itmMediaPlayerEntityId = 'media_player.bose_st10_1' -%}

    {%- if has_value('sensor.bose_preset_list') -%}

    {%-   set serviceResponse =  state_attr('sensor.bose_preset_list','serviceResponse') -%}

    {%- endif -%}

    {%- if serviceResponse != None -%}

      {%- for preset in serviceResponse['presets']['preset'] -%}
        {%- set itmContainerArt = preset['ContentItem']['containerArt'] | default('') -%}
        {%- set itmItemName = preset['ContentItem']['itemName'] | default('') -%}
        {%- set itmSource = preset['ContentItem']['@source'] | default('') -%}
        {%- set itmSourceAccount = preset['ContentItem']['@sourceAccount'] | default('') -%}
        {%- set itmItemType = preset['ContentItem']['@type'] | default('') -%}
        {%- set itmLocation = preset['ContentItem']['@location'] | default('') -%}
        {{
          {
            'type': 'picture-entity',
            'entity': 'input_boolean.always_enabled_helper',
            'image': '\' + itmContainerArt + '\',
            'show_state': 'false',
            'show_name': 'true',
            'name': '\' + itmItemName + '\',
            'tap_action': {
              'action': 'fire-dom-event',
              'browser_mod': {
                'service': 'soundtouchplus.play_contentitem', 
                'data': { 
                  'is_presetable': 'true',
                  'entity_id': '\' + itmMediaPlayerEntityId + '\',
                  'name': '\' + itmItemName + '\',
                  'source': '\' + itmSource + '\',
                  'source_account': '\' + itmSourceAccount + '\',
                  'item_type': '\' + itmItemType + '\',
                  'location': '\' + itmLocation + '\',
                  'container_art': '\' + itmContainerArt + '\',
                }
              } 
            }
          }
        }},
      {%- endfor %}
    {%- endif %}

[Valdorama]

type: custom:auto-entities
card:
  type: grid
  columns: 3
card_param: cards
filter:
  template: >-
    {% for story in state_attr('input_select.moshi_stories_by_number','options')
    -%}

    {%- set id = story.split(";")[0] -%} {%- set title = story.split(";")[1] -%}
         {{
           {
            'type': 'picture-entity',
            'entity': 'input_boolean.always_enabled_helper',
            'image': 'local/moshi/' + id + '.jpg',
            'show_state': false,
            'name': title,
            'tap_action': {
               'action': 'fire-dom-event',
               'browser_mod': {
                  'service': 'browser_mod.popup',
                  'data': {
                    'title': 'Moshi',
                    'content': {
                       'type': 'picture-glance',
                       'title': title,
                       'image': 'local/moshi/' + id + '.jpg',
                       'tap_action': 'null',
                       'entities': [{
                          'entity': 'input_boolean.always_enabled_helper',
                          'icon': 'mdi:play',
                          'tap_action': {
                             'action': 'fire-dom-event',
                             'browser_mod': {
                                'service': 'browser_mod.sequence',
                                'data': {
                                  'sequence': [{
                                     'service': 'script.play_moshi_story_by_num', 
                                     'data': { 
                                       'story_title': title, 
                                       'id': id,
                                       'browser_id': 'THIS'
                                     }
                                  },
                                  {
                                     'service': 'browser_mod.close_popup',
                                     'data': {}
                                  }]
                                }
                             }
                          }
                       }]
                     }
                  }
               }
            },
            'double_tap_action': {
               'action': 'fire-dom-event',
               'browser_mod': {
                  'service': 'script.play_moshi_story_by_num', 
                  'data': { 
                    'story_title': title, 
                    'id': id,
                    'browser_id': 'THIS'
                  }
               } 
            }
           }
         }},
    {%- endfor %}

[Valdorama]

The input_select.moshi_stories_by_number is simply an input boolean that is permanently set to true. The reason is that I'm using the picture-entity card to display the images, since it nicely overlays text (e.g. title) and icon along the bottom of the image. However its behaviour seems to be that it must be linked to an entity, and that entity state determines what the image looks like. If it's false (or 'off') then the image is greyed out and looks disabled. That's why I have each picture-entity card linked to the same entity that is always true - so it displays the image properly.

[Valdorama]

Looks like the indentation of the card_params property is different so worth starting there...

[thlucas1]

Yeppers, the card_params was the culprit ... got it working after a few more tweaks.

THANK YOU!!! I really appreciate it, as I have been trying to figure this one out for a couple of weeks now.

Here's my finalized code:

type: custom:auto-entities
card:
  type: grid
  columns: 3
  title: Bose Preset List
card_param: cards
filter:
  template: >-
    {% set serviceResponse = None -%} 

    {%- set itmMediaPlayerEntityId = 'media_player.bose_st10_1' -%}

    {%- if has_value('sensor.bose_preset_list') -%}

    {%-   set serviceResponse = state_attr('sensor.bose_preset_list','serviceResponse') -%}

    {%- endif -%}

    {%- if serviceResponse != None -%}

      {%- for preset in serviceResponse['presets']['preset'] -%}

        {%- set itmContainerArt = preset['ContentItem']['containerArt'] | default('') -%}
        {%- set itmItemName = preset['ContentItem']['itemName'] | default('') -%}
        {%- set itmSource = preset['ContentItem']['@source'] | default('') -%}
        {%- set itmSourceAccount = preset['ContentItem']['@sourceAccount'] | default('') -%}
        {%- set itmItemType = preset['ContentItem']['@type'] | default('') -%}
        {%- set itmLocation = preset['ContentItem']['@location'] | default('') -%}
        {{
          {
    'type': 'picture-entity',  
    'entity': 'input_boolean.always_enabled_helper',
    'image': itmContainerArt,  
    'show_state': false,  
    'show_name': true,  
    'name': itmItemName,  
    'tap_action': {
      'action': 'fire-dom-event',
      'browser_mod': {
        'browser_id': 'THIS',
        'service': 'soundtouchplus.play_contentitem', 
        'data': { 
          'entity_id': itmMediaPlayerEntityId,
          'name': itmItemName,
          'source': itmSource,
          'source_account': itmSourceAccount,
          'item_type': itmItemType,
          'location': itmLocation,
          'container_art': itmContainerArt,
          'is_presetable': true
                }
              } 
            }
          }
        }},
      {%- endfor -%}
    {%- endif -%}

and what it looks like:

[Valdorama]

Fantastic! Glad I could help out 👍