Show off your picture-elements uses

[Marco_Lupieri]

@monotonus

–iron-icon-height’: 20px

Change --iron-icon-height’: 20px with: --mdc-icon-size: 20px

[monotonus]

Thanks! This is also working as well as using the transform as mentioned in my post, but is a little bit easier in use.

[martheijnen (Mart)]

Hey all,

I’m using it as a card for controlling media devices, but when i use it on another device, with a different resolution it doesn’t always resize correctly. Is there a possiblity to change the size of image based on what device resolution is used? Here’s what I’m trying to explain:

and

and the relevant code:

  - title: Media
    path: media
    panel: true
    badges: []
    cards:
      - elements:

          - conditions:
              - entity: media_player.emby_living_room_tv
                state_not: playing
              - entity: media_player.emby_living_room_tv
                state_not: paused
            elements:
              - artwork: full-cover
                entity: media_player.spotify_mart
                hide:
                  power: true
                  progress: false
                  runtime: false
                  source: true
                  volume: true
                  controls: false
                style: |
                  :host {
                    left: 25% !important;
                    top: 35.9% !important;
                    width: 42% !important;
                    height: 62.3% !important;
                  }
                  ha-card{
                    border-radius: 1vw !important;
                    overflow: hidden !important;
                    height: 100%; 
                  }
                  :host #primaryProgress{
                    background: #474A52 !important; 
                  }
                type: 'custom:mini-media-player'
            type: conditional            

          - conditions:
              - entity: media_player.emby_living_room_tv
                state_not: playing
              - entity: media_player.emby_living_room_tv
                state_not: paused
            elements:
              - style:
                  left: 75%
                  top: 35.8%
                  width: 42%
                  height: 62.3%
                type:  'custom:spotify-card'
                limit: 10
                client_id: !secret spotify_clientid
            type: conditional

        image: /local/background.jpg
        style: |
          ha-card {
            background-color: var(--primary-background-color);
          }
        type: picture-elements

[dmertens (Danny)]

Thanks! is there also a new value to use for --iron-icon-fill-color: “#DC071D” does also not seem to work anymore

[scstraus]

Workaround, you could use a conditional card that switches the settings based on the device.

[scstraus]

Sorry, scratch that, you’d need to step up the juice from conditional card to state switch card to do it. I use it similarly, it works well:

state-switch - conditional card on steroids

Ever wanted a lovelace card that’s only shown for certain users? Ever wanted to show a certain lovelace card in one spot if the door is open, and another one otherwise? Ever wanted to be able to swap out a part of your layout when you press a button? Ever wanted to do that only on one device, and not on all of them at once? Ever wanted to show different cards depending on the size of your window, or on wheter you’re viewing it on a touch enabled device or not? [image] [image] State-sw…

[martheijnen (Mart)]

Thaks, do you maybe have an example?

[scstraus]

See github repo linked in my profile.

[jgasparelo]

Hi,

I need help with that card.

I need when I click on the main picture it goes to a specific URL,

But in the picture-element I’m not getting

image: \local\office.jpeg
tap_action:
  action: navigate
  navigation_path: office
elements:
  - type: state-label
    style:
      color: white
      top: 96%
      left: 88%
      font-weight: bold
    entity: sensor.temperature_158d0004445
  - type: state-icon
    style:
      color: white
      top: 95%
      left: 96%
    entity: sensor.temperature_158d0004445
  - type: state-icon
    style:
      color: white
      top: 84%
      left: 96%
    entity: light.escritorio
  - type: state-icon
    style:
      color: white
      top: 72%
      left: 96%
    icon: 'mdi:air-conditioner'
    entity: climate.office_ac
type: picture-elements

[Flipso (Fli)]

That color wheel

[glorifiedg]

How can I integrate honeycomb menu in a picture element card?

[Flink]

@sian it looks great, congratulations!
How do you get that coloured circle around the icons !?

[Flink]

Looks great!
What app did you use to model the floorplan?
Are you using images/icons on some places (like those 2 in the garage) ?
… and by the way, does the “persons” show up on the rooms when there’s movement in there, or is it part of the floorplan image? I see some rooms with people, and some empty

[tibmart (Tiberio Martinez)]

Thanks

Yes, the people appear if there is movement in the room.

The circular images in the garage and other places are cameras.

I asked my wife making the plan using https://home.by.me

[Sian]

Sorry been away from this scene for a bit… Just add the custom-button to the picture element, with that follow my guide at https://github.com/Sian-Lee-SA/honeycomb-menu (primarily “how to use” section). You can pretty much add any card as an element to the picture-elements card.

[Sian]

If you’re talking about the Honey Comb menu then head to my repo https://github.com/Sian-Lee-SA/honeycomb-menu which you can also get through HACS

[Flink]

No, I was talking about these

[Sian]

based on the custom-button card. just apply the property for the background color and 50% border radius to make it round

[Flink]

hmmm, not sure if I know what you’re talking about #newbieHere

I’m using state-icons on top of the Picture Elements card.

What you’re saying is something of a different type? (but still on top of a picture elements card)

[VPC]

I would like to install but I don’t see it in HACS. Do I need to add a custom repo?

Sian-Lee-SA/honeycomb-menu