Lode1
October 16, 2023, 7:00pm
828
Does somebody know how i can align the button-cards with the markdowncard ?
This is the code from the raw editor
kiosk_mode:
non_admin_settings:
kiosk: true
ignore_entity_settings: true
views:
- title: Home
path: login
theme: clear-dark
type: custom:grid-layout
layout_type: custom:grid-layout
layout:
gridrows: auto
grid-template-columns: 40% 10% 1fr
grid-template-areas: |
"a1 a2 a3 a4"
"b1 b2 b3 b4"
"c1 c2 c3 c4"
subview: false
subview: false
icon: mdi:home
badges: []
cards:
- type: markdown
content: |-
<font size="10">{{ states('sensor.today_time') }}</font>
<font size="5">{{ states('sensor.today_day') }}</font>
theme: clear-dark
view_layout:
grid-area: a1
- square: false
type: grid
cards:
- type: custom:button-card
color_type: card
name: Home
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Beveiliging
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Zonnepanelen
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Verwarming
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Instellingen
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Camera's
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Weer
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
- type: custom:button-card
color_type: card
name: Verlichting
styles:
card:
- background: transparent
- color: white
- height: 70px
- width: 200px
border-radius: 50%
tap_action:
action: navigate
navigation_path: /lovelace/zonnepanelen
columns: 4
view_layout:
grid-area: b1
ok, very basic question but I seem to have a black out… how do I properly write this, so that I get the state of that sensor displayed??
label: >
[[[
return `<span>${state.sensor.time_of_day_sv}</span>`
]]]
Paga777
October 20, 2023, 5:36pm
830
Hi guys,
extra_styles: |
@keyframes music {
0% { box-shadow: 0 0 5px -2px rgba(255,0,255, 100%)}
90% { box-shadow: 0 0 5px 12px rgba(255,0,255, 0)}
}
how can I replace the rgb value with the rgb attribute of a light bulb?
styles:
icon:
- height: 28px
- width: 28px
- color: >-
[[[ return "rgba(" + states['light.virtual_light_1'].attributes.rgb_color +",1)"]]]
Thanks in advance
VietNgoc
October 21, 2023, 9:11pm
831
label: >
[[[
return `<span>${states[sensor.time_of_day_sv].state}</span>`;
]]]
1 Like
why use the span? simply do:
label: >
[[[
return states['sensor.time_of_day_sv'].state;
]]]
1 Like
Scoff
October 25, 2023, 11:16am
833
Can anyone help me with a multi line state display, using custom:button-card please? I’m ‘simply’ trying to display the day and date over 2 lines, as per the way my template sensor renders.
Template sensor:
- name: "Date Formatted"
state: "{{ as_timestamp(states('sensor.date_time_iso')) | timestamp_custom('%A\n%-d %B') }}"
icon: "mdi:calendar-clock"
and in the template editor in Dev Tools, the resulting string renders correctly over 2 lines:
however in the custom:button-card, the string appears all on one line:
type: custom:button-card
entity: sensor.date_formatted
show_name: false
show_icon: false
show_state: true
tap_action:
action: none
styles:
card:
- padding-top: 10px
- text-align: center
- border-width: 0
- font-family: SF Pro Display, Roboto, system-ui
state:
- font-size: var(--sidebar-date-font-size)
- font-weight: 300
- line-height: var(--sidebar-time-line-height)
- color: rgba(255, 255, 255, 0.8)
- display: flex
- flex-direction: column
- align-items: center
like this:
Can anyone help identify what is preventing the multi line display?
xzivzs
October 25, 2023, 9:00pm
834
Hey there,
I’m facing an issue where I just want to add a “more-info” custom-fields button but I can see the border of the button itself. When I push on the button, I can see the custom card being yellow execpt the “custom-fields” button which is black inside, what can I do in that case ?
Cheers!
type: custom:button-card
entity: light.living_room_light_light
name: Living Room
state:
- value: 'on'
icon: mdi:lamp
color: rgb(255, 255, 153)
- operator: default
icon: mdi:lamp-outline
show_icon: true
color_type: card
size: 50%
tape_action:
action: toggle
hold_action:
action: more-info
custom_fields:
info:
card:
type: custom:button-card
icon: mdi:information-box
tap_action:
action: more-info
entity: light.living_room_light_light
styles:
custom_fields:
info:
- border-radius: 50%
- background-color: transparent
- box-shadow: non
- position: absolute
- left: 65%
- top: 5%
- height: 20px
- width: 80px
- font-size: 8px
- line-height: 20px
I tried “transparent” background but it doesn’t work in that case.
domain_int
October 26, 2023, 2:09am
835
Can anyone help me with the formatting of
extra_styles: |
[[[ { background-image: url("/local/buttons/button_basic_red.png");
} ]]]
I have a 3d button I want to use as a background image and cant seem to get it to display and there are no examples in this thread that dont use the @keyframes
Many thanks
pedolsky
October 26, 2023, 4:51pm
836
Add a background image:
- background-image: |
[[[
return variables.state_on
? 'linear-gradient(to bottom, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,0,0,0) 50%)'
: 'rgba(115, 115, 115, 0.25)';
]]]
pedolsky
October 26, 2023, 5:14pm
837
I don’t know if the regex is correct, but your code was not valid (missing closing brace and double return). Try
entity_picture: |
[[[
const str = states[variables.my_entity].state;
const regex = (\d+).(\d+).(\d+).(\d+);
if ( str.match(regex) )
return `/local/images/vpn.png`;
else return `/local/images/vpn-off.png`;
]]]
pedolsky
October 26, 2023, 7:02pm
838
Paga777:
@keyframes music
Both codes are working:
extra_styles: |
@keyframes music {
0% { box-shadow: 0 0 5px -2px var(--button-card-light-color) }
90% { box-shadow: 0 0 5px 12px var(--button-card-light-color) }
}
or
extra_styles: |
[[[
let col1 = 'rgba('+entity.attributes.rgb_color+',1)',
col2 = 'rgba('+entity.attributes.rgb_color+',0)';
return `
@keyframes music {
0% { box-shadow: 0 0 5px -2px ${col1} }
90% { box-shadow: 0 0 5px 12px ${col2} }
}`
]]]
EDIT: I’d overlooked the different transparencies.
You have to style the card in the custom field as well:
custom_fields:
info:
card:
type: custom:button-card
icon: mdi:information-box
tap_action:
action: more-info
entity: light.hue_iris
styles:
card:
- border-width: 0
- background-color: rgba(0,0,0,0)
- '--mdc-ripple-press-opacity': 0 # if you don’t want the ripple effect
styles:
custom_fields:
info:
- border-radius: 50%
- box-shadow: none
- position: absolute
- left: 65%
- top: 5%
- height: 20px
- width: 80px
- font-size: 8px
- line-height: 20px
2 Likes
pedolsky
October 26, 2023, 7:43pm
840
domain_int:
background image
styles:
card:
- background-image: url("/local/buttons/button_basic_red.png")
- background-size: cover
- background-position: 50% 50%
xzivzs
October 26, 2023, 9:05pm
841
I got it now, I also have to style inside as well. It’s working as expected, thanks a lot !
larryo108
October 27, 2023, 5:38pm
842
Thank you. I’ll give it a try.
dbrunt
October 28, 2023, 1:48am
843
Has anyone tried to display an HA timer countdown in a notification: section??
HA timer entities states are either active or idle and when the entity is displayed via entities card the state is magically transformed into a countdown by some internal computation using now() and the attribute finishes_at, which is removed when timer is “idle”.
I can get the button-card’s overall state to display the countdown by using entity: timer.bathroom_light_timer & show_state: true but I do not want that! I’d like to display the countdown in a notification area but can’t figure out the javascript.
Simple text display:
My failed attempt thus far:
type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
show_state: false
styles:
grid:
- position: relative
custom_fields:
notification1:
- background-color: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'off')
return "";
return "";
]]]
- border-radius: 10%
- position: absolute
- left: 5%
- top: 25%
- height: 30px
- width: 30px
- font-size: 6px
- line-height: 25px
notification2:
- background-color: |
[[[
if (states['timer.bathroom_light'].state == 'idle')
return "";
return "green";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 10%
- height: 25px
- width: 25px
- font-size: 8px
- line-height: 25px
custom_fields:
notification1: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'on')
return `<ha-icon
icon="mdi:motion-sensor"
style="width: 22px; height: 22px; color: yellow;">
</ha-icon>`
return "";
]]]
notification2: |
[[[
if (states['timer.bathroom_light'].attributes.finishes_at)
return helpers.formatDateTime(timer.bathroom_light.attribute.finishes_at);
return helpers.formatDateTime(timer.bathroom_light.attribute.finishes_at);
]]]
Simple text display working code:
type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
show_state: false
styles:
grid:
- position: relative
custom_fields:
notification1:
- background-color: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'off')
return "";
return "";
]]]
- border-radius: 10%
- position: absolute
- left: 5%
- top: 25%
- height: 30px
- width: 30px
- font-size: 6px
- line-height: 25px
notification2:
- background-color: |
[[[
if (states['timer.bathroom_light'].state == 'idle')
return "";
return "green";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 10%
- height: 25px
- width: 25px
- font-size: 8px
- line-height: 25px
custom_fields:
notification1: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'on')
return `<ha-icon
icon="mdi:motion-sensor"
style="width: 22px; height: 22px; color: yellow;">
</ha-icon>`
return "";
]]]
notification2: |
[[[
if (states['timer.bathroom_light'].state == 'idle')
return ' ';
return 'Active';
]]]
dbrunt
October 28, 2023, 11:28pm
845
Mission accomplished!
- type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
custom_fields:
motion: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'on')
return `<ha-icon
icon=mdi:motion-sensor
style="width: 22px; height: 22px; color: yellow;">
</ha-icon>`
return "";
]]]
timer:
card:
type: custom:button-card
entity: timer.bathroom_light
aspect_ratio: 1/1
show_icon: false
show_name: false
show_state: |
[[[
if (states['timer.bathroom_light'].state == 'active')
return true;
return false;
]]]
styles:
card:
- border: none
state:
- font-size: 70%
- color: yellow
styles:
custom_fields:
motion:
- display: block
- position: absolute
- top: 30%
- left: 2%
- width: 30%
- height: 30%
timer:
- display: block
- position: absolute
- top: 20%
- right: 2%
- width: 30%
- height: 30%
3 Likes
larryo108
October 30, 2023, 1:21pm
846
I am trying to implement this as you have noted, but I am struggling to figure it out. I have read through the button card documentation and can only find one reference to “background image.” It shows it as an “extra style” and it just and image background swap loop. Where would I insert the background image code at?
pedolsky
October 30, 2023, 3:23pm
847
Put it in styles —> card:
card:
- '--c-color-home': '#32a852'
- '--c-color-away': rgb(255,0,0)
- '--c-color-zone': '#ffbf00'
- '--c-color-stationary': '#3182b7'
- '--c-stroke-width': 2.3
- '--c-icon-color-on': rgb(0,0,0)
- '--c-icon-color-off': '#97989c'
- border-radius: 10px
- border-width: 0px
- '-webkit-tap-highlight-color': rgba(0,0,0,0)
- transition: none
- '--mdc-ripple-color': |
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- color: |
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- background-color: |
[[[
return variables.state_on
? 'rgba(255,255,255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
- background-image: |
[[[
return variables.state_on
? 'linear-gradient(to bottom, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,0,0,0) 50%)'
: 'rgba(115, 115, 115, 0.25)';
]]]
