Problem with custom:button-card

[maurizio53 (Maurizio Fabiani)]

I am trying to create a button card who shows how many lights are on in my house and did the following:

              - type: custom:button-card
                color: auto
                name: Luci Casa
                icon: mdi:lightbulb
                styles:
                  card:
                    - font-size: 12px
                    - font-weight: bold
                  icon:
                    - color: >
                        [[[
                          if (states['group.luci'].state == 'on')
                            return "green";
                          return "red";
                        ]]]
                  grid:
                    - position: relative
                  custom_fields:
                    notification:
                      - background-color: |
                          [[[
                            if (states['group.luci'].state == 'on')
                              return "yellow";
                            return "white";
                          ]]]
                      - border-radius: 50%
                      - position: absolute
                      - left: 75%
                      - top: 3%
                      - height:15px
                      - width: 15px
                      - font-size: 10px
                      - line-height: 25px
                      - color: black
                custom_fields:
                  notification: |
                    [[[ {{ return "expand(states.group.luci) | selectattr( 'state', 'eq', 'on') | list | count"}} ]]]

But i get this:

How to make this notification working right?
Where am i wrong?

[tom_l]

You need a space before the 15.

@maurizio53

height:15px

[maurizio53 (Maurizio Fabiani)]

Yes, i know… i was wrong when editing the post, but it’s not there the problem… I think is inside the template of the notification…

[Mariusthvdb (Marius)]

you are using jinja brackets and templates which is not very useful in javascript…

[maurizio53 (Maurizio Fabiani)]

I just followed what i see in a post about custom button-card.
How you think i must edit the template?

[Mariusthvdb (Marius)]

you need to replace it with a javascript template.

that post can not be correct

[maurizio53 (Maurizio Fabiani)]

@Mariusthvdb

you need to replace it with a javascript template.

I followed this example directly from the github page of the developer:

  custom_fields:
    notification: >
      [[[ return Math.floor(states['input_number.test'].state / 10) ]]]

Will you help me in this… i am not good at all with templates…

[Mariusthvdb (Marius)]

i made this so it also ‘flattens’ groups

  - type: custom:button-card
    entity: light.all_inside_lights
    label: >
      [[[
        function flatten(entity_id, result=[], searched=[]) {
          var state = states[entity_id];
          if (state) {
            var entities = state.attributes.entity_id;
            if (entities) {
              searched.push(entity_id);
              entities.forEach(entity_id => {
                if (!result.includes(entity_id) && !searched.includes(entity_id))
                    flatten(entity_id, result, searched);
                });
              }
            else
              result.push(entity_id);
            }
          }
        var light_ids = [];
        flatten(entity.entity_id, light_ids);

        var count = 0;
        light_ids.forEach(entity_id => {
          var state = states[entity_id];
          if (state && state.state === 'on')
              count++;
          });

        var power = ' - power: ' + states['sensor.lights_inside_total_device_power'].state + ' W' ;
        if (count === light_ids.length) return 'Alle ' + light_ids.length + ' binnenlampen' + power;
        if (count === 0) return 'Geen binnenlampen aan' + power;
        return 'Binnenlampen aan: ' + count + ' van ' + light_ids.length + power;
      ]]]

if not required because there are no groups inside your entity, it wont harm

you can cut the stuff you dont need

here is a short version Lovelace: Button card - #948 by petro

[maurizio53 (Maurizio Fabiani)]

Ok, thanks first.Itried to adjust your code to my needs, but, and maybe because as i said i am not good in this, i cannot see the number of lights that are ‘on’. My button card displays only the icon but not that number as i would like to have.

This is the actual code:

              - type: custom:button-card
                color: auto
