I have a few Aqara outlets I am using to control loads and monitor energy consumption. I can turn them on and off via a switch card I have with all my other switches.
This is the one:
I am attempting to make a nice front end card for the switch I can use simply, so create a view dedicated to those switches so I can configure all of them if needed from one spot.
I went down the path of the Button-card (love that card), and creating a template for it so it is simple to deploy.
I believe I got the functionality where I want it with a few exceptions:
- Formatting: The size and relative placement of the items on the card are off, and do not scale with the button size.
- The bottom 3 entities are showing up as entities (which is how I have them listed) but is there a way to make them appear as 3 smaller buttons one next to the other?) like a glance card? Is the only way a glance card or is there a nice way of presenting 2 switches and a status at the bottom (horizontally)
Here is my template code if anyone is looking for something similar, and the yaml code for adding the button card to a view or other:
Config code:
- type: custom:button-card
template: smart_plug_aqara
entity: switch.traffic_light_outlet
variables:
var_name: "Plug AV"
You only need to add the entity name of the primary switch. All other entities are retrieved from it.
smart_plug_aqara:
triggers_update: all
name: "[[[ return variables.var_name ]]]"
aspect_ratio: 1/1
styles:
img_cell:
- justify-content: start
- align-items: start
- margin: none
card:
- padding: 0.2em
- box-shadow: >
[[[
if (entity.state == 'on') return '0px 0px 3px 3px lime';
else return '0px 0px 3px 3px red';
]]]
- text-shadow: 0px 0px 5px black
- color: ivory
- font-size: 1em
- text-transform: capitalize
name:
- font-weight: bold
- font-size: 1em
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
- overflow: visible
icon:
- color: >
[[[
if (entity.state == 'on') return 'lime';
else return 'red';
]]]
- width: 50%
- margin-top: 0%
custom_fields:
gauge:
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
bar:
- margin-top: '-5px'
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
graph:
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
diag:
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
grid:
- grid-template-areas: |
"i n n"
"i gauge gauge"
"graph graph graph"
"bar bar bar"
"diag diag diag"
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr
custom_fields:
gauge:
card:
style: |-
.type-gauge {
padding: 0%;
}
div.name {
font-size: 0px;
}
type: gauge
entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_p = ent.replace("switch", "sensor")
ent_p += "_energy"
return `${[ent_p]}`}
]]]
min: 0
max: 1875
severity:
green: 0
yellow: 500
red: 1400
graph:
card:
type: 'custom:mini-graph-card'
entities:
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_p = ent.replace("switch", "sensor")
ent_p += "_power"
return `${[ent_p]}`}
]]]
group: true
points_per_hour: 60
line_color: red
line_width: 5
hours_to_show: 24
update_interval: 10
show:
name: false
icon: false
state: false
points: false
labels: false
fill: false
bar:
card:
style: |-
bar-card-currentbar, bar-card-backgroundbar{
border-radius: 3px;
}
.card-content {
text-align: start;
padding: 0.2em
}
bar-card-name, bar-card-value {
overflow: visible;
font-size: 0.7em
font-weight: bold;
}
bar-card-value {
margin-right: auto;
font-size: 0.7em
font-weight: bold;
}
height: 5
animation:
state: 'on'
speed: 1
type: 'custom:bar-card'
entities:
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_s = ent.replace("switch", "sensor")
ent_s += "_device_temperature"
return `${[ent_s]}`}
]]]
name: temp.
icon: 'mdi:thermometer'
min: 0
max: 300
severity:
- from: 0
to: 210
color: '#0000ff'
- from: 210
to: 220
color: '#00ffff'
- from: 220
to: 240
color: '#00ff00'
- from: 240
to: 250
color: '#ffa500'
- from: 250
to: 260
color: '#ff00ff'
- from: 260
to: 300
color: '#ff0000'
positions:
icon: 'inside'
name: inside
indicator: 'off'
diag:
card:
type: entities
show_name: false
entities:
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
ent += "_led_disabled_night"
return `${[ent]}`}
]]]
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
ent += "_power_outage_memory"
return `${[ent]}`}
]]]
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_p = ent.replace("switch", "update")
return `${[ent_p]}`}
]]]
hold_action:
action: toggle
tap_action:
service: browser_mod.popup
data:
deviceID: this
hide_header: false
title: Details
size: normal
content:
type: vertical-stack
cards:
- type: entities
entities: |
[[[
var ent = entity.entity_id
var ent_power = ent.replace("switch", "sensor")
var ent_temp = ent.replace("switch", "sensor")
var ent_energy = ent.replace("switch", "sensor")
ent_power += "_power"
ent_temp += "_device_temperature"
ent_energy += "_energy"
return [ent,ent_power,ent_temp,ent_energy]
]]]
- type: entities
title: |
[[[
return [entity.attributes.friendly_name]
]]]
So as a general question, how to make button size with its content scale with window size or placement of the button-card? I want everything to scale up or down (including font, icons, etc).
What’s the best option for creating the 3 buttons at the end as horizontal placement with only icon and name. Is it 3 button cards within the button card so I can apply the green halo formatting? Or is there something better?
Here is what it looks like now (not too pretty yet…)
Once I get those figured out, I will work on making the temp and gauge charts nicer with color gradients and publish.