Lovelace: Button card

[Mariusthvdb (Marius)]

just to be precise, since it isn’t a template, and release notes announce support for HTML in name or name_template` , should this work:

        name: Corridor + "<br>" + terrace

and, when using a template:

        name_template: >
          return entity.state.substr(0, entity.state.length-11) +
           "<br>" + entity.last_changed

?

edit

think I found it, name doesn’t need template formatting, simply the <br>:

        name: Corridor <br> terrace

nice! thanks.

since no state_template is allowed, I have to use this for the name on my overview button:

        name_template: >
          return 'Last motion' + "<br>" + entity.state.substr(0, entity.state.length-11)

it takes the first part of the variable discussed before, and shows that in the name field, now with a line brake to mimic the state on the button:

.

which is fine. For this sensor. When the longer named ones will trigger the Last motion, they will get eclipsed again…
Wouldn’t there be a general CSS code to auto word wrap longer names/labels etc?

Also, since this is now part of the name field, it inherits the name format. In my particular button, trying to mimic the state, that has a different format, (smaller font, grey versus black font-color). Could I set that using html coding maybe?

[sbmlat (shreram)]

Thank you, @PodPerson

Do I add ‘Lovelace Colors’ section to every theme? I have five different dark themes.

Ex:

dark_theme:
  # Lovelace Colours #
  primary-button-colour: 'rgb(91, 237, 54)'
  secondary-button-colour: 'rgb(221, 232, 6)'
  low-colour: 'rgb(14, 245, 249)'
  high-colour: 'rgb(211, 97, 106)'
  light-bright: 'rgb(255,215,184)'
  light-soft: 'rgb(255,180,115)'
  light-dim: 'rgb(255,120,0)'
  light-dark: 'rgb(255,16,0)'
  # Main Stuff #
  primary-color: "#1ABA92" # Primary (most of the UI)
  primary-background-color: "#303030" # Primary background colour (dialogs, e.t.c)
  secondary-background-color: "#303030" # Secondary background colour (main UI background)
  paper-card-background-color: "#424242" # Card background colour
  paper-item-icon-color: "#1ABA92" # Icon colour
  primary-text-color: "#FFFFFF" # Primary text colour
  secondary-text-color: "rgba(255, 255, 255, 0.7)" # Secondary text colour
  disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
  divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
  paper-card-header-color: "#FFFFFF" # Card header text colour

[PodPerson]

To be clear, the ones I mentioned are just ones I made up for my own (the light-bright, etc are because I have 4 modes of light settings). You can use any colours or variables names you want, but yes, make sure that any variables you reference in your templates/buttons are included in any theme you want to use.

[sbmlat (shreram)]

@sbmlat

2. How do I pop out or make it bold, the lock overlay?
   In some dark themes, it is very hard to see this lock overlay.

Figured out this one from one of your old posts and reading from the documentation. @RomRider

- value: 'off'
  styles:
    lock:
      - color: red
      - opacity: 1
      #- align-items: flex-end
      #- justify-content: flex-start

[gabrielmiranda]

Would it be possible to add a variable which plays a sound or vibrate the cellphone when you press a button?

[Mariusthvdb (Marius)]

@Mariusthvdb

In my particular button, trying to mimic the state, that has a different format, (smaller font, grey versus black font-color). Could I set that using html coding maybe?

for reference to the community, answering myself here… This is what I found to be working for my single button in the button config:

        name_template: >
          var fakestate = `<span style="color: #555B65;font-size: 11px"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
          return 'Last motion' + "<br>" + fakestate

tried it without var at first, using the html code in the name_template directly, but it kept showing that html code on the button. Using the var does the trick, but probably because I didnt find the correct syntax.

@Mariusthvdb

Wouldn’t there be a general CSS code to auto word wrap longer names/labels etc?

@RomRider is the css code for word-wrap below not yet supported on your Button card? Ive tried various options and places in the config, but no change in output (no error either):

  styles:
    name:
      - word-wrap: break-word

or maybe even:

  styles:
    card:
      - word-wrap: break-word

would be really nice and cleaner to be able to set that in the config, and not have to use the name_template version. Please consider adding that, and overflow-wrap?

