Hello all,
I just recently started to use HA, coming from homebridge.
I am trying to build up my dashboard using this config as a base:
https://github.com/matt8707/hass-config
I just got stuck when I was trying to build up a custom button card with some data from my devices.
I would like to eliminate the spacing between the two cards and have them close to each other.
My ui-lovelace.yaml looks like this
views:
- type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar batteries . . ."
"sidebar . . . ."
"sidebar footer footer footer ."
cards:
- type: custom:button-card
styles: #extra_styles fix
card:
- display: none
- type: grid
title: Batteries
view_layout:
grid-area: batteries
columns: 1
cards:
- type: custom:button-card
entity: device_tracker.tamas_iphone_xs_2
triggers_update:
- sensor.time
name: >
[[[
return entity.attributes.friendly_name;
]]]
variables:
battery: device_tracker.tamas_iphone_xs_2
template: battery
- type: custom:button-card
entity: device_tracker.tamas_iphone_se
triggers_update:
- sensor.time
name: >
[[[
return entity.attributes.friendly_name;
]]]
variables:
battery: device_tracker.tamas_iphone_se
template: battery
and I have my templates in button_card_templates.yaml:
custombase:
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing'].indexOf(entity === undefined || entity.state) !== -1; ]]]
aspect_ratio: 1/1
show_state: false
show_icon: false
styles:
grid:
- grid-template-areas: |
"n circle"
- grid-template-columns: 1fr 1fr
- grid-template-rows: auto
- align-items: start
name:
- justify-self: start
- padding-left: 10px
card:
- font-family: Sf Display, Roboto
- border-radius: 15px
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10% 9% 9% 10%
- --mdc-ripple-color: >
[[[
return variables.state_on
? 'rgb(0, 0, 0)'
: 'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return variables.state_on
? 'rgba(0, 0, 0, 0.6)'
: 'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return variables.state_on
? 'rgba(255, 255, 255, 0.8)'
: 'rgba(115, 115, 115, 0.2)';
]]]
- height: 40px
- width: 300px
battery:
template:
- custombase
- circle
triggers_update: sensor.time
hold_action:
action: none
custom_fields:
circle: >
[[[
let input = states[variables.battery].attributes.battery_level,
radius = 20.5,
circumference = radius * 2 * Math.PI;
var color = "#27C950";
if (input <= 20) {
color = "#FDD60F";
} else if (input <= 40) {
color = "#FDD60F";
}
else {
color = "#27C950";
}
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="${color}" stroke-width="5" fill="none" stroke-linecap="round"/>
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
]]]
Can you give some hint or direction where to look, pelase?
I do not get it why I have the vertical spacing between my custom cards.
Thank you in advance!