Skip to content

Instantly share code, notes, and snippets.

@Resinchem

Resinchem/custom_button_card_samples.yaml

Created April 7, 2023 21:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Resinchem/2972719d32014dce644b9fff6b1b223c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Resinchem/2972719d32014dce644b9fff6b1b223c to your computer and use it in GitHub Desktop.
Download ZIP
Example Custom Button Card Use - from YouTube video: https://youtu.be/5Pi21pqfbxA
Raw
custom_button_card_samples.yaml
cards:
- type: vertical-stack
cards:
- text: Physical Switches / Lights
type: custom:text-divider-row
- square: false
columns: 4
type: grid
cards:
- aspect_ratio: 1.2/1
color: rgb(252,255,158)
color_type: icon
entity: switch.kitchen_sink_light
icon: mdi:ceiling-light
name: Kitchen Sink
tap_action:
action: toggle
type: custom:button-card
- aspect_ratio: 1.2/1
color: rgb(252,0,158)
color_type: card
entity: switch.family_room_lamp
icon: mdi:lamp
name: Family Room
tap_action:
action: toggle
type: custom:button-card
- aspect_ratio: 1.2/1
color: rgb(252,255,158)
color_type: card
entity: switch.driveway_lights
icon: mdi:coach-lamp
name: Driveway
tap_action:
action: toggle
type: custom:button-card
- aspect_ratio: 1.2/1
color: rgb(252,255,158)
color_type: card
entity: switch.master_bedroom_lamp
icon: mdi:lamp
name: Master BR
tap_action:
action: toggle
type: custom:button-card
- text: Template (virtual) Switches
type: custom:text-divider-row
- type: grid
square: false
columns: 4
cards:
- aspect_ratio: 1.2/1
color: rgb(0,255,0)
color_type: card
entity: light.basement
show_name: false
show_state: true
state:
- color: rgb(200,0,0)
icon: mdi:lightbulb-off
value: 'off'
type: custom:button-card
- aspect_ratio: 1.2/1
color_type: card
entity: switch.sw_basement_100
icon: mdi:circle-slice-8
name: 100%
state:
- color: rgb(0,128,0)
value: 'on'
type: custom:button-card
- aspect_ratio: 1.2/1
color_type: card
entity: switch.sw_basement_75
icon: mdi:circle-slice-6
name: 75%
state:
- color: rgb(0,75,0)
value: 'on'
type: custom:button-card
- aspect_ratio: 1.2/1
color_type: card
entity: switch.sw_basement_50
icon: mdi:circle-slice-4
name: 50%
state:
- color: rgb(0,50,0)
value: 'on'
type: custom:button-card
- text: Binary Sensors
type: custom:text-divider-row
- square: false
columns: 4
type: grid
cards:
- aspect_ratio: 1.2/1
color: rgb(0,255,0)
color_type: icon
entity: binary_sensor.garage_laundry_door
name: Laundry Door
show_name: true
show_state: false
state:
- color: rgb(255,0,0)
icon: mdi:door
value: 'off'
- color: rgb(0,255,0)
icon: mdi:door-open
styles:
icon:
- animation: blink 2s ease infinite
value: 'on'
type: custom:button-card
- aspect_ratio: 1.2/1
color: rgb(0,255,0)
color_type: icon
entity: binary_sensor.garage_service_door
name: Service Door
show_name: true
show_state: false
state:
- color: rgb(255,0,0)
icon: mdi:door
value: 'off'
- color: rgb(0,255,0)
icon: mdi:door-open
styles:
icon:
- animation: blink 2s ease infinite
value: 'on'
type: custom:button-card
- aspect_ratio: 1.2/1
color: rgb(0,255,0)
color_type: icon
entity: cover.garage_door
name: Garage Door
show_name: false
show_state: true
state:
- color: rgb(255,0,0)
icon: mdi:garage
value: closed
- color: rgb(0,255,0)
icon: mdi:garage-open
styles:
icon:
- animation: blink 2s ease infinite
value: open
type: custom:button-card
- aspect_ratio: 1.2/1
color-type: card
entity: binary_sensor.mailbox_zb
name: Door Status
show_state: true
state:
- color: rgb(128,128,128)
icon: mdi:mailbox-outline
value: 'off'
- color: rgb(0,255,0)
icon: mdi:mailbox-open-up-outline
styles:
icon:
- animation: blink 2s ease infinite
value: 'on'
type: custom:button-card
- text: Input Booleans
type: custom:text-divider-row
- aspect_ratio: 5/1
color_type: card
entity: input_boolean.voice_notifications
name: Voice Notifications - ON
icon: mdi:account-voice
state:
- color: rgb(0,0,255)
value: 'on'
- color: rgb(50,50,50)
icon: mdi:account-voice-off
name: Voice Notifications - OFF
value: 'off'
type: custom:button-card
- square: false
columns: 4
type: grid
cards:
- aspect_ratio: 1.3/1
color: rgb(3, 157, 252)
color_type: card
entity: input_boolean.notify_washer
icon: mdi:account-voice
name: Washer
state:
- color: rgb(70,70,70)
icon: mdi:account-voice-off
value: 'off'
type: custom:button-card
- aspect_ratio: 1.3/1
color: rgb(3, 157, 252)
color_type: card
entity: input_boolean.notify_dryer
icon: mdi:account-voice
name: Dryer
state:
- color: rgb(70,70,70)
icon: mdi:account-voice-off
value: 'off'
type: custom:button-card
- aspect_ratio: 1.3/1
color: rgb(3, 157, 252)
color_type: card
entity: input_boolean.notify_ender3
icon: mdi:account-voice
name: Printer
state:
- color: rgb(70,70,70)
icon: mdi:account-voice-off
value: 'off'
type: custom:button-card
- aspect_ratio: 1.3/1
color: rgb(3, 157, 252)
color_type: card
entity: input_boolean.notify_mail
icon: mdi:account-voice
name: Mail
state:
- color: rgb(70,70,70)
icon: mdi:account-voice-off
value: 'off'
type: custom:button-card
- type: vertical-stack
cards:
- text: Numeric Entities / Sensors
type: custom:text-divider-row
- square: false
columns: 4
type: grid
cards:
- aspect_ratio: 1.2/1
entity: sensor.mailbox_zb_battery
name: Mailbox
show_state: true
state:
- color: rgb(0,255,0)
icon: mdi:battery
operator: '>='
value: 95
- color: rgb(0,255,0)
icon: mdi:battery-90
operator: '>='
value: 85
- color: rgb(0,255,0)
operator: '>='
value: 75
icon: mdi:battery-80
- color: rgb(0,255,0)
operator: '>='
value: 65
icon: mdi:battery-70
- color: rgb(0,255,0)
operator: '>='
value: 55
icon: mdi:battery-60
- color: rgb(0,255,0)
icon: mdi:battery-50
operator: '>='
value: 45
- color: rgb(0,255,0)
icon: mdi:battery-40
operator: '>='
value: 31
- color: rgb(255,255,0)
icon: mdi:battery-30
operator: '>='
value: 25
- color: rgb(255,255,0)
icon: mdi:battery-20
operator: '>='
value: 16
- color: rgb(255,0,0)
icon: mdi:battery-10
operator: <
styles:
icon:
- animation: blink 2s ease infinite
value: 16
type: custom:button-card
- aspect_ratio: 1.2/1
entity: sensor.garage_laundry_door_battery
name: Laundry Door
show_state: true
state:
- color: rgb(0,255,0)
icon: mdi:battery
operator: '>='
value: 95
- color: rgb(0,255,0)
icon: mdi:battery-90
operator: '>='
value: 85
- color: rgb(0,255,0)
operator: '>='
value: 75
icon: mdi:battery-80
- color: rgb(0,255,0)
operator: '>='
value: 65
icon: mdi:battery-70
- color: rgb(0,255,0)
operator: '>='
value: 55
icon: mdi:battery-60
- color: rgb(0,255,0)
icon: mdi:battery-50
operator: '>='
value: 45
- color: rgb(0,255,0)
icon: mdi:battery-40
operator: '>='
value: 31
- color: rgb(255,255,0)
icon: mdi:battery-30
operator: '>='
value: 25
- color: rgb(255,255,0)
icon: mdi:battery-20
operator: '>='
value: 16
- color: rgb(255,0,0)
icon: mdi:battery-10
operator: <
styles:
icon:
- animation: blink 2s ease infinite
value: 16
type: custom:button-card
- aspect_ratio: 1.2/1
entity: sensor.garage_service_door_battery
name: Service Door
show_state: true
state:
- color: rgb(0,255,0)
icon: mdi:battery
operator: '>='
value: 95
- color: rgb(0,255,0)
icon: mdi:battery-90
operator: '>='
value: 85
- color: rgb(0,255,0)
operator: '>='
value: 75
icon: mdi:battery-80
- color: rgb(0,255,0)
operator: '>='
value: 65
icon: mdi:battery-70
- color: rgb(0,255,0)
operator: '>='
value: 55
icon: mdi:battery-60
- color: rgb(0,255,0)
icon: mdi:battery-50
operator: '>='
value: 45
- color: rgb(0,255,0)
icon: mdi:battery-40
operator: '>='
value: 31
- color: rgb(255,255,0)
icon: mdi:battery-30
operator: '>='
value: 25
- color: rgb(255,255,0)
icon: mdi:battery-20
operator: '>='
value: 16
- color: rgb(255,0,0)
icon: mdi:battery-10
operator: <
styles:
icon:
- animation: blink 2s ease infinite
value: 16
type: custom:button-card
- aspect_ratio: 1.2/1
entity: sensor.galaxys10_battery_level
name: Galaxy S10
show_state: true
state:
- color: rgb(0,255,0)
icon: mdi:battery
operator: '>='
value: 95
- color: rgb(0,255,0)
icon: mdi:battery-90
operator: '>='
value: 85
- color: rgb(0,255,0)
operator: '>='
value: 75
icon: mdi:battery-80
- color: rgb(0,255,0)
operator: '>='
value: 65
icon: mdi:battery-70
- color: rgb(0,255,0)
operator: '>='
value: 55
icon: mdi:battery-60
- color: rgb(0,255,0)
icon: mdi:battery-50
operator: '>='
value: 45
- color: rgb(0,255,0)
icon: mdi:battery-40
operator: '>='
value: 31
- color: rgb(255,255,0)
icon: mdi:battery-30
operator: '>='
value: 25
- color: rgb(255,255,0)
icon: mdi:battery-20
operator: '>='
value: 16
- color: rgb(255,0,0)
icon: mdi:battery-10
operator: <
styles:
icon:
- animation: blink 2s ease infinite
value: 16
type: custom:button-card
- text: Navigation
type: custom:text-divider-row
- type: grid
square: false
columns: 4
cards:
- aspect_ratio: 1.2/1
color_type: icon
icon: mdi:theater
name: Entertain.
tap_action:
action: navigate
navigation_path: /lovelace-tablet/home-theater
type: custom:button-card
- aspect_ratio: 1.2/1
color_type: icon
icon: mdi:lightbulb
name: All Lights
tap_action:
action: navigate
navigation_path: /lovelace/all_lights
type: custom:button-card
- aspect_ratio: 1.2/1
color_type: icon
icon: mdi:cast-audio
name: Media
tap_action:
action: navigate
navigation_path: /lovelace-tablet/media-players
type: custom:button-card
- aspect_ratio: 1.2/1
color_type: icon
icon: mdi:video
name: Security
tap_action:
action: navigate
navigation_path: /lovelace-tablet/security
type: custom:button-card
- text: Scripts / Automations / Services
type: custom:text-divider-row
- square: false
columns: 4
type: grid
cards:
- aspect_ratio: 1.7/1
entity_picture: /local/espn.png
name: ESPN
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.espn
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/golf.jpg
name: Golf
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.golf
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/nfl.jpg
name: NFL
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.nfl
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/nhl.jpg
name: NHL
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.nhl
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/usa.png
name: USA
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.usa
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/history.jpg
name: History
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.history
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/paramount.png
name: Paramount
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.paramount
type: custom:button-card
- aspect_ratio: 1.7/1
entity_picture: /local/ifc.png
name: IFC
show_entity_picture: true
show_name: true
tap_action:
action: call-service
service: script.ifc
type: custom:button-card
- type: vertical-stack
cards:
- text: Animation and Styles
type: custom:text-divider-row
- square: false
columns: 4
type: grid
cards:
- type: custom:button-card
entity: sensor.thermostat_current_mode
aspect_ratio: 1.3/1
color_type: icon
name: HVAC - Idle
show_state: false
show_name: true
icon: mdi:fan
color: rgb(128,128,128)
state:
- value: heating
name: HVAC - Heating
styles:
icon:
- animation: rotating 2s linear infinite
- color: rgb(255,0,0)
name:
- color: rgb(255,0,0)
- value: cooling
name: HVAC - Cooling
styles:
icon:
- animation: rotating 2s linear infinite
- color: rgb(0,217,255)
name:
- color: rgb(0,217,255)
- value: 'off'
name: HVAC - OFF
styles:
icon:
- color: rgb(255,255,0)
name:
- color: rgb(255,255,0)
- type: custom:button-card
aspect_ratio: 1.2/1
color: rgb(0,255,0)
color_type: icon
entity: cover.garage_door
name: Garage Door
show_name: true
show_state: false
state:
- color: rgb(255,0,0)
icon: mdi:garage
value: open
- color: rgb(0,255,0)
icon: mdi:garage-open
styles:
icon:
- animation: blink 2s ease infinite
value: closed
- type: custom:button-card
name: Change Background
aspect_ratio: 2/1
extra_styles: |
@keyframes bgswap1 {
0% {
background-image: url("/local/scarlett_home.jpg");
}
25% {
background-image: url("/local/scarlett_away.jpg");
}
50% {
background-image: url("/local/mks_away.jpg");
}
75% {
background-image: url("/local/mks_home.jpg");
}
100% {
background-image: url("/local/scarlett_home.jpg");
}
}
styles:
card:
- animation: bgswap1 10s linear infinite
- background-size: cover
name:
- color: white
@Talfurn
Copy link

