Lovelace: Button card

Marcus_Lundblad · September 12, 2021, 12:51am

i want the sensor to set the icon here:

    [[[
      return `<ha-icon
        icon="mdi:wifi"

this is my icon sensor:

  - platform: template
    sensors:
      p30_sofia_sound:
        friendly_name: "Sofia p30 ringer mode icon"
        value_template: >-
          {% if is_state('sensor.sofia_p30_ringer_mode', 'normal') %}
            mdi:volume-high
          {% elif is_state("sensor.sofia_p30_ringer_mode", "vibrate") %}
            mdi:vibrate
          {% else %}
            mdi:volume-mute
          {% endif %}

like

    [[[
      return `<ha-icon
        icon="{states['sensor.p30_sofia_sound'].state}"

but that is not possible

pedolsky · September 12, 2021, 1:00am

Quick test, try:


    [[[
      return `<ha-icon
        icon="${states['sensor.p30_sofia_sound'].state}"

Marcus_Lundblad · September 12, 2021, 6:31am

Tank you!! Works

    [[[
      return `<ha-icon
        icon="${states['sensor.p30_sofia_sound'].state}"
        style="width: 20px; height: 20px; color: var(--icon-color);">
        </ha-icon>`
    ]]]

KameDomotics · September 12, 2021, 5:11pm

Hi! Is there a way to insert a small button into an existing button card?

Something like this:

Thanks

gdreelin · September 12, 2021, 6:14pm

Tom could you post your configs to Github? Love these cards you do… they are amazing.

Revolver · September 12, 2021, 7:10pm

You mean like this? Every side icon is actually a button.

KameDomotics · September 12, 2021, 8:01pm

Yes, please can you post the complete code of this card?

Mariusthvdb · September 12, 2021, 9:26pm

yes, you need to check out GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

and probably especially the ‘notification’ which is used throughout the community for those

RASBR · September 13, 2021, 11:10pm

Hi Petro,
Would you be kind to share the code (easy to read by newbie) for:

Theme and/or dashboard background colors
Theme and/or card background colors
How did you align the title/room name
How did you combine all i.e. Synology related info in one card with no separators

I am trying to achieve liquid (water & diesel) levels for 4 tanks as described here

Thanks

Martinnygaard · September 14, 2021, 11:56am

Button card in button card + “entity.attribute.current_temperature” reference

I am trying to make a header card to each room, which will hold multiple functions.
If you tap on the header itself (The kitchen text) it will toggle all the kitchen lights.

This button-card has a “custom_field” called “climate”.
In this climate custom_field, there is another button-card, with a label, showing the climate entity’s attribute “current_temperature” (25°C) and an icon based of the state of the climate component.

In the label, I use Java script reference to the entity.attribute (See code below).
The issue is; it is referring to the entity of the mother button card (light.kitchen) and not to the climate.kitchen, as defined in that ´custom_field card.

label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'

The current code for the complete header card I am trying to make:

type: custom:button-card
show_state: false
show_icon: false
show_label: false
show_name: true
name: Kitchen
entity: light.kitchen
tap_action:
  action: toggle
hold_action:
  action: more-info
color: yellow
styles:
  card:
    - padding: 1%
    - background-color: rgba(43, 55, 78, 0.8)
    - border-radius: 15px
  grid:
    - grid-template-areas: '"n climate"'
    - grid-template-columns: 3fr 1fr
  name:
    - font-weight: 300
    - font-size: 40px
    - align-self: center
    - justify-self: center
custom_fields:
  climate:
    card:
      type: custom:button-card
      entity: climate.kitchen
      show_name: false
      show_label: true
      label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
      styles:
        card:
          - background-color: rgba(100, 100, 100, 0.5)
          - box-shadow: 0px 0px
        grid:
          - grid-template-areas: '"l i"'
          - grid-template-columns: 1fr min-content

I know I could hard code the entity.attribute directly in every label of each custom_field button-cards, but I want to make this button-card setup to a template, and therefore hopefully only have: Type, entity, template and name in the actual card code.

My goal for the code:

type: custom:button-card
entity: light.kitchen
template: header-card
name: Kitchen
custom_fields:
  climate:
    card:
      type: custom:button-card
      entity: climate.kitchen
      template: climate-card

The goal for my templates:

templates:
  header-card:
    show_state: false
    show_icon: false
    show_label: false
    show_name: true
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    color: yellow
    styles:
      card:
        - padding: 1%
        - background-color: rgba(43, 55, 78, 0.8)
        - border-radius: 15px
      grid:
        - grid-template-areas: '"n climate"'
        - grid-template-columns: 3fr 1fr
      name:
        - font-weight: 300
        - font-size: 40px
        - align-self: center
        - justify-self: center

  climate-card:
    show_name: false
    show_label: true
    label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
    styles:
      card:
        - background-color: rgba(100, 100, 100, 0.5)
        - box-shadow: 0px 0px
      grid:
        - grid-template-areas: '"l i"'
        - grid-template-columns: 1fr min-content

On the top picture, it is trying to get the “current_temperature” attribute of the light.kitchen entity, which does not have that attribute.

On the second image, I have changed the entity of the mothercard to climate.kitchen, and then i get the correct reading - but now the toggle light function does not work

I hope someone can help me along here!

Martinnygaard · September 14, 2021, 12:14pm

Well - i tried something, and copied all the style and setups in template.
So without changing anything, besides templifying it, now it works

So now for each header (One pr room) I can just use this code, and define light- & climate entity as well as the name of the room.

type: custom:button-card
template: header
name: Kitchen
entity: light.kitchen
custom_fields:
  climate:
    card:
      type: custom:button-card
      entity: climate.kitchen
      template: climate

YAML Template to define the button-cards used

button_card_templates:
  header:
    show_state: false
    show_icon: false
    show_label: false
    show_name: true
    hold_action:
      action: more-info
    tap_action:
      action: toggle
    color: yellow
    styles:
      card:
        - padding: 1%
        - background-color: rgba(43, 55, 78, 0.8)
        - border-radius: 15px
      grid:
        - grid-template-areas: '"n climate"'
        - grid-template-columns: 3fr 1fr
      name:
        - font-weight: 300
        - font-size: 40px
        - align-self: center
        - justify-self: center
  climate:
    show_name: false
    show_label: true
    label: '[[[ return entity.attributes.current_temperature + '' °C''; ]]]'
    styles:
      card:
        - background-color: rgba(100, 100, 100, 0.5)
        - box-shadow: 0px 0px
      grid:
        - grid-template-areas: '"l i"'
        - grid-template-columns: 1fr min-content```

gdreelin · September 15, 2021, 7:43pm

I was curious about how you did those light buttons? I like those controls all in one card or button. Could you post config for one of those?

gdreelin · September 15, 2021, 7:49pm

I love these sensor examples. I tried to use the code way down on the list but I could not get it to work right. Could you share just the code for one of them?

kongo09 · September 15, 2021, 8:05pm

There are some code examples above, e.g. here

If you are more specific, we can try to help.

paddy0174 · September 15, 2021, 8:06pm

@gdreelin
These ideas, the light and the raspi sensors, work with custom_fields. Something along the way like this:

card_light_slider:
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content  min-content
  custom_fields:
    item1:
      card:
        # here comes the top card, eg. the light
    item2:
      card:
        # here comes the bottom part of the card, like the slider

Both these items are configurable, so you can insert totally different cards here, like a light-slider or a mini-graph or whatever you want. Even another button-card (read button-card inside button-card) is possible.

stiw47 · September 16, 2021, 8:34pm

Hi guys. I was try for hour or two, but I’m not skilled with coding. Could someone help me what styles should I apply to get name and icon nice inline:

This is what I have until now, but it is not good:

  - type: custom:button-card
    color_type: card
    entity: group.yeelight_checkboxes_true
    name: Toggle Selected
    show_last_changed: false
    show_state: false
    tap_action:
      action: toggle
    state:
      - value: 'on'
        color: green
        icon: hass:toggle-switch
      - value: 'off'
        color: grey
        icon: hass:toggle-switch-off-outline
    styles:
      card:
        - height: 70px
        - border-radius: 5px
      img_cell:
        - display: flex
        - height: 450%
        - width: 40%
        - max-width: 500%
        - max-height: 500%
        - align-self: center
        - justify-self: end
        - justify-content: end
        - align-items: center
        - position: relative
        - padding-top: 16px
        - padding-right: 15px
      name:
        - justify-self: start
        - padding-left: 20px
        - font-size: 30px
        - font-weight: bold
        - padding-bottom: 20px

Many thanks in advance.

EDIT: No need, thanks, figured it out this way:

  - type: custom:button-card
    color_type: card
    entity: group.yeelight_checkboxes_true
    name: Toggle Selected
    show_last_changed: false
    show_state: false
    tap_action:
      action: toggle
    state:
      - value: 'on'
        color: green
        icon: hass:toggle-switch
      - value: 'off'
        color: grey
        icon: hass:toggle-switch-off-outline
    styles:
      card:
        - height: 70px
        - border-radius: 5px
      grid:
        - grid-template-areas: '"n i"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr
      name:
        - font-size: 30px
        - padding-left: 40px
        - font-weight: bold
      icon:
        - width: 180%
        - height: 180%
        - max-width: 200%
        - max-height: 200%
        - padding-left: 100px

I suppose it can be even better way (I don’t like that - padding-left: 100px at the end), but this is also working for now.

KameDomotics · September 17, 2021, 10:38pm

Is it possible to make the custom_fields background transparent?

custom_fields:
                title:
                  - align-self: start
                  - background-color: null
                  - position: absolute
                  - filter: opacity(90%)
                  - left: 0%
                  - top: 0%
                  - height: 10%
                  - width: 100%
                  - line-height: 0px
                  - font-size: 80%

paddy0174 · September 17, 2021, 11:15pm

Have you tried background-color: transparent;? Would be the only thing that comes to mind with CSS and transparent, but I truly don’t know, this is just a guess.

KameDomotics · September 18, 2021, 5:28am

I tried, but it didn’t work

pedolsky · September 18, 2021, 10:30am

The background of the custom_field is the same the card has. So background: transparent won’t make much sense. What should the whole card look like?