Lovelace: Button card

@RomRider is it possible to have the border-radius templated like is possible with the card-mod? For example
{{ states(‘input_select.border_radius’) }}?

In the input select I have the variables like 12px coded. This seems to work fine with card-mod but I can’t figure out how to do this with your card (if even possible).

I know I can just apply card-mod to your card but that makes it impossible to use it as a template with decluttering cards.
The reason is that I have a few cards that all use a single template but I also have a few that I don’t want a border-radius applied to or a different border-radius.

So I want to be able to have the option to either use the input_boolean to change the border-radius or the variable in decluttering card. (I hope you understand what I mean)

That should work (probably?):

styles:
  card:
    # remove the "+ 'px'" if it's already in your state
    - border-radius: "[[[ return states['input_select.border_radius'].state + 'px' ]]]"

I had px already in the code. This seems to work. Thanks a lot. I literally tried so many different configurations.

Thanks a lot @RomRider

is there a difference between the style = height/width in the zone_image template, and the use of the

styles:
  custom_fields:
    zone_image:
      width:
      height:

I cant seem to pin it down completely, though it seems to show alright now, on smaller button cards (3 in 1row). If I have only 1 button, which is then much larger, the overlay (zone_image) doesnt enlarge proportionally

correct size for 3 in a row
21

incorrectly sized on larger button (seems even smaller):
04

using this for the card now:

button_picture_family:
  size: 75%
  show_state: false
  show_label: false
  show_name: false
  show_entity_picture: true
  color_type: card
  aspect_ratio: 1/1
  tap_action:
    action: more-info
    entity: >
      [[[
      var id = entity.entity_id.split('_')[2];
      return 'group.' + id;
      ]]]
    haptic: light
  hold_action:
    action: more-info
    entity: >
      [[[
      var id = entity.entity_id.split('_')[2];
      return 'group.' + id;
      ]]]
    haptic: success
  entity_picture: >
     [[[
     var id = entity.entity_id.split('_')[2];
     return states['sensor.' + id + '_picture'].state;
     ]]]
  styles:
    entity_picture:
      - border-radius: 6px
    custom_fields:
      zone_image:
        - align-items: flex-start
        - justify-content: flex-end
        - padding: 2px 2px
        - position: absolute
        - right: 12%
        - bottom: 10%
        - height: 30%
        - width: 30%
    card:
      - border-radius: 6px
      - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
      - background-color: >
          [[[
          var id = entity.entity_id.split('_')[2];
          return states['sensor.' + id + '_background_color'].state
          ]]]
  custom_fields:
    zone_image: >
      [[[
        var id = entity.entity_id.split('_')[2];
        return `<img src= "${states['sensor.' + id + '_overlay_image'].state}" style="height: 30px; width: 30px;">`
      ]]]
1 Like

can you help, by explain, i want to the same, but without zone sensor, i’m only using one entity which is the device tracker.
can you help with the code?

this is the entity device_tracker.b4_f1_da_ec_sd_sd

depends really, on what you want. If you want a button with the entity_picture of the device_tracker, the code is posted above. Just leave out the custom_field parts. and adjust a template to your setup.

If you need something else, you should be a bit more specific…

HI @RomRider

coming from @jimz011 s topic Homekit Infused (HKI) v2.0.0 Release Candidate (Beta 11) - Updated 31/05/2020 please let me ask if it is possible to have the button-card respect the entity-settings for icon-color already available in Ha.
If I use an entity, this is is displayed with the correct icon (if set in the backend already) without adding extra settings in the custom:button-card.

icon-color however seems not to be recognized?

eg this simple example:

    sensor.cpu_temperature:
      icon: mdi:thermometer
      templates:
        icon_color: >
          if (state < 60) return 'green';
          if (state < 65) return 'darkgreen';
          if (state < 70) return 'orange';
          if (state < 75) return 'crimson';
          return 'firebrick';

using in a native entities card displayes as:

09

while the button-card:

  - type: custom:button-card
    entity: sensor.cpu_temperature
    color: auto

shows:
02

I realize the color: auto setting is for following light colors, but it would be really very nice to have it follow the color settings on other entities also?

Looks like this is a custom-ui config. I’m not going to support that, sorry. You can reproduce the same thing with button-card’s config.
custom-ui is not kept up to date anymore.

1 Like

General question on when to use the decluttering card v the custom button card for templates. I’ve just spent a lot of time rewriting my views to make extensive use of the custom button card templates. I have templates for binary sensors, sensors, and input booleans. There are then a few variants that add a variety of other things (custom fields, for example, to show additional info, last changed, etc.).

