I tweaked your code (well Mattias’s) just a little bit more. Took out all the un needed light template stuff.
I also use the Tesla integration on github that you offered but found that it often gives back unknown values. So I’m using Teslamate which ALWAYS gives back values. So much more accurate.
I also used the push action as a climate control instead of the given popup info card as I’m already using that in the sidebar bottom icons.
This is what it looks like.
And this is the changed code:
ui-lovelace:
- type: custom:button-card
entity: sensor.tesla_est_battery_range_mi_1
tap_action:
!include popup/tesla1_climate.yaml
name: Blanche
variables:
retain: binary_sensor.blanche_charger_sensor
template:
- tesla1
- icon_tesla
tesla1 template:
tesla1:
template:
- base
- charge1
aspect_ratio: 1/1
show_state: true
show_icon: false
show_name: true
show_current_temperature: true
show_control: true
state:
- operator: template
value: >
[[[ return (states['sensor.tesla_battery_level_1'].state > 20) ]]]
styles:
card: [background-color: "rgba(255, 255, 255, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
styles:
name: [top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state: [top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[
font-family: Sf Display,
letter-spacing: 0.05vw,
font-weight: 400,
color: "rgba(255, 255, 255, 0.3)",
font-size: 1.34vw,
background-color: "rgba(115, 115, 115, 0.2)",
border-radius: 0.8vw,
box-shadow: none,
transition: none,
]
charge1 template:
charge1:
custom_fields:
circle: >
[[[
if (Math.round(states['sensor.blanche_battery_sensor'].state) > 0) {
const input = states['sensor.blanche_battery_sensor'].state;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
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="#b2b2b2" stroke-width="1.5" fill="none" />
<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>
`;
}
]]]
styles:
custom_fields:
circle: &person1
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
I kept your icon-telsa template the same. Thanks a ton. It looks nice.
@Mattias_Persson One thing I didn’t understand was this:
circle: &person1
What does this portion do? I have 2 cars so I had to use &person1 and &person2 in order to make it work but I have not clue what circle: &person1 does?
