Ouch! What a simple fix. Thank you very much.
Hi Andy, zou het mogelijk zijn om jouw Lovelace & configuration yaml te sharen ? Prachtig design en zou graag hierop voortwerken.
Dank !
If I add this in the gallery_mediaL
media_image:
- z-index: 1
- top: 0
- left: 0
- width: 100%
- height: 100%
- position: absolute
- background-size: cover
- background-image: >
[[[
return entity.attributes.entity_picture === undefined ? 'none' : `url(${entity.attributes.entity_picture})`;
]]]
Then I get this
I can either get the borders but smaller pic or not borders and filled pic. Argh…
Try adding border-radius to the card style. Your goal is to have a fullscreen entity_picture, while having a border-radius. So you need to add border-radius to the card element itself as well.
styles:
card:
- padding: 0px
- background-color: var(--card-background-off)
- border-radius: calc(var(--custom-button-card-border-radius) / 2)
- backdrop-filter: blur(0) #fix chrome bug
- -webkit-clip-path: inset(0) #fix safari bug
- border-radius: 20px
If this fails, you need card-mod to use CSS with the Gallery Card and add border-radius there.
Yeah thanks man, that didn’t do it. But I’ll try the card-mod thing tonight, see if I can figure it out.
Where would I put the card-mod?
You need to install card-mod first through HACS and then use it as a variable inside the card. See the ReadMe for detailed instructions and examples: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
For help see this thread (so this thread doesn’t get cluttered with irrelevant discussions): 🔹 Card-mod - Add css styles to any lovelace card - #2460 by Ildar_Gabdullin
it should show “Nobody is playing”,
try the following
{% set player1_on = 'binary_sensor.player1' %}
{% set player2_on = 'binary_sensor.player2' %}
{% set player1_game = states('sensor.player1_status') %}
{% set player2_game = states('sensor.player2_status') %}
{%- if is_state(player1_on, 'on') and is_state(player2_on, 'off') -%}
Player1 is playing {{ player1_game | regex_replace(',([^,]*)$') }}
{%- elif is_state(player1_on, 'on') and is_state(player2_on, 'on') -%}
Player1 and Player2 are playing {{ player1_game | regex_replace(',([^,]*)$') }}
{%- elif is_state(player1_on, 'off') and is_state(player2_on, 'on') -%}
Player2 is playing {{ player2_game | regex_replace(',([^,]*)$') }}
{%- elif is_state(player1_on, 'off') and is_state(player2_on, 'off') -%}
Nobody is playing...
{%- endif %}
Okay, I have some time to kill. Like @ASNNetworks said use card-mod you don’t need button-card.
- type: conditional
conditions:
- entity: input_select.conditional_media
state: gallery
card:
type: custom:gallery-card
entities:
- sensor.gallery_images
menu_alignment: hidden
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2); /* card - rounded corners */
aspect-ratio: 1/1; /* card - square */
}
figure {
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
figcaption {
display: none; /* hide image caption */
}
img {
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
}
.btn {
top: 50% !important; /* center buttons */
}
.modal-content {
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
}
1 Like
I left spaces out instead of Nobody is playing because I didn’t want it to say anything when no one was playing. Maybe that goofed it up.
@Mattias_Persson
I would have never ever found that shit out alone.
Thanks
By the way, this Gallery card is pretty cool. If anyone is interested in it. Gallery Card
1 Like
@Beer-mann You could just download all the fonts within the fonts.css file and put them into the /config/www/fonts/ folder which gets loaded from the configuration.yaml file.
(Also you probably need to rename the font files accordingly to match the URLs in the font.css file)
How would I rename the font files?
You just rename the file name itself to match the names in fonts.css.
Depending on where you downloaded the fonts, they have different names.
I had problems with my fonts showing up for a while because some of the fonts I downloaded were corrupted and I didn’t know. Took me a while to figure it out.
For some reason this change makes it that the gallery doesn’t change pics anymore.
Did you add slideshow_timer?
I’m an idiot, I copied what you wrote without thinking.
My bad. Sorry! Forgot this:
slideshow_timer: 120
maximum_files: 30
file_name_format: '%YYY_%m_%d_%H_%M_%S'
caption_format: ' '
Hello Mattias,
As many have said, this is great work, thank you for sharing.
I have gotten a lot of this working over the last week, however, I am really struggling with using my own icons.
Initially I thought it was all working fine as the SVGs I created appear fine in Safari, but in Chrome, Edge, or Firefox the entire button-card disappears if I use any SVG other than your own.
I’ve read through the linked design principles for the mdi’s and also used the linked template from that site, but still, I am unable to get them to display.
The SVGs aren’t animated, and I created them in Adobe Illustrator for iPad. I really hope I’m not missing something painfully obvious, because I’ve been trying to get this fixed for days (nervous laugh).
Below is the code from the button-cards-template.yaml, your icon_climate appears fine, my icon_simplisafe only appears in Safari or the iOS apps:
icon_climate:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -10%
- fill: >
[[[ return variables.state === 'heat' || variables.state === 'fan_only' ? '#5daeea' : '#9da0a2'; ]]]
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M36.8 1.2v1.7a5.34 5.34 0 0 1-5.3 5.3H18.4a5.34 5.34 0 0 1-5.3-5.3V1.2c-2.6.4-4.7 2.8-4.7 5.6v36.5c0 3.1 2.6 5.7 5.7 5.7h21.8c3.1 0 5.7-2.6 5.7-5.7V6.8c0-2.8-2.1-5.2-4.8-5.6zm-1.7 35.6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3a9.75 9.75 0 0 1-1.4.6c-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zm0-6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3a9.75 9.75 0 0 1-1.4.6c-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zm0-6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3c-.4.2-.8.4-1.4.6-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zM15.7 1.9v-.8h18.6V3c0 1.5-1.2 2.8-2.8 2.8H18.4c-1.5 0-2.8-1.2-2.8-2.8V1.9z"/>
</svg>
icon_simplisafe:
styles:
custom_fields:
icon:
- width:78%
- margin-left: -10%
custom_fields:
icon: >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_10" x="0px" y="0px" width="33.2px" height="33.13px" viewBox="0 0 33.2 33.13" style="enable-background:new 0 0 33.2 33.13;" xml:space="preserve">
<style type="text/css">
.st0{fill:#616161;}
</style>
<path class="st0" d="M26.44 3.24C18.11-2.73 7.13-0.24 1.92 8.86c-5.35 10.36 1.04 22.56 12.6 24.16 c7.46 1.03 14.7-3.29 17.58-10.49C34.8 15.72 32.4 7.51 26.44 3.24z M23.44 20.48c-0.05 3.75-3 6.75-6.66 6.8 c-3.85 0.06-6.91-2.81-7.06-6.64c-0.02-0.58 0-1.16-0.01-1.74c-0.01-0.65 0.19-1.21 0.93-1.21c0.8 0 0.99 0.58 0.97 1.29 c-0.02 0.58-0.02 1.16 0 1.74c0.13 2.58 2.24 4.63 4.81 4.69c2.64 0.07 4.82-1.76 5.06-4.38c0.13-1.4 0.05-2.82 0.06-4.23 c0-0.64-0.27-1.04-1.06-1.06c-3.19 0-6.27-0.03-9.36 0.02c-1.04 0.01-1.39-0.39-1.43-1.4c-0.1-2.51 0.26-4.82 2.22-6.66 c3.44-3.22 9.19-2 10.98 2.35c0.26 0.64 0.51 1.31-0.31 1.67c-0.84 0.37-1.12-0.28-1.41-0.92c-1.05-2.28-3.3-3.46-5.58-2.96 c-2.38 0.52-3.94 2.41-4.02 4.75c-0.03 0.98 0.33 1.39 1.32 1.38c3.01-0.03 6.03-0.02 9.04-0.01c1.34 0 1.48 0.16 1.49 1.51 C23.45 17.15 23.47 18.82 23.44 20.48z"/>
</svg>
Also, the ui-lovlace.yaml code:
- type: custom:button-card
entity: alarm_control_panel.[REDACTED]_alarm_control_panel
name: SimpliSafe
tap_action:
!include popup/home_alarm.yaml
hold_action:
action: none
template:
- base
- icon_simplisafe
Please would you be able to help me with this?
I’m sure it’s the SVGs, because if I swap the SVG out for any one of yours, it works fine. The button card and icon renders on all browsers, not just safari.
A screenshot of the missing button card next to the working climate card below:
Many thanks.
I would dare say it’s because you left all the junk in there?
Try this maybe:
<svg viewBox="0 0 33.2 33.13">
<path d="M26.44 3.24C18.11-2.73 7.13-0.24 1.92 8.86c-5.35 10.36 1.04 22.56 12.6 24.16 c7.46 1.03 14.7-3.29 17.58-10.49C34.8 15.72 32.4 7.51 26.44 3.24z M23.44 20.48c-0.05 3.75-3 6.75-6.66 6.8 c-3.85 0.06-6.91-2.81-7.06-6.64c-0.02-0.58 0-1.16-0.01-1.74c-0.01-0.65 0.19-1.21 0.93-1.21c0.8 0 0.99 0.58 0.97 1.29 c-0.02 0.58-0.02 1.16 0 1.74c0.13 2.58 2.24 4.63 4.81 4.69c2.64 0.07 4.82-1.76 5.06-4.38c0.13-1.4 0.05-2.82 0.06-4.23 c0-0.64-0.27-1.04-1.06-1.06c-3.19 0-6.27-0.03-9.36 0.02c-1.04 0.01-1.39-0.39-1.43-1.4c-0.1-2.51 0.26-4.82 2.22-6.66 c3.44-3.22 9.19-2 10.98 2.35c0.26 0.64 0.51 1.31-0.31 1.67c-0.84 0.37-1.12-0.28-1.41-0.92c-1.05-2.28-3.3-3.46-5.58-2.96 c-2.38 0.52-3.94 2.41-4.02 4.75c-0.03 0.98 0.33 1.39 1.32 1.38c3.01-0.03 6.03-0.02 9.04-0.01c1.34 0 1.48 0.16 1.49 1.51 C23.45 17.15 23.47 18.82 23.44 20.48z"/>
</svg>
Appart from the color of course if you want it blue.
Also you should maybe make the size 0 0 50 50, you have it smaller.
But I’m not a pro. Sorry