Can some one help how i can fix the icon so also the steam will be colored. I guess it because it is not connected to the rest of the icon…
Hi,
you can unify all elements of your icon by edit path by nodes, select the elements you want and then use Union function.
I hope this helps.
1 Like
You get the color from fill="var(--button-card-light-color-no-temperature)"
If you don’t define fill on the paths you can color every path using fill in the top svg tag
<svg viewBox="0 0 50 50" fill="var(--button-card-light-color-no-temperature)">
...
or group the paths
<g fill="var(--button-card-light-color-no-temperature)">
<path d="1...
<path d="2...
</g>
...
or define the fill on every path
<path fill="var(--button-card-light-color-no-temperature)" d="1...
<path fill="var(--button-card-light-color-no-temperature)" d="2...
2 Likes
Possible to show icon without steam when it’s off by code settings?
Thank you @Mattias_Persson, i think i got the feeling how it works now. Here is my result and svg code if someone is interested.
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<g fill="var(--button-card-light-color-no-temperature)">
<path d="M0 16.6h13.7v25.6H0zm0 0"/>
<path d="M50 40.2v-4.8c0-4.5-3.7-8.3-8.3-8.3h-4.1v-7.4H17.9l4 6.8v3.2a7.8 7.8 0 002 15.4H0V50h50v-4.9H35.7a7.8 7.8 0 003-15h3c3 0 5.4 2.4 5.4 5.3v4.8zM34.7 29.5h-9.8v-2h9.8zm0 0M39.8 7.4a1 1 0 100 2 1 1 0 000-2zm0 0"/>
<path d="M39.7 0H0v13.7h50v-3.4C50 4.6 45.4 0 39.7 0zm.1 12.3a4 4 0 110-7.8 4 4 0 010 7.8zm0 0"/>
</g>
</svg>`;]]]
1 Like
Very impressive. I want to implement but don’t know how to start. Any idea or suggestion?
i know its sound stupid, but how can i “install” this panel? 
Mattias’ Github page lays it out pretty well. You need to copy all his config, ui, sensor files etc, and add the fonts required as well. Then add/change your data into these files.
Just be prepared for quite a bit of code changing, you really need to spend a bit of time thinking about how this type of panel will represent your home. Have a really good read through the thread above as well, Mattias has very kindly answered many many questions. It’s worth the effort in the end!
2 Likes
Hi Frank,
inspired by your setup I was trying to include the weather overview on the sidebar based on the “dark-sky-weather-card” - however, I just don’t get it showing up or it shows up but I cannot move to the sidebar 
I was wondering if you could help me by sharing your yaml code for that part of your setup?
Thanks a lot und viel Spaß in der Villa Kunterbunt 
Hi, here is what i have in my lovelace-ui: (markdown for orientation)
#################################################
# #
# MARKDOWN #
# #
#################################################
- type: custom:hui-markdown-card
style:
{top: 4%, left: 11.1%, width: 15.5vw, height: 1px, --ha-card-background: none, --ha-card-box-shadow: none,
--primary-text-color: 'rgba(255, 255, 255, 0.9)', font-family: SF Display, font-size: 1.5vw, font-weight: 300,
letter-spacing: 0.06vw, line-height: 1.5vw, opacity: 0.75}
content: >
<span>{{ states('sensor.time') }}</span>
<font color='#6a7377'><b>{{ states('sensor.dag') }}</b><br>
<b>{{ states('sensor.datum') }}</b> </font><br>
<br>
<b>{{ states('sensor.sidebar_active') }}</b>
<font color='#6a7377'>
##########################################################################
# #
# * Wetter * #
# #
##########################################################################
- backdrop: false
entity: weather.villa_kunterbunt
current: true
details: false
forecast: true
name: ' '
style:
{top: 54%, left: 10%, width: 22%, height: 30% !important, overflow: hidden, --ha-card-background: none, --ha-card-box-shadow: none,
--primary-text-color: 'rgba(255, 255, 255, 0.9)', font-family: SF Display, font-size: 1vw, font-weight: 300,
letter-spacing: 0.06vw, line-height: 2.05vw, opacity: 0.75}
type: 'custom:weather-card'
Its not the best code, but it work for me 
1 Like
Playing around with this great dashboard. Added one more sidebar page.
Code if someone is interested.
https://pastebin.com/J9XtyEUY
1 Like
Hi Mattias. Having an issue with the animation for the icons hoping you can assist on.
i have a button that opens a popup card with an overview of all my lights placed in a picture element.
The button changes based on a input boolean which works.
My problem is if the input boolean is “on” all the icons in the popup card goes on eventhough the lights are off. how can i get it to work for each lamp? Works perfect on the mainscreen.
That is weird but too long for me to troubleshoot. What’s the reason for this though? Is this a master light switch? I would probably use Entity Filter Card, to only list lights that are on, in the popup.
Thank your very much - works splendid!
1 Like
@Mattias_Persson, is it possible to reduce the empty space below the camera image in ha-card? Or is the picture-element that does this by default?
What does the yaml look like
Yes. i can use action hold and all lights turn off. if i do a simple press i shows a list of all my lights in the house so i can turn them on/off Individual. therefore entity filter card is no good.
Hmm yeah. To me it sounds like an error in the automation or whatever you’re using to control the input boolean because an input boolean shouldn’t affect all your light states, right. You only posted the service call and not the button-card code so it’s unfortunately hard to guess what’s wrong.
@jompa68 Oh yeah it’s the data uri dimensions, try viewBox='0 0 50 20'
- type: picture-elements
title: Gräsklippning
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
style: |
ha-card {
...
or specify height: 200px; or whatever under style: ha-card