your string isn’t terminated in the right places, and a + is missing:
return 'linear-gradient(rgb(255, 255, 255)' + ink_level + '%, rgb(124, 124, 0) 0%)';
you legend 
Thank you so much. So near, yet so far… Thanks again
Anyone know how I’d add an ‘if’ statement to make the icon green when a secondary sensor (binary_sensor.pet_heston) is on and red when its off? I’m assuming I’d need a template under state > styles > icon > color?
entity: sensor.heston_last_state
icon: 'mdi:cat'
layout: icon_name_state
show_name: false
show_state: true
state:
- styles:
icon:
- color: var(--button-card-light-color)
value: 'on'
tap_action:
action: more-info
type: 'custom:button-card'
1 Like
you’ve got to be kidding, didn’t you check the button card documentation, or any of the million other card configs in the button-card thread…?
styles:
icon:
- color: >
[[[ return states['binary_sensor.pet_heston'].state == 'on' ? 'green' : 'red'; ]]]
I’m trying to make a battery at a glance card where it will change icons based on charging status and display battery level information. I’m trying to make the template more easily configurable for use with the 2 entities so you just input the entity once and then can do multiple actions with it. This works, but is there a neater way of doing this? (ie. With this methjod I would always have to include a “variables: lvl_entity:” vs just inputing lvl_entity in the top level? I’ll eventually move the code to the template but left it here for visibility.
type: 'custom:button-card'
template: battery_glance
entity: binary_sensor.sm_a515w_is_charging
name: template
variables:
lvl_entity: sensor.sm_a515w_battery_level
styles:
grid:
- grid-template-areas: '"n" "i" "l" "s"'
icon:
- color: |
[[[
var vlentity=variables.lvl_entity
var blevel=states[vlentity].state;
if (blevel > 60) return 'lime';
else if (blevel >= 20 ) return 'orange';
else return 'red';
]]]
label: |
[[[
var blevel=states[variables.lvl_entity].state;
return `
<span><span style="color: var(--text-color-sensor);">${states['sensor.sm_a515w_battery_level'].state}%</span></span>`
]]]
Sure did but templating is not a strength of mine. I’m a hardware guy. Thanks for the advice. Working a treat.
1 Like
@dredvard, if you need 2 entities you have to use a variable to specify the 2nd entity. I don’t think there is any way around that.
One option to simplify things is to make the entity you use the most in javascript the primary entity and use a variable for the other one. You can simply refer to entity in the javascript for the primary entity: [[[ return entity.state > 60 ? 'lime' : entity.state >= 20 ? 'orange' : 'red'; ]]].
1 Like
Well, this is extremely frustrating. I thought I had this, but after half a day of trying various things, I’m getting nowhere 
I like your custom HVAC controller, but I wanted something that would fit within a row of custom button cards more easily. All I want to do is have the “climate-button” show the mdi:thermostat icon (easily done), but have the label reflect whether it’s heating, cooling, or idle (in text) with colors (light red, light blue, white respectively). I’d also like the icon to be colored (same colors) for heating, cooling, and off modes.
Here is my latest attempt:
template:
climate-button:
template: standard-button
icon: 'mdi:thermostat'
show_label: true
styles:
card:
- background-color: darkgrey
name:
- color: '[[[ return variables.name_color ]]]'
icon:
- color: '[[[ return variables.icon_color ]]]'
label:
- color: '[[[ return variables.label_color ]]]'
button-card definition:
- entity: climate_thermostat_2
variables:
name_color: >
{% if is_state('climate.thermostat_2', 'heat') %}LightCoral
{% elif is_state('climate.thermostat_2', 'cool') %}LightSkyBlue
{% else %}LightGrey
{% endif %}
icon_color: >
{% if is_state('climate.thermostat_2', 'heat') %}LightCoral
{% elif is_state('climate.thermostat_2', 'cool') %}LightSkyBlue
{% else %}LightGrey
{% endif %}
label_color: >
{% if is_state_attr('climate.thermostat_2', 'hvac_action', 'heat') %}LightCoral
{% elif is_state_attr('climate.thermostat_2', 'hvac_action', 'cool') %}LightSkyBlue
{% else %}LightGrey
{% endif %}
name: "{{ states('climate.thermostat_2') }}"
label: "{{ state_attr('climate.thermostat_2', 'hvac_action') }}"
template: climate-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
Partial success: I can get the Name and Label to show correctly thusly:
- entity: climate_thermostat_2
name: '[[[ return states["climate.thermostat_2"].state; ]]]'
label: >-
[[[ return
states["climate.thermostat_2"].attributes["hvac_action"];
]]]
template: climate-button
type: 'custom:button-card'
Now, if I could just figure out how to use those values to conditionally set the colors…
Also, for some reason, the normal tap action isn’t working on the new button. I have another button with thermostat_2 as the entity and tapping it will open the details/history panel and let me change the state, fan mode, and target temperature. This button doesn’t do that (?)
Look at my template it conditionally sets the colors and even conditionally starts blinking.
battery_glance:
variables:
lvl_entity: null
show_state: true
color_type: icon
show_label: true
state:
- value: 'on'
color: green
icon: 'mdi:power-plug'
- operator: default
color: red
icon: 'mdi:battery'
styles:
grid:
- grid-template-areas: '"n" "i" "l" "s"'
card:
- animation: |
[[[
var blevel=states[variables.lvl_entity].state;
if (blevel < 10 ) return 'blink 2s ease infinite';
]]]
icon:
- color: |
[[[
var blevel=states[variables.lvl_entity].state;
if (blevel > 60) return 'lime';
else if (blevel >= 20 ) return 'orange';
else return 'red';
]]]
label: |
[[[
var blevel=states[variables.lvl_entity].state;
return `
<span><span style="color: var(--text-color-sensor);">${states[variables.lvl_entity].state}%</span></span>`
]]]
Here’s the card
type: 'custom:button-card'
template: battery_glance
entity: binary_sensor.sm_a515w_is_charging
name: Jen's Phone
variables:
lvl_entity: sensor.sm_a515w_battery_level
1 Like
Thanks. What about if I want to use the same entity like in this code. Ist there away to reference the entity or do I need to use variables here as well?
entity: light.tasmota_dining
type: 'custom:button-card'
icon: 'mdi:wall-sconce-flat'
template: slider
name: Dining
variables:
lvlentity: light.tasmota_dining
custom_fields:
slider:
card:
full_row: true
hide_state: true
type: 'custom:slider-entity-row'
entity: |
[[[ return variables.lvlentity ]]]
overflow: unset
I get “t.entity spli is not a function” if I try return entity.
Yes. That’s the kind of stuff I’ve been playing with. For whatever reason, the Jinja way of expressing it isn’t giving me what I think it’s supposed to. However, the javascript is working (when I get the syntax right 
) I was also having some issues using entity instead of the actual name of the entity so I just gave up on that.
The final issue seems to be what is actually returned when I put in states['climate.thermostat_2].state. It should be ‘heat’,‘cool’, or ‘off’, but conditionals I use never act as though they’re true.
eg:
icon:
- color: |
[[[
if (states['climate.thermostat_2].state == 'heat') return 'lightCoral';
else if (states['climate.thermostat_2].state == 'cool') return 'lightSkyBlue';
else return 'lightGrey';
]]]
So… I basically started over on my Thermostat card. I used the grid-area example (of and rPI monitor card) from here:
GitHub - custom-cards/button-card: 
Lovelace button-card for home assistant
and modified it thusly:
- type: horizontal-stack
cards:
- entity: climate.thermostat_2
type: 'custom:button-card'
icon: 'mdi:thermostat'
aspect_ratio: 3/2
name: Thermostat 2
styles:
card:
- background-color: darkBlue
- border-radius: 0%
- padding: 0%
- color: ivory
- font-size: 10px
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp temp temp" "n n n n" "stat stat stat stat" "fan fan fan fan"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: |
[[[
if (states['climate.thermostat_2'].state == 'heat') return 'red';
if (states['climate.thermostat_2'].state == 'cool') return 'blue';
if (states['climate.thermostat_2'].state == 'off') return 'black';
else return 'yellow';
]]]
- width: 100%
- margin-top: 0%
custom_fields:
temp:
- align-self: middle
- justify-self: start
stat:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': |
[[[
if (states["climate.thermostat_2"].attributes["hvac_action"] == "heat") return "lightCoral";
if (states["climate.thermostat_2"].attributes["hvac_action"] == "cool") return "lightSkyBlue";
else return "white";
]]]
fan:
- align-self: middle
- justify-self: start
- '--text-color-sensor': |
[[[
if (states["climate.thermostat_2"].attributes["fan_action"] == "on") return "lightSkyBlue";
else return "white";
]]]
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${states['climate.thermostat_2'].attributes['current_temperature']}°F | </span>
<span>Set: ${states['climate.thermostat_2'].attributes['temperature']}°F</span>`
]]]
stat: |
[[[
return `<ha-icon
icon="hass:fire"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>mode: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].state} | </span>
<span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['hvac_action']}</span></span>`
]]]
fan: |
[[[
return `<ha-icon
icon="mdi:fan"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>fan: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_mode']} | </span>
<span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_action']}</span></span>`
]]]
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 3/2
- type: 'custom:button-card'
color_type: blank-card
aspect_ratio: 2/2
The horizontal-stack and blank cards are to get it to fit into my UI space nicely. It looks like this:
and unlike the card I was working on before, this one opens the details/history (more-info) window when you tap on it.
The only thing I haven’t done at this point is to have it use different icons based on whether the mode is heat, cool, or off.
I’ve been playing with the grid card as a replacement for both horizontal and vertical stacks. I’m really liking the results:
There are some specific advantages. It seems a lot less work to line up bits with different column counts. I still have to specify that my groups with three items are “4 columns”, but it creates the blank for me without having to put in a blank card. (The only blank card I use is between the lights on my Living Room Lights group.)
The button-card templates are as ktownsend originally posted them with the exception that I have decreased the font size on the container lables to fit my own tastes. I added a few extra button templates (eg: light-group-button) to set specific icons for on/off states.
I’ve only started playing with making the top three cards into some sort of templates so I could reuse them on other pages without rewriting the whole code over. In addition the Thermostat one cries out for templating if you have a house with multiple thermostats. The option card template looks to be a good example of where to look for ideas.
Here’s the whole code dump, just so you can see how all the bits and pieces fit together.
title: Home
swipe_nav:
wrap: true
animate: swipe
views:
- title: Buttons
path: buttons
badges: []
cards:
- type: grid
columns: 1
square: false
cards:
- type: grid
columns: 3
square: false
cards:
- entity: sensor.family_sensor
type: 'custom:button-card'
aspect_ratio: 3/2
name: Presence
tap_action:
action: navigate
navigation_path: /lovelace/test
styles:
card:
- background-color: darkGreen
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 10px
- text-transform: capitalize
grid:
- grid-template-areas: >-
"n n n n" "i stat stat stat" "rms rms rms rms" "jbs jbs
jbs jbs" "kgs kgs kgs kgs"
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content 1fr min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: yellow
- width: 100%
- margin-top: 0%
custom_fields:
stat:
- align-self: middle
- justify-self: start
rms:
- align-self: middle
- justify-self: start
- '--text-color-sensor': white
jbs:
- align-self: middle
- justify-self: start
- '--text-color-sensor': white
kgs:
- align-self: middle
- justify-self: start
- '--text-color-sensor': white
custom_fields:
stat: |
[[[
return `<span>Family: </span>
<span>${states['sensor.family_sensor'].state}</span>`
]]]
rms: |
[[[
return `<span>Russ: </span>
<span>${states['device_tracker.sm_n986u'].state}</span>`
]]]
jbs: |
[[[
return `<span>Janette: </span>
<span>${states['device_tracker.janettes_phone'].state}</span>`
]]]
kgs: |
[[[
return `<span>Kate: </span>
<span>${states['device_tracker.katies_phone'].state}</span>`
]]]
- entity: climate.thermostat_2
type: 'custom:button-card'
icon: 'mdi:thermostat'
aspect_ratio: 3/2
name: Thermostat
styles:
card:
- background-color: |
[[[
if (states['climate.thermostat_2'].state == 'heat') return 'darkRed';
if (states['climate.thermostat_2'].state == 'cool') return 'darkBlue';
if (states['climate.thermostat_2'].state == 'off') return 'darkSlateGrey';
else return 'yellow';
]]]
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 10px
- text-transform: capitalize
grid:
- grid-template-areas: >-
"n n n n" "i temp temp temp" "stat stat stat stat" "fan
fan fan fan"
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content 1fr min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: yellow
- width: 100%
- margin-top: 0%
custom_fields:
temp:
- align-self: middle
- justify-self: start
stat:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': |
[[[
if (states["climate.thermostat_2"].attributes["hvac_action"] == "heat") return "lightCoral";
if (states["climate.thermostat_2"].attributes["hvac_action"] == "cool") return "lightSkyBlue";
else return "white";
]]]
fan:
- align-self: middle
- justify-self: start
- '--text-color-sensor': |
[[[
if (states["climate.thermostat_2"].attributes["fan_action"] == "on") return "lightSkyBlue";
else return "white";
]]]
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${states['climate.thermostat_2'].attributes['current_temperature']}°F | </span>
<span>Set: ${states['climate.thermostat_2'].attributes['temperature']}°F</span>`
]]]
stat: |
[[[
return `<ha-icon
icon="hass:fire"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>mode: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].state} | </span>
<span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['hvac_action']}</span></span>`
]]]
fan: |
[[[
return `<ha-icon
icon="mdi:fan"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>fan: <span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_mode']} | </span>
<span><span style="color: var(--text-color-sensor);">${states['climate.thermostat_2'].attributes['fan_action']}</span></span>`
]]]
- entity: input_boolean.day_night
type: 'custom:button-card'
aspect_ratio: 3/2
name: Modes
styles:
card:
- background-color: darkSlateGrey
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 10px
- text-transform: capitalize
grid:
- grid-template-areas: '"n n n n" "i stat stat stat"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: yellow
- width: 100%
- margin-top: 0%
custom_fields:
stat:
- align-self: middle
- justify-self: start
custom_fields:
stat: |
[[[
if (states['input_boolean.day_night'].state) return `<span>Day</span>`
else return `<span>Day</span>`
]]]
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
template: container
color: Grey
name: Master
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: group.downstairs_lights
name: Good Night
template: standard-button
type: 'custom:button-card'
icon: 'mdi:power'
aspect_ratio: 1/1.2
- type: 'custom:button-card'
template: container
color: Brown
name: Front Porch
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: switch.mailbox_opened
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
variables:
background_color_on: LightCoral
text_color_on: Yellow
state:
- value: 'on'
id: value_on
name: check Mail
icon: 'mdi:mailbox-up'
- value: 'off'
id: value_off
name: Mail
icon: 'mdi:mailbox-outline'
- entity: camera.frontyardcam
name: Yard
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.2
color: SlateGrey
- entity: camera.front_doorbell
name: Porch
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
color: SlateGrey
- entity: switch.front_porch_light
name: Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
template: container
color: GoldenRod
name: Dining/Kitchen
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: light.dining_room_chandelier
name: DR Light
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: binary_sensor.dining_room_motion_motion
name: Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: switch.stove_sink_lights
name: K Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- type: 'custom:button-card'
template: container
color: Khaki
name: Living Room
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.front_door_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.2
- entity: camera.livingroomcam
name: Camera
template: standard
type: 'custom:button-card'
color: SlateGrey
aspect_ratio: 1/1.2
- entity: binary_sensor.living_room_motion_motion
name: Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- type: 'custom:button-card'
template: container
color: Khaki
name: Living Room Lights
custom_fields:
buttons:
card:
type: grid
columns: 8
square: true
cards:
- entity: switch.r_desk_lamp
name: 'R:Desk Lamp'
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: switch.j_desk_lamp
name: 'J:Desk Lamp'
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: switch.living_room_fan_light
name: Fan Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: group.sconces
name: Sconces
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
- entity: group.floor_table
name: Floor & Table
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: group.wall_lights
name: N&S Wall
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
- type: 'custom:button-card'
color_type: blank-card
- entity: input_boolean.zoom_lighting
name: Zoom Lights
template: light-group-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
template: container
color: dimgrey
name: Upstairs
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.upstairs_motion_sensor_motion
name: Motion
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: switch.bathroom_master_switch
name: Bath
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
- entity: binary_sensor.bathroom_door_contact
name: Bath
template: door-button-closed
type: 'custom:button-card'
aspect_ratio: 1/1.2
- type: 'custom:button-card'
template: container
color: LightBlue
name: Side
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.side_door_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.2
- entity: switch.outside_tap
name: Bib
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
state:
- value: 'on'
id: value_on
icon: 'mdi:water-pump'
- value: 'off'
id: value_off
icon: 'mdi:water-pump-off'
- entity: switch.outside_water_valve_lock
name: Lock
template: standard-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
state:
- value: 'on'
id: value_on
icon: 'mdi:lock'
- value: 'off'
id: value_off
icon: 'mdi:lock-open'
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
template: container
color: Green
name: Back Yard
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: binary_sensor.back_door_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.2
- entity: switch.back_door_motion_light
name: Light
template: light-button
type: 'custom:button-card'
aspect_ratio: 1/1.2
- entity: camera.backyardcam
name: Yard
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.2
color: SlateGrey
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
template: container
color: MidnightBlue
name: Garage
custom_fields:
buttons:
card:
type: grid
columns: 4
square: true
cards:
- entity: camera.garagecam
name: Garage
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.2
styles:
name:
- font-size: 0.45em
color: SlateGrey
- entity: binary_sensor.garage_door_sensor_contact
name: Door
template: door-button-open
type: 'custom:button-card'
aspect_ratio: 1/1.2
- entity: cover.overhead_garage_door
template: standard-button
type: 'custom:button-card'
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.overhead_garage_door
aspect_ratio: 1/1.2
show_label: true
name: myQ
styles:
name:
- font-size: 0.45em
label:
- color: white
- font-size: 0.45em
state:
- value: open
id: value_on
label: open
- value: closed
id: value_off
label: closed
- value: opening
label: opening
icon: 'mdi:arrow-up-bold-box-outline'
styles:
card:
- background-color: LightCoral
name:
- color: yellow
label:
- color: yellow
icon:
- color: yellow
- value: closing
label: closing
icon: 'mdi:arrow-down-bold-box-outline'
styles:
card:
- background-color: LightSkyBlue
name:
- color: yellow
label:
- color: yellow
icon:
- color: yellow
- entity: camera.alley_camera
name: Alley
template: standard
type: 'custom:button-card'
aspect_ratio: 1/1.2
color: SlateGrey
1 Like
Good use of the grid. My UI was already stable by the time the grid was introduced, so I haven’t played with grid yet. I like how the explicit column count simplifies getting the widths you expect without blank placeholders.
Yep, used the eather weekend with covid lockdown to play with the button cards.
Beside the actors I still wanted to group my sensors. And it ended up in a smartphone-alike screen per room … thanks to the fact that a using % on a rectangle button card does these fancy curves
In detail it’s a CB per room with nothing in in but several CBs for each entity. (so that I could make use of more-info from all of these.
Though it might fit in here “fun with …” and yeah I had lots of fun.
Especially getting the windrose done which I wanted to rotate against having the directions arrow running around in cicles. Was a bit painful to get this going using custom:canvas-gauge since placement with inthe CB was very strange for me.
Impressive array of charts! The wind gauge looks interesting. What are you using to get all of those measurements, like wifi strength in each room?
Had a handfull of ESP8266 mini d1 boards lying around and added some bme280 sensors and some other sensors. Currently I’m after this idea: https://www.thingiverse.com/thing:3860911 but it’s a bit tricky to get correct values back from the watermeter.
For the number of charts. I tried the same using apexcharts first since they do look more impressive but this brought my pi4 to it’s knees after 10 charts side by side.
Could be because I’m still a HA noob not really understanding about the advantages of lovelace: YAML mode and !include. Means the code is a real pain, and I must read lots more to prevent redundancy of codeblocks.
As said ealier, the windgauge was a real pain since that custom:canvas-gauge things did show a complete different behaviour as other objects with the buttoncard when it comes to getting this into the expected position. Looks as if my brains too short to get it why this happens.
Could someone help me, please? I can NOT finger out how to add an image to my button. I want to add /local/image/me_g3-1.png in the middle of the person’s name and their current location.
type: 'custom:button-card'
entity: person.g3_1
aspect_ratio: 1/1
name: null
icon: null
styles:
card:
- background-color: transparent
- border-radius: 10%
- padding: 4%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"n n" "i i" "location location" "battery battery" "power power"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- margin-top: '-70'
- font-weight: bold
- font-size: 13px
- color: white
- align-self: start
- justify-self: middle
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon: null
custom_fields:
location:
- font-size: 12px
- color: white
- align-self: null
- justify-self: null
- padding-bottom: 4px
power:
- entity: device_tracker.g3_1_iphone_12_pro_max_2
- align-self: middle
- justify-self: start
battery:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.g3_1_iphone_12_pro_max_battery_state_2"].state
< 20) return "red"; ]]]
custom_fields:
location: |
[[[
return `</ha-icon><span> ${entity.state}</span>`
]]]
power: |
[[[
return `<ha-icon
icon="mdi:battery-charging"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>: ${states['device_tracker.g3_1_iphone_12_pro_max_2'].attributes.battery_status} </span>`
]]]
battery: |
[[[
return `<ha-icon
icon="mdi:battery"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span> : <span style="color: var(--text-color-sensor);">${states['device_tracker.g3_1_iphone_12_pro_max_2'].attributes.battery_level}%</span></span>`
]]]
@G3GhostTech, you probably need another custom field and use that instead of “i i” in the grid-template-areas.
I noticed all of your grid-template-areas are doubled up, so you essentially have just one column and can remove the duplicate names: '"n" "i" "location" "battery" "power"'.
1 Like