I ask because I’ve also tried to set the overflow-wrap or word-wrap in the css setting for the html element:

        name_template: >
          var fakestate = `<span style="color: #555B65;font-size: 11px;word-wrap:break-word;"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
          return 'Last motion' + "<br>" + fakestate

without succes unfortunately. Not sure if this is a Button-card issue or HA issue, but fact of the matter is I need the word-wrap property and can’t get it to work as it should…

[Danik (Daniel)]

Can you share the code?

[Mariusthvdb (Marius)]

HI @RomRider

would a template on the action fields be possible? To be able to template the following hard-coded button:
I did manage to switch.toggle with this:

      - type: custom:button-card
        template: button_motion
        name: Corridor <br> office
        entity: binary_sensor.corridor_office_motion_sensor
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.corridor_office_motion_sensor_switch

we would need something like this:

      - type: custom:button-card
        template: button_motion
        name: Corridor
        entity: binary_sensor.name
        tap_action:
          action: call-service
          service: switch.toggle
          service_data_template:
            entity_id: >
              'switch.' + entity.object_id + '_switch'
               # switch.{{entity.object_id}}_switch  in Jinja
        hold_action:
        action: more-info

or , if object_id wouldn’t be available:

    service_data:
      entity_id: >
         var id = entity.entity_id.split('.')[1];
         'switch.' + id + '_switch'

or have it work on action: toggle?

        tap-action:
          action: toggle
          entity_id: switch.corridor_office_motion_sensor_switch

and templated:

        tap-action:
          action: toggle
          data_template:
            entity_id: >
              'switch.' + entity.object_id + '_switch'

We could of course hard code this, if the secondary entity_id would be allowed on action: toggle, (it isn’t yet is it?) but that would require doing so on each button.

Enabling this in an action_template would allow for setting it up in the button template once, and leave the button config simple as can be.

thanks for considering

[benm7 (Ben M)]

Loving the button card, using it for camera controls!
Quick question, is there a way of quickly blinking the button to simulate the button being pressed? In my example, I want the card to change colour when I click it to run a script, or to send mqtt messages.
Thanks!

[VDRainer]

Add a little delay at the end of your script.

      - delay:
          milliseconds: 500

[benm7 (Ben M)]

Worked a treat, thanks very much!

[RomRider]

@gabrielmiranda

Would it be possible to add a variable which plays a sound or vibrate the cellphone when you press a button?

There’s already a haptic option if you use the IOS beta app. I’m not sure that sound is a good idea but maybe vibrate for other phones could be interesting. Could you open a feature request on Github please?

@Mariusthvdb

Enabling this in an action_template would allow for setting it up in the button template once, and leave the button config simple as can be.

I’ll have a look into this, please open a feature request. In the meantime, I think you can use config-template-card

@Mariusthvdb

@RomRider is the css code for word-wrap below not yet supported on your Button card? Ive tried various options and places in the config, but no change in output (no error either):

Try this:

styles:
  name:
    - text-overflow: unset
    - white-space: unset
    - word-break: break-word

[Mariusthvdb (Marius)]

@RomRider

styles: name: - text-overflow: unset - white-space: unset - word-break: break-word

yes, that works, thank you! tried it with only word-break: ( since i had word-wrap before and hadn’t seen than yet), but that wouldn’t work. Now Ill check why it needs text-overflow and white-space: unset …

@RomRider

I’ll have a look into this, please open a feature request

will do, referring to this thread, thanks for considering! see: add external entity in action:, preferably with templatable entities · Issue #187 · custom-cards/button-card · GitHub

have you given the icon_template some thought? Seems to good to miss out on. (appreciate your remarks on javascript and doubling features…)

[gabrielmiranda]

I tried but I do not know if I did it right

[daphatty]

Is it possible to specify a maximum size for a button while using aspect_ratio:? The idea being a button cannot exceed a specific dimension when viewed on larger screens.

Case in point - when I load my homekit-like buttons, which leverage a 1/1 aspect ratio, they look normal on my iPad Air 2 but are gigantic on my iPad Pro. Being able to specify something like max_size:xxx or max_height/width:xxx in conjunction with aspect_ratio: would be awesome.

[Mariusthvdb (Marius)]

yes, that would indeed be very nice!
When using the original Tiles custom html card we have this option:

column_width: minmax(75px, 75px)

which could of course be set to the specific demands. Maybe this could be translated to Button requirements?

[Alexxander0]

Hi,

is there a way to make a tapaction to an external website (link) ?
navigation_path: '' seems to work only for internal navigation.
I didnt find any other information. Any help where i could change myself? Thanks!

[VDRainer]

Use action url.

[VDRainer]

Sorry if this has already been asked, but i can’t find anything.
This is my first attempt with configuration templates.

I have a template:

  mcp_left:
    show_label: true
    label: '-'
    color_type: card
    styles:
      card:
        - border-style: solid
        - border-width: 2px
        - border-color: var(--paper-card-background-color)
      grid:
        - grid-template-areas: '"i s" "i l" "i n"'
        - grid-template-columns: 40% 1fr
      name:
        - justify-self: end
        - padding-right: 15px
      label:
        - justify-self: end
        - padding-right: 15px
    state:
      - value: 'on'
        styles:
          icon:
            - color: var(--paper-card-background-color)
          name:
            - color: var(--paper-card-background-color)
          label:
            - color: var(--paper-card-background-color)
      - value: 'off'
        styles:
          card:
            - background-color: var(--primary-background-color)

(same with other styles config for the right button)

and want to change the icon in the button-card by the state:

                  - type: custom:button-card
                    template: mcp_left
                    entity: switch.m2_b7_out
                    label: OG Bad
                    state:
                      - value: 'on'
                        icon: mdi:arrow-up-thick
                      - value: 'off'
                        icon: mdi:arrow-down-thick

                  - type: custom:button-card
                    template: mcp_right
                    entity: switch.m2_a0_out

but it only shows the default flash icon.


If i comment out the state config in the template, it works as expected.

[daphatty]

I could be wrong but shouldn’t there be a styles: in your button config?

label: OG Bad
state:
  - value: 'on'
    styles:
      icon: ...