Lovelace: picture-entity card image size

Hi,
I’m planning on using the picture entity card to show a picture of me and my wife in color or grayscale depending on location. So far so good, it’s working. I’ve placed two cards in a horizontal stack.

However I want our pictures to be small, and not use like 20% of the screen. More like the size of the little state cards. I can’t find a way to accomplish this. Any ideas?

The closest you will get with the current implementation is by using a picture-elements card with image elements that are based on state.

In time, I can see state based images making there way into all card formats, but lovelace isn’t there yet.

Fixed!

Created a custom card, only have to add some margin between the pictures.
2018-09-21%2015_04_42-Home%20Assistant

There’s only one thing bothering me, when refreshing this error is displayed shortly:
2018-09-21%2014_52_35-Home%20Assistant
The component clearly does exist as you can see by the first screenshot.

config:

resources:
  - url: /local/content-card-example.js
    type: js

cards:
  - type: "custom:content-card-example"
    entities:
    - sensor.maryse_thuis
    - sensor.richard_thuis 

class ContentCardExample extends HTMLElement {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      this.content = document.createElement('div');
      this.content.style.padding = '16px 16px 16px';
      card.appendChild(this.content);
      this.appendChild(card);
    }
    const entities = this.config.entities;

    var innerHTML = "";
    entities.forEach( function(entityId) {
      const state = hass.states[entityId];
      const stateStr = state ? state.state : 'unavailable';
      var entityName = entityId.substr(7);

        if(stateStr >= 10){
          innerHTML += '<img src="/local/'+entityName+'_kleur.gif" width="50"; height="50";  style="padding-right:15px">';
        }else{
          innerHTML += '<img src="/local/'+entityName+'_zwart.gif" width="50"; height="50";>';
        }
    });
    this.content.innerHTML = innerHTML;
  }

  setConfig(config) {
    if (!config.entities) {
      throw new Error('You ? need to definee an entity');
    }
    this.config = config;
  }
  getCardSize() {
    return 1;
  }
}
customElements.define('content-card-example', ContentCardExample);

Anyone any clue?

2 Likes

That’s by design with custom cards. Currently, there is no way around it.

1 Like

Ok thanks :smiley:

Is it also possible to return a state of a different entity?

For example:
enities included are: sensor.light_status

in the innerHTML: ‘The state of ‘+entityId+’ is ‘+stateStr+’!’ + return entities[‘sensor.kitchen_status’].state