It worked, thank you very much!
yes, the dates are in the future.
i use tract integration for this card.
I liked the idea that from my current series/movies the information about the next upcoming episode is shown.
2 Likes
hi
How can I reduce the display on the sides everything escapes me.
Here’s my code.
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Device Tracker
size: fullscreen
content:
type: grid
columns: 2
square: false
cards:
#01
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions:
icon: outside
indicator: 'off'
name: outside
severity:
- color: '#6d2525'
from: 90
to: 999
entity_row: true
entities:
- entity: device_tracker.amazon_echo_dot
- entity: device_tracker.amazon_echo_show
- entity: device_tracker.khdr_mkhshbym_deco
- entity: device_tracker.living_room_deco
- entity: device_tracker.qvmh_shnyh_deco
- entity: device_tracker.oven
#02
- type: custom:bar-card
width: 45%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions:
icon: outside
indicator: 'off'
name: outside
severity:
- color: '#6d2525'
from: 90
to: 999
entity_row: true
entities:
- entity: device_tracker.macbook_pro
- entity: device_tracker.avi_phone
- entity: device_tracker.camera_warehouse
- entity: device_tracker.khdr_mkhshbym_deco
- entity: device_tracker.qvmh_shnyh_deco
- entity: device_tracker.oven
#03
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions:
icon: outside
indicator: 'off'
name: outside
severity:
- color: '#6d2525'
from: 90
to: 999
entity_row: true
entities:
- entity: device_tracker.amazon_echo_dot
- entity: device_tracker.amazon_echo_show
- entity: device_tracker.khdr_mkhshbym_deco
- entity: device_tracker.living_room_deco
- entity: device_tracker.qvmh_shnyh_deco
- entity: device_tracker.dishwasher
#04
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions:
icon: outside
indicator: 'off'
name: outside
severity:
- color: '#6d2525'
from: 90
to: 999
entity_row: true
entities:
- entity: device_tracker.amazon_echo_dot
- entity: device_tracker.amazon_echo_show
- entity: device_tracker.khdr_mkhshbym_deco
- entity: device_tracker.living_room_deco
- entity: device_tracker.qvmh_shnyh_deco
- entity: device_tracker.oven
columns: 2
square: true
Thanks to the answers
.
1 Like
@Mattias_Persson could you explain how i have to change the code to use browser mod 2 with version 2022.3? The popups are transparent with this version.
So maybe I am dense, but I am not 100% certain who to integrate this cover with this project… which one is the card in the actual lovelace.yaml and which one goes into the buttonc ard templates?
Could you post this card , I really like it
Anyone know why i’m not able to select vacuum cleaning mode from the dropdown, when i press on the dropdown list it closes the popup window?
it’s a bug in vacuum card, please update it:
1 Like
Hi,
I am quite new at coding in home assistant and I am having an issue where this button card shows up incorrectly on desktop, however it shows correctly on mobile.
Desktop:
Does anyone have any pointers on how to fix this?
lovelace code:
- type: custom:button-card
entity: sensor.slaapkamer_aqara_temperature
name: Slaapkamer
tap_action:
action: none
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- sensor.slaapkamer_aqara_temperature
template:
- base
- temperature
- icon_temp
Temperature template:
temperature:
show_state: 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"
graph_span: 1d
locale: nl
line_color: "#3182b7"
line_width: 4
font_size: 75
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name: [top: 57%, left: 10%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: "#9da0a2"
The base template is an exact copy of Mattias’ setup.
Mobile:
I only recently applied the August changes but I now have an issue with the left margin. Everything is too close to the left edge. I have removed the sidebar because I don’t use it and that seems to have caused the problem. I’m guessing it’s some extra styles with the sidebar components in button card templates or the tablet theme but I couldn’t find them. I haven’t changed any code except removing the sidebar from the grid layout. I just need to add a small margin on the left. Here’s how it looks:
#default
grid-template-columns: 0 repeat(3, 1fr) 0 # repeat(4, 1fr) 0
grid-template-areas: | # replace sidebar with dot
". . . . ."
". vardagsrum studio sovrum ."
". media övrigt hemma ."
". footer footer footer ."
1 Like
try this
It’s a problem related to having tilt effects enabled. Wasn’t previously a problem but it’s a bit beyond me to solve, so I disabled tilt.
1 Like
Works like a charm! Now the next issue arises:
Again, I do not have the issue on mobile. Just desktop. Do you have any pointers for that?
2 Likes
Ah, I changed the variable name in themes.yaml.
Replace --custom-button-card-border-radius with --button-card-border-radius
1 Like
I was curious how could this be implemented (See pic)… as I only have temperature sensors there is no point in having a full field for them but rather something minimalistic to see the degrees per room at a glance 
I`m kind of unskilled in modifying it myself so a code + where to add it would be really appreciated.
I’m thinking this could be added into the
- type: grid title: Other ++code and the sensor goes here
But again I’m not sure 
Thanks in advance
I am trying to add another pop up and struggling… This card works fine on its own but not in the popup and the error doenst really make it clear to me why
Here is my footer_pool.yaml file
# update_entities:
# action: >
# [[[
# hass.callService('homeassistant', 'update_entity', {
# entity_id: [
# 'binary_sensor.rpi_ping',
# 'sensor.rpi_cpu',
# 'sensor.rpi_mem',
# 'sensor.rpi_sd',
# 'sensor.rpi_uptime'
# ]
# });
# ]]]
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Pool
card_mod:
style:
#popup header
.:
content:
type: vertical-stack
cards:
- type: picture-elements
entity: sensor.aqualink_run_mode
image: /local/pool/pool.jpg
state_filter:
"off": blur(2px) grayscale(100%)
elements: !include_dir_list /config/lovelace/cards/pool
I then added this to the bottom of the lovelace
- type: custom:button-card
name: >
<ha-icon icon="mdi:swim"></ha-icon> Pool
tap_action: !include popup/footer_pool.yaml
variables:
notify: >
[[[
let id = states['binary_sensor.aqualinkd_alive'];
if (id) return id.state === 'off';
]]]
template: footer
and whenever I clock on my new popup I get this error
Uncaught ButtonCardJSTemplateError: TypeError: entity is undefined in 'return entity.state.length > 0 ? "block" : "none"'
anonymous https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js line 425 > Function:3
_evalTemplate https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:425
_getTemplateOrValue https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:425
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
n https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
_evalActions https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
_handleTap https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
_handleAction https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:547
handleEvent https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:1
__boundHandleEvent https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:1
Xt https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:1
dblClickTimeout https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:1
setTimeout handler*bind/t.actionHandler.end https://xxxxxx.xxxxxxx.com/hacsfiles/button-card/button-card.js:1
button-card.js line 425 > Function:3:16
Source map error: Error: request failed with status 404
Resource URL: https://xxxxxx.xxxxxxx.com/hacsfiles/Homekit-panel-card/homekit-panel-card.js
Source Map URL: lit-element.js.map
Source map error: Error: request failed with status 404
Resource URL: https://xxxxxx.xxxxxxx.com/local/community/swiss-army-knife-card/SVGInjector.min.js?module
Source Map URL: ./dist/svg-injector.map.js
Source map error: Error: request failed with status 404
Resource URL: https://xxxxxx.xxxxxxx.com/hacsfiles/cover-popup-card/cover-popup-card.js?hacstag=235106875026
Source Map URL: index.m.js.map
and the entity is on
thanks
I try to arrange the update. And I constantly get the following error message:
my code:
updates:
show_state: true
show_name: false
show_icon: false
styles:
state:
- text-align: left
- justify-self: left
- white-space: normal
card:
- cursor: default
- padding: 0.2em 0 0 0.6em
- letter-spacing: var(--mdc-typography-body1-letter-spacing)
tap_action:
href:
extra_styles: |
#ripple {
display: none;
}
ha-icon {
width: 1.4em;
vertical-align: 12%;
opacity: 0.5;
padding-right: 2px;
}
.title {
font-size: 1.3em;
font-weight: 500;
}
.subtitle {
font-size: 0.95em;
line-height: 0.7em;
padding-left: 3px;
padding-bottom: 10px;
font-weight: 500;
color: #828383;
}
a {
color: var(--primary-color);
}
ul {
margin-top: -0.6em;
font-size: 0.88em;
letter-spacing: 0.5px;
line-height: 1.6em;
}
code {
background-color: var(--secondary-background-color);
}
updates_hass:
template:
- updates
- settings
state_display: |
[[[
if (entity) {
let links = new RegExp('<a href="([^"]+)"', "g"),
installed = entity.state,
hass_version_latest = states[variables.latest],
hass_version_latest_beta = states[variables.latest_beta],
hass_release_notes = states[variables.release_notes],
hass_release_notes_beta = states[variables.release_notes_beta];
let latest = installed.includes('b')
? hass_version_latest_beta.state
: hass_version_latest.state;
let release_notes = installed.includes('b')
? marked.parse(hass_release_notes.attributes.body)
: marked.parse(hass_release_notes_beta.attributes.body);
let subtitle = installed === latest
? `${variables.translate_no_updates} <b>←</b> ${installed}`
: `${ !installed.includes('.') || !latest.includes('.')
? `${variables.translate_no_updates} <b>←</b> ${installed}`
: `${installed} <b>→</b> ${latest} ${variables.translate_available} ${String.fromCodePoint("0x1f389")}` }`;
let output = installed === latest
? '<ul></ul>'
: `${ !installed.includes('.') || !latest.includes('.')
? '<ul></ul>'
: release_notes.replace(links, '<a href="#" onclick="window.open(\'$1\')"') }`;
return `
<ha-icon icon="mdi:home-assistant"></ha-icon> <span class="title">Home Assistant</span><br>
<p class="subtitle">${subtitle}</p>
${output}
`;
}
]]]
updates_hass_icon_name:
template: icon_name
icon: mdi:update
styles:
card:
- opacity: >
[[[
return entity && (entity.state === states[variables.latest].state ||
entity.state === states[variables.latest_beta].state)
? '0.3'
: '1';
]]]
- display: >
[[[
return entity
? 'flex'
: 'none';
]]]
updates_hacs:
template:
- updates
- settings
state_display: |
[[[
if (entity) {
let output = '',
count = parseInt(entity.state) || 0,
subtitle = count === 0
? `${variables.translate_no_updates} <b>←</b> ${states['update.hacs_update'].attributes.installed_version || ''}`
: `${count} ${count === 1 ? variables.translate_update_available : variables.translate_updates_available} ${String.fromCodePoint('0x1f389')}`;
Object.keys(states).forEach(key => {
let s = states[key],
e = s.entity_id,
a = s.attributes;
if (e.includes('update.') && s.state === 'on' && a.release_url) {
let split_url = a.release_url.split('/'),
name = `${split_url[3]}/${split_url[4]}`,
installed = states[variables.installed].attributes.repositories;
if (installed.includes(name)) {
output += `<li><b><a href="#" onclick="window.open('${a.release_url}');">
${name}</a></b> ${a.installed_version} <b>→</b> ${a.latest_version}</li>`
}
}
});
return `
<ha-icon icon="hacs:hacs"></ha-icon> <span class="title">Community Store</span><br>
<p class="subtitle">${subtitle}</p>
<ul>${output}</ul>
`;
}
]]]
updates_hacs_icon_name:
template: icon_name
icon: mdi:open-in-new
styles:
card:
- opacity: >
[[[
return entity && entity.state === '0'
? '0.3'
: '1';
]]]
- display: >
[[[
return entity && entity.state !== 'unknown'
? 'flex'
: 'none';
]]]
updates_other:
template:
- updates
- settings
state_display: |
[[[
if (entity) {
let output = '',
attr = Object.fromEntries(
Object.entries(entity.attributes).filter(([, value]) => {
return value != false;
})),
count = Object.keys(attr).length;
for (const [, value] of Object.entries(attr)) {
output += `<li>${value}</li>`;
}
let subtitle = count == 0
? variables.translate_no_updates
: `${count} ${count == 1 ? variables.translate_update_available : variables.translate_updates_available} ${String.fromCodePoint('0x1f389')}`;
return `
<ha-icon icon="mdi:update"></ha-icon> <span class="title">אחר</span><br>
<p class="subtitle">${subtitle}</p>
<ul>${output}</ul>
`;
}
]]]
updates_other_icon_name:
template: icon_name
icon: mdi:reload
styles:
card:
- opacity: 0.3
- display: >
[[[
return entity
? 'flex'
: 'none';
]]]
hacs_iframe:
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: HACS
style:
div: |
.content {
padding: 0;
}
hui-iframe-card$: |
ha-card {
margin-left: -58px;
}
large: true
card:
type: iframe
url: >
[[[ return `/${hass.panels.hacs.url_path}` ]]]
template: icon_name
hacs_navigate_ios:
tap_action:
close_popup: >
[[[ hass.callService('browser_mod', 'close_popup'); ]]]
action: navigate
navigation_path: >
[[[ return `/${hass.panels.hacs.url_path}` ]]]
template: icon_name
hass_version_latest = states[variables.latest],
hass_version_latest_beta
hass_release_notes
hass_release_notes_beta
what am I missing?
Hey @johntdyer, it may not be the issue, but have you added the js modules in your configuration.yaml? Example snippet of my configuration.yaml is shown below.
lovelace:
mode: yaml
resources: [
{ url: /hacsfiles/apexcharts-card/apexcharts-card.js, type: module },
{ url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: '/local/marked.min.js?v=4.0.18', type: module },
{ url: '/local/vanilla-tilt.min.js?v=1.7.2', type: module },
{ url: /local/fonts.css, type: css }
]