I am having the same issue, it has been working for a long time, but not anymore
Seems like you’ve got it working, empty cache
Basically the freedom to easily put an element anywhere. The downside is of course that the layout is not responsive for mobile etc but I’m sure that’s possible with layout-card/grid-card/media queries
I’ve noticed that as well
popup-backdrop-filter doesn’t work since like 0.113, use card-mod
I have done that but it wasn’t fixed the issue
I fixed my issue by replacing entity.entity_id].attributes.data[1].fanart by entity.entity_id].attributes.data[1].poster. It works well
I can only downgrade to 0.2.1
that’s the wrong card…
@Mattias_Persson why I got often this error when i open home the dasboard ?
Logger: frontend.js.latest.202010214
Source: components/system_log/init.py:193
First occurred: 8:27:22 PM (1 occurrences)
Last logged: 8:27:22 PM
- https://domain.tld/hacsfiles/kiosk-mode/kiosk-mode.js:8:3 Uncaught TypeError: Cannot read property ‘shadowRoot’ of null
Moreover, I have to refresh the dashboard, otherwise I can’t turn on the lights and the markedown at sidebar cannot be displayed
Got it it’s working again:+1:
Hej Mathias,
Jag har tittat på din HomeAssistant-design, jag tycker att den är mycket välgjord och skulle också vilja ha den.
Tror du att du kommer att få möjlighet att hjälpa mig installera detta tema via Teamviewer, tyvärr har jag tyvärr inte mycket erfarenhet av det själv.
Hoppas så mycket att du kommer att hjälpa till!
Did you add custom_icons.js
? If not, that is your problem. Make sure it is in configuration.yaml
(old style) or via UI, Configuration->Lovelace control panel.
I used this theme and this ui-lovelace config
title: Title
views:
- title: My view
icon: 'mdi:home-assistant'
popup_cards:
switch.third_floor_powerstrip_bedroom_usbleft:
title: 3F USB Left
card:
type: entities
entities:
- type: 'custom:fold-entity-row'
head: switch.third_floor_powerstrip_bedroom_usbleft
entities:
- entity: input_datetime.3f_bedroom_powerstrip_smartlife_usblefton
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnontimer
- entity: input_datetime.3f_bedroom_powerstrip_smartlife_usbleftoff
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnofftimer
- type: section
label: Schedule
- entity: group.3f_bedroom_powerstrip_smartlife_usbleft_timer
- entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_monday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_tuesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_wednesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_thursday
- entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_friday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_saturday
- entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_sunday
cards:
- type: entity-button
entity: switch.third_floor_powerstrip_bedroom_usbleft
tap_action:
action: call-service
service: browser_mod.popup
service_data: null
deviceID: this
hold_action:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: 3F USB Left Settings
card:
type: entities
entities:
- type: 'custom:fold-entity-row'
head: switch.third_floor_powerstrip_bedroom_usbleft
entities:
- entity: input_datetime.3f_bedroom_powerstrip_smartlife_usblefton
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnontimer
- entity: >-
input_datetime.3f_bedroom_powerstrip_smartlife_usbleftoff
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnofftimer
- type: section
label: Schedule
- entity: group.3f_bedroom_powerstrip_smartlife_usbleft_timer
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_monday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_tuesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_wednesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_thursday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_friday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_saturday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_sunday
large: true
and this card-mod config but to no avail
- title: card-mod
cards:
# Style the card, but use special styles for the header
- type: entities
title: Simple configuration
style: |
ha-card {
color: green;
}
.card-header {
color: cyan;
}
entities:
- switch.3f_br_switch_broadlink_mid
- switch.3f_br_switch_broadlink_sidelight
Am I missing something?
Hi there. I don’t know how to edit popup card
in order to, for instance, having these rounded borders
as @Mattias_Persson did. In general, how can I custom these cards? Where can I find this piece of code? Thanks in advance!
Hi @Frank_Hagenbuch. Could you provide us whole code to have this awesome thermostat button card? thx
yes, i do it but it doesn’t work.
if i use custom:tv it works.
Any ideas?
thanks
I use it a little bit modified now:
lovelace.yaml:
- type: custom:button-card
entity: climate.wohnzimmer
style:
top: 36%
left: 14%
width: 20%
template: climate
- type: 'custom:mini-graph-card'
entities:
- sensor.heizung_wohnzimmer
style:
top: 40%
left: 14%
width: 20%
line_color: blue
line_width: 8
font_size: 75
show:
name: false
icon: false
state: false
template.yaml:
climate:
aspect_ratio: 2/1
show_state: false
show_icon: false
show_name: false
show_current_temperature: true
show_control: true
custom_fields:
room_temp: >
[[[ const state = entity.attributes.current_temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >${state}°</text></svg>`; ]]]
room_temp_target: >
[[[ const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="54%" text-anchor="middle" >${state}°</text></svg>`; ]]]
room_name: >
[[[ return entity.attributes.friendly_name ]]]
mode: >
[[[ if (entity.state === 'auto') { return '<svg viewBox="0 0 799.36 795.5"><path fill="#9da0a2" d="M61.37,427.36c6...........................24.89Z"/></svg>'; } ]]]
styles:
card: *button_styles_card
custom_fields:
room_temp: [top: 30%, left: 5%, position: absolute, line-height: 3.25vw, font-size: 2.64vw, font-family: Assistant, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)']
room_name: [top: 3%, left: 26%, position: absolute, line-height: 3.25vw, font-size: 2.64vw,]
room_temp_target: [top: 8%, left: 6%, position: absolute, line-height: 1.60vw, font-size: 1.64vw, font-family: Assistant, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)']
mode: [top: 7%, right: 8%, width: 2.5vw, position: absolute, opacity: 0.8]
tap_action:
action: more-info
(can not post the complete code for the SVG here, its to long. if you need it, let me know)
Ahhh. the key is to create to card one above the other!! Thx!
It looks great, nice work!
And I’m looking for something like that for my climate buttons.
Can you send me the whole SVG?