Hello,
I’m trying to build a card for the energy consuption using the following code:
type: custom:button-card
styles:
card:
- padding: 0
- border: none
name:
- padding: 0
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: "\"i\" \"n\" \"pictures\" \"buttons\""
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
custom_fields:
pictures:
- background-color: transparent
buttons:
- background-color: transparent
custom_fields:
pictures:
card:
type: picture-elements
style: |
{% set stato = states('switch.presa_lavatrice') %}
@keyframes idle {}
@keyframes unknown {}
@keyframes unavailable {}
@keyframes lavaggio {
0% { transform: rotate(0deg); }
10% { transform: rotate(40deg); }
20% { transform: rotate(80deg); }
30% { transform: rotate(40deg); }
40% { transform: rotate(80deg); }
60% { transform: rotate(-40deg); }
70% { transform: rotate(-80deg); }
80% { transform: rotate(-40deg); }
90% { transform: rotate(-80deg); }
100% { transform: rotate(0deg); }
}
@keyframes riempimento{
30% { transform: rotate(40deg); }
60% { transform: rotate(-40deg); }
}
@keyframes centrifuga {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes risciacquo {
0% { transform: rotate(0deg); }
100% { transform: rotate(720deg); }
}
ha-card {
--my-animation-name: {{stato|lower}};
--my-rotate: {{ {
'Riempimento' : '1800ms infinite ease-in-out',
'Lavaggio' : '1800ms infinite ease-in-out backwards',
'Centrifuga' : '150ms infinite ease-in-out',
'Risciacquo' : '1500ms infinite ease-in-out alternate backwards',
'Idle': '',
'unknown':'',
'unavailable':''
} [stato] }};
border-radius: 0px 0px 0px 0px;
}
image: /local/images/sfondo_black.png
elements:
- type: image
entity: TAG_00
image: /local/images/lavatrice.png
state_filter:
"off": brightness(50%) saturate(0.5) opacity(1.0)
"on": brightness(100%)
style:
left: 18%
top: 39%
width: 20%
- type: state-label
entity: sensor.presa_lavatrice_power
prefix: "⚡ "
style:
top: 0%
left: 32%
pointer-events: none
transform: initial
font-size: 12px
line-height: 24px
padding: 0px 14px
color: var(--primary-text-color)
- type: state-label
entity: sensor.presa_lavatrice_energy
prefix: "🏭 "
style:
top: 0%
left: 52%
pointer-events: none
transform: initial
font-size: 12px
line-height: 24px
padding: 0px 14px
- type: state-label
entity: sensor.consumo_lavatrice
prefix: "💰 "
style:
top: 0%
left: 74%
pointer-events: none
transform: initial
font-size: 12px
line-height: 24px
padding: 0px 14px
- type: state-label
entity: switch.presa_lavatrice
prefix: "Stato: "
style:
top: 10%
left: 36%
pointer-events: none
transform: initial
font-size: 12px
font-weight: bold
color: null
line-height: 24px
padding: 2px 2px
- type: custom:apexcharts-card
style:
"--ha-card-background": rgba(0,0,0,0.0)
"--ha-card-border-width": 0px
"--ha-card-box-shadow": none
top: 50%
left: 65%
width: 60%
font-size: 12px
experimental:
color_threshold: true
apex_config:
chart:
height: 100px
tooltip:
enabled: true
title:
style:
fontSize: 12px
fontFamily: Segoe UI Light
yaxis:
forceNiceScale: true
decimalsInFloat: 1
labels:
style:
fontSize: 11px
fontFamily: Segoe UI Light
xaxis:
axisBorder:
show: true
labels:
show: true
style:
fontSize: 10px
fontFamily: Segoe UI Light
grid:
show: true
borderColor: rgba(112, 135, 164, 0.5)
graph_span: 3h
span:
start: minute
offset: "-3h"
show:
last_updated: false
header:
standard_format: false
show: false
show_states: false
colorize_states: true
title: Potenza
series:
- entity: sensor.presa_lavatrice_power
name: Potenza
type: line
stroke_width: 2
curve: stepline
group_by:
func: last
fill: last
duration: 1m
show:
header_color_threshold: true
extremas: true
name_in_header: false
legend_value: false
opacity: 0.8
color_threshold:
- color: "#27b376"
value: 100
- color: "#f9a73e"
value: 500
- color: "#bf212f"
value: 1000
#######################################
## BUTTONS BELOW
#######################################
buttons:
card:
type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 0px;
}
card:
type: grid
columns: 4
square: false
cards:
- type: custom:button-card
name: Info
But I get the following card:
The info button is under the rest of the card, I’d like to put the button on the bottom of the card under the white line:
I tried to change the button section code but with no success.