Lovelace: Button card

Share your Projects! Dashboards & Frontend
3097

Hi

I’ve set up conditional cards to show a banner at the top of my lovelace when sensors are triggered ie. water leak.

I currently just have a colored bar that blinks with text showing what has been detected but would like to add an icon before the text, when I try to use the ‘layout’ option of ‘icon_name’ the text moves to the right but no icon shows, can someone please let me know where I’m going wrong?

    - type: conditional
      conditions:
        - entity: input_boolean.water_leak
          state: "on"
      card:
        type: horizontal-stack
        cards:
            - !include ../includes/h-space-1.yaml
            - type: custom:button-card
              style: |
                ha-card {
                    border-radius: 5px;
                    box-shadow: none;
                }
              name: WATER LEAK DETECTED
              icon: mdi:pipe-leak
              show_icon: true
              layout: icon_name
              color_type: card
              color: rgb(255,155,0)
              size: 10%
              styles:
                card:
                  - height: 20px
                  - padding: 5%
                  - animation: blink 1s ease infinite
                name:
                  - justify-self: start
                  - font-family: var(--font-family)
                  - font-size: 16px
                  - font-weight: bold
                  - color: rgb(250,250,250)
              tap_action:
                action: navigate
                navigation_path: /lovelace/notifications
              hold_action:
                action: call-service
                service: input_boolean.turn_off
                service_data:
                  entity_id: input_boolean.water_leak
            - !include ../includes/h-space-1.yaml

Worked it out, because I’d set the card height the icon was there but so tiny it couldn’t be seen. :roll_eyes:

3098

having a bit of an issue with the order of states evaluations of my light entities.

Used to have ‘on’, ‘off’, and ‘unavailable’. Working perfectly for ‘years’…

now need to add an extra template operator because I first need to check if these lights are ‘reachable’ (hue lights with allow_unreachable: true)

this template does that:

  state:

    - operator: template
      value: >
        [[[
          var id = entity.entity_id.split('.')[1] ;
          var reachable = 'binary_sensor.' + id + '_reachable';
          return states[reachable].state == 'off' ;
        ]]]

however, I need to put first in the order, since otherwise the ‘on’ and ‘off’ styles are used first (remember these lights, though unreachable show ‘on’ and ‘off’ as states…I know filed an issue and PR/FR for that).

all going well except for the lights that don’t have a binary_sensor.xxx_reachable because they are always online.

they either dont show up (an Ikea light) or show unavailable (a Hue light without binary_sensor)

This long story leads to 2 questions:

1- why doesn’t the engine, when this template is evaluated to not being true, simply step to the next state/operator?
2- can I add a condition for the existence of the binary_sensor, to prevent it from being evaluated with an error

Ive tried things like:

 - operator: template
      value: >
        [[[
          var id = entity.entity_id.split('.')[1] ;
          var reachable = 'binary_sensor.' + id + '_reachable';
          if (reachable) return states[reachable].state == 'off' ;
        ]]]

but didn’t have a lot of luck just yet…

please have a look?
thanks!

update

experimenting with:

    - operator: template
      value: >
        [[[
          var id = entity.entity_id.split('.')[1] ;
          var reachable = 'binary_sensor.' + id + '_reachable';
          return states[reachable] && states[reachable].state == 'off' ;
        ]]]

now seems to work. Now have to wait until the night kicks in and my outside lights truly turn on and become reachable…

3099

Hi, I’m trying something similar, see if you can help me please:
this is working

        - operator: template
          value: >
             [[[ return states['[[entity_3]]'].state.split('.')[0] == "Chubascos"
              || states['[[entity_3]]'].state.split('.')[0] == "LLuvia"
              && states['[[entity_2]]'].state == "above_horizon" ]]]
          entity_picture: /local/images/clima/weather_icons/animated/rainy-6.svg

but this doesnt work:

        - operator: template
          value: >
             [[[ 
               var tiempo = states['[[entity_3]]'].state.split('.')[0];
               var sol = states['[[entity_2]]'].state;
               return states[tiempo].state == "Chubascos" || states[tiempo].state == "LLuvia" && states[sol].state == "above_horizon";
             ]]] 
          entity_picture: /local/images/clima/weather_icons/animated/rainy-6.svg 

        - operator: template
          value: >
             [[[ 
               var tiempo = states['sensor.prediccion_diaria'].state.split('.')[0];
               var sol = states['sun.sun'].state;
               return states[tiempo].state == "Chubascos" ||  states[tiempo].state == "LLuvia" && states[sol].state == "above_horizon";
             ]]] 
          entity_picture: /local/images/clima/weather_icons/animated/rainy-6.svg
3100

please explain what ‘is not working’ and what you want it to do?

3101

I would like to abbreviate the code with the 'var ’ because I want to put more conditionals,the first one works by putting the entity_2 and entity_3 variables inside the card but the other 2 do not

simply the card with the second and third template disappears

3102

Hi everyone,

I’, trying to use counters + custom button card in order to have an inventory style panel in home assistant. It’s gonna be use to track how many drams are left in each of my scotch bottle in my cabinet.

Here’s a snapshot of what I’ve been able to achieve up to now.

scotch_inventory
scotch_inventory1020×308 12.8 KB

Here’s the code that need optimization/fixing :

