Show off your picture-elements uses

Please share the code :slight_smile:

yes,please

Even if I am not using this yet, I would love to have that view code too :slight_smile:

It is very nice looking!

For all those chasing my custom addons I have started a thread over here - Dwains Theme - Custom Addons so as not to hijack away from this awesome card.

good to see your fiddle leaf stopped fiddling with its firmware version :wink:

1 Like

Small update: ended up removing battery percentage text from the images, things just got too confusing. Also added groups for lights per certain floor and toggle button to turn off all the lights. Works fine when movement sensor controlled lights are excluded so there are always lights on when you walk the stairs.

hello
how can i change the battery icon size?
after the update to 110.1 the control of it is gone :expressionless:Screen Shot 2020-05-23 at 17.45.16 Screen Shot 2020-05-23 at 17.47.50

Fairly standard robot vacuum map with zoned cleaning:

My home router is in a cabinet with lots of other devices and I found that it became unstable when it got too hot so I added a temp sensor and automation to turn on/off a fan. Here is the representation with manual override:
image

‘–mdc-icon-size’: 3px

hey,
i tried to do this, it’s still same
i attached image from my yaml file template
Screen Shot 2020-05-23 at 19.21.23

Example that works for me

  - entity: switch.lds_zb_onoffplug_d0005_c4a841fe_on_off
    style:
      '--mdc-icon-size': 50px
      background-color: var(--paper-card-background-color)
      border-radius: 50%
      height: 60px
      left: 10%
      padding: 10px 0 0 10px
      top: 40px
      width: 60px
      z-index: 2
    tap_action:
      action: toggle
    type: state-icon

great !
it’s work !
thanks a lot !

Hi, i have a state-icon in picture element card of my cellular battery sensor. It’s possible to change the color of icon based on battery level?
This is my config:

- type: picture-elements
  image: /local/picture/xxxxxx.png
  style:
    .: |
     ha-card {
       background-color: transparent; border: none; box-shadow: none;
     }
  elements:
    - type: state-label
      entity: person.zzzz
      style:
        color: white
        top: 95%
        left: 50%
    - type: state-icon
        entity: sensor.redmi_note_5_battery_level
        title: Batteria Residua
        style:
          top: 10%
          left: 11%
          --iron-icon-height: 20px
          --iron-icon-width: 20px

Thanks

You could use custom UI with templates to set colour depending on state

This will need some manual changes to one of the js files after install to make it work with colour since 0.110 as it has not been updated yet. See:

You can also use this for giving colors to icons:

'--paper-item-icon-color': red

I use this together with conditions to have several colors. But my conditions are mostly text based or binary, so it’s easy. For percentage I don’t think this will work if you don’t want to have conditons for each single percent.

But I also have a problem:

I updated to HA 0.110.2 yesterday and observed, that this command doesn’t size my icons anymore:

'--iron-icon-height': 20px

Does somebody have observed it as well and has a solution yet? It’s not that urgent and because the iron-icon commands are not officially documentated, I don’t think I have to open an issue for this.

Edit: I found a workaround in this post: Help: Want to change Lovelace picture element icon size

After some tryouts, I think this will work fine for me. The default icon size is 25px and if I want to have 20px, this are 80 percent. Without using “translate” I would also have to change the x,y percentage for placig the icon. With 50,50 it can remain as it was:

transform: 'translate(-50%, -50%) scale(0.8, 0.8)'

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

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

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

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

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

1 Like