Talfurn commented Jan 27, 2024

Yes... they are templated entities. I have another video that goes into the step-by-step process on how I create these virtual switches: Home Assistant 101: How to Create Virtual Switches. For the particular brightness level, they are templated switches, based on the brightness attribute value of the light.

Did you change values between examples? It feels like in one you're using sw_basement_50 and the other video you're using lights_50. It also feels like you switched to using services in "How to Create Virtual Switches". I'm totally confused.

I am trying to define switches in my configuration.yaml, but I keep getting an error. Does this look correct?

switch:

  • platform: template
    switches:
    dr_lights_100:
    value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 255) }}""
    turn_on:
    service: light.turn_on
    target:
    entity_id: light.dining_room_light
    data:
    brightness: 255
    turn_off:
    service: light.turn_off
    target:
    entity_id: light.dining_room_light

    dr_lights_75:
    value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 191) }}""
    turn_on:
    service: light.turn_on
    target:
    entity_id: light.dining_room_light
    data:
    brightness: 191
    turn_off:
    service: light.turn_off
    target:
    entity_id: light.dining_room_light

    dr_lights_50:
    value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 127) }}""
    turn_on:
    service: light.turn_on
    target:
    entity_id: light.dining_room_light
    data:
    brightness: 127
    turn_off:
    service: light.turn_off
    target:
    entity_id: light.dining_room_light

    dr_lights_25:
    value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 64) }}""
    turn_on:
    service: light.turn_on
    target:
    entity_id: light.dining_room_light
    data:
    brightness: 64
    turn_off:
    service: light.turn_off
    target:
    entity_id: light.dining_room_light

