Hello. How did you make a playlist appear on the card?
@Mattias_Persson hi sorry if i tag you i’m trying to get the card update working but i succeeded in everything, but i miss understanding how you created the hass latest and latest beta entities. could you help me?
Hey guys,
can someone explain me how to change the date format in the media card?
Where should I put “| timestamp_custom(’%d-%m-%Y’)”?
Thanks !
Here is my code:
#################################################
# #
# Media #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:button-card
entity: sensor.trakt_upcoming_shows
name: Serien / Filme
tap_action:
action: none
template:
- conditional_media
#################################################
# #
# CONDITIONAL MEDIA #
# #
#################################################
conditional_media:
aspect_ratio: 1000/996
template:
- base
# - media_youtube
- icon_play_pause
variables:
i: >
[[[
let data = entity.attributes.data;
if (entity && data) {
return Math.floor(Math.random() * (data.length - 1)) + 1;
}
]]]
state_display: >
[[[
if (entity) {
let elt = this.shadowRoot,
await = setTimeout(marquee,0),
data = entity.attributes.data,
artist = entity.attributes.media_artist,
title = entity.attributes.media_title;
if (data !== undefined) {
var number = data[variables.i].number === undefined && data[variables.i].aired !== undefined
? `(${data[variables.i].aired.split("-")[0]})`
: data[variables.i].number === undefined && data[variables.i].aired === undefined
? ' '
: data[variables.i].number,
output = `${data[variables.i].title} ${number} - ${data[variables.i].airdate}`;
} else {
var output = artist === undefined && title !== undefined
? title
: title === undefined && artist !== undefined
? artist
: title !== undefined && artist !== undefined
? `${artist} - ${title}`
: variables.translate_idle;
}
function marquee() {
let state = elt.getElementById("state"),
container = elt.getElementById("container");
if (state && container) {
state.innerHTML = output;
let ro = new ResizeObserver(entries => {
let spacer = " ".repeat(3),
s = entries[0],
c = entries[1],
r = s && s.contentRect &&
c && c.contentRect &&
s.contentRect.width !== 0 &&
c.contentRect.width !== 0;
if (r && s.contentRect.width < c.contentRect.width) {
state.classList.remove("marquee");
}
else if (r && s.contentRect.width >= c.contentRect.width) {
state.innerHTML = `${output} ${spacer} ${output} ${spacer} `;
state.classList.add("marquee");
}
});
ro.observe(state);
ro.observe(container);
}
}
return output;
}
return variables.translate_unknown;
]]]
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
styles:
grid:
- gap: 0.65%
name:
- padding: 0.2vw
- margin: -0.2vw
- width: 100%
state:
- padding-bottom: 5.25%
- max-width: unset
- overflow: visible
card:
- padding: 5.75% 5.25% 0 5.75%
- border-radius: calc(var(--custom-button-card-border-radius) / 2)
- background: rgba(115, 115, 115, 0.2) center center/cover no-repeat
- background-image: &media_background_image >
[[[
return entity.attributes.data !== undefined
? `url("${entity.attributes.data[variables.i].fanart}"), url("${entity.attributes.data[variables.i].poster}")`
: `url("${variables.entity_picture}")`;
]]]
- color: >
[[[
return entity === undefined
? 'rgba(255, 255, 255, 0.3)'
: '#efefef';
]]]
- text-shadow: >
[[[
return entity === undefined
? 'none'
: '1px 1px 5px rgba(18, 22, 23, 0.9)';
]]]
custom_fields:
icon:
- width: 30%
- fill: >
[[[
return entity && variables.media_on
? 'rgba(255, 255, 255, 0.8)'
: '#9da0a2';
]]]
blur_overlay:
- display: block
- position: absolute
- width: 103.1%
- height: 103.1%
- filter: var(--blur-intensity)
- clip-path: >
inset(74.5% 1.45% 1.45% 1.45% round 0 0 calc(var(--custom-button-card-border-radius) / 2) calc(var(--custom-button-card-border-radius) / 2))
- background: center center/cover no-repeat
- background-image: *media_background_image
- left: -1.5%
- bottom: -1.6%
custom_fields:
blur_overlay: >
[[[
setTimeout(() => {
let elt = this.shadowRoot,
card = elt.getElementById('card'),
container = elt.getElementById('container'),
blur_overlay = elt.getElementById('blur_overlay');
if (elt && card && container && blur_overlay) {
card.insertBefore(blur_overlay, container);
}
}, 0);
return ' ';
]]]
I have the same problem. the card as I insert the sensor.current_versio created ui goes in error.
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading ‘state’) in ‘if (entity) { let links = new RegExp(’<a href="([^"]+)"’, “g”), installed = entity…’
I have and had already added those sensors … but unfortunately the error in the card remains. c
Try this
I’m hoping someone can help guide me on how to fix this issue with the graph custom_fields. Whenever I activate tilt all the graphs are shifted like the picture. I have tilt active only on windows so on my phone the graphs look perfectly fine. I’m wondering if anyone has a fix for this ! Thanks
Whatever you’re using for the template, you need to adjust the positioning and maybe height of the graph in the style section.
Here’s an example you can play around with:
temperature:
template:
- base2
- extra_styles
show_name: true # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
custom_fields:
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 1
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 65
color: "#276696"
- value: 77
color: "#228C22"
- value: 79
color: "#d35400"
- value: 80
color: "#c0392b"
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -14% -15.2%]
icon:
- width: 67%
- fill: "#9da0a2"
icon_temp:
styles:
custom_fields:
icon:
- margin-top: 2%
custom_fields:
icon: >
<svg viewBox="10 5 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);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
</svg>
using the spotify lovelace card (as I wrote in my message earlier)
1 Like
thank you very much I managed to solve it and now it’s ok, but I would like to understand how to open the tab open hacs, I see that there is the windows agent set on the iphone but I have an android, reading on google with android or webview I would have to solve but nothing, it doesn’t open the popup for me but it opens chrome and then I go out of fully-kiosk or browser mod. same problem I detect it on the tilt, intel does not detect me, could you give me some advice?
Sorry I didn’t do any more this as it started to get too complicated to manage the way started to implement it. Have started to look at it again now. Will let you know if the issue reoccurs and we get back if it does.
hi and welcome, iv just lots 5 days trying to get this to work and ended up removing it all as I could not get it to work with the approach I had taken, @Laffer what to take a stab and getting templates in grid grid titles.
I tried removing the title and adding a mushroom title card but I could not get the layout or styles to apply correctly to to title card
hello all,
I tried to look into the thread but I was not able to find anything.
I’m trying to use other icons with media template but icon are not shown. @Mattias_Persson is using templates for icon, is it possible to use directly my icon?
Here’s my code:
- type: custom:button-card
entity: media_player.sonos
name: "Sonos"
template:
- media
icon: mdi:speaker
Any idea on how to use my icons?
Thanks,
Davide
hi Dave,
yes it is possible to add new icons, this I not to hard but a little bit of work
you have 2 option’s for the speaker you could use “icon_monitors” as a template like so
- type: custom:button-card
entity: media_player.sonos
name: "Sonos"
template:
- media
- icon_monitors
however adding new icons is a good skill to have
I would recommend the following
- in the button_card_templates folder you add a new file named my_icons.yaml
- in that file add the following code
icon_speaker:
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M20 20A5.4 5.4 0 0 0 14.6 25.4 5.4 5.4 0 0 0 20 30.8 5.4 5.4 0 0 0 25.4 25.4 5.4 5.4 0 0 0 20 20M20 34.4A9 9 0 0 1 11 25.4 9 9 0 0 1 20 16.4 9 9 0 0 1 29 25.4 9 9 0 0 1 20 34.4M20 5.6A3.6 3.6 0 0 1 23.6 9.2 3.6 3.6 0 0 1 20 12.8C18.002 12.8 16.4 11.18 16.4 9.2 16.4 7.202 18.002 5.6 20 5.6M29 2H11C9.002 2 7.4 3.602 7.4 5.6V34.4A3.6 3.6 0 0 0 11 38H29A3.6 3.6 0 0 0 32.6 34.4V5.6C32.6 3.602 30.98 2 29 2Z" fill="#9da0a2"/>
</svg>
if all you want is that one icon that’s all you need however when you need a new icons this is what you can do
use the following like to find the icon you would like to add https://materialdesignicons.com
when you have an icon you need to get the path, click the icon then in the code dropdown select view SVG
the bit you need is everything that d=
now you have copied your path, you need to use this link to scale the SVG up a bit SVG Path Editor · aydos.com
click import SVG, paste in the path,
then click option, I find that a scale of 1.8 ish works best and I set the view box to 0 0 40 40
click scale, then options again and move to centre
now export the SVG, and copy the new path.
back in the file created above add the following code and replace [name] with a name and [path] with to exported path after you scaled it
icon_[name]:
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="[path]" fill="#9da0a2" />
</svg>
24 Likes
woah, thanks for the detailed answer! I reached the same conclusion but I hoped that there was an easier one.
Just to understand better the logic why icon: mdi:speaker does not work?
Thanks,
Davide
Thanks for the amazing job you do. I would like to make everything right to the left. Direction: RTL. Can you direct me where do I add the code?
Thanks
How to produce the same animated method?
1 Like
Hi all. My dashboard worked fine … but since a few days I don’t get the modals/popup anymore.
Thought it was my mistake and have done some reinstall. No success.
Today I installed a complete new and prepared it for run. Now I’ve the default from the GIT version and it is still the same.
Days ago I got often a error message something service not found … toast … nut now I’ll get nothing.
Someone any idea?
And that I got on the settings section (sorry is in German):
dismiss_lovelace_updated verwendet einen unbekannten Dienst (= dismiss_lovelace_updated use a unknown service)
Die Automatisierung “dismiss_lovelace_updated” (automation.dismiss_lovelace_updated) hat eine Aktion, die einen unbekannten Dienst aufruft: browser_mod.notification.
Dieser Fehler verhindert, dass die Automatisierung ordnungsgemäß ausgeführt wird. Vielleicht ist dieser Dienst nicht mehr verfügbar oder vielleicht hat ein Tippfehler ihn verursacht.
Um diesen Fehler zu beheben, bearbeite die Automatisierung und entferne die Aktion, die diesen Dienst aufruft.
Drücke unten auf SENDEN, um zu bestätigen, dass du diese Automatisierung korrigiert hast.
That might very well have to do with updating browser_mod from v1.x to v2.x. The new version is a complete rewrite, you might want to investigate in that direction.
1 Like