The latest version of ‘home assistant’ has been updated, but it still cannot adjust the color temperature. I have cleared the browser cache and there is no response when clicking on the color
Could anyone share the code for “Icon_tesla”? I did noticed, that it was referenced above , but was not able to locate the code for it.
I am trying to use it with Teslamate integration for HA
Hello, I have also encountered the same problem. After the update, both on and off have been changed to on and off. Have you found a solution? I am also from China. Thank you again.
Sorry I don’t know about docker containers as I’m using haos on NUC
icon_tesla:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -10%
custom_fields:
icon: >
[[[
let state = states[variables.retain].attributes.charging_state;
return `
<svg viewBox="0 0 504 304.64" fill="var(--light-color)">
<style>
.Charging {
fill: url(#charging-fill);
}
.Stopped {
fill: red;
}
.Complete {
fill: #00CB00;
}
.resting {
transform: rotateZ(-90deg) translate(-1.5%, 0%);
transform-origin: 45% 41%;
}
</style>
<linearGradient id="charging-fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="100%" stop-opacity="1" stop-color="#00CB00">
<animate attributeName="offset" values="0;1" repeatCount="indefinite" dur="3s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="#00CB00">
<animate attributeName="offset" values="0;1" repeatCount="indefinite" dur="3s" begin="0s"/>
</stop>
</linearGradient>
<g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="${state}" d="M490.56,90.72c-9-2.24-27.44-7.28-28.56,0s-3.35,20.16-3.35,20.16L443.52,112s-1.68-1.68-3.36-7.84-17.92-60.48-30.8-79S387.52,9,387.52,9v.56S337.13,0,251.44,0,115.36,9.52,115.36,9.52V9S107,6.72,93.52,25.2c-12.88,18.48-29.12,72.8-30.8,79S59.36,112,59.36,112L44.8,110.88S43.12,98,41.44,90.72c-1.12-7.28-19.6-2.24-28.56,0C4.48,92.4,0,106.4,0,109.2s2.24,5,6.16,6.72,28,3.36,31.92,3.36c4.48,0,3.92-1.12,3.92-1.12l14.56,1.12s-1.12,5-3.92,6.16-3.36,3.92-5,6.16-18.48,14.56-21.28,21.84c-6.16,14-1.12,41.44-1.12,62.16,0,20.16,3.92,52.64,5.6,66.08s12.88,23,12.88,23H95.2c7.28,0,21.28-2.24,28.56-2.24H380.24c7.28,0,21.28,2.24,28.56,2.24h51.52s11.76-9.52,12.88-23c1.68-13.45,5.6-45.93,5.6-66.08s5-47.6-1.12-62.16c-2.8-6.72-19.6-19-21.28-21.84-1.68-2.24-2.24-5-5-6.16s-3.92-6.16-3.92-6.16L462,118.16s-.56,1.12,3.92,1.12,28-1.12,31.92-3.36S504,112,504,109.2s-4.47-16.8-13.43-18.48ZM77.84,104.16C80.08,93.52,101.36,23.52,107.52,19c0,0,67.2-5,143.92-5s143.92,5,143.92,5c6.72,4.48,27.44,74.48,29.68,85.12s-1.12,10.64-1.12,10.64H79s-3.36,0-1.12-10.64ZM96.32,243c-3.92,0-47.6-.56-47.6-.56s9.52,18.48,11.2,21.84c1.68,3.92,1.68,10.64-3.92,9-5-1.68-10.64-12.88-12.32-19-1.68-6.72-3.92-23-3.92-23l66.07,5c0,.56-5.59,6.72-9.51,6.72ZM103,190.4c-16.24,0-37.52-6.16-43.68-7.84s-10.64-8.4-10.64-17.36,0-18.48,10.08-28.56c0,0,11.76,0,21.28,7.84,9,7.28,16.8,14,26.88,17.36,15.12,4.48,26.32,20.72,26.32,20.72s-14,7.84-30.24,7.84Zm267.68,93H133.28c-5.6,0-14-1.12-6.72-9,5.61-5.6,15.12-10.08,33.61-10.08H342.73c18.48,0,28,4.48,33.6,10.08,8.39,7.84,0,9-5.61,9Zm93.52-51.52s-2.24,16.24-3.92,23-7.28,17.36-12.32,19-5.6-5.6-3.92-9S455.28,243,455.28,243s-43.68.56-47.6.56-9-6.72-9-6.72Zm-9.52-66.64c0,9-3.92,15.68-10.64,17.36s-28,7.84-43.68,7.84c-16.24,0-30.24-7.84-30.24-7.84s10.64-16.24,26.32-20.72c10.08-2.8,17.36-10.08,26.88-17.36a38.11,38.11,0,0,1,21.28-7.84c10.08,10.08,10.08,19.6,10.08,28.56Z"/></g></g>
</svg>
`;
]]]
1 Like
Thank you!
Okay, this is a screenshot of the pop-up window. Clicking on the color button has no effect. Clicking on the color button in the entity can change the color temperature from white to orange, while clicking on the color button in the pop-up window has no effect.
Mattias’ latest update for 01 Sept fixed the detached graph…but it now introduced another separate issue. Now it’s only showing the bottom half of the tab names, and shows a scroll bar for each of my popups.
Might have to play around with the popup styles to fix that.
there’s some previous “fixes” that can be removed now, I don’t see the scrolling though
2 Likes
Hello! I love your design, @Mattias_Persson, so thank you very much for sharing. I’m trying to tweak it a bit by creating a swipe-card for rooms. You’ve managed to make the title change on the Media swipe-card, and I’ve found that you set what the titles should be in media.yaml file. But if I want to have this on other cards exampel merge vardagsrum and sovrum cards in a swipe-card , how can I make it work? I’ve tried a few things, but I can’t get it to change title when I swipe.
Thank you Guys! I got very close with my Tesla card and Popup.
Few quick questions and request for suggestions?
-
How I can have different color for the circle in Tesla Button card when it is charging?
-
Any suggestions on improving the Popup Status card?
-
I did got the latest for Popup’s , still my popup page header is off. Anyway i can fix it?
Attaching image for reference. TIA
Hi Guy’s,
I’m hoping someone can help me with my garage door animation, I can’t get it working correctly, Iwant it to animation to open position, stay open whilst gargae door os open, then reverse the animation when it start to close.
here what I have got working so far.
ss you can see it animates to open position ok, but then it flashes withn a closed icon, then goes open again, and same for reverse what am I doing wrong.
heres my code.
custom_fields:
icon: >
[[[
let path_closed = `
<path d="M19,20H17V11H7V20H5V9L12,5L19,9V20M8,12H16V14H8V12M8,15H16V17H8V15M16,18V20H8V18H16Z" />
`
let path_open = `
<path d="M 19,20 H 17 V 11 H 7 v 9 H 5 V 9 l 7,-4 7,4 v 11" />
`,
style = `
<svg viewBox="0 0 24 24">
<style>
@keyframes door_open {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 85% 83%, 15% 83%, 14% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
}
@keyframes door_close {
100% { clip-path: inset(0 0 0 0); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 85% 83%, 15% 83%, 14% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 84% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
}
.start {
animation: door_open 3s steps(1);
}
.on {
will-change: transform;
}
.end {
animation: door_close 3s steps(1);
}
.start_timeout {
transform-origin: center;
will-change: transform;
}
.end_timeout {
transform-origin: center;
will-change: transform;
}
</style>
`;
if (entity.state === 'on' && variables.timeout < 1000) {
return `${style}<g class="start">${path_closed}</g><g class="on">${path_open}</g></svg>`;
}
if (entity.state === 'off' && variables.timeout < 1000) {
return `${style}<g class="end">${path_closed}</g></svg>`;
}
if (entity.state === 'on' && variables.timeout > 1000) {
return `${style}<g class="start_timeout">${path_open}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path_closed}</g></svg>`;
}
]]]
Now i cant see the tabs from the custom:tabbed-card.
I am the only one?
Is there a workaround for this?
@Adelina ; It doesnt look like frontend is updated for you here.
My popup got automatically refreshed, unless there’s a change I’m forgetting.
Here are my current light popup templates.
Single:
light:
template:
- base
- circle
- loader
variables:
circle_input: >
[[[
if (entity) {
// if light group get brightness from child to remove bounce
let child = entity.attributes.entity_id,
brightness = child && states[child[0]].attributes.brightness
? Math.round(states[child[0]].attributes.brightness / 2.54)
: Math.round(entity.attributes.brightness / 2.54);
return brightness === 0 && entity.state !== 'off'
? 1
: brightness
}
]]]
circle_input_unit: '%'
light_entity: '[[[ return entity.entity_id ]]]'
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
sequence:
style: >
--popup-background-color: transparent;
content:
type: custom:more-info-card
entity: '[[[ return variables.light_entity; ]]]'
card_mod:
style:
more-info-card:
$ha-card:
.: |
state-card-content {
display: none !important;
}
$: |
.card-header {
display: none !important;
}
more-info-light:
$: |
ha-attributes {
display: none !important;
}
.controls {
margin-bottom: 0 !important;
}
Group:
room_group:
template:
- base
variables:
light_entity: '[[[ return entity.entity_id ]]]'
state_display: >
[[[
if (variables.state == 'no') {
return 'Off';
}
else if (variables.state == 'yes') {
return 'On';
}
]]]
hold_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.light_entity; ]]]'
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
#- service: browser_mod.close_popup
- service: browser_mod.popup
data:
sequence:
style: >
--popup-background-color: transparent;
card_mod:
style:
more-info-card:
$ha-card:
.: |
state-card-content {
display: none !important;
}
$: |
.card-header {
display: none !important;
}
more-info-light:
$: |
ha-attributes {
display: none !important;
}
.buttons {
margin-bottom: 0 !important;
}
.buttons md-outlined-icon-button:nth-child(2) {
display: none !important;
}
.controls {
margin-bottom: 0 !important;
}
content:
type: custom:more-info-card
entity: '[[[ return variables.light_entity; ]]]'
1 Like
Probably a bug after HA update, I have the same problem. I’ll wait for a fix later.
2 Likes
May I ask what I need to do? Is it because my code is incomplete? I am using the same code as you for the lighting template. Which file do I need to include your second paragraph of code in?
clicking on the color button in the pop-up window has no effect.
@Adelina update browser_mod and clear cache
1 Like
Wow! Thank you very much, but what is the reason why the background of the pop-up window is not transparent?
I’m running version 2023.7.3, because there’s too many breaking changes (for me) in the newest versions.
(transparancy is one of them)