Lovelace: Button card

RomRider · April 23, 2019, 9:30pm

Good point and why not maybe in the future. But once it’s working here, I don’t think it will be very hard to move everything to the default button
But for now (and while I learn more about JS/TS), that’s not the plan

jimz011 · April 23, 2019, 9:33pm

No problem, I am perfectly fine with using custom cards. Still great work.

RomRider · April 23, 2019, 9:52pm

Please open an issue on github so that we can better track things, thanks

jumper · April 23, 2019, 10:09pm

@RomRider That was firefox. Here is what Chrome’s console shows:

CARD-TOOLS IS INSTALLEDDeviceID: 9b123a37-9153ebff
2d31a7a5c51eccfda1fcf.chunk.js:1 Uncaught (in promise) TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at value (d31a7a5c51eccfda1fcf.chunk.js:1)
    at HTMLElement.getFontColorBasedOnBackgroundColor (button-card.js?track=true:252)
    at HTMLElement.cardColoredHtml (button-card.js?track=true:594)
    at HTMLElement.render (button-card.js?track=true:241)
    at HTMLElement.update (app-652a7f4d.js:2)
    at HTMLElement.performUpdate (app-652a7f4d.js:2)
    at HTMLElement._enqueueUpdate (app-652a7f4d.js:2)
background.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

jumper · April 23, 2019, 10:19pm

