Where did you download 3.4.2? The latest release is 3.4.1 if I look it up: Release 3.4.1 · custom-cards/button-card · GitHub
Looking at previous forumposts it seems that it’s an issue with the “fire-dom-event” which will stop it from popping-up…
If you can send me the link to 3.4.2 Ill give that a go tomorrow. Thanks for your update!!
I just added the footer buttons and now I have a very strange behaviour with them. When I click a button, complete homeassistant is crashing and restarting.
But not on all buttons.
When I click on “Haus” everything is fine and the popup opens. When I click on “Tablet” homeassistant is crashing.
I can open both popups without any problems with the old buttons from in the sidebar. So the popup itself seems to be working.
Whats happening here?
ui-lovelace.yaml
#################################################
# #
# FOOTER #
# #
#################################################
- type: horizontal-stack
view_layout:
grid-area: footer
cards:
- type: custom:button-card
name: >
<ha-icon icon="mdi:home"></ha-icon> Haus
tap_action:
!include popup/sidebar_house.yaml
template: footer
- type: custom:button-card
name: >
<ha-icon icon="mdi:tablet-dashboard"></ha-icon> Tablet
tap_action:
!include popup/sidebar_information.yaml
template: footer
sidebar_information.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Information
hide_header: false
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
height: 569px;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(2, 1fr)
grid-template-rows: 1fr
grid-template-areas: |
"hass dashboard"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"hass"
"dashboard"
cards:
##################
# Homeassistant #
##################
- type: entities
view_layout:
grid-area: hass
title: Home Assistant
style: &border |
ha-card {
border-radius: 0;
animation: ha-card 1s forwards;
}
@keyframes ha-card {
0%, 100% {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
padding-right: 0;
animation: none;
}
}
entities:
- entity: sensor.hass_version
- entity: sensor.hass_dev_release
# DB Größe über Docker Monitor
# - entity: sensor.home_assistant_v2_db
- entity: sensor.home_assistant_log
name: Logfile
- entity: sensor.hass_uptime
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions: &bar_card_positions
icon: outside
indicator: "off"
name: outside
severity: &bar_card_severity
- color: "#303435"
from: 0
to: 89
- color: "#6d2525"
from: 90
to: 100
entity_row: true
entities:
- entity: sensor.processor_use
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.processor_use
- entity: sensor.memory_use_percent
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.memory_use_percent
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal-style |
#root {
justify-content: space-evenly;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
name: Home Assistant
icon: mdi:reload
tap_action:
services: |
[[[
hass.callService('browser_mod', 'toast', {
message: 'Starte HomeAssistant neu...'
});
hass.callService('homeassistant', 'restart');
]]]
template: icon_name
- type: custom:button-card
name: Host
icon: mdi:reload
tap_action:
action: call-service
services: |
[[[ hass.callService('browser_mod', 'toast', {message: 'Starte Host neu...'});
hass.callService('hassio', 'host_reboot'); ]]]
template: icon_name
###################
# DASHBOARD #
###################
- type: entities
view_layout:
grid-area: dashboard
title: Dashboard
show_header_toggle: false
style: *border
entities:
- entity: light.dashboard_screen
name: Bildschirm
- type: custom:slider-entity-row
entity: light.dashboard_screen
name: Displayhelligkeit
icon: mdi:brightness-6
hide_state: false
- entity: switch.dashboard_screensaver
name: Bildschirmschoner
- entity: switch.flur_steckdosenleiste_usb
name: Ladegerät
- type: custom:bar-card
name: Batterie
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions: *bar_card_positions
severity:
- color: "#6d2525"
from: 0
to: 89
- color: "#303435"
from: 90
to: 100
entity_row: true
entities:
- entity: sensor.dashboard_batterie
icon: mdi:battery
- entity: binary_sensor.dashboard_plugged_in
name: Zuletzt eingesteckt
- entity: sensor.dashboard_last_app_start
name: Letzer App Neustart
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions: *bar_card_positions
severity: *bar_card_severity
entity_row: true
entities:
- entity: sensor.fullykiosk_memory
name: RAM
icon: mdi:memory
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.fullykiosk_memory
- entity: sensor.fullykiosk_storage
name: Speicher
icon: mdi:sd
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.fullykiosk_storage
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: *horizontal-style
cards:
- type: custom:button-card
name: Startseite
icon: mdi:reload
tap_action:
services: |
[[[
hass.callService('browser_mod', 'toast', {
message: 'Lade Dashboard neu...'
});
hass.callService('fullykiosk', 'load_start_url', {
entity_id: 'media_player.dashboard_media_player'
});
]]]
template: icon_name
- type: custom:button-card
name: App
icon: mdi:reload
tap_action:
services: |
[[[
hass.callService('browser_mod', 'toast', {
message: 'Starte Fully Kiosk Browser neu...'
});
hass.callService('fullykiosk', 'restart', {
entity_id: 'media_player.dashboard_media_player'
});
]]]
template: icon_name
sidebar-house.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Smarthome
hide_header: false
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
height: 569px;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 1fr
grid-template-areas: |
"house heating batteries"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(3, 1fr)
grid-template-areas: |
"house"
"heating"
"batteries"
cards:
###################
# HAUS #
###################
- type: entities
view_layout:
grid_area: house
title: Haus
style: &border |
ha-card {
border-radius: 0;
animation: ha-card 1s forwards;
}
@keyframes ha-card {
0%, 100% {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
padding-right: 0;
animation: none;
}
}
entities:
- type: custom:hui-element
card_type: glance
entities:
- entity: person.christoph
- entity: person.franziska
- entity: group.haus
- entity: input_boolean.alarmsystem
- entity: input_boolean.absent_long
- entity: binary_sensor.flur_rauchmelder_eg_alarm
name: Schlafzimmer Rauchmelder
- entity: binary_sensor.flur_rauchmelder_dg_alarm
name: DG/Flur Rauchmelder
- entity: binary_sensor.schlafzimmer_rauchmelder_alarm
name: EG/Flur Rauchmelder
##################
# Heizung #
##################
- type: entities
view_layout:
grid-area: heating
title: Heizung
style: *border
entities:
- entity: input_boolean.heizung
- entity: input_boolean.unplanmaessig_zuhause
- entity: group.ferien_und_feiertage
name: Ferien, Feiertage, Homeoffice
- entity: input_boolean.homeoffice
- entity: input_boolean.partymodus
- entity: sensor.openweathermap_temperature
name: Außentemperatur
- entity: schedy_room.schedy_heating_schlafzimmer
icon: mdi:thermometer-lines
name: Schlafzimmer
- entity: schedy_room.schedy_heating_wohnesszimmer
icon: mdi:thermometer-lines
name: Wohn und Esszimmer
- entity: schedy_room.schedy_heating_buero
icon: mdi:thermometer-lines
name: Büro
- entity: schedy_room.schedy_heating_bad
icon: mdi:thermometer-lines
name: Bad
How did you even test is in developer tools though?
How do I manually install it? I’ve copied the .JS to the location in www/community/button-card
Restarted my HA, cleared cache but my JavaScript console is still showing me it’s running version 3.4.1
I don’t know what happened, button-card 3.4.2 used to be available in hacs
Here’s my community folder, there’s a compressed file that hacs creates, so I did not install manually
HA is not crashing 
You need to nest templates in popups to stop them from executing on custom:button-card tap action, in your popup you’re calling hassio.host_reboot
There’s a gyroscope option that doesn’t seem to work on ios, but on wall mounted tablets there’s obviously no way to track mouse or orientation
Thanks Mattias!. I always have my tablet in landscape mode, any thought if this could be done o touch?
Can you explain what you did expect?
What if when I move my fingers over the button, it tilts like on Desktop when u move mouse cursor?
yeah, this was my issue al along, was scratching my head for this so long lol.
So, maybe for others you could make a note in the opening post that they manually need to update to 3.4.2 as it’s gone from HACS.
I’ve now manually updated it like your post says and it’s working :).
Hello people,
first of all many thanks to Mattias_Persson and all the others who contribute here. Great work!
My question now:
I have in this temperature graphs.
How can I make the graph in the height?
Here are the image and code:
- type: custom:button-card
entity: >-
sensor.homematicip_accespoint_hmip_wohnzimmer_thermostat_temperature
name: Heizung
custom_fields:
graph:
card:
entities:
- >-
sensor.homematicip_accespoint_hmip_wohnzimmer_thermostat_temperature
template:
- icon_temp
- temperature
temperature:
template:
- base
show_state: false
show_name: false
custom_fields:
circle: >
[[[ { const temperature = Math.round(entity.state); return `<svg
viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638"
stroke-width="1.5" fill="#FFFFFF08" style=" transform: rotate(-90deg);
transform-origin: 50% 50%;" /> <text x="50%" y="54%" fill="#8d8e90"
font-size="14" text-anchor="middle" alignment-baseline="middle"
dominant-baseline="middle"
dominant-baseline="middle">${temperature}°</text></svg>`; } ]]]
graph:
card:
type: custom:mini-graph-card
color_thresholds:
- color: '#f53a1b'
value: 28
- color: '#ef6a12'
value: 26
- color: '#8ff331'
value: 22
- color: '#00a1ff'
value: 20
line_width: 4
font_size: 75
margin: '-11.5% -10.5% -10.5% -11.5%'
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name:
- top: '-50%'
- left: 0%
- width: 100%
- position: absolute
label:
- top: '-50%'
- left: '-15%'
- width: 100%
- position: absolute
- font-family: Sf Display
- font-size: 0.90vw
custom_fields:
graph:
- bottom: 0%
- left: 0%
- width: 130%
- position: absolute
- margin: 0% 0% -13% -15%
circle:
- display: initial
- width: 100%
- letter-spacing: 0.03vw
- margin: '-6% -5% 0 0'
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: '#9da0a2'
like this:
(its edited with Paint XD)
Thank you, it is working now.
And the problem is, that in the sidebar it is called via button and not custom:button-card?
Strange, you need to know…
Hi Guys!
I love this project, I tried to install with the guide but I didn’t get it, so I continue with my lovelace ui set up!
type: custom:button-card
entity: sensor.recently_added_plex
show_icon: false
show_label: false
show_name: false
variables:
i: |
[[[
let data = entity.attributes.data;
if (entity && data) {
return Math.floor(Math.random() * (data.length - 1)) + 1;
}
]]]
styles:
grid:
- grid-template-areas: '"logo logo" "title title" "n n" "s1 s1"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
card:
- width: 250px
- height: 250px
- background: rgba(115, 115, 115, 0.2) center center/cover no-repeat
- 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}")`;
]]]
custom_fields:
blur_overlay:
- display: block
- position: absolute
- width: 105.5%
- height: 30%
- filter: blur(8px) brightness(0.4)
- background: center center/cover no-repeat
- left: '-1.5%'
- bottom: '-1.6%'
- 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}")`;
]]]
logo:
- justify-self: start
- padding-top: 5%
- margin-left: 5%
s1:
- justify-self: start
- margin-left: 10%
- padding-bottom: 5%
- font-size: 10pt
- color: white
title:
- justify-self: start
- margin-left: 10%
- padding-top: 70%
- font-size: 12pt
- color: white
custom_fields:
title: |
[[[
return entity.attributes.data[variables.i].title
]]]
s1: |
[[[
if (entity.attributes.data[variables.i].number == undefined)
return entity.attributes.data[variables.i].rating +" - "+ entity.attributes.data[variables.i].genres;
return entity.attributes.data[variables.i].number;
]]]
logo: |
<img width="30" height="30" src='/local/plex-iconv2.png' />
blur_overlay: >
[[[
setTimeout(() => {
card = elt.getElementById('card'),
title = elt.getElementById('title'),
blur_overlay = elt.getElementById('blur_overlay');
if (card && blur_overlay && title) {
card.insertBefore(card, blur_overlay, s1);
}
}, 0);
return ' ';
]]]
What I’m doing wrong?
Hi @Mattias_Persson , one question.
I’m trying to create a nas-style pop-up of your repository, so with 3 columns.
I don’t understand why on pc / mac it is displayed correctly while on iphone it gives error on the custom card: hui-horizontal-stack-card
But if I try to replace it with the classic type: horizontal-stack it tells me that I can’t put it in an entities card.
I can’t find this custom card anywhere.
How can I solve?
First of all, thank you for the work you put into this and sharing it.
I just started working with HA and immediately fell in love with your dashboard when I saw it.
I’m just trying to set all the base features up so that I can use it as a baseline for my own dashboard.
So far everything seems to be good, but I absolutely cannot get the popups to work.
I set up a button card for a light group in my kitchen:
- type: custom:button-card
entity: light.group_kueche_akzent
name: Akzente
template:
- light
- icon_hue
Normal click is working and showing the status as expected.
Long-press however just shows the circle animation and does not open a popup.
I see no error messages in HA or in the browser console. The .js for browser_mod is properly loaded.
Any ideas where to check further?
Hi there!
Quick one, please.
but first: great work from Matt and the community: I am “playing” with this design since few weeks now !
I’d like to finalise the theme customisation here, changing the buttons background / active colors.
it’s all good for “normal” buttons, but i can’t find where to edit the on/off background for swipe cards ?
1 - I’d like to edit the background of the first card (“Spotify” here), when it’s inactive.
2 - as well as the background of buttons in the 2nd (“slided”) card, according to what you see above, ie: “Wall” (ex of state=off) and “Table” (ex of state=on) buttons
Can you help me pointing which settings must be edited? (and from which file), if it can be.