Lovelace: Button card

Andreas_G · September 5, 2018, 4:16pm

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

kuuji · September 5, 2018, 4:21pm

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 · September 5, 2018, 4:41pm

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 · September 6, 2018, 7:02am

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 · September 6, 2018, 7:28am

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 · September 6, 2018, 5:41pm

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

tomerbs · September 6, 2018, 6:28pm

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

kuuji · September 6, 2018, 9:18pm

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 · September 7, 2018, 12:30pm

@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 · September 7, 2018, 3:19pm

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 · September 7, 2018, 5:09pm

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 · September 7, 2018, 9:36pm

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

timpeq · September 8, 2018, 12:19am

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.

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.
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 · September 8, 2018, 12:27am

Long presses are not recognized by LL (yet).

fversteegen · September 8, 2018, 4:44am

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 · September 8, 2018, 8:58am

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 · September 17, 2018, 8:21pm

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 · September 18, 2018, 3:29pm

Bit-River · September 19, 2018, 5:50pm

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

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

ohadbenita · September 20, 2018, 1:21pm

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