Lovelace: Button card

Wow…, that looks like a lot to me… :sweat_smile: :sweat_smile:
I’m new in home assistant, I will try to learn and understand it.

I really appreciate for sharing me the config and thank you very much… :pray: :pray: :pray:

Team

could you please help me with a hint how to change background of this cased based on a range coming from the sensor? e.g. if above 60 turn background orange, above 120 turn it red…

styles:
  card:
    - background: |
        [[[ 
          if (entity.state > 60) return 'orange';
          if (entity.state > 120) return 'red';
        ]]]
1 Like

thank you, it works!

i noticed that now that i removed replaced device ID with command: popup that the screen is popping up on every single device. Is their a way i can specify which devices see the popup?

Use fire-dom-event

i changed the service from browser_mod.popup to fire-dom-event now im getting this error:

image

this is where i changed it:

image

Please compare your latest code with the linked code.

sorry not sure what you mean. all i did was change the service from “browser_mod.popup” to “fire-dom-event” Below is the full code i am using. any assistance you can provide is greatly apricated


  5IconsWithTstatLaundryRoom:
    card:
      custom_fields:
        icon1: |
          [[[
            if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
              return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
              return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]   
        icon2: |
          [[[
            if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
              return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
              return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]     
        icon3: |
          [[[
            if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
              return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
              return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]       
        icon4: |
          [[[
            if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
              return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
              return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]   
        icon5: |
          [[[
            if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
              return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
              return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]
        icon6: |
          [[[
            if (states['[[temp_ent]]'].state == "heat")
              return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[temp_ent]]'].state == "cool")
              return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]                      
        stat1: |
          [[[
            return `<ha-icon
              icon="mdi:[[stat1_icon]]"
              style="width: 15px; height: 15px; color: steelblue;">
              </ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
          ]]]   
        stat2: |
          [[[
            return `<ha-icon
              icon="mdi:[[stat2_icon]]"
              style="width: 15px; height: 15px; color: steelblue;">
              </ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
          ]]]  
      entity: '[[entity]]'
      name: '[[name]]'
      show_icon: false
      show_label: false
      show_state: false
      size: 70%
      state:
        - styles:
            custom_fields:
              icon6:
                - animation: blink 2s ease infinite
                - color: crimson
          value: heat
        - styles:
            custom_fields:
              icon6:
                - animation: blink 2s ease infinite
                - color: lightblue
          value: cool
      styles:
        card:
          - font-size: 12px
          - padding: 5px 3px 5px 3px
        custom_fields:
          icon1:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";                 
                  else return null;
                ]]]                   
            - color: |
                [[[ 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]"; 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]"; 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";                   
                  else return null;
                ]]]            
          icon2:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";                 
                  else return null;
                ]]]                   
            - color: |
                [[[ 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]"; 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]"; 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";                   
                  else return null;
                ]]]                    
          icon3:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]"; 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]"; 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
                  else return null;
                ]]]                    
          icon4:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 

                  if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]"; 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]"; 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";    
                  else return null;
                ]]]                    
          icon5:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]"; 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]"; 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";                   
                  else return null;
                ]]]   
          icon6:
            - padding: 0px 0px 0px 0px
          stat1:
            - justify-self: start
            - padding: 0px 0px 0px 0px
            - '--text-color-sensor': |
                [[[ 
                  if (states["[[stat1_ent]]"].state < 20) return "lightblue"; 
                  if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine"; 
                  else return "tomato";
                ]]]
          stat2:
            - justify-self: start
            - padding: 0px 0px 0px 0px
            - '--text-color-sensor': |
                [[[ 
                  if (states["[[stat2_ent]]"].state == 'none') return "cyan"; 
                  
                  else return "lime";
                ]]]                   
        grid:
          - grid-template-areas: >-
              ". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
              stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
          - grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
          - grid-template-rows: 2fr 1fr 1fr 3fr
          - padding: 0px 0px 0px 0px
        icon:
          - place-self: center
          - padding: 0px 0px 3px 0px
        name:
          - justify-self: start
          - font-size: 16px
          - padding: 0px 0px 0px 3px
      tap_action:
        action: call-service
        service: fire-dom-event
        service_data:
          card:
            cards:
              - cards:
                  - cards:
                      - cards:
                          - color_type: '[[pu_light1_colortype]]'
                            dbltap_action:
                              action: more-info
                            entity: '[[pu_light1_ent]]'
                            hold_action:
                              action: more-info
                            name: '[[pu_light1_name]]'
                            show_last_changed: true
                            show_state: false
                            size: 40%
                            styles:
                              card:
                                - height: 70px
                                - padding: 0px 0px 0px 0px
                              grid:
                                - grid-template-areas: '"i ." "i n" "i l" "i ."'
                                - grid-template-columns: 2fr 3fr
                                - grid-template-rows: 1fr 3fr 1fr 1fr
                              icon:
                                - padding: 4px 0px 8px 10px
                              label:
                                - font-size: 11px
                                - padding: 0px 25px 20px 0px
                                - justify-self: right
                                - color: '#7babf7'
                                - align-self: start
                              name:
                                - font-size: 20px
                                - justify-self: right
                                - padding: 0px 25px 0px 0px
                                - align-self: start
                            tap_action:
                              action: toggle
                            type: custom:button-card
                          - color_type: '[[pu_light2_colortype]]'
                            dbltap_action:
                              action: more-info
                            entity: '[[pu_light2_ent]]'
                            hold_action:
                              action: more-info
                            name: '[[pu_light2_name]]'
                            show_last_changed: true
                            show_state: false
                            size: 40%
                            styles:
                              card:
                                - height: 70px
                                - padding: 0px 0px 0px 0px
                              grid:
                                - grid-template-areas: '"i ." "i n" "i l" "i ."'
                                - grid-template-columns: 2fr 3fr
                                - grid-template-rows: 1fr 3fr 1fr 1fr
                              icon:
                                - padding: 4px 0px 8px 10px
                              label:
                                - font-size: 11px
                                - padding: 0px 25px 20px 0px
                                - justify-self: right
                                - color: '#7babf7'
                                - align-self: start
                              name:
                                - font-size: 20px
                                - justify-self: right
                                - padding: 0px 25px 0px 0px
                                - align-self: start
                            tap_action:
                              action: toggle
                            type: custom:button-card
                        type: horizontal-stack
                    type: custom:vertical-stack-in-card
                type: horizontal-stack
              - cards:
                  - color_type: '[[icon1_colortype]]'
                    entity: '[[icon1_ent]]'
                    hold_action:
                      action: '[[icon1_holdaction]]'
                    icon: mdi:[[icon1_icon2]]
                    name: '[[icon1_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon1_icon1]]
                        styles:
                          icon:
                            - color: '[[icon1_color1]]'
                            - animation: '[[icon1_animate]]'
                        value: '[[icon1_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon1_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon2_colortype]]'
                    entity: '[[icon2_ent]]'
                    hold_action:
                      action: '[[icon2_holdaction]]'
                    icon: mdi:[[icon2_icon2]]
                    name: '[[icon2_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon2_icon1]]
                        styles:
                          icon:
                            - color: '[[icon2_color1]]'
                            - animation: '[[icon2_animate]]'
                        value: '[[icon2_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon2_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon3_colortype]]'
                    entity: '[[icon3_ent]]'
                    hold_action:
                      action: '[[icon3_holdaction]]'
                    icon: mdi:[[icon3_icon2]]
                    name: '[[icon3_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon3_icon1]]
                        styles:
                          icon:
                            - color: '[[icon3_color1]]'
                            - animation: '[[icon3_animate]]'
                        value: '[[icon3_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon3_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon4_colortype]]'
                    entity: '[[icon4_ent]]'
                    hold_action:
                      action: '[[icon4_holdaction]]'
                    icon: mdi:[[icon4_icon2]]
                    name: '[[icon4_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon4_icon1]]
                        styles:
                          icon:
                            - color: '[[icon4_color1]]'
                            - animation: '[[icon4_animate]]'
                        value: '[[icon4_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon4_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon5_colortype]]'
                    entity: '[[icon5_ent]]'
                    hold_action:
                      action: '[[icon5_holdaction]]'
                    icon: mdi:[[icon5_icon2]]
                    name: '[[icon5_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon5_icon1]]
                        styles:
                          icon:
                            - color: '[[icon5_color1]]'
                            - animation: '[[icon5_animate]]'
                        value: '[[icon5_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon5_tapaction]]'
                    type: custom:button-card
                type: horizontal-stack
              - color_type: '[[pu_therm_colortype]]'
                custom_fields:
                  cardy:
                    card:
                      entity: '[[pu_climate_ent]]'
                      hide:
                        state: true
                      icon:
                        cool: mdi:snowflake
                        heating: mdi:fire
                        'off': mdi:stop-circle-outline
                      modes:
                        cool: null
                        heating: null
                        'off': null
                      name: Thermostat
                      sensors:
                        - attribute: hvac_action
                          entity: '[[pu_climate_ent]]'
                          name: Currently
                        - entity: '[[pu_climate_hum]]'
                          name: Humidity
                      type: custom:simple-thermostat
                entity: light.curtis
                show_icon: false
                show_name: false
                styles:
                  grid:
                    - grid-template-areas: '"cardy"'
                    - grid-template-columns: 1fr
                    - grid-template-rows: 1fr
                type: custom:button-card
              - cards:
                  - align_header: left
                    align_icon: left
                    animate: true
                    entities:
                      - color: '#f2ab48'
                        entity: '[[pu_climate_temp]]'
                        index: 0
                        name: LR
                    font_size: 80
                    hours_to_show: 48
                    name: Temperature - 48h
                    points_per_hour: 0.25
                    show:
                      fill: false
                      labels: true
                      points: hover
                    type: custom:mini-graph-card
                  - align_header: left
                    align_icon: left
                    animate: true
                    entities:
                      - color: '#57a5f2'
                        entity: '[[pu_climate_hum]]'
                        index: 0
                        name: LR
                    font_size: 80
                    hours_to_show: 48
                    name: Humidity - 48h
                    points_per_hour: 0.25
                    show:
                      fill: false
                      labels: true
                      points: hover
                    type: custom:mini-graph-card
                type: horizontal-stack
            type: custom:vertical-stack-in-card
          command: popup
          large: false
          title: '[[pu_title]]'
      triggers_update:
        - '[[icon1_ent]]'
        - '[[icon2_ent]]'
        - '[[icon3_ent]]'
        - '[[icon4_ent]]'
        - '[[icon5_ent]]'
        - '[[icon6_ent]]'
        - '[[stat1_ent]]'
        - '[[stat2_ent]]'
        - '[[pu_light1_ent]]'
        - '[[pu_light2_ent]]'
      type: custom:button-card**strong text**

