Great! I don’t have any particular resources for further reading but I guess I generally use
- documentation, community (ha, templates)
- github readme, issues (custom)
- google, stackoverflow (css, js)
Make sure you’ve updated all templates in button_card_templates.yaml
There’s a “compare” feature in vscode or try https://www.diffchecker.com/ or something
1 Like
Try entity.attributes.hvac_modes === 'heat'
thank you very much for the answer, if you remove the theme and put the default one everything is regular
@Mattias_Persson thanks for your continued work on this dashboard! The latest release brings a YouTube token. What format should it be in the file and where does one obtain the correct token needed?
This is for apple tv btw, you can remove it if you don’t need it
https://www.google.com/search?q=youtube+api+token
.youtube_token.txt
token|token
2 Likes
Hello, I have a issue with the popup, I’m not able to show it in any way. I have installed browser_mod 1.5.1. Any idea how to debug it? Nothing interested in console, just:
BROWSER_MOD 1.5.1 IS INSTALLED DeviceID: xxxxxxxx-xxxxxxxx
example script:
- type: horizontal-stack
view_layout:
grid-area: footer
cards:
- type: custom:button-card
name: >
<ha-icon icon="mdi:nas"></ha-icon> NAS
tap_action: !include popup/nas.yaml
template: footer
popup/nas.yaml:
action: fire-dom-event
browser_mod:
command: popup
title: "NAS"
card:
type: vertical-stack
cards:
- type: entities
state_color: true
card_mod:
class: content
entities:
- sun.sun
1 Like
Anyone know how to use footer notifications? I would like there to be a number notification (int) if sensor ‘sensor.hacs> 0’
I did this for the number of battery under a level :
type: custom:button-card
name: >
<ha-icon icon="mdi:battery-heart-outline"></ha-icon>
tap_action:
!include popup/battery.yaml
variables:
notify: >
[[[
let nbrbat = states['sensor.template_etat_batterie'];
if (nbrbat) {
return parseInt(nbrbat.state);
}
]]]
styles:
name:
- color: red
- animation: my-blink 1s linear infinite
- align: center
style: |
@keyframes my-blink {
from {opacity: 0;}
to {opacity: 100;}
from {opacity: 100;}
to {opacity: 0;}
}
template: footer
And for the sensor :
- unique_id: etat_batterie
state: >
{% set alertbat = states | selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('state', 'eq', '100')
| rejectattr('entity_id', 'eq', 'sensor.tarlaktelephone_battery_level')
| rejectattr('entity_id', 'eq', 'sensor.mi_9t_battery_level')
| rejectattr('entity_id', 'eq', 'sensor.lenovo_tb_j606l_battery_level')
| selectattr('state', 'lt', '15')
| list | count
%}
{{alertbat}}
attributes:
friendly_name: Nbr batterie à surveiller
icon: mdi:battery-heart-outline
hope than can help you
1 Like
Awesome work here!
I’m trying to add the VanilliaTilt piece you recently added. I’ve placed the vanilla-tilt.min.js in my www folder and added the module in my configuration.yaml file.
lovelace:
mode: yaml #use ui-lovelace.yaml
resources: #hacs
- url: /local/community/button-card/button-card.js
type: module
- url: /local/community/lovelace-card-mod/card-mod.js
type: module
- url: /local/community/lovelace-layout-card/layout-card.js
type: module
- url: /local/community/swipe-card/swipe-card.js
type: module
- url: '/local/calendar-card.js?v=3.109.1'
type: module
- url: '/local/custom_icons.js?v=28082021'
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/font.css
type: css
I copied over the latest button_card_templates.yaml as well, but I’m getting the following console error:
Uncaught ReferenceError: VanillaTilt is not defined
at eval (eval at _evalTemplate (/local/community/button-card/button-card.js:425:9295), :8:24)
Did I miss something?
[EDIT] - Ignore me. I just needed to restart home assistant - Everything is working! Great job again!
1 Like
Is this API Key or OAuth token?
I updated my yaml’s for VanilliaTilt , Seeing the tilt on my desktop, but it does not work on my tablet. Experts, Any pointer on what i could be missing?
@Mattias_Persson How do you create Custom Icons?
I created a lot of svg ones for the UI buttons, but I wonder about your custom_icons.js, how do you create them in one line like that? If I created an svg icon, how can I put it like that as an icon for custom_icons?
That is the same that I’m seeing, after integrating VanillaTilt. It looks gorgeous on the Desktop when hovering with the Mouse, however there is no effect at all on Touch Input. I reverted to the old animation because of this, as I’m using the Dashboard only on my Wall mounted Tablet.
Still scratching my head around this, everything seems to work except for the pop-up cards… If you could help me a bit with this I’m very gratefull for that, it’s like the missing piece in the dash to have this functionality. Really enjoy and like your work.
Followed the installation on browser_mod en installed the light-popup-card en light-entity-card. But nonetheless, nothing happens when I click a card with a tap action on it. No errors, nothing.
Let me know if you got around this, I’m stuck at the same…
Hey, still I have the same issue, I can perform browser_mod.debug from developer tools and then I can see popup but not possible from my lovelace dashboard. Nothing happens, no error or other message. Anyone know how to debug it?
I use Inkscape to compound the paths. Mark everything and go to ‘Path > Union’.
You could (in some cases) just edit the svg in a txt editor and compound the paths manually, too.
Put the svg through nano first and then copy all the paths within: <path d="all paths here"/>
Or maybe this will help.
I updated button-card to version 3.4.2 (manual download, not available from hacs) and it works! After update i needed to change browser, I need to find a way to clear cache in brave because it still loads older version.
1 Like
I know how to add svg paths to the button cards. in fact I created a lot of them:
What I don’t know is how to add to custom_icons.js, it seems different there, not the svg form. I want to add a path to this file.