Lovelace: Button card

[pigeldi]

I want to use the sensor.ha_uptime on a card.
While in a lovelace entity card the output is then something like “5 days ago”, the actual state of the entity and therefore what is displayed on the button card is “2022-01-22T18:50:12+00:00”.
So I would like to convert this.
This thread (Uptime in days hours and minutes - #53 by petro) seems to have the simple answer:

{{ utcnow() - states('sensor.ha_uptime') | as_datetime | default(utcnow()) }}

But how do I now put this into a custom-field? I am confused with all the different brackets, return statements and so on. I tried e.g.

custom_fields:
  started: '[[[ return ${utcnow() - states('sensor.ha_uptime') | as_datetime | default(utcnow())} ]]]'

but that gives a “bad indentation of a mapping entry” error about the minus sign. I am sure this is just a minor thing, can some JS expert tell me how to get this working?

[Mariusthvdb (Marius)]

thats because you use a jinja template. Button-card uses JS (javascript) templates

cant you use show_last_changed: true and let button cards handle things internally

yes you can:

really ugly but hey I did a quick test only:

        - type: custom:button-card
          template: styles_cf_notification
          entity: timer.tester
          aspect_ratio: 1/1
          show_state: true
          state_display: >
            [[[ return entity.state; ]]]
          custom_fields:
            notification:
              card:
                type: custom:button-card
                styles:
                  card:
                    - box-shadow: none
                    - font-size: 11px
                    - font-weight: bold
                entity: timer.tester
                show_state: true
                show_last_changed: true
                show_name: false
                show_icon: false

even counts the seconds in the first minute :

[pigeldi]

Indeed also a good idea. But do you know how I refer to the “last_changed” in a grid and the styles section? It actually does not consider that under this name if I want to format that on the button card, and I would like to prevent nesting another card, when I basically just want to have this in another line below other custom fields:

[Mariusthvdb (Marius)]

yes, that uses the position for label:

so, if you want the last_changed, you need show_label: true but don’t provide anything for it. Although, I am not 100% sure about that. anymore, need to check the docs on GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

[pigeldi]

Indeed it refers to the label, good hint, thanks.
Just not sure how I can then also place a label or some words in front of that without making a more complex grid or whatever, basically the aim was to return Icon, text and state like for the update information above in the card.

[Mariusthvdb (Marius)]

what I do in those cases is use state_display: and show_last_changed: true. that way you can template all you like for the state_display, and still have it show the last_changed in the correct format, without having to try and fiddle that in JS templates

[Tim_Br (Tim)]

Hi, I’m trying to use a variable inside a styles of a custom field like below. But it’s not working, if i replace the [[[ return variables.muziek ]]] part it does work. Can somebody tell me what i’m doing wrong? Thanks

    styles:
      custom_fields:
        wave:
          - display: |
              [[[
                if (states["sensor.spotify_source"].state == '[[[ return variables.muziek ]]]') return '';
                else if ((states['media_player.plex_shield'].attributes.media_content_type == 'music') & (states["media_player.plex_shield"].state == '[[[ return variables.shield ]]]')) return '';
                else if (states["media_player.gym"].state == '[[[ return variables.gym ]]]') return '';
                
                else return 'none';
              ]]] 
              

[pedolsky]

Simply use the entity_id as variable:

type: custom:button-card
triggers_update: all
variables:
  muziek: sensor.my_music
custom_fields:
  wave: |
    [[[
      if (states['sensor.spotify_source'].state == states[variables.muziek].state) return 'whatever';
      return 'none';
    ]]] 

[jamespreedy]

Hi folks, this is all amazing work.
I’ve really enjoyed seeing what everyone’s been sharing in this thread.

I’ve tried seeing if I can see if this has been posted before, but its 6228 posts long, so I may well have missed it somewhere!

What’s the best way of handling HA’s systemwide Light / Dark mode when using Button Card mod?

In HA Themes, you can use the format below, but I don’t see a way of specifying similar using the Button Card mod.

I have some elements I’d like to change away from the system default, but those changes appear the same whether HA is in light mode, or dark mode - I’d like to specify both separately.

  modes:
    light:
      border-color: "#E8E8E8"
    dark:
      border-color: "#1F1B24"

Hope that makes sense - thanks in advance.

[Ildar_Gabdullin]

Any thoughts?

@Ildar_Gabdullin

Is it possible to use a variable to define another variable?

Lovelace: Button card

Is it possible to use a variable to define another variable? This code returns an error “Cannot read properties of undefined (reading ‘LEVEL_CRITICAL’)”: variables: LEVEL_CRITICAL: "300" LEVEL_WARNING: "1000" STATE_COLOR: >- [[[ var STATE = entity.state; if (parseFloat(STATE) < parseFloat(variables.LEVEL_CRITICAL)) return 'red'; else if (parseFloat(STATE) < parseFloat(variables.LEVEL_WARNING)) return 'orange'; else return 'green'; ]]…

[Tim_Br (Tim)]

thanks, needed to replace ‘[[[ return variables.muziek ]]]’ simply with [variables.muziek ]

[flobidan]

Hello,
I am struggling with the JS.
My yeelight lamp has a night light, which is a true/false attribute of the lamp. So I would like to have a switch that can turn the night light on/off (works with a script), and color the icon depending on this attribute state.

So I try:

color: '[[[if (states["light.yeelight_schlafzimmer"].attributes.night_light == "true") return "yellow"; else return "red"]]]'

But that simply does not do anything, neither yellow nor red, the icon remains black (if i just put color: red it turns red, so it is not an error with indention or so).
The attribute I ask is generally also correct, the states… statement returns true/false as expected in the template section of the developer tools.
Can someone tell me what is wrong with this statement and what needs to be changed?

[pedolsky]

Drop the quotes:

color: '[[[if (states["light.yeelight_schlafzimmer"].attributes.night_light == true) return "yellow"; else return "red"]]]'

[flobidan]

That does not change anything. At least the if clause should have returned false then even before, leading to red. But also with your line the icon just stays black.
My full code:

type: custom:button-card
icon: mdi:weather-night
aspect_ratio: 1/1
color: '[[[if (states["light.yeelight_schlafzimmer"].attributes.night_light == true) return "yellow"; else return "red"]]]'
tap_action:
  action: call-service
  service: script.yeelight_schlafzimmer_nachtmodus

[pedolsky]

Compare with the docs. It has to be

styles:
  icon:
    - color: '[[[ … ]]]

[flobidan]

Thanks, that works.
But the docu also lists color in the main configuration, and by default it is supposed to refer to the color_type “icon”. Also if I put a color instead of a JS code, it does work. So it is not really logic in my opinion why you need to go via the styles section. Nevertheless this solved my issue.

[pedolsky]

Think it’s because there isno template function available for color.

[Abbadon89]

Can someone hep me solve that problem? i wish that circle with user photo was full, i tried everything with position and z index but nothing works.

type: custom:vertical-stack-in-cardcards: - entity: person.abbadon sho -...

type: custom:vertical-stack-in-card
cards:
  - entity: person.abbadon
    show_entity_picture: true
    show_name: false
    show_state: false
    styles:
      entity_picture:
        - border-radius: 50%
        - border: 6px solid
        - border-color: |
            [[[
              return states['sensor.michal_sleep_status'].state === 'Asleep'
              ? 'var(--state-icon-color)'
              : 'var(--state-icon-active-color)'
            ]]]
        - width: 110px
        - margin-top: -90px
        - padding: 0px
      card:
        - background: center no-repeat
        - background-image: url(/local/michal/Biuro.png 
 
        - height: 130px
        - padding: 0px
    type: custom:button-card
  - type: conditional
    conditions:
      - entity: sensor.michal_do_domu
        state_not: '0'
    card:
      type: custom:bar-card
      max: 500
      height: 12
      style: |
        bar-card-value{
        text-align: center;
        vertical-align: middle;
        left: -190px;
 
         text-shadow: 0px 1px #000000;
 
        }
      entities:
        - entity: sensor.michal_do_domu
      positions:
        icon: 'off'
        indicator: 'on'
        minmax: 'off'
        value: inside
      name: ' '
  - type: horizontal-stack
    cards:
      - entity: proximity.michal
        show_entity_picture: true
        show_name: false
        font-size: 11px
        show_state: true
        icon: mdi:map-marker-distance
        styles:
          card:
            - height: 40px
            - background: none
            - padding-top: 3px
            - margin-bottom: 5px
            - font-size: 11px
        state:
          - operator: '=='
            value: 0
            color: var(--state-icon-color)
          - operator: '!='
            value: 0
            color: var(--state-icon-active-color)
        type: custom:button-card
      - entity: sensor.armor_11t_battery_level
        show_entity_picture: true
        show_name: false
        show_state: true
        show_label: false
        font-size: 11px
        styles:
          card:
            - height: 40px
            - background: none
            - padding-top: 3px
            - margin-bottom: 5px
            - font-size: 11px
          icon:
            - color: |
                [[[
                  if (states['binary_sensor.armor_11t_is_charging'].state == 'on' )
                    return "var(--state-icon-active-color)";
                  return "var(--state-icon-color)";
                ]]]
        icon: |
          [[[
            if (states['binary_sensor.armor_11t_is_charging'].state == 'on')
              return 'mdi:battery-charging-' + Math.ceil(entity.state / 10) * 10;
             return 'mdi:battery-' + Math.ceil(entity.state / 10) * 10;;
          ]]]
        type: custom:button-card
      - entity: sensor.armor_11t_detected_activity
        show_entity_picture: true
        show_name: false
        show_last_changed: true
        show_state: false
        show_label: true
        styles:
          card:
            - height: 40px
            - background: none
            - padding: 3px
            - magin: 0px
            - font-size: 11px
        state:
          - value: still
            icon: mdi:human-female
            label: null
            color: var(--state-icon-color)
            font-size: 11px
        type: custom:button-card
      - entity: sensor.armor_11t_phone_state
        show_entity_picture: true
        show_name: false
        font-size: 11px
        show_state: false
        show_last_changed: true
        styles:
          card:
            - height: 40px
            - background: none
            - padding-top: 3px
            - margin-bottom: 5px
            - font-size: 11px
        state:
          - value: ringing
            icon: mdi:phone-ring
            color: var(--state-icon-active-color)
          - value: idle
            icon: mdi:phone-hangup
            color: var(--state-icon-color)
          - value: offhook
            icon: mdi:phone-in-talk
            color: var(--state-icon-active-color)
        type: custom:button-card
      - entity: sensor.czas_do_alarmu_michal
        show_entity_picture: true
        show_name: false
        show_state: true
        icon: mdi:alarm
        state:
          - value: none
            color: var(--state-icon-color)
          - operator: '!='
            value: none
            color: var(--state-icon-active-color)
        styles:
          card:
            - height: 40px
            - background: none
            - padding-top: 3px
            - margin-bottom: 5px
            - font-size: 11px
        type: custom:button-card

[pedolsky]

@Abbadon89

- margin-top: -90px

Delete this line.

[Abbadon89]

I want this to be high but not cutted