I’m progressing nicely. Can somebody point me to a guide/tutorial for these nice animated icons? I would like to make one for a smart plug.
find it 
linear infinite
I had the same question before and Mattias was so kind to help me here: A different take on designing a Lovelace UI
1 Like
Thanks, and sorry I didn’t find it myself in the thread. I’m still struggling a bit with searching in these modern forums with dynamically loading threads 
Hi all
Been reading through the tread, but can’t seem to find what i’m looking for:
- Does any know where I can find a full list of the icons Mathias is using?
I see for example the Hue bulb is working fine but it’s not in the icons.yaml in the repo.
Also has anyone made an icon for a oven, in a similar design to these?
Thanks in advance
Guys, after some tests, the best result I could reach is this in the picture attached.
Please, if someone want to spend a bit of time explaining me how I can import this UI… I will offer a beer!
Thank you guys…!
First off amazing design. You got me working like a mad man redesigning mine. First question, i scrawled through the posts in this thread never saw anything on how to use the fonts.css and actually getting the SF fonts to work. Can anyone enlighten me?
Edit: I downloaded all of the .otf font files from https://sf.abarba.me/font.css and placed them in local/font/ restarted and cleared cache. Looks good.
Edit: Running into a problem with the light-popup-card and TV icon not showing and tile is spacing is off.
Just for your info.
Popup is broken in 0.113
It seems you dont have the custom integrations which are necessary like swipe card.
resources:
[ {url: /hacsfiles/bar-card/bar-card.js, type: module},
{url: /hacsfiles/button-card/button-card.js, type: module},
{url: /hacsfiles/calendar-card/calendar-card.js, type: module},
{url: /hacsfiles/custom-header/custom-header.js, type: module},
{url: /hacsfiles/light-entity-card/light-entity-card.js, type: js},
{url: /hacsfiles/light-popup-card/light-popup-card.js, type: module},
{url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module},
{url: /hacsfiles/lovelace-card-preloader/lovelace-card-preloader.js, type: module},
{url: /hacsfiles/lovelace-hui-element/hui-element.js, type: module},
{url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module},
{url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module},
{url: /hacsfiles/lovelace-valetudo-map-card/valetudo-map-card.js, type: js},
{url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module},
{url: /hacsfiles/mini-media-player/mini-media-player-bundle.js, type: module},
{url: /hacsfiles/popup-backdrop-filter/popup-backdrop-filter.js, type: module},
{url: /hacsfiles/stack-in-card/stack-in-card.js, type: module},
{url: /hacsfiles/swipe-card/swipe-card.js, type: module},
{url: '/local/custom_icons.js?v=25052001', type: module},
{url: /local/font.css, type: css} ]
Do you have these installed?
I noticed too. Will this be fixed, or is this a deliberate change and do we need to wait for the relevant custom components to adapt?
Hoping there’s a solution for the popups soon, I’m continuing on my layout. I really tried, but wasn’t successful creating my own icon. If somebody has some time to spare and would like to give it a try. I would like this smart plug icon to have a blue lit “power button” when turned on. No blue circle when off. Some animation of the power button when turning on and off would be even more cool.
SVG here: https://www.flaticon.com/free-icon/smart-plug_1699745
Animation is not good, still trying to find out how this work, but with this you can play around:
[[[ if (entity.state === 'on') {
return '<svg viewBox="0 0 357.38 511.12"><style>@keyframes animate{35%{transform: scale(0.4); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}36%{transform: translateY(0%);}49%{transform: scale(1.25);}63%{transform: scale(0.65); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}77%{transform: scale(1.15); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}95%{transform: scale(0.2);}}.animate{animation: ping 0.8s ease-in-out infinite both; transform-origin: center;}@keyframes rubber{0%{transform: scale(1);}40%{transform: scale(0.4);}50%{transform: scale(0.65);}63%{transform: scale(1);}50%{transform: scale(0.65);}100%{transform: scale(0.8);}}.rubber{animation: rubber 1.0s; transform-origin: center;}</style>
<g class="rubber"><path fill="#61c3d7" d="M178.69,127.68a58,58,0,1,1-58,58A58,58,0,0,1,178.69,127.68Z"/></g><path fill="#9da0a2" d="M107.81,185.68a70.88,70.88,0,1,0,70.88-70.88A71,71,0,0,0,107.81,185.68Zm70.88-55.9a55.9,55.9,0,1,1-55.9,55.9A55.94,55.94,0,0,1,178.69,129.78Zm.5,89.84a30.51,30.51,0,0,0,30.45-30.45,30.94,30.94,0,0,0-3.89-14.87,7.53,7.53,0,0,0-10.19-2.9,7.4,7.4,0,0,0-2.79,10.19,15.32,15.32,0,0,1,2,7.58,15.47,15.47,0,1,1-28.95-7.58,7.44,7.44,0,1,0-13-7.29,29.76,29.76,0,0,0-3.9,14.87A30.21,30.21,0,0,0,179.19,219.62Zm0-27a7.55,7.55,0,0,0,7.49-7.49v-25a7.49,7.49,0,0,0-15,0v25A7.55,7.55,0,0,0,179.19,192.67ZM349.9,0H7.49A7.54,7.54,0,0,0,0,7.49V277.32a34.18,34.18,0,0,0,34.14,34.14h4.29v63.39a7.54,7.54,0,0,0,7.49,7.49H87.35V488.66a22.46,22.46,0,0,0,44.92,0V382.34h14.78a7.49,7.49,0,0,0,0-15H53.41V311.46H304v55.91H178.69a7.49,7.49,0,1,0,0,15h46.42V488.66a22.46,22.46,0,0,0,44.92,0V382.34h41.43a7.54,7.54,0,0,0,7.49-7.49V311.46h4.29a34.18,34.18,0,0,0,34.14-34.14V179.69a7.49,7.49,0,1,0-15,0v97.63a19.18,19.18,0,0,1-19.17,19.17H34.14A19.18,19.18,0,0,1,15,277.32V15H342.41V95.34a7.49,7.49,0,0,0,15,0V7.49A7.54,7.54,0,0,0,349.9,0ZM117.3,382.34V488.66a7.49,7.49,0,0,1-15,0V382.34ZM255.06,488.66a7.49,7.49,0,0,1-15,0V382.34h15ZM349.9,119.79a7.54,7.54,0,0,0-7.49,7.49v20.47a7.49,7.49,0,0,0,15,0V127.28A7.54,7.54,0,0,0,349.9,119.79ZM186.18,68.38v-18a7.49,7.49,0,0,0-15,0v18a7.49,7.49,0,0,0,15,0Z"/></svg>'; }
else { return '<svg viewBox="0 0 357.38 511.12"><path fill="#9da0a2" d="M107.81,185.68a70.88,70.88,0,1,0,70.88-70.88A71,71,0,0,0,107.81,185.68Zm70.88-55.9a55.9,55.9,0,1,1-55.9,55.9A55.94,55.94,0,0,1,178.69,129.78Zm.5,89.84a30.51,30.51,0,0,0,30.45-30.45,30.94,30.94,0,0,0-3.89-14.87,7.53,7.53,0,0,0-10.19-2.9,7.4,7.4,0,0,0-2.79,10.19,15.32,15.32,0,0,1,2,7.58,15.47,15.47,0,1,1-28.95-7.58,7.44,7.44,0,1,0-13-7.29,29.76,29.76,0,0,0-3.9,14.87A30.21,30.21,0,0,0,179.19,219.62Zm0-27a7.55,7.55,0,0,0,7.49-7.49v-25a7.49,7.49,0,0,0-15,0v25A7.55,7.55,0,0,0,179.19,192.67ZM349.9,0H7.49A7.54,7.54,0,0,0,0,7.49V277.32a34.18,34.18,0,0,0,34.14,34.14h4.29v63.39a7.54,7.54,0,0,0,7.49,7.49H87.35V488.66a22.46,22.46,0,0,0,44.92,0V382.34h14.78a7.49,7.49,0,0,0,0-15H53.41V311.46H304v55.91H178.69a7.49,7.49,0,1,0,0,15h46.42V488.66a22.46,22.46,0,0,0,44.92,0V382.34h41.43a7.54,7.54,0,0,0,7.49-7.49V311.46h4.29a34.18,34.18,0,0,0,34.14-34.14V179.69a7.49,7.49,0,1,0-15,0v97.63a19.18,19.18,0,0,1-19.17,19.17H34.14A19.18,19.18,0,0,1,15,277.32V15H342.41V95.34a7.49,7.49,0,0,0,15,0V7.49A7.54,7.54,0,0,0,349.9,0ZM117.3,382.34V488.66a7.49,7.49,0,0,1-15,0V382.34ZM255.06,488.66a7.49,7.49,0,0,1-15,0V382.34h15ZM349.9,119.79a7.54,7.54,0,0,0-7.49,7.49v20.47a7.49,7.49,0,0,0,15,0V127.28A7.54,7.54,0,0,0,349.9,119.79ZM186.18,68.38v-18a7.49,7.49,0,0,0-15,0v18a7.49,7.49,0,0,0,15,0Z"/></svg>'; } ]]]
1 Like
Wow!!! Thank you so very much. That’s really amazing!
1 Like
Hi Frank
How did your yaml end up looking like? I want to do something similar with my Velux skylights opening position.
Sorry I can’t show how i looks open, but it’s raining in Denmark
Really getting some stuff done here… Thanks again @Mattias_Persson!
I have an issue with a hold_action on the picture_elements card. It won’t react at all…
Can anyone see the issue?
´´´
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
style:
top: 56.55%
left: 35.8%
width: 20.97%
height: 1px
--ha-card-background: none
--ha-card-border-radius: .88vw
--ha-card-box-shadow: none
image-rendering: crisp-edges
cards:
- type: picture-elements
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
elements:
- type: custom:button-card
entity: media_player.alrum
custom_fields:
icon: *icon_sonos
style:
top: 50%
left: 50%
width: 100%
hold_action: !include popup/sonos_alrum.yaml
template: media
´´´
Thanks in advance
Was this to make a “button_card_template” for your covers? If so, how did it end up? Visual and yaml.
I’ve been looking for something like that.
Thank you in advance
At the moment I unfortunately don’t find so much time to push the development. At the moment I’m also a bit worried about the new update. But you can see the development here: https://github.com/fastender/blob
1 Like
Okay, so you didn’t get to creating such template?
I understand, I comes in small dedicated time spans for me as well.
Hi Jason
How did your calendar result end up? I trying a similar setup and need a little inspiration
Br
Martin
Another day another challenge. I’m struggling with styling a markdown card. I would like to layout elements inside of it. Now the reason I’m struggling may be the fact that the way to do styles varies between some card types, or my css is simply very rusty
I have this card:
- type: custom:hui-markdown-card
entities:
- sensor.multi_sensor_woonkamer_temperatuur
- sensor.multi_sensor_slaapkamer_temperatuur
- sensor.hue_motion_mancave_temperature
- sensor.multi_sensor_woonkamer_vochtigheid
- sensor.multi_sensor_slaapkamer_vochtigheid
content: >
<div><ha-icon icon="mdi:sofa"></ha-icon> {{ states('sensor.multi_sensor_woonkamer_temperatuur') }}º </div><div><ha-icon icon="mdi:bed"></ha-icon> {{ states('sensor.multi_sensor_slaapkamer_temperatuur') }}º</div><div><ha-icon icon="mdi:desktop-tower-monitor"></ha-icon> {{ states('sensor.hue_motion_mancave_temperature') }}º</div>
style: { top: 65%, left: 60.5%, width: 21% }
I’m not able to successfully add something like this
display: grid, grid-template-columns: repeat(3, 1fr)
Doing something like
style: |
ha-card { top: 65%, left: 60.5%, width: 21% }
ha-markdown-element: { display: grid, grid-template-columns: repeat(3, 1fr) }
But the “|” causes an error???
Doing it like this will simply result in ignoring the styles
style:
ha-card { top: 65%, left: 60.5%, width: 21% }
ha-markdown-element: { display: grid, grid-template-columns: repeat(3, 1fr) }
Any help very much appreciated.
Some more info Apparently I’m doing something wrong. the styles I define end up at the wrong place: Outisde of the markdown element toally at the bottom of the ha-card element.
<hui-markdown-card class="element">
<ha-card class="type-custom-hui-markdown-card">
<slot></slot>
<ha-markdown breaks="" class="no-header">
<ha-markdown-element>
<div>
<ha-icon icon="mdi:sofa"/> 24.2º
</div>
<div>
<ha-icon icon="mdi:bed"/> 24.6º
</div>
<div>
<ha-icon icon="mdi:desktop-tower-monitor"/> 23.91º
</div>
</ha-markdown-element>
<card-mod slot="none"><!---->
<style>
ha-markdown-element > font > ha-icon {vertical-align: 3%; opacity: 0.6;}
ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw;
font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
</style>
<!---->
</card-mod>
<card-mod slot="none"><!---->
<style>
</style>
<!---->
</card-mod>
</ha-markdown>
<card-mod slot="none"><!---->
<style>
.: '* {display: here}'
ha-icon {
color: red
}
ha-card {
top: 65%, left: 60.5%, width: 21%
}
ha-markdown {
display: grid, grid-template-columns: repeat(3, 1fr)
}
</style>
<!---->
</card-mod>
</ha-card>