Lovelace: Button card

[Jimmy_Berglund]

Still happens with or without it so its not about the card mod.
Allso if it was it would happen to the row above the Entities.

I can understand that some error happens and then kill the rest Of all Cards it renders.

But so far my search has taken me to the conclution that it happens when all these different Cards are brought together.

Worth to note that i have not seen it on a diffrent tab then the first main page. And that took me to think it was some other mod doing it. But so far i still have the same problem with all things removed but the card.

[klogg]

Brilliant thanks.
I don’t know how I missed that after all my pouring over the docs on w3schools!!!

[RomRider]

@Mariusthvdb

@RomRider could you see if this is qualifying as a bug, or at least a (edge) case not catered for:
use tap_action more-info with an entity in the tap_action doesn’t work if the button does not have an entity set in the button config?

That is probably a bug, could you report it on github?

@Mariusthvdb

So what does the label-card do in fact?

Nothing different from card, I wanted to deprecate it at some point…

@Mariusthvdb

though still not sure if this is the way to go. Nor why this is better than using %. Any Css guru advice appreciated!

%age is based on the width of the parent object, so px if probably better in your case.

[Mariusthvdb (Marius)]

@RomRider

That is probably a bug, could you report it on github?

Will do, glad to contribute to this magic card!

[klogg]

Another quick question…

Why doesn’t this work i.e the button shows a tap but does nothing,

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: "[[[ return states[entity].attributes.friendly_name; ]]]"

But this does i.e. it opens the pop-up with the correct title.

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: "[[[ return states['input_text.my_input_text'].attributes.friendly_name; ]]]"

Thanks

[Jimmy_Berglund]

What the entity of the button?

title: “[[[ return states**[entity]**.attributes.friendly_name; ]]]”

[klogg]

@klogg

return states[entity].attr

It varies as I am using lovelace_gen but it always aeither an input_select or an input_text.

[Jimmy_Berglund]

can U post the Whole code for the button.

[klogg]

Here you go…
As I said it uses lovelace_gen

type: custom:button-card
entity: {{ entity }}
name: {{ name }}
label: {{ label | default('') }}
icon: {{ icon | default('') }}
size: {{ size | default('30%') }}
show_state: true
show_label: true
tap_action:
  action: {{ tap_action | default('call-service') }}
  service: browser_mod.popup
  service_data:
    title: "[[[ return states[entity].attributes.friendly_name; ]]]"
    card:
      type: entities
      entities:
        - entity: {{ entity }}
          name: ' '
          icon: {{ icon | default('') }}
    deviceID:
      - this
styles:
  grid:
    - grid-template-areas: >
        [[[
          if ('{{ label }}' == '') return '"i n s"';
          else return '"i n s" "i l l"';
        ]]]
    - grid-template-columns: 15% 1fr min-content
    - grid-template-rows: >
        [[[
          if ('{{ label }}' == '') return '1fr';
          else return '1fr 1fr';
        ]]]
  card:
    - font-size: 14px
    - padding: 0px 0px 0px 0px
  name:
    - justify-self: start
  label:
    - justify-self: start
    - color: var(--secondary-text-color)

[AhmadK (akasma74)]

@klogg

As I said it uses lovelace_gen

well, this one is most likely affected

@klogg

entity: {{ entity }}

while this one

@klogg

title: "[[[ return states[entity].attributes.friendly_name; ]]]"

is just button-card’s entity.

@Jimmy_Berglund

What the entity of the button?

Here (I know it’s a long doc but…)

[Jimmy_Berglund]

Well when u do the input code it tags it to a input and thats why it works. When you do the entity code it cant tag it to a entity as far as i can se. And thats why u have problem. Of i dont miss something.

[AhmadK (akasma74)]

I don’t get you.
Here is my code and it works

- type: 'custom:button-card'
  entity: climate.thermostat

  name: "[[[ return entity.attributes.friendly_name ]]]"

[Jimmy_Berglund]

Yes and that one has a valid entity. The other u posten dont look valid to me. That is if i an not missing anything.

[klogg]

@AhmadK

Here is my code and it works

That works for me too!
Thank you.

[kajmaj]

I have two button cards with the same config but resulted into different color of icons.

Related configuration:

    - device_id: test_bioodpad
      name: Bioodpad
      track: true
      search: "#bioodpad"
      offset: "!!"

    - platform: mqtt
      name: "zvonek"
      state_topic: "cmnd/gate/POWER2"

lovelaceUI:

      - type: horizontal-stack
        cards:        
        - type: custom:gap-card
        - type: "custom:button-card"
          color_type: icon
          entity: calendar.test_bioodpad
          name: Bioodpad
          icon: mdi:delete-empty
          state:
          - value: "on"
            color: red
            icon: mdi:delete-restore
            styles:
             card:
               - animation: blink 2s ease infinite

        - type: "custom:button-card"
          color_type: icon
          entity: sensor.zvonek
          name: Zvonek
          show_label: true
          show_state: false
          state:
          - value: "on"
            color: red
            icon: mdi:bell-ring
            styles:
             card:
               - animation: blink 2s ease infinite
          - operator: default
            icon: mdi:bell

