qoheleth
March 24, 2021, 12:55am
89
Well, this is extremely frustrating. I thought I had this, but after half a day of trying various things, I’m getting nowhere
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
qoheleth
March 24, 2021, 4:48pm
90
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…
dredvard
March 25, 2021, 12:26am
91
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
dredvard
March 25, 2021, 12:53am
92
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.
qoheleth
March 25, 2021, 1:34am
93
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
icon:
- color: |
[[[
if (states['climate.thermostat_2].state == 'heat') return 'lightCoral';
else if (states['climate.thermostat_2].state == 'cool') return 'lightSkyBlue';
else return 'lightGrey';
]]]
qoheleth
March 25, 2021, 3:17am
94
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:
- 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:
qoheleth
March 31, 2021, 6:58pm
95
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.
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.
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
why do you keep posting in this thread, while there is a huge thread with so many more people to help and get inspiration from? Not saying you shouldn’t, it just that the other thread has all the examples you would need to get you all going.
I know I am doing some basic wrong. I have put this into my raw configuration but am getting this error:
Button-card template 'container' is missing!
This is the config. I am fairly new to dashboards with HA so I am quite certain it is probably something in the wrong place sort of thing. Any help would be appreciated. Of course I truncated the config to just enough to show the error.
Thanks!
title: Home
template:
button_card_templates:
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
- padding: 0.3em
views:
- path: default_view
title: Home
cards:
- type: 'custom:button-card'
template: container
color: '#EDE7B0'
name: Eating & Patio
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: switch.ge_14291_in_wall_smart_switch_switch_2
name: Kitchen
template: standard
icon: 'mdi:wall-sconce-flat'
type: 'custom:button-card'
qoheleth
April 9, 2021, 12:42pm
104
Do you have the first section that begins with “button card templates:”? It’s something like this and is at the very beginning of your Lovelace raw config.
button_card_templates:
standard:
color_type: card
size: 80%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 0.75
name:
- font-size: 0.5em
- white-space: normal
state:
- font-size: 0.5em
- white-space: normal
label:
- font-size: 0.5em
- white-space: normal
wide:
template: standard
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.0em
- width: 100%
- font-weight: bold
- font-size: 0.6em
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
- padding: 0.15em
standard-button:
template: standard
variables:
value_on: 'on'
value_off: 'off'
background_color_on: gold
background_color_off: slategrey
text_color_on: blue
text_color_off: white
styles:
label:
- color: '[[[ return variables.text_color_off ]]]'
state:
- id: value_on
value: '[[[ return variables.value_on ]]]'
styles:
card:
- background-color: '[[[ return variables.background_color_on ]]]'
name:
- color: '[[[ return variables.text_color_on ]]]'
icon:
- color: '[[[ return variables.text_color_on ]]]'
- opacity: 1
- id: value_off
value: '[[[ return variables.value_off ]]]'
styles:
card:
- background-color: '[[[ return variables.background_color_off ]]]'
name:
- color: '[[[ return variables.text_color_off ]]]'
icon:
- color: '[[[ return variables.text_color_off ]]]'
- opacity: 0.5
option-button:
template: standard
show_icon: false
aspect_ratio: 1/1
styles:
card:
- border-radius: 20%
dimmer-option:
template: option-button
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: entity
brightness: '[[[ return variables.set_value ]]]'
state:
- operator: default
styles:
card:
- background-color: '[[[ return variables.option_button_off_color ]]]'
- color: '[[[ return variables.option_text_off_color ]]]'
- operator: template
value: >-
[[[ return (entity.attributes.brightness||0) >= variables.range_start
&& (entity.attributes.brightness||0) <= variables.range_stop ]]]
styles:
card:
- background-color: '[[[ return variables.option_button_on_color ]]]'
- color: '[[[ return variables.option_text_on_color ]]]'
presets:
template: standard
color_type: icon
tap_action:
action: none
styles:
card:
- background-color: 'rgba(0,0,0,0.3)'
icon:
- color: white
grid:
- grid-template-areas: '"i opt1 opt2 opt3 opt4" "n opt1 opt2 opt3 opt4"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
custom_fields:
opt1:
- margin: 0.1em
- overflow: visible
opt2:
- margin: 0.1em
- overflow: visible
opt3:
- margin: 0.1em
- overflow: visible
opt4:
- margin: 0.1em
- overflow: visible
variables:
option_template: dimmer-option
option_button_on_color: var(--paper-item-icon-active-color)
option_text_on_color: white
option_button_off_color: var(--paper-card-background-color)
option_text_off_color: white
option1_name: Low
option1_set_value: 51
option1_range_start: 1
option1_range_stop: 77
option2_name: Med
option2_set_value: 102
option2_range_start: 78
option2_range_stop: 170
option3_name: High
option3_set_value: 255
option3_range_start: 171
option3_range_stop: 255
option4_name: 'Off'
option4_set_value: 0
option4_range_start: 0
option4_range_stop: 0
custom_fields:
opt1:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option1_name ]]]'
variables:
set_value: '[[[ return variables.option1_set_value ]]]'
range_start: '[[[ return variables.option1_range_start ]]]'
range_stop: '[[[ return variables.option1_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt2:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option2_name ]]]'
variables:
set_value: '[[[ return variables.option2_set_value ]]]'
range_start: '[[[ return variables.option2_range_start ]]]'
range_stop: '[[[ return variables.option2_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt3:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option3_name ]]]'
variables:
set_value: '[[[ return variables.option3_set_value ]]]'
range_start: '[[[ return variables.option3_range_start ]]]'
range_stop: '[[[ return variables.option3_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt4:
card:
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option4_name ]]]'
variables:
set_value: '[[[ return variables.option4_set_value ]]]'
range_start: '[[[ return variables.option4_range_start ]]]'
range_stop: '[[[ return variables.option4_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
alerter:
template: standard
show_last_changed: true
color_type: icon
extra_styles: |
[[[ return `
@keyframes pulse {
20% {
background-color: ${variables.color};
}
}
`]]]
variables:
color: var(--paper-item-icon-active-color)
state:
- value: 'on'
id: value_on
styles:
card:
- animation: pulse 1s infinite
alerter-dual:
template: standard
show_last_changed: true
color_type: icon
extra_styles: |
[[[ return `
@keyframes pulse1 {
20% {
background-color: ${variables.color_initial};
}
}
@keyframes pulse2 {
20% {
background-color: ${variables.color_extended};
}
}
@keyframes color {
0% {
color: unset;
opacity: 0.5
}
99% {
color: unset;
opacity: 0.5
}
100% {
color: ${variables.color_extended};
}
}
`]]]
variables:
color_initial: var(--paper-item-icon-active-color)
color_extended: 'rgba(240,52,52, 0.9)'
color_seconds: 60
state:
- value: 'on'
id: value_on
styles:
card:
- animation: >-
[[[ return `pulse1 1s ${variables.color_seconds}, pulse2 1s
${variables.color_seconds}s infinite` ]]]
icon:
- color: '[[[ return variables.color_extended ]]]'
- opacity: 1
- animation: '[[[ return `color ${variables.color_seconds}s 1` ]]]'
name:
- font-weight: bold
check this Lovelace config:
title: Ha Rpi4 Data
button_card_templates: !include lovelace/buttons/button_card_templates.yaml # <------- this is where you save your templates
decluttering_templates: !include_dir_named lovelace/decluttering_templates
custom_header: !include lovelace/custom_header/custom_header_data.yaml
views:
- !include lovelace/views/view_Home_assistant.yaml #0
- !include lovelace/views/view_Light_data.yaml #1
- !etcetcetc
in that file you should copy what you now show below template: (which isnt a valid key in the first place)
safe below code in a button_card_templates.yaml file in the directory of your naming (and reference that in the main lovelace-ui.yaml like I suggested above)
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
- padding: 0.3em
2 Likes
qoheleth
April 9, 2021, 1:13pm
106
That decluttering is a good move.
@qoheleth Yes, it is there, it is the third line in the config that I posted.
ah, that was my problem. I removed templates and everything started working. Not sure why I put that in there in the first place. Many thanks!!
) I was also having some issues using entity instead of the actual name of the entity so I just gave up on that.
Lovelace button-card for home assistant
