Closed ultimate-tester closed 2 years ago
lines are too thin for a start, but you need to do a stroke trace if its only the stroke you want to see
if this is a custom button card and thats a SVG file you you should have after your custom the code in the button set like this you can copy and paste this into manual card if you have custom button card and card mod installed and change entity and icon to yours for a better effect when on
'''
entity: #your nano leaf entity here
color: '#769600'
name: nanoleaf
icon: #your icon name here
extra_styles: |
@keyframes pulse {
0% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF7E00);
filter: contrast(96%) drop-shadow(3px 3px 15px #FF7E00);
}
10% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #9D00FF);
filter: contrast(96%) drop-shadow(3px 3px 15px #9D00FF);
}
20% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF0000);
filter: contrast(96%) drop-shadow(3px 3px 15px #FF0000);
}
30% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #5F9EA0);
filter: contrast(96%) drop-shadow(3px 3px 15px #5F9EA0);
}
40% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FFFF00);
filter: contrast(96%) drop-shadow(3px 3px 15px #FFFF00);
}
50% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF7F50);
filter: contrast(96%) drop-shadow(3px 3px 15px #FF7F50);
}
60% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #008080);
filter: contrast(96%) drop-shadow(3px 3px 15px #008080);
}
780% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF1493);
filter: contrast(96%) drop-shadow(3px 3px 15px #FF1493);
}
80% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #1E90FF);
filter: contrast(96%) drop-shadow(3px 3px 15px #1E90FF);
}
900% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #1E90FF);
filter: contrast(96%) drop-shadow(3px 3px 15px #1E90FF);
}
100% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #FFA500);
filter: contrast(96%) drop-shadow(3px 3px 15px #FFA500);
}
}
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
styles:
img_cell:
- padding-left: 50%
- padding-right: 50%
- justify-content: center
card:
- width: min(25vw, 140px)
- height: min(25vw, 140px)
- border-style: solid
- border-width: 0px
- border-color: '#769600'
- border-radius: 20px
- background: url("/local/images/blacka.jpg")
- '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
- '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
state:
- justify-self: start
- font-weight: bold
- font-size: 15px
- opacity: 0.6
- padding: 0 15px 5px
- '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
state:
- value: 'on'
styles:
icon:
- animation: pulse 10s infinite
state:
- animation: pulse 10s infinite
name:
- animation: pulse 10s infinite
card:
- border-style: solid
- border-width: 2px
- border-color: '#769600'
- box-shadow: var(--soft-ui-pressed)
- animation: pulse 10s infinite
show_state: true
card_mod:
class: soft-ui
type: custom:button-card
''' if you dont want the glow around the edges of the card just remove
if you dont like the border remove
- border-style: solid
- border-width: 2px
- border-color: '#769600'
from card
Describe the bug I have just finished drawing my first vector image in Illustrator (ever) and managed to get it all in a oneliner for the js file. Unfortunately in Home Assistant the "fill" and "stroke" attributes are unset, defaulting them to some unexpected color. This is the result in home assistant:
If I force the fill and stroke attributes in the developer console it looks fine:
And here is the original image:
Am I doing something wrong? How can I draw the vector images in such a way that the fill and stroke attributes are properly kept or how can I prevent the shape from automatically filling the wrong color?