Well, what I said still applies. You need your icon to look the same when it’s compounded. Then add that one path line. Just copy one of them and rename it to whatever you want.
Then go to the resource and add a number to the version and refresh your browser. Otherwise it’s probably cached.
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?