I I think that both icons should have the same color of “off” icon, but I am not able to identiy any error in my config
Any advice?

[BradAU (Brad Anderson)]

Hi

I’ve set up conditional cards to show a banner at the top of my lovelace when sensors are triggered ie. water leak.

I currently just have a colored bar that blinks with text showing what has been detected but would like to add an icon before the text, when I try to use the ‘layout’ option of ‘icon_name’ the text moves to the right but no icon shows, can someone please let me know where I’m going wrong?

    - type: conditional
      conditions:
        - entity: input_boolean.water_leak
          state: "on"
      card:
        type: horizontal-stack
        cards:
            - !include ../includes/h-space-1.yaml
            - type: custom:button-card
              style: |
                ha-card {
                    border-radius: 5px;
                    box-shadow: none;
                }
              name: WATER LEAK DETECTED
              icon: mdi:pipe-leak
              show_icon: true
              layout: icon_name
              color_type: card
              color: rgb(255,155,0)
              size: 10%
              styles:
                card:
                  - height: 20px
                  - padding: 5%
                  - animation: blink 1s ease infinite
                name:
                  - justify-self: start
                  - font-family: var(--font-family)
                  - font-size: 16px
                  - font-weight: bold
                  - color: rgb(250,250,250)
              tap_action:
                action: navigate
                navigation_path: /lovelace/notifications
              hold_action:
                action: call-service
                service: input_boolean.turn_off
                service_data:
                  entity_id: input_boolean.water_leak
            - !include ../includes/h-space-1.yaml

Worked it out, because I’d set the card height the icon was there but so tiny it couldn’t be seen.

[Mariusthvdb (Marius)]

having a bit of an issue with the order of states evaluations of my light entities.

Used to have ‘on’, ‘off’, and ‘unavailable’. Working perfectly for ‘years’…

now need to add an extra template operator because I first need to check if these lights are ‘reachable’ (hue lights with allow_unreachable: true)

this template does that:

  state:

    - operator: template
      value: >
        [[[
          var id = entity.entity_id.split('.')[1] ;
          var reachable = 'binary_sensor.' + id + '_reachable';
          return states[reachable].state == 'off' ;
        ]]]

however, I need to put first in the order, since otherwise the ‘on’ and ‘off’ styles are used first (remember these lights, though unreachable show ‘on’ and ‘off’ as states…I know filed an issue and PR/FR for that).

all going well except for the lights that don’t have a binary_sensor.xxx_reachable because they are always online.

they either dont show up (an Ikea light) or show unavailable (a Hue light without binary_sensor)

This long story leads to 2 questions:

1- why doesn’t the engine, when this template is evaluated to not being true, simply step to the next state/operator?
2- can I add a condition for the existence of the binary_sensor, to prevent it from being evaluated with an error

Ive tried things like:

 - operator: template
      value: >
        [[[
          var id = entity.entity_id.split('.')[1] ;
          var reachable = 'binary_sensor.' + id + '_reachable';
          if (reachable) return states[reachable].state == 'off' ;
        ]]]

but didn’t have a lot of luck just yet…

please have a look?
thanks!

update

experimenting with:

    - operator: template
      value: >
        [[[
          var id = entity.entity_id.split('.')[1] ;
          var reachable = 'binary_sensor.' + id + '_reachable';
          return states[reachable] && states[reachable].state == 'off' ;
        ]]]

now seems to work. Now have to wait until the night kicks in and my outside lights truly turn on and become reachable…

[pollinolas]

Hi, I’m trying something similar, see if you can help me please:
this is working

        - operator: template
          value: >
             [[[ return states['[[entity_3]]'].state.split('.')[0] == "Chubascos"
              || states['[[entity_3]]'].state.split('.')[0] == "LLuvia"
              && states['[[entity_2]]'].state == "above_horizon" ]]]
          entity_picture: /local/images/clima/weather_icons/animated/rainy-6.svg 

but this doesnt work:

        - operator: template
          value: >
             [[[ 
               var tiempo = states['[[entity_3]]'].state.split('.')[0];
               var sol = states['[[entity_2]]'].state;
               return states[tiempo].state == "Chubascos" || states[tiempo].state == "LLuvia" && states[sol].state == "above_horizon";
             ]]] 
          entity_picture: /local/images/clima/weather_icons/animated/rainy-6.svg 

        - operator: template
          value: >
             [[[ 
               var tiempo = states['sensor.prediccion_diaria'].state.split('.')[0];
               var sol = states['sun.sun'].state;
               return states[tiempo].state == "Chubascos" ||  states[tiempo].state == "LLuvia" && states[sol].state == "above_horizon";
             ]]] 
          entity_picture: /local/images/clima/weather_icons/animated/rainy-6.svg 

[Mariusthvdb (Marius)]

please explain what ‘is not working’ and what you want it to do?

[pollinolas]

I would like to abbreviate the code with the 'var ’ because I want to put more conditionals,the first one works by putting the entity_2 and entity_3 variables inside the card but the other 2 do not

simply the card with the second and third template disappears