Hello @Mattias_Persson … Thanks a lot for the repo its a true inspiration!
Im trying to make SVGs work with the button cards. i.e I’ve found this SVG:
view-source:https://upload.wikimedia.org/wikipedia/commons/c/c3/Google-home.svg
If I open it locally it render correctly… however Im not able to use it in the custom_fields in the button cards.
Im not understanding what to clean , and couldnt find a proper documentation for that . Any hints ?
Try this:
<svg viewBox="0 0 242.75 368.85"><defs><style>.cls-1{fill:#e6e6e6;}.cls-2{fill:url(#Unbenannter_Verlauf);}.cls-3{fill:#ccc;}.cls-4{fill:url(#Unbenannter_Verlauf_2);}.cls-5{opacity:0.9;}.cls-14,.cls-16,.cls-5{isolation:isolate;}.cls-6{fill:#2490e4;}.cls-15,.cls-7{fill:none;stroke:#000;}.cls-7{stroke-width:0.02px;}.cls-8{fill:#e41721;}.cls-9{fill:#33d138;}.cls-10{fill:#faf045;}.cls-11{fill:url(#Unbenannter_Verlauf_3);}.cls-12{fill:#333;}.cls-13{fill:url(#Unbenannter_Verlauf_4);}.cls-14{opacity:0.81;}.cls-15{stroke-width:0.26px;}.cls-16{opacity:0.86;}</style><linearGradient id="Unbenannter_Verlauf" x1="-410.54" y1="436.12" x2="-390.76" y2="435.05" gradientTransform="matrix(5.01, 0, 0, -5.01, 2045.58, 2370.57)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#999"/><stop offset="1" stop-color="#999" stop-opacity="0"/></linearGradient><linearGradient id="Unbenannter_Verlauf_2" x1="-1077.92" y1="-115.67" x2="-887" y2="-110.62" gradientTransform="matrix(1.32, 0, 0, -1.32, 1414.25, 142.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7ab9d3"/><stop offset="1" stop-color="#7f9648"/></linearGradient><linearGradient id="Unbenannter_Verlauf_3" x1="-1080.89" y1="-112.34" x2="-975.89" y2="-112.34" gradientTransform="matrix(1.32, 0, 0, -1.32, 1414.25, 142.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#333"/><stop offset="1" stop-color="#333" stop-opacity="0"/></linearGradient><linearGradient id="Unbenannter_Verlauf_4" x1="-1027.44" y1="-156.53" x2="-960.19" y2="-161.09" gradientTransform="matrix(1.32, 0, 0, -1.32, 1414.25, 142.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1a1a1a"/><stop offset="1" stop-color="#666"/></linearGradient></defs><title>layer1</title><g id="Ebene_2" data-name="Ebene 2"><g id="svg8"><g id="layer1"><g id="g4886"><path id="path4551" class="cls-1" d="M16.47,49.94C19.62,156.53-35.1,300.41,39.23,361.13c51.65,8,104.8,12,164,0,83.91-67.74,6.07-244.41,20.08-337.29Z"/><path id="path21" class="cls-2" d="M16.47,49.94C19.62,156.53-35.1,300.41,39.23,361.13c51.65,8,104.8,12,164,0,83.91-67.74,6.07-244.41,20.08-337.29Z"/><ellipse id="path23" class="cls-3" cx="119.87" cy="35.22" rx="103.64" ry="32.44" transform="translate(-3.73 17.01) rotate(-7.99)"/><path id="path27" class="cls-4" d="M240.75,214.78c-43.79,19.28-194,17.59-239.32,4.56-4.43,58.23-.1,110.83,37.8,141.79,51.65,8,104.8,12,164,0,39.15-31.6,43.09-86.91,37.57-146.35Z"/><g id="path29" class="cls-5"><ellipse class="cls-6" cx="131.64" cy="24.64" rx="6.42" ry="1.75" transform="translate(-2.25 21.41) rotate(-9.22)"/><ellipse class="cls-7" cx="131.64" cy="24.64" rx="6.42" ry="1.75" transform="translate(-2.25 21.41) rotate(-9.22)"/></g><g id="ellipse4507" class="cls-5"><ellipse class="cls-8" cx="145.22" cy="36.9" rx="6.42" ry="1.75" transform="translate(-4.04 23.74) rotate(-9.22)"/><ellipse class="cls-7" cx="145.22" cy="36.9" rx="6.42" ry="1.75" transform="translate(-4.04 23.74) rotate(-9.22)"/></g><g id="ellipse4509" class="cls-5"><ellipse class="cls-9" cx="95.49" cy="33.5" rx="6.42" ry="1.75" transform="translate(-4.13 15.73) rotate(-9.22)"/><ellipse class="cls-7" cx="95.49" cy="33.5" rx="6.42" ry="1.75" transform="translate(-4.13 15.73) rotate(-9.22)"/></g><g id="ellipse4511" class="cls-5"><ellipse class="cls-10" cx="107.92" cy="45.59" rx="6.42" ry="1.75" transform="translate(-5.91 17.88) rotate(-9.22)"/><ellipse class="cls-7" cx="107.92" cy="45.59" rx="6.42" ry="1.75" transform="translate(-5.91 17.88) rotate(-9.22)"/></g><path id="path4561" class="cls-11" d="M240.75,214.78c-43.79,19.28-194,17.59-239.32,4.56-4.43,58.23-.1,110.83,37.8,141.79,51.65,8,104.8,12,164,0,39.15-31.6,43.09-86.91,37.57-146.35Z"/><path id="path25" class="cls-12" d="M217.21,347c-65.85,11.75-128.68,8.36-190.79,1.38a91.92,91.92,0,0,0,12.81,12.75c51.65,8,104.8,12,164,0A91.37,91.37,0,0,0,217.21,347Z"/><path id="path4565" class="cls-13" d="M217.21,347c-65.85,11.75-128.68,8.36-190.79,1.38a91.92,91.92,0,0,0,12.81,12.75c51.65,8,104.8,12,164,0A91.37,91.37,0,0,0,217.21,347Z"/><g id="path4585" class="cls-14"><path class="cls-15" d="M1.43,219.34c64.79,12.58,181.56,13.75,239.32-4.56"/></g><g id="path4587" class="cls-14"><path class="cls-15" d="M26.42,348.38c65.25,6.41,129.9,10.28,190.79-1.38"/></g><g id="path4788" class="cls-16"><path class="cls-15" d="M39.23,361.13c55.52,7,110.9,12.81,164,0"/></svg>
So, the first problem was something simple. A capitalization error for one of the cards. That fixed the initial problem and I now have an actual card showing up, but unfortunately it is red and I can’t read the error.
page 1 ^^^
page 2 ^^^
Should be a page 3 as well, but there isn’t…
Checking for other errors related and also been checking the debug console in Chrome for hints
Thank you for your help!!!
edit: Your suggestion to create a test page with a test card worked to show me that Swipe Card was indeed working. Thank you!
Thanks a lot it worked! Any hints on what to clean or a good documents that helps me understand how those SVGs are build?
1 Like
I have an input_boolean wired up to a button card which allows people to request a beer. These buttons are on most panels in the house.
Use case is if you are in the garage working and come to a stopping point and would like to have a beer on the front porch. Since likely you are covered in sawdust after working in the garage you can’t come in yourself and get the beer. Once turned on the panels in the house say “A beer has been requested on the front porch”. The person inside can turn off the button and the panels say “Your beer is on the way!”. They bring out the beer and of course one for themselves as well!
This is all working. My question is around styling of the button itself.
When “on” I would like the button to have the color of a german pilsner instead of the usual white like it is now.
I have not modified the configuration in this repo. I have the following
- type: custom:button-card
entity: input_boolean.beer_requested_front_porch
name: Front Porch
style:
top: 60.45%
left: 63.31%
width: 10%
tap_action:
action: toggle
custom_fields:
icon: >
[[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
return '<font color=gray><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }
if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
return '<font color=red><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }]]]
styles:
custom_fields:
icon:
[top: 11%, left: 8.5%, width: 3.05vw, position: absolute]
template: switch
Which gives this when off
and this when on
How can I override the default of the soft white background of the “on” button to a soft yellow?
thanks!!
1 Like
Hi Mattias,
How you manage to send command to turn ON the Samsung TV? I know it doesn’t work with Samsung integration.
Thanks for your help.
HDMI-CEC. I let apple tvs to turn on my tvs. I use this automation, that way it’s still a tv in homekit, but when I turn it on it also send a apple tv remote command to wake up.
- alias: turn_on_tv2_fail_safe
initial_state: true
trigger:
- platform: event
event_type: call_service
event_data:
domain: media_player
service: turn_on
service_data:
entity_id: media_player.samsung
action:
- service: remote.send_command
data:
entity_id: remote.sovrum
command: menu
You can also use the smartthings integration (samsung iot) to turn on the tv, and I guess use it in a similar way that I have with this automation.
1 Like
You overwrite values from the template when you define them. So either
styles:
card:
- background-color: >
[[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
...
or
state:
- value: 'on'
styles:
card:
- background-color: yellow
I am looking to create different background images to use in my project. I’m currently using the background that comes with this excellent repo. I would like to lighten up a few of my panels with a light grey / white / light blue background.
I’m on a Mac and currently have the app called Logoist. I would buy the Pixelmator app if required. Can anyone help me with how to create a new background image. I like how the colors blend together in the current background image. I have no idea how to create this by myself.
Another question. In this repo everything is laid out with percentages, left / top etc. How are they determined? Trial and error or using a graphics package? I ask as I recently did a 7" portrait panel and that was trial and error to get the button placement.
Thank you!
Illustrator has a gradient mesh tool. The easiest way, if you don’t want to create on from scratch, is to pick a background gradient blur background - Google Search and I bet you can change hue/color/contrast with free apps like gimp.
Yes, trial and error. Initially created the layout in photoshop as background and placed sliced out images on top to get a rough position. Then It’s bascially trial and error and measuring in photoshop from screenshots.
3 Likes
Thanks for the help. I have tried both methods but neither is overriding the on color for me.
Option 1
- type: custom:button-card
entity: input_boolean.beer_requested_front_porch
name: Front Porch
style:
top: 60.45%
left: 63.31%
width: 10%
tap_action:
action: toggle
custom_fields:
icon: >
[[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
return '<font color=gray><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }
if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
return '<font color=red><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }]]]
styles:
custom_fields:
icon:
[top: 11%, left: 8.5%, width: 3.05vw, position: absolute]
state:
- value: 'on'
styles:
card:
- background-color: yellow
template: switch
Option 2 (button does not show at all - I must have syntax error)
- type: custom:button-card
entity: input_boolean.beer_requested_front_porch
name: Front Porch
style:
top: 60.45%
left: 63.31%
width: 10%
tap_action:
action: toggle
custom_fields:
icon: >
[[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
return '<font color=gray><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }
if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
return '<font color=red><ha-icon icon="mdi:glass-mug-variant" width="100%"></font></ha-icon>'; }]]]
styles:
custom_fields:
icon:
[top: 11%, left: 8.5%, width: 3.05vw, position: absolute]
card:
background-color: >
[[[ if (states['input_boolean.beer_requested_front_porch'].state === 'off' ) {
return 'grey'; }
if (states['input_boolean.beer_requested_front_porch'].state === 'on') {
return 'yellow'; }]]]
template: switch
This is what is in the switch template
switch:
aspect_ratio: 1/1
show_state: true
show_icon: false
state: *button_state
styles:
name: *button_styles_name
state: *button_styles_state
card: *button_styles_card
custom_fields:
loading:
[filter: "[[[ return entity.state === 'off' ? 'invert(1)' : 'none'; ]]]",
top: 2%, left: 60%, width: 3.7vw, position: absolute, opacity: 0.6]
Hi, I have look on your Repo and go your way with the Include Folder. I have also update the Themes yaml in it.
Now, I have two things I don’t find why.
All my buttons show the icon blue when they are off and yellow when on.
And, my font color on the Information Popup is turned to a dark color so I don’t see it.
I searched for hours now , but I can not see what I have wrong. It’s also when I use your complete Lovelace-UI.yaml.
In your Repo you say you have „splitt“ the theme.ymal?
Did you specify this in theme.yaml because that will be merged into configuration.yaml if you use packages: !include_dir_named include
frontend:
themes:
...
Yeah, I don’t know. If it’s a one-off button skip the template: switch part and just do it the “normal” way.
Yes 
Thanks for your reply.
Let me know if I got this correct, your apple tvs are connected over HDMI inputs to your TVs (yout TVs support HDMI-CEC protocol) commands are sent over the homekit integration to your apple tvs.
If so, this is accept just for apple products (like apple tv) or can be replicated to a fire tv stick?
Yes
No. Commands are sent from HA to apple tv. The automation is only to retain the tv device class in homekit. Ignore if you don’t use that.
If both tv and fire stick supports hdmi-cec then sure. HA turns on fire stick, fire stick turns on tv. But like I said. there’s also the smartthings integration which can turn on your tv with samsungs api.
Thanks for clarifying.
I’ll look into it.
Just to take a step back from this…
I know my configuration is yaml but what language am I in? I’m almost sure that yaml is just the formatting (like xml) right???
For example,
icon: >
[[[ if (states['group.window_sensor_group'].state === 'on') {
return '<f
what language is the [[[ and then the { }?
I want to learn a good background on this language as I up until now have just been copying code from other places and implementing it. I would like to be able to write my own from scratch. I’m not sure what resources everyone have used to learn.
Another example of “I don’t know what this is doing” is
style:
.: |
/* Global */
#root > hui-icon-element {color: rgba(255, 255, 255, 0.1) !important; transition: 0.4s;}
#root > hui-icon-element:hover {color: rgba(255, 255, 255, 0.25) !important; transition: none;}
#root > hui-icon-element:active {color: rgba(255, 255, 255, 0.35) !important; transition: none;}
"#root > hui-element > hui-markdown-card":
$: |
ha-card > ha-markdown {padding: 0 !important;}
ha-card > ha-markdown > p > font > ha-icon {margin-bottom: 0.15%; opacity: 0.6;}
ha-card > ha-markdown > p > span {font-family: DB Sans Comp; font-size: 5vw;
font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
"#root > hui-state-label-element":
$: |
div {padding: 0 !important;}
What is the .: | ?
Is the /* a comment? Why not the usual # ?
What is the | I have in my code doing?
style: |
:host {
left: 11.6%;
top: 92.9%;
width: 23.5%;
overflow: hidden;
height: 15%;
background: none !important;
box-shadow: none !important;
}
Thank you for any guidance to resources and let me know the language I’m in!!