@jarrah Look at the config-template-card. It allows passing attributes to cards like the button-card. I show an example a few posts above. The ${vars[x] holds the the ordered attributes. In my case it allows the button to act on the currently selected input_select item.

RomRider · April 24, 2019, 2:31pm

when color_type: icon, the color you define in the main part of the configuration is the color for the on state of your entity. Because your media_player has no on state, it will fallback to the default value which is var(--primary-text-color), probably blue in your case.

Since you don’t use the entity (you redefine all the things on the button, name, icon and your action is based on a service not linked to this entity), you can completely get rid of it.

  - type: custom:button-card
    color_type: icon
    style:
      - border-radius: 10px
      - box-shadow: 3px 3px rgba(0,0,0,0.4)
    icon: mdi:stop
    name: BUTTON only CType card
    color: rgba(245,116,56,1)
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        entity_id: media_player.firetv_living_room
        command: "input keyevent 86"

But if you want to keep you entity for whatever reason, in this case, if you want to define the color, use:

  - type: custom:button-card
    color_type: icon
    style:
      - border-radius: 10px
      - box-shadow: 3px 3px rgba(0,0,0,0.4)
    entity: media_player.firetv_living_room
    icon: mdi:stop
    name: BUTTON only CType card
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        entity_id: media_player.firetv_living_room
        command: "input keyevent 86"
    state:
      - operator: default
        color: rgba(245,116,56,1)

I understand it’s not very clear, we’ll see how to address the color in the main config part in the future.

On a side node, hold_action is by default none, but if you want to force it, the format is:

hold_action:
  action: none

For this part, I think it’s going to be fixed once we move to TypeScript (will happen really soon as the PR is in review by @iantrich currently) based on what you said here:

The function getFontColorBasedOnBackgroundColor where you have this error has been replaced with something completely new and faster.

jumper · April 24, 2019, 3:07pm

@RomRider Thank you for the explanation. It is clear and helps clarify the context of the Card Options descriptions (although they state the entity: is Required (but I can see why it generally is required)).

When I remove the entity, the icon becomes Black. So, I’ll leave it in for now.
Defining the background-color: in the style: works and is clearer to me than state: operator: default

I’ll be happy to test the TypeScript rewrite with the config-template-card once the new version drops.
Again, Thanks

RomRider · April 24, 2019, 3:29pm

Removing the entity without defining a color makes it black, indeed… but in my example, I kept the color and just removed the entity

- type: "custom:button-card"
  name: test
  icon: mdi:flash
  color: orange
- type: "custom:button-card"
  name: test
  color_type: card
  icon: mdi:flash
  color: orange

And if you want to define the background-color, I’d suggest you use the color_type: card instead. The icon color will be automatically calculated based on the luminance of the background-color.

jumper · April 24, 2019, 4:11pm

@RomRider for now, color and color_type don’t play well with config-template-card (button fails to render). But I will use them once the rewrite is available as your approach is cleaner with less css. I’m less than a noob with web front ends.
Thanks

daphatty · April 25, 2019, 7:09am

@petro Thank you so much for the Anchor recommendation and example. I use this button card all over my Lovelace UI and now my UI config will be so much cleaner and easier to update.

RomRider · April 25, 2019, 8:22am

Version 1.0.0

Major modifications for this one but no breaking changes hopefully Let us know if you have any issue as we moved everything to typescript. This release should fix all the hold_action problems you had, as we now implement our own long-press support and do not rely on home-assistant’s implementation.

Breaking Changes

action: service is deprecated, use action: call-service instead

New Features

Complete typescript refactor
Support for haptic feedback for the Beta IOS App (Fixes #123)

Fixes

Toggle works now for locks and covers (Fixes #110)
Fix Long Press support in general, no need for a native HA card that implements the long-press anymore
Fix font and icon color calculation in certain case

jimz011 · April 25, 2019, 5:17pm

Amazing, the hold_action fix makes me want to use this card again. Was waiting for the fix as HA’s implementation of needing the entity-button (or glance/picture etc) wasn’t the best option (and not to mention that way it doesn’t always work that well) even core buttons do not always work that well for me (don’t know why though). For some reason I need to do it twice and sometimes even three times before it would register (yes I even see the little circle appearing).

Anyways eager to try if this is better (I have used this card in the past which was modified by Lopton, it was hacky but man that worked like a charm. Unfortunately he never updated the card). That is until you came along ofcourse.

A question though, it says it has haptic feedback support, but that feature isn’t in beta yet is it? I am running build 40 which seems to be the latest build. I also run the dev branch of HA.

Anyways amazing work (all of you that contributed to this card ofcourse).

RomRider · April 25, 2019, 5:33pm

Haptic support is coming in the next beta release of the IOS app (which will be available really soon)

jumper · April 25, 2019, 7:00pm

With V1.0.0 I’m seeing behavior similar to issue #114, square points behind rounded corners.
Here’s what I see using card_type: card, color, and with a border in the style: (using an entity whose state is ‘on’). (Both Firefox and Chrome)

  - type: custom:button-card
    color_type: card
    color: rgb(245,116,56)
    style:
  #    - background-color: rgba(245,116,56,1)
      - border-radius: 30px
      - border: solid 3px rgba(118,185,0,1)
    entity: light.office_ceiling
    icon: mdi:stop
    name: BUTTON only CType card
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        entity_id: media_player.firetv_living_room
        command: "input keyevent 86"

The color is applied out to the square corners, and the border is clipped on the right
button

Here’s what I see with no card_type or color, and background-color defined in style:

  - type: custom:button-card
#    color_type: card
#    color: rgb(245,116,56)
    style:
      - background-color: rgba(245,116,56,1)
      - border-radius: 30px
      - border: solid 3px rgba(118,185,0,1)
    entity: light.office_ceiling
    icon: mdi:stop
    name: BUTTON only CType card
    tap_action:
      action: call-service
      service: androidtv.adb_command
      service_data:
        entity_id: media_player.firetv_living_room
        command: "input keyevent 86"

The color does not get applied out to the square corners, but the corners are visible and the border is clipped on the right.
button2

RomRider · April 25, 2019, 11:05pm

Version 1.1.0
New Features

Entity Picture/Custom Picture support, per state and with styling (Fixes #3). New options are:
- show_entity_picture, default is false
- entity_picture
- entity_picture_style

entity_picture

Example config looks like this:

        - type: "custom:button-card"
          entity: switch.skylight
          entity_picture: https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG
          show_entity_picture: true
          name: Entity Picture Default
          state:
            - value: 'off'
              entity_picture_style:
                - filter: grayscale(100%)
                - border-radius: 50%
            - value: 'on'
              style:
                - animation: blink 2s ease infinite
              entity_picture_style:
                - border-radius: 50%
        - type: "custom:button-card"
          color_type: card
          entity: switch.skylight
          show_entity_picture: true
          name: Entity Picture State
          state:
            - value: 'off'
              color: black
              entity_picture: https://welovecatsandkittens.com/wp-content/uploads/2013/09/fallling-asleep-at-keyboard-cat.jpg
              entity_picture_style:
                - filter: grayscale(100%)
            - value: 'on'
              color: '#ce42f4'
              entity_picture: https://media.tenor.com/images/d740131a4906504d47cab865f1bd95b3/tenor.gif

Fix

Fix #125 : Border Clipping & rounded corner

Breaking Change

If using blink, the whole card will now blink. I might bring back only the icon/text blinking in the future, but differently (thinking about a blink: true/false).

Others

Code cleanup

It should be fixed with this new release.

jimz011 · April 26, 2019, 5:06am

@DavidFW1960 it has been a while since we talked about this. But I think I have found the solution to the theming (I am sure you can make it better but this is what I have come up with). I haven’t tested it yet though, but this seems like it should work to me.

This card changes everything, I came up with the following (again using the state-switch card).

  - type: custom:state-switch
    entity: sun.sun
    states:
      "below_horizon":           
         type: "custom:button-card" 
         entity: light.living_room_lights
         color: auto
         tap_action:
           action: toggle
         state:
           - value: "on"
             style:
               - border-radius: 20px
               - --paper-card-background-color: #YOUR_COLOR_HERE
           - value: "off"
             style:
               - border-radius: 20px
               - box-shadow: 2px 2px rgba(0,0,0,0.3) 
      "above_horizon":           
         type: "custom:button-card" 
         entity: light.living_room_lights
         color: auto
         tap_action:
           action: toggle
         state:
           - value: "on"
             style:
               - border-radius: 20px
               - --paper-card-background-color: #YOUR_COLOR_HERE
           - value: "off"
             style:
               - border-radius: 20px
               - box-shadow: 2px 2px rgba(0,0,0,0.3)

Using the sun entity for the state switch and then using different styles on the cards. I am pretty confident that this should work. I will go do some theming in the near future so I will play with it. But now I am changing everything back to this amazing card thanks to @RomRider. Btw is it possible to have the icon color dim when the light is dim (like the core entity button does?).

Oh and I wanted to mention, the hold_action works like a charm. Haven’t missed it once yet, my wife is going to love this!

RomRider · April 26, 2019, 6:20am

What are you trying to achieve? Just change the theme of this particular button based on the sun? If yes, I’d suggest the config-template-card. It would simplify your configuration a lot but it doesn’t work fully with this card (yet), at least not on my setup. I have an error during the first display of the card and then when an entity changes, it displays…

Mhh, I didn’t test with a non rgb light, will look at this soon. Please open a feature request so we can track things!

DavidFW1960 · April 26, 2019, 6:28am

I’ve just gone back to using this instead of the whole theme workaround and it’s changins colours on my input Boolean perfectly.

Tomahawk · April 26, 2019, 10:17am

Is it possible to set a "help-text" or see the button name, when hovering over the button?

Making a panel of buttons with icons, be able to see the name or a help-text when hovering the button would be a welcomed feature.

RomRider · April 26, 2019, 11:03am

That wouldn’t work with touchscreens can you open a github issue please so that we can track it?