In this thread, it seems folks like the decluttering card as the template instead. Are there advantages that I’m missing in using the decluttering card template over the button card template? Just trying to create best practices

you said that about my templating request also :wink: now see where we are…your card is one of the most templated cards.

and yes, icon-color is done with custom-ui. It is still fully functional for this, and hope HA/Lovelace won’t take this out, no reason why that should happen is there?

Well, guess I have to respect your thoughts about supporting it, or not. It is too bad though because we can’t really do that with button-cards, can we.

We can template an individual card, but with the customize-glob and that one template we can set icons and icon-colors for many entities at once, without having to configure that anywhere else. And use them in the Lovelace setup without further settings, as I’ve shown in that entities card.

Would have hoped when native HA cards use these settings from custom-ui, custom cards could do so too.

Maybe you’ll have a look at it at a later time. Anyways, thanks for considering.

True, you can template all the things, but now we have to deal with a lot of support about writing javascript templates :wink:
In this case, it’s not up to me. custom_ui modifies the DOM on the fly, this would require a fix on custom_ui’s side, nothing that I’m willing to do since it’s not kept up to date.

haha, yes. you’re right. sorry. still glad I asked, and happier with the result you made us. :+1:

could you phrase the fix needed for this, I could ask the author if he would be willing to do so.
If not, well just have to accept it I guess

Sorry, messed up this post and couldn’t re-set it…

this is what I now use for showing a picture on a button and a line of text right in the middle of it.

      - type: custom:button-card
        template: button_summary_picture
        entity: sensor.next_alarm
        hold_action:
          action: navigate
          navigation_path: /lovelace/tijd_agenda
        label: >
          [[[ if (entity.state !== 'Not set')
          return states['sensor.next_alarm_day_only'].state;
          return 'Relax';
          ]]]
        entity_picture: >
          [[[
          if (entity.state !== 'Not set') return '/local/badges/alarm.png';
          return '/local/badges/alarm_off.png';
          ]]]
        custom_fields:
          time: >
            [[[ return entity.state ]]]
        state:
          - operator: template
            value: >
              [[[ return entity.state !== 'Not set' ]]]
            styles:
              card:
                - background-color: '#e20000'
#                - animation: blink 2s ease infinite

and template:

button_summary_picture:
  size: 70%
  show_state: false
  show_label: true
  show_name: false
  show_entity_picture: true
  aspect_ratio: 1/1
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - border-radius: 6px
      - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
      - background-color: ivory
      - color: grey
      - font-family: Helvetica
    grid:
      - position: relative
    custom_fields:
      time:
        - position: absolute
        - left: 30%
        - top: 30%
        - font-size: 14px
        - font-weight: bold
        - color: black

As you can see this is using custom_field after all:

53 14

which seems alright (except for the moon eyes…)
need some explaining though why I cant just center a text (text-align: center), and in this case need left: 30%

15
Hope there’s a css guru around willing to help me out there, because this seems not to work

Hi all,

I have a a lamp RGB and warm to coldwhite and it shows up as:

I use the --button-card-light-color

button_card_templates:
  header:
    styles:    
      icon:
        - color: var(--button-card-light-color)
      name:
        - color: var(--button-card-light-color)
      card:
        - height: 55px
        - font-size: 9px

This works great when the lamp is in RGB mode, but fails when in white-mode
lampen1

The lamps turn gray, I think due to the rgb-values 255.255.255.

Is where a way to get around this “feature” :wink:

Cheers,
Kees

It looks like there’s a problem with the buttons on the new iPad OS. When you press a button it acts like a double tap. So a light goes on and off again. It’s probably because Safari on the new iPad OS loads pages as desktop pages. When i manually switch to mobile mode (in Safari) the problem is gone.

This should have been fixed in a previous release so I suspect you are not using the latest version and/or you have a caching issue.

I’m using the latest version which i always pull via HACS. But i can double check when i’m home tonight.

I’ve just updated to IOS 13.1 and I can’t reproduce :frowning:

minute typo in the documentation under Action/service_data: description

 If your service_data requires an entity_id, you can use the keyworD entity, this will actually call the service on the entity defined in the main configuration of this card. Useful for configuration templates

because of the link there to the configuration templates I have been looking but couldn’t find a refererence to that particular requirement. Ie, using the entity in the service_call in a template.

maybe add this in the examples:

  tap_action:
    action: call-service
    service: script.toggle
    service_data:
      entity_id: entity

working great!

sorry if this seems to obvious…wasn’t for me when I looked for it :wink:

Do you mean IOS 13.1 or iPad OS 13.1 ? There is a significant difference between the 2.