#                name: Luci Casa
                entity: group.luci
                icon: mdi:lightbulb
                label: >
                  [[[
                    function flatten(entity_id, result=[], searched=[]) {
                      var state = states[entity_id];
                      if (state) {
                        var entities = state.attributes.entity_id;
                        if (entities) {
                          searched.push(entity_id);
                          entities.forEach(entity_id => {
                            if (!result.includes(entity_id) && !searched.includes(entity_id))
                                flatten(entity_id, result, searched);
                            });
                          }
                        else
                          result.push(entity_id);
                        }
                      }
                    var light_ids = [];
                    flatten(entity.entity_id, light_ids);

                    var count = 0;
                    light_ids.forEach(entity_id => {
                      var state = states[entity_id];
                      if (state && state.state === 'on')
                          count++;
                      });
                  ]]]
                styles:
                  card:
                    - font-size: 12px
                    - font-weight: bold
                  icon:
                    - color: >
                        [[[
                          if (states['group.luci'].state == 'on')
                            return "green";
                          return "red";
                        ]]]

[Mariusthvdb (Marius)]

try show_label: true

you got to read some documentation…

btw, you can just set that template on the notification, no need for the label there, its just an example

[maurizio53 (Maurizio Fabiani)]

Yes, i did it…
Here it is what i get:

But what i’d like to have is the number of lights in ‘on’ state…

[Mariusthvdb (Marius)]

really sorry, but I cant see anything in that black blob.

please allow us to help you…
tbh, I am somewhat surprised after all these years you still dont have a javascript template working somewhere? this cant be the first time you do this

btw the group apparently is off, (red) ?

also, you are Not returning anything at the end of the template. you should at least use return count;

[maurizio53 (Maurizio Fabiani)]

@Mariusthvdb

tbh, I am somewhat surprised after all these years you still dont have a javascript template working somewhere? this cant be the first time you do this

Yes, you are right… not all can understand things in a non native language and i am one of them… i’ll try to improve my things about this aspect… I am medical doctor so very far away from computer language…

@Mariusthvdb

btw the group apparently is off, (red) ?

Yes, but nothing change when lights are on…

@Mariusthvdb

also, you are Not returning anything at the end of the template. you should at least use return count;

As i said i completely copied that template… my ignorance…
Now i put your template in notification place, but nothing changed.

[Mariusthvdb (Marius)]

my last remark was concerning your yaml post. you dont have a final return in that template, so it actually does not show anything.

add that line I showed you, and it should.

why dont you make a completely new button card, with only this template, so you can debug it. the rest of that card can be dealt with later on.

in its purest form its shows:

taking out the power sections in the return, makes it show:

[maurizio53 (Maurizio Fabiani)]

@Mariusthvdb

also, you are Not returning anything at the end of the template. you should at least use return count;

You mean in this way?

                custom_fields:
                  notification: >
                    [[[ {{ return expand(states.group.luci) | selectattr( 'state', 'eq', 'on') | list | return count; }} ]]]

[Mariusthvdb (Marius)]

No, that is the old notification template in Jinja…

Ill do it for you:

    - type: custom:button-card
      entity: light.all_inside_lights
      show_label: true
      label: >
        [[[
          function flatten(entity_id, result=[], searched=[]) {
            var state = states[entity_id];
            if (state) {
              var entities = state.attributes.entity_id;
              if (entities) {
                searched.push(entity_id);
                entities.forEach(entity_id => {
                  if (!result.includes(entity_id) && !searched.includes(entity_id))
                      flatten(entity_id, result, searched);
                  });
                }
              else
                result.push(entity_id);
              }
            }
          var light_ids = [];
          flatten(entity.entity_id, light_ids);

          var count = 0;
          light_ids.forEach(entity_id => {
            var state = states[entity_id];
            if (state && state.state === 'on')
                count++;
            });

          /*var power = ' - power: ' + states['sensor.lights_inside_total_device_power'].state + ' W' ;*/
          if (count === light_ids.length) return 'Alle ' + light_ids.length; /* + ' binnenlampen' + power;*/
          if (count === 0) return 'Geen binnenlampen aan' + power;
          return 'Binnenlampen aan: ' + count + ' van ' + light_ids.length; /* + power;*/
        ]]]

[maurizio53 (Maurizio Fabiani)]

I am lost completely !!!

[maurizio53 (Maurizio Fabiani)]

Ok, thanks i’ll rewrite the button following your indications…

Thanks for all…

[maurizio53 (Maurizio Fabiani)]

I got it!

EDIT: When no light is on, the button disappear… and it doesn’t refresh when more lights go on.