@Resinchem
Copy link
Author

Resinchem commented Jan 28, 2024

It is quite possible that I used different entity names or types between the two different examples. I generally create new examples from scratch for my videos, so one video isn't necessarily directly related to another. I'm glad to take a look at your YAML, but could you place it in a code block so that it maintains formatting? It's hard to tell what might be incorrect when it is just plain text.

If you aren't familiar with how to do this, you can create a code block with the < > tool in the header, or simply enter in 3 backticks (the symbol below the tilde ~ key on most keyboards). After the 3 backticks, paste in your code and then end with 3 more backticks. Your code should then maintain it's formatting like this:

switch:
  # =================================
  # Basement Light Brightness Switches
  # ==================================
  - platform: template
    switches:
         sw_basement_5:
            value_template: "{{ is_state_attr('light.basement', 'brightness', 13) }}"
            turn_on:
              service: script.turn_on
              data:
                entity_id: script.basement_light_5
            turn_off:
              service: script.turn_on
              data:
                entity_id: script.dummy

This will make it much easier for me to take a look at your YAML and see if I can spot anything that is incorrect.

@Talfurn
Copy link

Talfurn commented Jan 28, 2024

Thank you for all that. Let's try this:

  - platform: template
    switches:
      dr_lights_100:
        value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 255) }}""
        turn_on:
          service: light.turn_on
          target:
            entity_id: light.dining_room_light
          data:
            brightness: 255
        turn_off:
          service: light.turn_off
          target:
            entity_id: light.dining_room_light
            
      dr_lights_75:
        value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 191) }}""
        turn_on:
          service: light.turn_on
          target:
            entity_id: light.dining_room_light
          data:
            brightness: 191
        turn_off:
          service: light.turn_off
          target:
            entity_id: light.dining_room_light
            
      dr_lights_50:
        value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 127) }}""
        turn_on:
          service: light.turn_on
          target:
            entity_id: light.dining_room_light
          data:
            brightness: 127
        turn_off:
          service: light.turn_off
          target:
            entity_id: light.dining_room_light
            
      dr_lights_25:
        value_template: "{{ is_state_attr('light.dining_room_light', 'brightness', 64) }}""
        turn_on:
          service: light.turn_on
          target:
            entity_id: light.dining_room_light
          data:
            brightness: 64
        turn_off:
          service: light.turn_off
          target:
            entity_id: light.dining_room_light```

@Resinchem
Copy link
Author

Resinchem commented Jan 28, 2024

Thanks for the reformat! That helps! The YAML looks pretty good, except I see an extra double-quote mark at the end of each of your 'value_template' lines. Look at the end of your value_template lines vs. mine. The entire value template line should be enclosed in a single set of double-quotes:

value_template: "{{ is_state_attr('light.basement', 'brightness', 13) }}"

That's what is likely causing your error in validating the YAML. But also assure that 'brightness' is a valid attribute of your light entity and that it uses 0-255 for brightness. Some lights could use a different attribute name (like light_level) and many will use a brightness percentage scale of 0-100 instead of a raw value of 0-255.

image

The issue is probably the extra quote mark at the end of each value_template line. I just mention double-checking the attribute just for verification.

@quachtai1959
Copy link

quachtai1959 commented Jun 19, 2024

My configuration in YAML failed.
switch:

  • platform: template
    switches:
    lights_sonoff_100:
    value_template: "{{ is_state_attr('light.sonoff', 'brightnees', 225) }}"
    turn_on:
    service: light.turn_on
    target:
    entity_id: light.sonoff
    data:
    brightnees: 255
    turn_off:
    service: light.turn_off
    target:
    entity_id: light.sonoff
    Then I added to Template section in developer tools
    "{{ is_state_attr('light.sonoff', 'brightnees', 255) }}" to test. I get the following response:
    "Result type: boolean
    false
    This template listens for the following state changed events:
    Entity: light.magic"
    I don't know where I went wrong. Please help. Thanks!

@Resinchem
Copy link
Author

Resinchem commented Jun 19, 2024

It is difficult to tell if there is a formatting issue based on the code copy above, but for one thing, you have the word 'brightness' spelled wrong (brightnees). Try correcting it to brightness everywhere it appears above and see if that resolves the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment