Lovelace: Button card

Share your Projects! Dashboards & Frontend
756

The round buttons, - can you please share the code?

757

see post above

1 Like
758

Templating feature is very cool! Iā€™ve combined a battery state sensor and battery level sensor into one card within the first few minutes of trying it. Also made a ā€œNow Playingā€ for Spotify (media_title and media_artist attributes):

          label_template: >
            return ('  "' + states['media_player.spotify'].attributes.media_title + '" by ' + states['media_player.spotify'].attributes.media_artist + ' ');
          show_label: true

It would be perfect if you could style the label too though. Like in this example Iā€™d like the label with now playing text to be a smaller font size and different color. Maybe something that could be considered?

Thanks again for making this card so amazing! :slight_smile:

759

Looks like this is the code for your square buttons. I have been trying to get my buttons round. And to stay roundimage :thinking:

Whats your settings?

760

border-radius: 50% instead of px and specify a fixed height and width.

761

I heard you :wink:

Also fixed with the same PR.

per-style-config

762

:tada::tada: Version 1.5.0 :tada::tada:

Breaking Changes

  • for now style and entity_picture_style are still supported, but please make sure you update your configuration so that style becomes card and entity_picture_style becomes entity_picture, both under the styles option (note the S at the end of styles). Next releases will drop the support for style and entity_picture_style.
    Basically, this:
    - type: custom:button-card
  style:
    - border-radius: 10%
  entity_picture_style:
    - filter: grayscale(100%)
    Becomes:
    - type: custom:button-card
  styles:
    card:
      - border-radius: 10%
    entity_picture:
      - filter: grayscale(100%)
  • The styles defined in each state are now additive with the styles defined in the main part of the configuration. It means you donā€™t have to define all the CSS entries in each state, only define the ones which change. Define the common ones in the main styles config part and define specific ones in each state styles entries.

New Features

  • Styling per element supported by using the new styles object available in the main config and in each state entry.
    You can configure the style for:

    • card: Styles that are defined here will be applied to the whole card and itā€™s content, unless redefined in elements below.
    • entity_picture
    • icon
    • name
    • state
    • label

    per-style-config

    - type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  label_template: >
    var bri = states['light.test_light'].attributes.brightness;
    return 'Brightness: ' + (bri ? bri : '0') + '%';
  show_label: true
  show_state: true
  size: 10%
  styles:
    card:
      - height: 100px
    label:
      - color: gray
      - font-size: 9px
      - justify-self: start
      - padding: 0px 5px
    name:
      - text-transform: uppercase
      - letter-spacing: 0.5em
      - font-familly: cursive
      - justify-self: start
      - padding: 0px 5px
    state:
      - justify-self: start
      - font-size: 10px
      - padding: 0px 5px
  state:
    - value: 'on'
      styles:
        state:
          - color: green
    - value: 'off'
      styles:
        state:
          - color: red
        card:
          - filter: brightness(40%)
- type: "custom:button-card"
  color_type: icon
  entity: light.test_light
  layout: icon_label
  label_template: >
    return 'Other State: ' + states['switch.skylight'].state;
  show_label: true
  show_name: false
  size: 100%
  styles:
    card:
      - height: 200px
    label:
      - font-weight: bold
      - writing-mode: vertical-rl
      - text-orientation: mixed
  state:
    - value: 'on'
      styles:
        label:
          - color: red
    - value: 'off'
      styles:
        label:
          - color: green

Fixes

  • Brightness calculation for lights was different than the default from Home Assistant. This is fixed.
  • Own longpress was not used in some cases
5 Likes
763

Great work, I like what you have done with styles as it will save a lot of code. However do I need to change something to get the right RGB brightness colors? It says it is fixed in the last PR, however I still get a difference in brightness.

Screenshots below, show brightness at around 20%, they are the same entity (different icon srry). The button screenshot shows the color with this card, the screenshot with the lightbulb shows the original HA color (brightness is at 20%)

image image

764

Did you empty your browser cache? Try in a private instance of your browser please to make sure it has nothing to do with caching.
If itā€™s still not working copy the content of your light state when itā€™s at 20% like in the picture (using the http://HASS_IP/dev-state)

I donā€™t have the issue anymore (brightness ~= 25%):
image

And thatā€™s my state:

brightness: 62
hs_color: 0,100
rgb_color: 255,0,0
xy_color: 0.701,0.299
value_index: 0
value_instance: 1
power_consumption: 1.4
supported_features: 17
hidden: false
icon: mdi:led-strip
765

Hm yeah in my browser it has the right color, canā€™t seem to clear cache in the ios app (usually a refresh would suffice, but seems to do nothing). Will try some more refreshes haha. Thanks anyways.

Edit: Couldnā€™t get it to clear, reinstalling the ios app solved it for me.

766

This is truly amazing! I was literally trying to figure out whether I could style an individual button based on an entity state last night. So glad I decided to sleep on it and not forge ahead. Thank you so much @RomRider!

Quick question for the brain trust - Does anyone know how I might go about tweaking the gap between these cards? I tried using -padding: 0px but that didnā€™t have my desired effect.

image
image962Ɨ212 18.4 KB

Ultimately, my goal is to make these buttons look and function more like a tabbed sub-menu system whereby each button triggers a conditional card based on the state of several input_booleans within the same view.

767

Itā€™s not possible with padding. A card has no control over the width between cards.
However thanks to

- type: custom:button-card
  color_type: blank-card
  style:
    card:
      - width: 50px #change the value to suit your needs

put in between each card on the line and youā€™ll be able to cheat and add space between buttons :blush:

768

And if you want to increase the gap vertically @daphatty you can use gap-card:

EDIT: Though I guess a single line with just one blank card would work equally well.

769

And if all that fails you could use a vertical-in-stack card. It will remove the gap entirely. Not the best solution I reckon.

1 Like
770

Ahh, just looked back at @daphattyā€™s post and I think @RomRider and I both actually missed that the goal was to remove the gaps, not increase them. :slight_smile:

771

Correct, my goal was to remove the gap. In hindsight, I wasnā€™t as clear about that detail.

772

You probably need this:

773

Is there a way for a button to monitor two sources? Basically like an automation with two triggers.

774

Hi there, Iā€™m trying to repliace the ā€œlast_updatedā€ function the new label feature, so far I have this

return ((as_timestamp(now()) - as_timestamp(states['light.outside_front_door'].last_updated) | int));

But itā€™s not working. Am I on the right track here?

775

I donā€™t quite understand, what do you want to achieve? Is it modifying the button based on the state of 2 entities? If yes operator: template will be useful.

Templates in this card needs to be written in javascript. This is not javascript, this is a mix between home-assistantā€™s template engine with a javascript return in front :slight_smile:

You can try something like : return Date.now() - Date(states['light.outside_front_door'].last_updated)

Let me know how it goes.