search

iantrich / config-template-card

📝 Templatable Lovelace Configurations
MIT License
441 stars 56 forks source link

full card reload any time an entity has a value change #78

Closed JunghaJungha closed 2 years ago

JunghaJungha commented 3 years ago

Hi, it seems since HA version 2021.9.0 the config-template-card fully reloads as soon as any entity has a value change. It worked perfect in previous versions.

I use this card in my floorplan and uses the light entities to update the floorplan.

Since this version, it gives the blue round circles when in loading phase (it did not in previous HA version) and it will reload (disappear and start over again building the card) as soon as it gets triggered by an entity.

Thanks in advance for support.

bkr1969 commented 2 years ago

Those are all remnants of different trials. The first is simply setting the opacity to the expression, the second tests for the condition, applies the expression if true, or the part after the colon if not. The opacity didn't work with either method. (The ? was an error, but it was tested with $ as well...still didn't work)

Nantero1 commented 2 years ago

I work usually with something like this for the opacity:

        opacity: >-
          ${states['light.flurleuchte_2'].state === 'on' ?
          (states['light.flurleuchte_2'].attributes.brightness / 255) : '0'}
Nantero1 commented 2 years ago

@iantrich

So can anyone provide me with a working example?

This should work with 1.3.2


type: picture-elements
image: https://demo.home-assistant.io/stub_config/floorplan.png
elements:
  - type: custom:config-template-card
    style:
...

Tried... now only the component under type: custom:config-template-card is flickering. Of course, it's better than having everything flickering. But this is not a real "fix", the flickering is there and I can see the blue loading circle for a glimpse of a second.

Is it possible to overwrite the style somehow to disable the "blue loading circle" animation completely? I don't see any benefit in having a blue loading circle animation. Can one add a special "id" or style attribute to overwrite this behaviour? Any ideas?

I will try to Adblock the animation ^^, let's see if this helps.

bkr1969 commented 2 years ago

@ Koendejongh, here is the begining of mine (quite a chore to change everything over). Basically, you have to have a new costom-config-card for each entity. Remember, though, that the transparencies are not working yet.

type: picture-elements
image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    variables:
      - states['sensor.sunlight_opacity'].state
    entities:
      - sun.sun
      - sensor.sunlight_opacity
    element:
      type: image
      entity: sun.sun
      image: /local/floorplan/transp.png
      action: none
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        left: 50%
    style:
      height: 100%
      left: 50%
      mix-blend-mode: lighten
      opacity: ${ states['sensor.sunlight_opacity'].state }
      top: 50%
      width: 100%
    tap_action:
      action: none
    hold_action:
      action: none
  - type: custom:config-template-card
    entities:
      - light.couch_light
    element:
      type: image
      entity: light.couch_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transcouch.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: >-
        ${states['light.table_light'].state === 'on' ?
        (states['light.table_light'].attributes.brightness / 255) :'0'}
      top: 50%
      left: 50%
vring0 commented 2 years ago

@ Koendejongh, вот и начало моего (довольно утомительно, чтобы все изменить). По сути, у вас должна быть новая карта costom-config-card для каждой сущности. Однако помните, что прозрачные пленки еще не работают.

type: picture-elements
image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    variables:
      - states['sensor.sunlight_opacity'].state
    entities:
      - sun.sun
      - sensor.sunlight_opacity
    element:
      type: image
      entity: sun.sun
      image: /local/floorplan/transp.png
      action: none
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        left: 50%
    style:
      height: 100%
      left: 50%
      mix-blend-mode: lighten
      opacity: '${ states[''sensor.sunlight_opacity''].state }'
      top: 50%
      width: 100%
    tap_action:
      action: none
    hold_action:
      action: none
  - type: custom:config-template-card
    entities:
      - light.couch_light
    element:
      type: image
      entity: light.couch_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transcouch.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: >-
        ${states['light.couch_light'].state === 'on' ?
        (states['light.couch_light'].attributes.brightness / 255) :'0'}
      width: 100%
      top: 50%
      left: 50%

