Lovelace: Button card

[kuuji (Alexandre)]

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.

[Andreas_G (Andreas Galistel)]

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.

[Klagio]

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

[Igor_Jurisic]

@vladosam

I will try to elaborate for pass a value to script as @Igor_Jurisic is MIA. In Custom UI: Tiles there was an option to send value to scripts. So you can use value from button and pass that to single script. That way i don’t have to use multiple scripts. Like in this example:

Button:

  - entity: script.ac_script
    icon: mdi:hotel
    label: Bedroom
    style_template: "return 'background-image: url(\"/local/climate/' + entities['climate.bedroom'].state + '.png\");'"
    column: 1
    row: 6
    data:
      value: bedroom

Script:

  ac_script:
    alias: AC script
    sequence:
      - service: climate.set_temperature
        data_template:
          entity_id: climate.{{value}}
          temperature: >
            {% if is_state(('input_text.' + value), 'Cool') %}
              25
            {% else %}
              23
            {% endif %}
          operation_mode: >
            {% if is_state(('climate.' + value), 'Off') %}
              {{states(('input_text.')+ value)}}
            {% else %}
              Off
            {% endif %}
      - service: input_boolean.turn_on
        data_template:
          entity_id: input_boolean.{{value}}

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.

[kuuji (Alexandre)]

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

[tomerbs (Tomer)]

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:

Custom UI: Tiles

Really liking this so far. I just have one suggested change to state-card-tiles.html: Add a min-width property to paper-button: paper-button { box-shadow: none !important; margin: 0 !important; background-color: var(--tiles-color); color: #fff; min-width: 10px; } Then, instead of defaulting to 100px for column width, change it to 1fr: ready: function () { var config = this.config; this.updateStyles({ '--tiles-columns': config.columns ? config.co…

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

[kuuji (Alexandre)]

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.

[Maaniac (Yoav Tigelman)]

@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.

[Igor_Jurisic]

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

[mkono87 (Mike)]

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.

[arsaboo]

@Igor_Jurisic

e 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 rela

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

[timpeq (Tim)]

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)

[arsaboo]

Long presses are not recognized by LL (yet).

[fversteegen (Frank)]

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

[Torbenan (Torben Andersen)]

This looks great. I keep getting this

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

[misterbenj34 (Ben Merk)]

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” ?

[Bobby_Nobble]

@misterbenj34

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

Lovelace: Button card

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

[Bit-River]

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

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

[ohadbenita]

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’;’

[emilp333]

I also wanted this so I just added ${state.attributes.unit_of_measurement} in the <div> after ${state.state}. Would be nice to have it as a config value in the main card.