Same here. Did you find a solution?
Hi,
first of all, a huge thank you for this dashboard, it’s amazing! I’m learning a lot with it and I’m trying to make a notification center that turns on the tablet screen.
To do it, I rely on an automatization script, but I’m stuck on a detail: how can we open a popup in this automation script whose content is already in a yaml file identical to footer files etc…?
Automation script:
alias: Notifications onscreen
description: Système de notification onscreen basé sur l'event
trigger:
- platform: mqtt
topic: home/notif/onscreen
condition: []
action:
- service: switch.turn_on
data: {}
target:
entity_id: switch.galaxy_tab_a_screen
- service: browser_mod.navigate
data: !include popup/footer_popup.yaml
mode: single
YAML popup:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Popup
timeout: 500000
size: fullscreen
content:
type: grid
columns: 2
square: false
cards:
- type: custom:home-feed-card
show_empty: false
show_notification_title: true
more_info_on_tap: true
state_color: true
remove_repeats: false
entities:
- entity: sensor.notifications
name: Notifications
include_history: true
max_history: 10
the screen turns on well when an event is produced, but no popup 
Thanks
this is more of a browser mod question than a dashboard question, you might get more help if you ask on 🔹 Browser_mod - turn your browser into a controllable device, and a media_player
looks like this is what you are after
the service you want to call is browser_mod.popup not browser_mod.navigate, you will need to pass the browser id, I don’t think you can pass in the full popup yaml to the automation, just copy and past the content section into the automation
Hi all,
I installed the dashboard about 2 days ago and I am really happy with the looks.
But currently I am struggling with some borders around cards in popups:
As seen in the picture there are borders around Akku and Memory/Disk.
I already checked earlier posts, but the solutions provided are not helping.
Cards effected: Vertical-Stack & Custom:bar-card.
Can provide footer_tablet.yaml if needed.
Maybe someone can point me in the right direction?
BR Adrian
Hi Mattias,
I am not able to find:
- browser_mod_icon.js,
- card-mod-more-info in themes.yaml
were they named different?
BR Adrian
browser_mod_icon.js
it in the WWW folder, www/browser_mod_icon.js
card-mod-more-info
This should be located at the end of the themes file
1 Like
Oh, found it. Sorry for the inconveniences!
Had to create browser_mod_icon.js myself.
Was not aware that I am able to open this for a more specific instruction:
Hi all, quick question: the styling of my sidebar is not always applied (see pictures below). It looks like a random issue, sometimes it is loaded. Sometimes it is not. Looking in the CSS I notice that the car-mod is not loaded when the sidebar is not styled. So I suspect the card-mod?
I do load it in the recommended mode (configuration.yaml):
frontend:
extra_module_url:
/hacsfiles/lovelace-card-mod/card-mod.js
Example of correctly styled sidebar:
Example of incorrectly styled sidebar:
Anyone else facing this random loading of sidebar styling? Can anyone pinpoint me in the right direction, already tried a lot of thing without any success.
Thanks in advance!
Wouter
the sidebar should be custom:button-card for this exact reason. it’s faster and you can write both js and jinja templates
there’s a history of issues styling markdown card Markdown and themes - style doesn't stick · Issue #130 · thomasloven/lovelace-card-mod · GitHub
1 Like
is it possible to add extra theme, if i want to use a different theme and a dashboard on my mobile.
when i try to move theme.yaml in themes folder and rename it to tablet and change frontend in config.yaml
frontend:
themes: !include_dir_named themes
template: !include sidebar.yaml
it complains about the
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
When i want to cast this dashboard to my nest hub mini i receive the message.
Set Theme to tablet in profile.
On my laptop everything is fine also try to set the theme default for all instances.
call service → Home Assistant Frontend: Set Theme
Set the dark theme from dropdown, to Dark
execute
But still the same message on the nest hub
you have to choose tablet theme in your profile settings theme
hello
perhaps some can help, its a little bit complicated but i try to explain, i have the standard light card with a extra card for my icon from my input_boolean.
When i now click the icon the light changes to ON and the boolean to ON.
the states are
Boolean = from OFF to ON
Light = from OFF to ON
or when i turn of the light
Boolean = from ON to OFF
Light = from ON to OFF
this here is the standard behaviour
than everything works fine, BUT when my Motion sensor triggers the light the boolean doesnt change the states are now for example
Boolean = OFF
Light = from OFF to ON
or
from ON to OFF
than the icon with the motion sensor still stands in the circle with the brightness.
my theory is that this happened because the state and card of the light changes from say ON to OFF but the second card with the icon remains unchanged since the boolean does not change its status
maybe someone of the pros here has an idea?
here is my card code
- type: custom:button-card
triggers_update:
- input_boolean.helper_wled_kueche_unterschraenke
show_state: false
tap_action:
!include popup/ledstripe_kitchen_top.yaml
entity: light.wled_kitchen_top_2
name: Oben
template:
- light
- icon_ledstripe
variables:
helper_always_on: input_boolean.helper_wled_kueche_oberschraenke
custom_fields:
bm:
card:
type: custom:button-card
variables:
original_entity: light.wled_kitchen_top_2
hold_action:
action: none
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.wled_kitchen_top_2
triggers_update:
- input_boolean.helper_wled_kueche_oberschraenke
entity: input_boolean.helper_wled_kueche_oberschraenke
layout: vertical
name: []
state:
- value: 'on'
icon: mdi:motion-sensor-off
styles:
card:
- margin: 45% -20% 0 0
- border: 0px
icon:
- margin: 45% -20% 0 0
- color: gray
- width: 45%
- value: 'off'
icon: mdi:motion-sensor
styles:
card:
- margin: 8% -20% 0 0
icon:
#- display: none
- margin: 8% -20% 0 0
- width: 45%
helper_circle: |
[[[
if (variables.state === 'off' ) {
let input = variables.helper_always_on,
radius = 9,
circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference * 2};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" fill="rgba(255,255,255,0.04)" stroke="#313638" stroke-width="0.6" />
<text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle"><tspan font-size="10"></tspan></text>
</svg>
`;
}
]]]
# Werte fuer circle zeile 677 <text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${states[variables.helper_always_on].state}<tspan font-size="10"></tspan></text>
styles:
custom_fields:
helper_circle:
- position: absolute
- width: 100%
- height: 100%
- margin: -31% -30% 0 0
- display: initial
- opacity: 1
- justify-self: end
bm:
- position: absolute
- width: 50%
- height: 50%
- display: initial
- opacity: 1
- justify-self: end
@Mattias_Persson perhaps?
1 Like
that is complicated,
Can you explain why you need the input boolean at all?
Why not use the on off state of the light to control the position of the motion-sensor icon?
The other option is to use an automation to keep the boolean and light state the same, or have the automation that is triggered by the Motion sensor also toggle the input boolean. however, if the input boolean is only for the icon position I would remove it
hello @masoncrawford1994,
yes of course, i need the input_boolean for the option to set my motion sensor automation off or dont turn my light off.
For example, the code i posted is for my kitchen Wled Stripe under my kitchen, the stripe is motion controlled by a motion sensor, when i now want to have the light ON and not got switched off by the motion sensor i need this helper (input_boolean).
but sometimes when guests are here or i want to cook for a longer time i want the light always on. And thats what the helper does.
thats why i cant toogle the boolean with the Motion sensor Automation.
hmm there must be a way to solve the whole thing, right? At least I hope so
somehow link the status of the button card with the icon with the entity of the light or something
when i use the light entity as a variable in the icon button card? and than add a condition that when
light entity changed to ON && Boolean == OFF ?
i tried something like this
- value: 'off'
icon: mdi:motion-sensor
styles:
card:
- margin: >
[[[
if (variables.state === 'off')
{
return `8% -20% 0 0`;
}
if (variables.state === 'off' && variables.original_entity === 'on')
{
return `45% -20% 0 0`;
}
]]]
icon:
#- display: none
- margin: >
[[[
if (variables.state === 'off')
{
return `8% -20% 0 0`;
}
if (variables.state === 'off' && variables.original_entity === 'on')
{
return `45% -20% 0 0`;
}
]]]
- width: 45%
- color: gray
here the variable for the if condition : variables: original_entity: light.wled_kitchen_top_2
but this wont work, when the light turns on and the boolean is still OFF he makes nothing. because the boolean changes not the state
perhaps over a animation? he must only slide the icon to the bottom, but when there is no boolean trigger it wont work or?
This is essentially what I’ve done, but I renamed this theme to button-dashboard.yaml
in configuration.yaml
lovelace:
mode: yaml
resources: !include resources.yaml
dashboards:
button-dashboard:
mode: yaml
filename: button-dashboard.yaml
title: Button Dashboard
icon: mdi:tools
show_in_sidebar: false
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
template: !include sidebar.yaml
in themes.yaml comment out or delete these lines
#extra_module_url:
# - /hacsfiles/lovelace-card-mod/card-mod.js
#themes:
im trying to recreate what you have in my test environment so I can have a go at helping you out,
one thing im confused by is line 3 of the code you provided, you have input_boolean.helper_wled_kueche_unterschraenke set to triggers_update for what looks to be the button for oberschraenke not unterschraenke
is that just an error? if not, why is this the case?
I think I got it, this is the main changes.
icon: >
[[[
return states[variables.helper_always_on].state === "off" ? "mdi:motion-sensor-off" : "mdi:motion-sensor"
]]]
styles:
card:
- margin: >
[[[
return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
]]]
- border: 0px
icon:
- margin: >
[[[
return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
]]]
- color: gray
- width: 45%
this is the fix applied to the code you provided.
- type: custom:button-card
triggers_update:
- input_boolean.helper_wled_kueche_unterschraenke
show_state: false
tap_action:
!include popup/ledstripe_kitchen_top.yaml
entity: light.wled_kitchen_top_2
name: Oben
template:
- light
- icon_ledstripe
variables:
helper_always_on: input_boolean.helper_wled_kueche_oberschraenke
custom_fields:
bm:
card:
type: custom:button-card
variables:
original_entity: light.wled_kitchen_top_2
hold_action:
action: none
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.wled_kitchen_top_2
triggers_update:
- input_boolean.helper_wled_kueche_oberschraenke
entity: input_boolean.helper_wled_kueche_oberschraenke
layout: vertical
name: []
icon: >
[[[
return states[variables.helper_always_on].state === "off" ? "mdi:motion-sensor-off" : "mdi:motion-sensor"
]]]
styles:
card:
- margin: >
[[[
return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
]]]
- border: 0px
icon:
- margin: >
[[[
return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
]]]
- color: gray
- width: 45%
helper_circle: |
[[[
if (variables.state === 'off' ) {
let input = variables.helper_always_on,
radius = 9,
circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference * 2};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" fill="rgba(255,255,255,0.04)" stroke="#313638" stroke-width="0.6" />
<text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle"><tspan font-size="10"></tspan></text>
</svg>
`;
}
]]]
# Werte fuer circle zeile 677 <text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${states[variables.helper_always_on].state}<tspan font-size="10"></tspan></text>
styles:
custom_fields:
helper_circle:
- position: absolute
- width: 100%
- height: 100%
- margin: -31% -30% 0 0
- display: initial
- opacity: 1
- justify-self: end
bm:
- position: absolute
- width: 50%
- height: 50%
- display: initial
- opacity: 1
- justify-self: end
1 Like
I saw you made this. Mind sharing?