This is the linked code:


tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    large: false
    hide_header: false
    title:
    card:
      type: 

Thank you. can you point me in the right direction as to where i need to add this code?

That’s part of your code including another card which shall popup on click:


      tap_action:
        action: call-service
        service: fire-dom-event
        service_data:
           card:
               - type: …

But the popup action has to look like this:


tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    # large: false  ## optional
    # hide_header: false   ## optional
    # title:   ## optional
    card:
      type: …

I am using a style on a few states. First it checks what the attribute “message” is and then the state of a sensor.
Now I want that the template is only true when the sensor is “Heute” and it is before 2pm. How can I do that?
I should look like this

... && ((states['sensor.abfall_morgen'].state == 'Morgen') || ((states['sensor.abfall_morgen'].state == 'Heute') && Timecheck)) ?...

actual code:

      - background-color: >
          [[[
            return (states[entity.entity_id].attributes.message == 'Biotonne in Memmingen') || (states[entity.entity_id].attributes.message == 'Restmülltonne in Memmingen') || (states[entity.entity_id].attributes.message == 'Altpapier') && ((states['sensor.abfall_morgen'].state == 'Morgen') || (states['sensor.abfall_morgen'].state == 'Heute')) ?
              'rgba(255, 255, 255, 0.8)' :
              'rgba(115, 115, 115, 0.2)';
          ]]]

thanks for your prompt reply. Just to confirm, all i have to do is replace the tap action i have now with the one you pasted above? sorry im just trying to understand where the change is that i need to make

Yes, that should do the trick. The last line of that code ( type: …) mean the card that you want to popup.


can someone help a newbie

I want to obtain the same aspect of the backlight to a card, someone could tell me how to do it, I would appreciate an example of the card code and the template, I go little by little first only for a light entity with nothing else
thanks

2 Likes

Here comes the glow:


state:
  - value: 'on'
    styles:
      card:
        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - transition: all 2s ease

7 Likes

Is it possible to lock the button only if the entity’s current state is ‘off’? I tried the following but it did not work, the button is locked no matter state.

lock:
  enabled: '[[[ if (entity.state == "off") return "true"; else return "false" ]]]'
  unlock: hold

I use this which works great.

    lock:
      enabled: '[[[ return entity.state === "off"; ]]]'
      duration: 5
      unlock: hold
2 Likes

oh awesome. that was easy, lol. Thank you, kindly.