color: red
color_type: icon
entity: counter.bottle1
hold_action:
  action: call-service
  service: counter.reset
  service_data:
    entity_id: entity
icon: 'mdi:battery-unknown'
label: Label test
lock:
  duration: 5
  enabled: 'yes'
  unlock: tap
name: Octomore 10
show_state: 'yes'
show_unit: 'yes'
size: 60px
state:
  - icon: 'mdi:battery'
    operator: ==
    value: '100'
  - icon: 'mdi:battery-90'
    operator: '>='
    value: '90'
  - icon: 'mdi:battery-80'
    operator: '>='
    value: '80'
  - icon: 'mdi:battery-70'
    operator: '>='
    value: '70'
  - icon: 'mdi:battery-60'
    operator: '>='
    value: '60'
  - icon: 'mdi:battery-50'
    operator: '>='
    value: '50'
  - icon: 'mdi:battery-40'
    operator: '>='
    value: '40'
  - icon: 'mdi:battery-30'
    operator: '>='
    value: '30'
  - icon: 'mdi:battery-20'
    operator: '>='
    value: '20'
  - icon: 'mdi:battery-10'
    operator: '>='
    value: '10'
  - icon: 'mdi:battery-outline'
    operator: <
    value: '10'
styles:
  card:
    - background-color: silver
    - font-size: 18px
    - color: Red
  grid:
    - grid-template-areas: '"n i" "s i" "l i"'
    - grid-template-columns: 50% 50%
  name:
    - font-weight: bold
    - font-size: 18px
    - color: white
tap_action:
  action: call-service
  service: counter.decrement
  service_data:
    entity_id: entity
type: 'custom:button-card'
units: '%’

Apart from advices to optimize the cards, I’d like to introduce conditional formating for state value (i.e. 95 %) so it appears green, yellow or red depending on the value (i.e. green from 50 to 100%, yellow from 15% to 49% and red under 15%).

Also, I’ve tried to optimize the states by having the icon update dynamically based on state (instead of programming multiple instances like I did) but I couldn’t achieve it.

Thanks to anyone who would take the time to help me :slight_smile:

3103

They’ll only have the same color if they are both lights. Otherwise you need to create a state on style and a state off style.

3104

first, there’s no reason to use card-mod and the custom:button-card. All customizations should be done in the card styles.

second, are you using chrome?

3105

please properly format your code and I can help create a template.

3106

@petro I would like have “on” state color customized - it actually works fine and “off” state color for all icons the same => default.
At he moment I have 5 icons where I am not able to achieve it and not able to identify why.

3107

If you built the state with - value: ‘on’ and - value: ‘off’, and you have entities that are not working, then they don’t have a state of on or off. But if you are using the custom card you posted above, it will not work because of the changes in 105.

3108

Well, I’m a bit confused now. Must read breaking changes for 105 again and more carefuly.

3109

Yes, that’s why I said setup the ‘states:’ functionality. Maybe you don’t know what that is… It’s the style based states.

state:
- value: 'on'
  styles:
    icon:
    - color: blah
- value: 'off'
  styles:
    icon:
    - color: blah
3110

Is there any way how to keep “default” state color through all themes?

3111

yes use var(--paper-item-icon-active-color) as your on color. You don’t need to implement off because that’s just the default color.

3112

Thanks a lot. :+1:

3113

Please let me ask if we can have a single button automatically switch background pictures following 2 different sensors.

Use case : trash button showing today’s and tomorrow’s pickup type alternately.

I know how to have a single button flash based on the entity being ‘on’ but haven’t seen this functionality in 1 button yet . I think…

Perfection would be it not to switch if tomorrow’s trash is None :wink:

Thanks for having a look and helping me!

trying to follow this https://css-tricks.com/css-basics-using-multiple-backgrounds/ by entering:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}"),url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

simply shows me the first picture, if I try:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}")`,`url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

the last picture is displayed, no alteration as promised in the article…no errors in the inspector on both accounts.

for the sake of it I even tried:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}")`,
            return `url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

but that is obviously very incorrect, showing no button at all and:

SyntaxError: Unexpected keyword 'return'

in inspector.

final try for now:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture},${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

shows an empty button, no error I inspector.

even hard coded wont work:

    - background-image: >
        [[[ return `url("/local/mijnafvalwijzer/kliko_geen.png,/local/mijnafvalwijzer/plastic.png")`; ]]]

or

    - background-image: >
        [[[ return `url("/local/mijnafvalwijzer/kliko_geen.png"),url("/local/mijnafvalwijzer/plastic.png")`; ]]]

can this at all be done? @romrider would you know the syntax to get this going?

3114

Looking for something like this? @Mariusthvdb
I’m talking about the badges (you had troubles getting it the way you want).

image
image1125×2436 312 KB

1 Like
3115

Yes Jim, what’s the setting you use for these fields ? Looking at partly cloudy eg?

1 Like
3116

@Mariusthvdb

  custom_fields:
    notification:
      - background-color: "{{ background_color }}"
      - color: var(--paper-card-background-color)
      - border-radius: 12px
      - overflow: visible
      - position: absolute
      - right: 7px
      - top: 7px
      - padding: 0px 5px
      - height: 22px
      - min-width: 12px
      - font-size: 10px
      - line-height: 22px
      - font-weight: bold
      - text-transform: capitalize
1 Like