Lovelace: Button card

Mariusthvdb · September 4, 2021, 8:12pm

been some time since I adjusted some of my buttons/decluttering cards, so I have this question:
why does this more_info work:

    - type: custom:button-card
      template: button_meterget
      hold_action:
        action: more-info
        haptic: success
        entity: >
          [[[ return variables.sensor;]]]
      tap_action:
        haptic: light
        action: call-service
        service: zwave_js.refresh_value
        service_data:
          entity_id: >
            [[[ return variables.sensor;]]]
      triggers_update:
        - switch.[[id]]
        - sensor.[[id]]_actueel
      variables:
        get: 'Power: '
        sensor: sensor.[[id]]_actueel
        switch: switch.[[id]]
        unit: ' W'

but doesnt the entity: do its job:

      template: button_meterget
      entity: >
        [[[ return variables.sensor;]]]
      hold_action:
        action: more-info
        haptic: success
#        entity: >
#          [[[ return variables.sensor;]]]
      tap_action:
        haptic: light
        action: call-service
        service: zwave_js.refresh_value
        service_data:
          entity_id: >
            [[[ return variables.sensor;]]]
      triggers_update:
        - switch.[[id]]
        - sensor.[[id]]_actueel
      variables:
        get: 'Power: '
        sensor: sensor.[[id]]_actueel
        switch: switch.[[id]]
        unit: ' W'

?

must be simple, but please have a look, thanks.

fajrstartr · September 6, 2021, 6:56am

One more question.
Can i resize units of measurements font?
Make only °C smaller?

pedolsky · September 6, 2021, 9:13am

If you mean something like that:

Bild

here’s the piece of code:


state_display: >
  [[[ return Math.round(entity.state | 0) + `<span style='font-size: 14px;
  vertical-align: 32px'>°C</span>` ]]]

fajrstartr · September 6, 2021, 11:24am

Exactly what I meant, thank you again.

Mariusthvdb · September 9, 2021, 9:09pm

need some js help please…

id like to show something like this:

  state_display: >
    [[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`;
        var id = entity.entity_id.split('.')[1];
        var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} % - ${states['sensor.' + id + '_power'].state} W</span>`;
        return (entity.state == 'on') ? fakestate +' ' + fakelabel : null; ]]]

Schermafbeelding 2021-09-09 om 23.06.02

but only show the wattage provided a sensor.id_power is available. iow the fakelabel is either

var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} % - ${states['sensor.' + id + '_power'].state} W</span>`;

or when the sensor_power isnt available:

var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} % </span>`;

Schermafbeelding 2021-09-09 om 23.09.59

what would be the best way to accomplish that? please have a look? thanks!

thought not yet perfect, this is getting close (decided to take out the brightness in the fake state, as I have that already in the notification circle:

  state_display: >
    [[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`;
        var id = entity.entity_id.split('.')[1];
        var power = states['sensor.' + id + '_power'];
        var bri = Math.round(entity.attributes.brightness/2.55)
        var content = power? power.state + ' W': null;
        var fakelabel = `<span style="color: var(--active-color);"> ${content} </span>`;
        return fakestate +' ' + fakelabel; ]]]

Schermafbeelding 2021-09-09 om 23.52.05

@romrider, pardon my direct question please, but isnt there another way to do that (I know I can enter a hardcoded sensor I have for all light power sensors summed, but that would update all fields on any power change… also, I could do:

      - type: custom:button-card
        template: button_light
        entity: light.kist
        triggers_update: sensor.kist_power

but that would still require me to hard code that for all buttons.

I will if I must of course, but looking for a more elegant way first

Mariusthvdb · September 10, 2021, 8:17am

separate update, I believe this does it (and more…):

  state_display: >
    [[[ var statecolor = (entity.state == 'on') ? 'var(--active-color)' : 'var(--text-color-off)';
        var labelcolor = (entity.state == 'on') ? 'var(--button-card-light-color)' : 'orange';
        var id = entity.entity_id.split('.')[1];
        var power = states['sensor.' + id + '_power'];
        var bri = entity.attributes.brightness ? Math.round(entity.attributes.brightness/2.55) : '';
        var content = power? power.state + ' W': '';
        var divider = power? ': ' : '';
        var fakestate = `<span style="color: ${statecolor};"> ${entity.state}</span>`;
        var fakelabel = `<span style="color: ${labelcolor};"> ${content} </span>`;
        return fakestate + divider + fakelabel; ]]]

also took out the ‘null’ statements, because all of a sudden I saw ‘Null’ on the buttons, which was new for me tbh, maybe some backend change caused that. Anyways, the above allows me to style all section of the line, and guards for existence on all individual parts…pfff

Schermafbeelding 2021-09-10 om 10.13.24

almost forgot to mention: thanks to @bramski for his amazing PowerCalc allowing me to finally add power consumption for all our smart lights and other devices which Ive been looking for for over 4 years. (and forcing me to edit these buttons once again, revisiting JS/CSS … duh

Marcus_Lundblad · September 11, 2021, 5:36pm

custom_fields:
  wifi: |
    [[[
      return `<ha-icon
        icon="mdi:wifi"
        style="width: 20px; height: 20px; color: var(--icon-color);">
        </ha-icon><span>`
    ]]]

Is it possible to use a sensor to set the icon name?

pedolsky · September 11, 2021, 6:23pm

Yes:


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

By the way, there’s an orphaned <span> in your code.

Marcus_Lundblad · September 12, 2021, 12:40am

Thanks for the reply! But it did not turn out as I had imagined. I want the (mdi:icon… sensor) to be instead of the wifi icon. It is possible? See pic below:

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

pedolsky · September 12, 2021, 12:49am

What do you mean with that?

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!