Found your error @Pablo_Gustavo_Fiscel
In button_card_templates.yaml you’ve commented out token
media_youtube:
variables:
#token: !secret youtube_token
variables can’t be empty so do this
media_youtube:
# variables:
# token: !secret youtube_token
hello mattias then I tried to modify the grid rows and both to remove the media and put another 4 button cards in place of the media but the problem persists, it is a defect that makes me only on default and phone in portrait, while on tablet with fully kiosk you can see well, honestly I have run out of ideas
@maverik80 Send a private message to me with your ui-lovelace.yaml, button_card_templates.yaml and themes.yaml in a .zip file and I’ll see if I can figure it out
It was that. the card appeared again. I was looking for an error related to what it was showing. How did you know it was that? We continue to learn with this post. You are an excellent programmer. Thank you very much
One more. The text continues to go approximately one letter from the frame. However buttom card is an exact copy with my additions. But all that part of the code don’t touch it. Could you tell me what part I can look at so I try to correct it?
hello mattias and recently that I use this forum but I can not write to you in private to send you the zip you asked for
Does anyone know where to look. I have had a problem with the icons not showing what color the lamp is lit in. You can see on the dashboard that it flashes quickly in red or green etc but becomes directly after the standard blue color.
Run 2022.5.5, but the problem was also in the previous version.
need help with my code please. I am trying some animations but this one is not working this is according to YT video but mine is not doing anything. I just want the icon to bounce or twist or shake when value is off. blink and rotating works.
type: custom:button-card
color: black
state:
- value: 'off'
styles: #Gate Open
card:
- background: rgb(255,0,0,50%)
icon:
- animation:
- twister 1s linear infinite
Copied the js file to the correct folder and added it to the configuration.yaml, but still the same problem. Did a refresh with cleared cache.
Hello. Did you verify with the debugger that the file is being loaded?
You have to look for the file in www folder
I am not sure how to check this, If I look at the developer tools in chrome, I cannot find the file when I search for it with CTRL+P.
Press the f12 key and a window opens at the bottom or to the right. In the RED tab you will see all the files that were uploaded and you can filter and only see the JS. there you will see if the file appears in red or it was loaded correctly.
You should see something like this. Notice that in that image it is in ALL. you press on JS and with F5 you reload so that it filters you and you see only the files with js extension
Its neither correct nor incorrectly loaded
lovelace:
mode: storage
resources: [
{ url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
{ url: /hacsfiles/lovelace-hui-element/hui-element.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module},
{ url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module},
{ url: /hacsfiles/mini-media-player/mini-media-player-bundle.js, type: module},
{ url: /hacsfiles/swipe-card/swipe-card.js, type: module },
{ url: /hacsfiles/transmission-card/transmission-card.js, type: module },
{ url: "/local/calendar-card.js?v=31091", type: module },
{ url: "/local/marked.min.js?v=4.0.12", type: module },
{ url: "/local/vanilla-tilt.min.js?v=1.7.2", type: module },
{ url: "/local/valetudo-map-card.js?v=42dbceb", type: module },
{ url: "/local/custom_icons.js?v=25052001", type: module },
{ url: "/local/lovelace-webrtc-card/lovelace-webrtc-card.js?v=0.3", type: module},
{ url: /local/font.css, type: css }
]
I think there is a typo or any silly mistake, but I cannot find it…
Hello Mattias! First of all, a great looking dashboard… Big Thanks!!
However, I have a question, I am trying to install it, and the instructions tell me to " Manually copy over these files from matt8707/hass-config "
Where do I copy these files to? What should be the location in HA where I need to copy them? Looking forward to configuring and using your dashboard.
Checks disabled cache and precious ctrl R to reload the page and see if it’s loading that file but as it looks it’s fine. but whenever you make a change do it with the debug open and the disabled cache check so it loads everything and does not use what was previously in the cache
Hey @Mattias_Persson, I been fixing the popup for the updater but observing that the HACS section is listing the HASS updates.
This is what my updater popup shows currently:
But your example updater popup shows correctly only HACS updates under HACS:
Here’s what I have for the code at the moment:
button_card_templates.yaml:
updater_hass:
template:
- updater
- settings
state_display: |
[[[
if (entity) {
let links = new RegExp('<a href="([^"]+)"', "g"),
installed = entity.state,
hass_version_latest = states['sensor.home_assistant_versions'],
hass_version_latest_beta = states['sensor.hass_version_latest_beta'],
hass_release_notes = states['sensor.hass_release_notes'],
hass_release_notes_rc = states['sensor.hass_release_notes_rc'];
let latest = installed.includes('b')
? hass_version_latest_beta.state
: hass_version_latest.state;
let release_notes = installed.includes('b')
? marked.parse(hass_release_notes.attributes.body)
: marked.parse(hass_release_notes_rc.attributes.body);
let subtitle = installed === latest
? `${variables.translate_no_updates} <b>←</b> ${installed}`
: `${ !installed.includes('.') || !latest.includes('.')
? `${variables.translate_no_updates} <b>←</b> ${installed}`
: `${installed} <b>→</b> ${latest} ${variables.translate_available} ${String.fromCodePoint("0x1f389")}`
}`;
let output = installed === latest
? '<ul></ul>'
: `${ !installed.includes('.') || !latest.includes('.')
? '<ul></ul>'
: release_notes.replace(links, '<a href="#" onclick="window.open(\'$1\')"')
}`;
return `
<ha-icon icon="mdi:home-assistant"></ha-icon> <span class="title">Home Assistant</span><br>
<p class="subtitle">${subtitle}</p>
${output}
`;
}
]]]
updater_hacs:
template:
- updater
- settings
state_display: |
[[[
if (entity) {
let output = '',
count = parseInt(entity.state) || 0,
subtitle = count === 0
? `${variables.translate_no_updates} <b>←</b> ${states['update.hacs_update'].attributes.installed_version || ''}`
: `${count} ${count === 1 ? variables.translate_update_available : variables.translate_updates_available} ${String.fromCodePoint('0x1f389')}`;
Object.keys(states).forEach(key => {
let s = states[key],
e = s.entity_id,
a = s.attributes;
if (e.includes('update.') && s.state === 'on') {
output += `<li><b><a href="#" onclick="window.open('${a.release_url}');">
${a.friendly_name}</a></b> ${a.installed_version} <b>→</b> ${a.latest_version}</li>`
}
});
return `
<ha-icon icon="hacs:hacs"></ha-icon> <span class="title">Community Store</span><br>
<p class="subtitle">${subtitle}</p>
<ul>${output}</ul>
`;
}
]]]
ui-lovelace.yaml:
- type: custom:button-card
name: >
<ha-icon icon="mdi:arrow-up-bold-circle-outline"></ha-icon> Updates
tap_action:
!include popup/footer/updater.yaml
variables:
notify: >
[[[
let hass_installed = hass.config.version,
hass_version_latest = states['sensor.home_assistant_versions'],
hass_version_latest_beta = states['sensor.home_assistant_versions_beta'],
hacs = states['sensor.hacs'];
if (hass_version_latest && hass_version_latest.state.includes('.')
&& hass_version_latest_beta && hass_version_latest_beta.state.includes('.')
&& hacs && Number.isInteger(parseInt(hacs.state))) {
let hass_latest = hass_installed.includes('b')
? hass_version_latest_beta.state
: hass_version_latest.state,
hass_count = hass_installed !== hass_latest ? 1 : 0;
return hass_count + parseInt(hacs.state);
}
return 0;
]]]
template: footer
updater.yaml:
action: fire-dom-event
browser_mod:
command: popup
title: Updates
style:
.: |
:host .content {
width: 100%;
}
hui-grid-card:
$: |
button-card:nth-child(2),
button-card:nth-child(4) {
margin: 0.6em 0 2.1em 0.8em;
}
button-card:nth-child(6) {
margin: 0.6em 0 0.5em 0.8em;
}
#root {
grid-gap: 0 !important;
padding: var(--card-content-padding);
width: max-content;
}
card:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: sensor.current_version
template: updater_hass
- type: custom:button-card
entity: sensor.current_version
triggers_update:
- sensor.home_assistant_versions
- sensor.home_assistant_versions_beta
name: Update HASS
icon: mdi:update
styles:
card:
- width: max-content
- filter: >
[[[
return `[[[
if (entity) {
return entity.state === states['sensor.home_assistant_versions'].state ||
entity.state === states['sensor.home_assistant_versions_beta'].state
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: >
[[[
return `[[[
return entity
? 'flex'
: 'none';
]]]`
]]]
tap_action:
services: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Startar watchtower...'
});
hass.callService('switch', 'turn_on', {
entity_id: 'switch.docker_watchtower'
});
]]]`
]]]
template: icon_name
- type: custom:button-card
entity: sensor.hacs
template: updater_hacs
- type: custom:button-card
entity: sensor.hacs
name: Open HACS
icon: mdi:open-in-new
styles:
card:
- width: max-content
- filter: >
[[[
return `[[[
if (entity) {
return entity.state === '0'
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: >
[[[
return `[[[
return entity && entity.state !== 'unknown'
? 'flex'
: 'none';
]]]`
]]]
template: >
[[[
return window.navigator.userAgent.match(/iPhone/i)
? 'hacs_navigate_ios'
: 'hacs_iframe';
]]]
Previously it listed updates from sensor.hacs attributes, but that’s been removed 
So I changed it to show update.* entities instead, at least for now
Same folder as configuration.yaml
Those are built in in button-card
For everything else you need to add own your keyframes to extra_styles
https://github.com/custom-cards/button-card#injecting-css-with-extra_styles
thanks I managed to figure it out from videos on Youtube.
styles:
icon:
- animation:
- twister .9s linear infinite
card:
- animation:
- flasher 1s linear infinite
extra_styles: |
@keyframes twister {
0% {transform: rotatez(0deg): top: 10px}
25% {transform: rotatez(15deg)}
50% { top: 0px}
75% {transform: rotatez(-15deg)}
100% {transform: roatatez(0deg): top: 10px}
}
@keyframes flasher {
50% {background: radial-gradient(rgb(0,0,0, 10%) 20%, rgb(255, 0, 0, 50%));
box-shadow: 0px 0px 30px rgb(255,0,0, 100%);
}