Very uncomfortable. Is this a temporary solution or are we waiting for a fix?

bkr1969 commented 2 years ago

This is how it needs to be coded now to avoid screen refreshing on state changes (and how it technically should've been done all along). The only thing not working is the opacity for elements as the config-template-card will not currently pull states of entities. There has been a probable fix for this and we're just waiting for it to be implemented.

hballard94 commented 1 year ago

Hello, I've reformatted my code but am not having any luck getting my LED lights to change according to the color wheel. using the FILTER attribute for light.bulb_2 It works in my pre-fixed dashboard but i rewrote it as requested to get around the page reloading issue.


  - title: Floorplan
    path: floorplan
    panel: true
    icon: mdi:floor-plan
    type: panel
    subview: false
    badges: []
    cards:
      - type: custom:config-template-card
        card:
          type: picture-elements
          image: /local/ui/floorplan/off_day.png
          elements:
            - type: image
              entity: sun.sun
              tap_action: none
              hold_action: none
              state_image:
                above_horizon: /local/transparent.png
                below_horizon: /local/ui/floorplan/off_night.png
                unavailable: /local/ui/floorplan/off_night.png
              style:
                top: 50%
                left: 50%
                width: 100%
            - type: custom:config-template-card
              entity: light.bulb_2
              tap_action: none
              hold_action: none
              state_image:
                'on': /local/ui/floorplan/lucas_lamp_on.png
                'off': /local/transparent.png
                unavailable: /local/transparent.png
              style:
                filter: >-
                  ${ "hue-rotate(" + (states['light.bulb_2'].attributes.hs_color
                  ? states['light.bulb_2'].attributes.hs_color[0] : 0) + "deg)"}
                top: 50%
                left: 50%
                width: 100%
                mix-blend-mode: lighten```
ildar170975 commented 1 year ago
  1. Do not place one CTC card inside another CTC card as you did: 
      - type: custom:config-template-card
    card:
      type: picture-elements
      image: ...
      elements:
        ...
        - type: custom:config-template-card
          entity: ...
  2. The whole syntax is wrong: 
            - type: custom:config-template-card
          entity: ...
          ...
          state_image:
            ...
          style:
            filter: ...

    Here is a correct syntax:

            - type: custom:config-template-card
          entities:
            - ...
          element:
            type: ...
            ... rest of other code of this element
  3. As a recommendation - do not place the whole picture-elements card inside CTC: 
      - type: custom:config-template-card
    card:
      type: picture-elements
      image: ...

    Use CTC for particular elements.

  4. In many case there is no need to use CTC for elements! Card-mod may be easily used to dynamically change CSS styles: instead of 
              style:
            filter: >-
              ${ ... some dependency of some entity ... }

    use

              card_mod:
            style: |
              :host {
                {% if .... %}
                  --my-filter: .....;
                {% else %}
                  --my-filter: .....;
                {% endif %}
              }
          style:
            filter: var(--my-filter)
Anoxym commented 8 months ago

Hi,

I have the same problem on my code, but I don't know how to move things to get it works, i've tested to put CTC inside picture-elements but still blinking when time update or light's state change :

`

Can someone help me to modify this code? Thanks!

ildar170975 commented 8 months ago

@Anoxym Using CTC for the whole picture-elements is not recommended. CTC should be used to style a single element.

Christian-CFP commented 7 months ago

I am using the floorplan from lukevink. First I am a HA beginner but I did get it to run (Cleaning and Room Control) but I have the flickering issue. I read a lot and I get only (for me) some kind of sh** CTC inside outside picture element inside outside.

Can somebody explain me in easy what I have to do to get ridd of this "reloading" site if light is changing. THX!

The light images I changed it from - action:none to - type: custom:config-template-card (they work) but there are so many - action: none types and I do not know where to start to check?