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
ah ok. will look and try.
Wondering if you figured out your problem but if not I’ll explain my findings which may help (or prompt someone to post the fix to my issue).
I tried this dashboard months back and had this issue (no sidebar), tried everything, couldn’t figure it out and ditched the configuration.
Then a few days back thought I’d give it another go hoping maybe various updates might have resolved the issue but no it was still there.
So I again I tried to figure it out. Eventually I found the issue was because I already had the following in my configuration.yaml file
template: !include template.yaml
I’d added the line “template: sidebar.yaml” for the dashboards installation before my original line and in HA with “!include” only the last one in the configuration file is processed. Hence the custom sensor defined in sidebar.yaml doesn’t get created and therefore doesn’t get displayed.
Since I’ve figured that out I’ve been trying to figure out how to have multiple “template: !include …” in the configuration.yaml and working. I know I can put them in a subfolder and use “!include_dir_list” as explain in Splitting up the configuration but as I only have 2 files was hoping there was an simpler way.
I’ve tried various suggestions from other forums (even below, which is the most common) but non seem to work.
template:
- !include template.yaml
- !include sidebar.yaml
Any suggestions ??
that’s outside of my skill set is is possible, but I don’t know how. if you look in this thread some people have created new animated icons, I would ask them
1 Like
happy to help,
I would assume that the use of custom SVG paths are used to support the animated icons. There might be a way to mess with the template and css to use the default custom button card icon, but this method works for me. also it much faster to change all the icons of the same type to update the look,
Hi all,
After HA update I have noticed the border added to my popup cards, can you please take a look at my code and advise how to remove it:
The Code:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
large: true
hide_header: true
data:
content:
type: "custom:button-card"
styles:
grid:
- grid-template-areas: "'header' 'content2' 'buttons' 'footer'"
- grid-template-rows: "16vh 52vh 14vh 14vh;"
- grid-template-columns: "1fr"
card:
- background: "none"
- box-shadow: "none"
- padding: "4%"
custom_fields:
content1:
- display: "none"
content2:
- display: "block"
- align-self: "center"
content3:
- display: "none"
extra_styles: |
@media (max-width: 800px) {
#container {
grid-template-areas: "header" "content1" "buttons" "footer" !important;
grid-template-rows: 16vh 8vh 62vh 8vh !important;
grid-template-columns: 1fr !important;
}
#buttons {
display: block !important;
align-self: start !important;
}
#content1 {
display: none;
}
#content3 {
display: none;
}
custom_fields:
header:
card:
type: "custom:button-card"
template: "popup_list_3_items"
styles:
card:
- background: "none"
custom_fields:
item2:
card:
type: 'custom:decluttering-card'
template: popup-icon
variables:
- template: "[[template]]"
- entity-1: "[[entity-1]]"
- name-1: "[[name-1]]"
- state-1: 'on'
- state-2: 'off'
buttons:
card:
type: "custom:button-card"
template: "list_3_items"
styles:
card:
- background: "none"
custom_fields:
item2:
card:
type: custom:light-popup-card
entity: "[[entity-1]]"
fullscreen: false
hideIcon: true
hideState: true
borderRadius: "var(--popup-border-radius)"
brightnessHeight: 400px
brightnessWidth: 150px
switchHeight: 400px
switchWidth: 150px
switchColor: "rgba(var(--homekit-card-on), 0.9)"
switchTrackColor: "rgba(var(--homekit-popup-card-off), 0.6)"
footer:
card:
type: "custom:button-card"
template: "popup_list_2_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "popup_button_back"
item2:
card:
type: "custom:button-card"
template: "popup_button_power"
entity: "[[entity-1]]"
Thanks
1 Like
1 Like
Packages will solve all problems.
You can also put the contents of sidebar.yaml in template.yaml.