Lovelace: Button card

I’ve been trying this out and I’m not sure, but it seems media_player entities are not working quite right?

First of all it seems that my ChromeCast when playing looks like it is off? Since the state isn’t “ON”, but instead PLAYING it might appear as “OFF”? Just a guess.

Also my amplifier looks correct when OFF, but when ON the icon disappears? I double-checked the state and it is ON. The amplifier is supposed to appear in the top right square.

Code for top row:

  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
       - type: "custom:button-card"
         color: rgb(255, 100, 100)
         icon: mdi:power-standby
         action: more_info
         entity: script.turn_media_off
       - type: "custom:button-card"
         color: rgb(255, 255, 255)
         icon: mdi:cast
         action: more_info
         entity: media_player.vardagsrum
       - type: "custom:button-card"
         color: rgb(255, 255, 255)
         icon: mdi:playstation
         action: more_info
         entity: media_player.playstation_4
       - type: "custom:button-card"
         color: rgb(255, 255, 255)
         icon: mdi:amplifier
         action: more_info
         entity: media_player.marantz_sr5011
       - type: "custom:button-card"
         color_type: blank-card

First of all it seems that my ChromeCast when playing looks like it is off? Since the state isn’t “ON”, but instead PLAYING it might appear as “OFF”? Just a guess.

I probably need to add support for custom states eventually. For now you’re correct, it’s based on on and off

Also my amplifier looks correct when OFF, but when ON the icon disappears? I double-checked the state and it is ON. The amplifier is supposed to appear in the top right square.

You set the color to white => color: rgb(255, 255, 255)
So when the entity is on, the color of the icon becomes white, and since your background is also white, you can’t see it. But I would bet it’s there.

You set the color to white => color: rgb(255, 255, 255)
So when the entity is on, the color of the icon becomes white, and since your background is also white, you can’t see it. But I would bet it’s there.

Thank you … d’oh.

1 Like

Hi is the below correct for turnin on (NOT toggle) a switch?

  - type: "custom:button-card"
    action: service
    service:
    domain: homeassistant
    action: turn_on
    data:
      entity_id: switch.door
    icon: mdi:open-door
    name: Open door
1 Like

Sorry to bug you again @kuuji . Any thoughs on the above? It would really help with some advanced automating and allow for some pretty cool stuff. It’s basically the only thing stopping me from moving over from the old Custom UI Cards. :frowning:

@Igor_Jurisic I believe you can already do that with my latest update from last week. Check the readme / changelog

Great work Kuuji,
I implemented your ideal in my living room automations but i have problem viewing it from my cellphone app.
the icons doesn’t have enough space to show up so they get cut:


In the old custom-tiles “jamesdawson3” provide a simple fix to auto align the icons,
Please see the link above:

So I wonder if you can implement the same fix in your code?
Thanks

1 Like

Sure thing. I noticed the same thing this week.

Would you mind opening an issue on github? It’s easier for me to track there.

@kuuji works correctly on chrome. Both Fully Kiosk and Wallpanel don’t seem to render the card correctly. Do you or anyone else know how to possibly fix this issue? I tried installing android web view from the google play store but it doesn’t appear to do anything.

Great, I just tried it and this works now:

      - type: "custom:button-card"
        color_type: card
        color: rgb(223, 255, 97)
        icon: mdi:check
        action: service
        service:
          domain: script
          action: climate_selected
          data:
            value: app_input_boolean_4
      - type: "custom:button-card"
        color_type: card
        color: rgb(223, 255, 97)
        icon: mdi:check
        action: service
        service:
          domain: script
          action: climate_selected
          data:
            value: app_input_boolean_5

There is one other thing I can’t get to work, and that was done with style_template in Custom UI. I can make it change button style based on the state of the entity it is related to, but I can’t find a way to specify some other unrelated entity.

This is an example from Custom UI and how it worked there:

style_template: "if (entities['input_boolean.app_input_boolean_5'].state === 'on') return 'background-color: blue'; else return 'background-color: green';"

Hope I’m making sense here :slight_smile:

Is it possible to use a attribute as an entity? My ecobee will show as auto all the time whether its on or off but the operation attr will show idle,cool or heat.

Templates are not allowed in Lovelace and that is unlikely to change.

Thanks for all the hard work, this is working well for quickly building remotes for my home theater system. I have 2 suggestions that would make this perfect. I’m not sure of the limitations of the platform, so it’s possible that these are not possible, but it’s worth a shot.

  1. Allow the event to be fired on a mouse or finger down event instead of a click. I think this would make navigating menus feel a lot more responsive.

  2. Allow the service to be repeated after a short delay while held down in the same way holding a key on a remote would (For volume control, menu control, etc)

Long presses are not recognized by LL (yet).

After reading through all the documentation again I figured out where the error is:

Where the tutorial in the beginning of this thread indicates “Include the card code in your `ui-lovelace-card.yaml” it actually should write “Include the card code in your ui-lovelace.yaml”

A small and subtle difference, but by including the code in ui-lovelace.yaml I managed to get it to work :slight_smile:

1 Like

This looks great. I keep getting this
image

I’ve place the file buttom-card.js in directory \config\www\

My ui-lovelace.yaml looks like this

indent preformatted text by 4 spaces

title: Home
resources:

  • url: /local/button-card.js
    type: module
    views:
  • title: Example
    cards:
    • type: “custom:button-card”
      entity: light.gateway_light_7811dcb36dcd
      icon: mdi:sofa
      color: auto
      action: more_info

Any idea what’s wrong?
Torben

1 Like

I’ve got the same error as Torbenan, with same config…
I have this error in the log:
2018-09-17 20:16:31 ERROR (MainThread) [frontend.js.latest.201809030] https://home.merklen.fr/local/custom_ui/button-card.js:1:8 Uncaught SyntaxError: Unexpected token {

Are we alone with this ?

And what is this file “ui-lovelace-card.yaml” ?

1 Like

Thanks a million for this, it’s my main light switch board now :slight_smile:

button-card-hass

One question I have: how do I get it working when my internet is down? There was a storm here today, and my internet was out for the morning and the button-cards were the red blocks instead.

I guess it’s from the import:

import {
  LitElement, html,
} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';

What workaround could I use for this?

Many thanks again! I wouldn’t have my HA set-up without it :smile:

2 Likes

Thanks for sharing this @kuuji Happened to me as well, couldn’t get it to work, any solution to it ?
I’ve placed the custom card in its correct place and I’ve been using other lovelace custom cards with success

I managed to localize it to the imports

2018-09-21 14:11:48 ERROR (MainThread) [frontend.js.latest.201809030] http://10.x.x.x:8123/local/custom_ui/button-card.js:1:8 Uncaught SyntaxError: Unexpected identifier

The import line looks like this

'import {
LitElement, html
} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module’;’

2 Likes