Using a component as a state_image in a picture-glance card

[trankillity]

I’ve got a Harmony remote and have set up a switch/Lovelace component similar to Petro in this post. I’ve extended the functionality slightly using the conditional card to show the mini-media-player card when the Spotify activity is running.

No idea if this is possible at all, but I wanted to know if you can force the mini-media-player card to display as the background/state_image, instead of a completely separate card underneath?

Here’s what it currently looks like and where I want the mini-media-player to sit.

My current Lovelace card is as follows:

cards:
  - entities:
      - switch.shield_tv
      - switch.ps4
      - switch.switch
      - switch.psvr
      - switch.spotify
    entity: sensor.harmony_activity
    state_image:
      Music: /local/images/spotify_logo.png
      PS4: /local/images/ps4_logo.png
      PSVR: /local/images/psvr_logo.png
      PowerOff: /local/images/power_off.png
      Shield TV: /local/images/shieldtv_logo.png
      Switch: /local/images/switch_logo.png
    title: Lounge Control
    type: picture-glance
  - card:
      artwork: cover
      entity: media_player.spotify
      type: 'custom:mini-media-player'
    conditions:
      - entity: sensor.harmony_activity
        state: Music
    type: conditional
type: vertical-stack

[jparthum (Jason Parthum)]

I don’t know if that’s possible with a picture-glance card (though if anybody could do it, Petro could).

You might want to switch to a picture-elements card for that. They are VERY versatile.

[trankillity]

From what I can understand, using a picture-elements card would require hand scripting of all the actual buttons for Spotify, right? And that still wouldn’t add the currently playing album art to the background, unless I could find some way to get that saved locally and update it periodically.

Might have to just deal with having a second panel appear when Spotify is playing

[jparthum (Jason Parthum)]

@trankillity

using a picture-elements card would require hand scripting of all the actual buttons for Spotify, right?

No it supports custom elements. You should be able to add your existing mini-media-player. I’ve never tried that particular custom card but I’ve used a few others without issue.

It is more tedious to configure, but in return you get very granular control over every aspect of the card.

[jparthum (Jason Parthum)]

@trankillity

And that still wouldn’t add the currently playing album art to the background

It also supports state images, so you could have your existing background images and the mini-media-player element in the same card if wanted.

[trankillity]

Ohh, that’s exciting! Fantastic news. Will start fiddling

Thanks friend!

[jparthum (Jason Parthum)]

No problem! They are addictive cards; once I figured the first one out I proceeded with changing almost all of my remaining cards over.

P.S. They support animated gifs too!

Edit: typo

[petro]

You can also leverage the entities card to ‘combine cards’. Any entity-row accepts a card. You could have a conditional row that changes between a picture card and the media_player card followed by a glance card row. It’s how I piece together all sorts of cards…

That card there is:

picture-entity	button-card
bar-card
bar-card	bar-card
sensor-graph

All inside a entities card.

You have to fiddle with background transparency but you can pretty much make any card using this method.

[trankillity]

The picture-elements card allowed me to get it almost 100% working! Just a few little bits to tinker with now.

Left is the old picture-glance setup, right is the new picture-elements setup.

Just a few questions remain:

• There doesn’t seem to be a generic “panel” element for the picture-elements that I could style with CSS to reproduce the semi-transparent black bar in the picture-glance card. Am I best to just make a PNG/SVG and style it to fit?
• Guessing this is more of a mini-media-player issue, but there doesn’t seem any way to scale the height of it. It doesn’t respond to CSS height styling (presumably because it looks like a block-level element). I was hoping to have the entire album cover art fill the background instead of the generic Spotify background and have the media controls sit in the middle.Would I be best to reach out to the dev about adding an optional “height” parameter for this addon?
• There doesn’t seem to be any way to change the state_filter for a state-icon element aside from using the hard over-ride of --paper-item-icon-color. Any idea if there’s plans to allow changing of state_filter for all elements?

For any who are interested, the current card config is as follows:

elements:
  - entity: sensor.harmony_activity
    prefix: 'Lounge - '
    style:
      bottom: 1%
      font-size: 16px
      left: 2%
      transform: 'translate(0%,0%)'
      z-index: 999
    tap_action:
      action: none
    title: null
    type: state-label
  - entity: switch.shield_tv
    style:
      left: 53%
      top: 92%
      z-index: 999
      '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
      '--paper-item-icon-active-color': 'rgba(255,255,255,1.0)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.ps4
    style:
      left: 63%
      top: 92%
      z-index: 999
      '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
      '--paper-item-icon-active-color': 'rgba(255,255,255,1.0)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.switch
    style:
      left: 73%
      top: 92%
      z-index: 999
      '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
      '--paper-item-icon-active-color': 'rgba(255,255,255,1.0)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.psvr
    style:
      left: 83%
      top: 92%
      z-index: 999
      '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
      '--paper-item-icon-active-color': 'rgba(255,255,255,1.0)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: switch.spotify
    style:
      left: 93%
      top: 92%
      z-index: 999
      '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
      '--paper-item-icon-active-color': 'rgba(255,255,255,1.0)'
    tap_action:
      action: toggle
    type: state-icon
  - entity: sensor.harmony_activity
    state_image:
      Music: /local/images/spotify_logo.png
      PS4: /local/images/ps4_logo.png
      PSVR: /local/images/psvr_logo.png
      Power Off: /local/images/power_off.png
      Shield TV: /local/images/shieldtv_logo.png
      Switch: /local/images/switch_logo.png
    style:
      left: 50%
      top: 50%
      width: 100%
    type: image
  - conditions:
      - entity: sensor.harmony_activity
        state: Music
    elements:
      - artwork: cover
        entity: media_player.spotify
        style:
          left: 50%
          position: absolute
          top: 25%
          width: 100%
        type: 'custom:mini-media-player'
    type: conditional
image: /local/images/power_off.png
type: picture-elements

[jparthum (Jason Parthum)]

You got the hang of that quick! That’s looking great.

• Yep, you guessed it. If you’re using Windows, Paint.net is an excellent (and free) graphics application that’s focused on layers. I’ve found that with the picture-elements card aspect ratio is the most critical parameter. So your black bar doesn’t need to be the same pixel width as you background, it could be much smaller then stretched to 100% width. You’d just need to play with the aspect [width X height] ratio to get the size you want (eg: 1px X 5px, or 1px X 8px, etc.).

• Another option could be to resize the card (IE: background image) to fit the mini-media-player…? This is a little more involved, but you could also use the entity_picture attribute from the media_player component as the background. It looks like the image is just cropped in the mini-media-player, so with the same image as the background you may be able to line up the player (probably just top: 50%) so that it blends seamlessly with the background. You’d need to first setup a Generic Camera component to ‘feed’ the image with something like: still_image_url: http://HA.IP:8123{{ state_attr('media_player.spotify', 'entity_picture') }}.

• Right, the state-icon elements use the CSS parameters from the parent Theme – which is great for making global changes but doesn’t allow for much granularity. However you can download these icons as .png files from materialdesignicons.com then use type: image with state_image. Just locate the icon you want, click it, then click ‘Advanced Export’ and you can choose the size and color you want: