Could someone maybe assist?
I have the following code:
cards:
- entities:
- entity: input_select.rooms
show_header_toggle: false
type: entities
- card:
entities:
- cards:
- entities:
- entity: input_datetime.bedroom1_1
name: 'ON'
tap_action:
action: input_datetime.set_datetime
service: input_datetime.bedroom1_1
type: entities
style: |
ha-card {
color: red;
font-variant: small-caps;
font-size: 10px !important;
box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
border-radius: 15px;
border: 5px outset red
}
- entities:
- entity: input_datetime.bedroom1_2
name: 'OFF'
tap_action:
action: input_datetime.set_datetime
service: input_datetime.bedroom1_2
type: entities
type: 'custom:hui-horizontal-stack-card'
But this produces the following on my phone. It squeezes all the input time into a small space cutting the numbers off.
How can I enlarge the input area ?
petro
February 18, 2020, 11:59am
3021
Why are you asking here, youâre not using the button card. Youâre using an entities card.
Sorry my bad. I have so many entries with the entity and button card mixed in the code. Also other reason is because previous posts were using references and assistance to card-mod.
Thought it would make sense asking here as I am using card-mod?
petro
February 18, 2020, 12:05pm
3023
Yeah, itâs not card mod doing that. Thatâs just behavior of the normal entities card.
Is there a way I could add the input_datetime entity into a button card?
cards
- card:
entities:
- cards:
- entities:
- entity: input_datetime.bedroomlight1_1
name: 'ON'
tap_action:
action: input_datetime.set_datetime
service: input_datetime.bedroomlight1_1
type: entities
- entities:
- entity: input_datetime.bedroomlight1_2
name: 'OFF'
tap_action:
action: input_datetime.set_datetime
service: input_datetime.bedroomlight1_2
type: entities
type: 'custom:hui-horizontal-stack-card'
- cards:
- color_type: card
entity: input_boolean.bedroomlight_monday1
icon: 'mdi:calendar-range'
name: Mon
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
label:
- font-size: 5px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_monday1
type: 'custom:button-card'
- color_type: card
entity: input_boolean.bedroomlight_tuesday1
icon: 'mdi:calendar-range'
name: Tue
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
label:
- font-size: 5px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_tuesday1
type: 'custom:button-card'
- color_type: card
entity: input_boolean.bedroomlight_wednesday1
icon: 'mdi:calendar-range'
name: Wed
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
label:
- font-size: 5px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_wednesday1
type: 'custom:button-card'
- color_type: card
entity: input_boolean.bedroomlight_thursday1
icon: 'mdi:calendar-range'
name: Thu
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
label:
- font-size: 5px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_thursday1
type: 'custom:button-card'
- color_type: card
entity: input_boolean.bedroomlight_friday1
icon: 'mdi:calendar-range'
name: Fri
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
label:
- font-size: 5px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_friday1
type: 'custom:button-card'
- color_type: card
entity: input_boolean.bedroomlight_saturday1
icon: 'mdi:calendar-range'
name: Sat
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
label:
- font-size: 5px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_saturday1
type: 'custom:button-card'
- color_type: card
entity: input_boolean.bedroomlight_sunday1
icon: 'mdi:calendar-range'
name: Sun
show_icon: true
show_last_changed: false
show_name: true
size: 20px
state:
- color: '#626664'
color_type: icon
styles:
card: null
value: 'off'
- color: '#DBDBDB'
operator: default
styles:
card:
- border-radius: 20px
name:
- font-size: 15px
tap_action:
action: toggle
service: input_boolean.bedroomlight_sunday1
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom Light
type: conditional
title: Room Selection/Schedule
type: vertical-stack
```
petro
February 18, 2020, 12:11pm
3025
yes but youâll have the same issue. The size of the input field will always be 30ish % of the input-datetime entity-row.
Could maybe give me some insight on moving the input_datetime into a button-card? I asked the same question about a month or two ago and it was not possible at the time.
dubsix
February 18, 2020, 12:19pm
3027
Is there any way to have multiple actions within a tab_action?
Iâve tried the below but only the action the is bottom-most fires
- type: custom:button-card
entity: input_boolean.nodered_sleepintomorrow
name: Sleep In
template: button_control
icon: mdi:sleep
tap_action:
#Pop-UP toast
action: call-service
service: browser_mod.toast
service_data:
message: "Enjoy the sleep in tomorrow sleepyhead"
deviceID:
- this
#Toggle
action: toggle
VDRainer
February 18, 2020, 12:34pm
3028
Put your actions in a script and call the script with the tap_action.
1 Like
petro
February 18, 2020, 12:35pm
3029
Itâs still not possible unless you want to make the custom card.
1 Like
leeb98
February 19, 2020, 2:50am
3030
love the button , just trying out templates for the first time to cut down on the coding⊠without much luck
the question(s) is where do i place the actual template code ?
currently my YAML looks like -
title: Main
panel: false
# Optional unique id for direct access /lovelace/${id}
id: Main
icon: mdi:home
button_card_templates:
phones:
styles:
- border-radius: 10%
- color: state-icon-color
tap_action:
action: more-info
state:
value: "home"
color: var(--state-icon-active-color)
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: phones
entity: device_tracker.phoneaimee
color: state-icon-color
# state:
# - value: "home"
# color: var(--state-icon-active-color)
- type: "custom:button-card"
entity: device_tracker.phonelee
template: phones
#state:
# - value: "home"
# color: var(--state-icon-active-color)
- type: "custom:button-card"
entity: device_tracker.phonecaroline
template: phones
state:
- value: "home"
color: var(--state-icon-active-color)
tap_action:
action: more-info
- type: "custom:button-card"
entity: device_tracker.phoneblake
template: phones
state:
- value: "home"
color: var(--state-icon-active-color)
tap_action:
action: more-info
note this code in not in the ui-lovalace.yaml file , is in an include
Template is called phones , the tap_action and State only work when included in the card definition.
the Tap Action is only working on the last two phone icons⊠ie with the inline code
thanks for your help
Lee B
Templates have to be defined outside of lovelace views. You can follow whatâs described here , or create your own folder architecture.
Mine are included in my main.yaml lovelace file:
# lovelace_gen
# ------------------------------------------------------------------------------
# File: lovelace/main.yaml
# Desc: Used by lovelace_gen to generate Lovelace UI.
# See: https://github.com/thomasloven/hass-lovelace_gen
....
#-------------------------------------------------------------------------------
# Custom button templates
button_card_templates: !include_dir_named 06_templates/buttons
edit: I pasted an old bit of code. Fixed with the current one where Iâm using include_dir_named
HI,
In desperate need for some formatting assistance and would greatly appreciate your assistance.
Id like to show this button:
but with a much larger image. No matter what I try, the image stays tiny, while obviously it has much more space, probably fill the top left corner which should be about 25% of the full button?
Ideally, Id even set the image as background and overlay the other fields. Ive tried to set it as background for the card, but nothing appearedâŠ
Another nice option would be to have this button (albeit with a larger entity_picture, and show the balloons as background image.
please have a look with me, thanks!
this is the current config:
type: custom:button-card
template: button_body
entity: 'binary_sensor.birthday_louise'
aspect_ratio: 1/1
name: Louise jarig!
show_state: false
show_entity_picture: true
entity_picture: >
[[[ return entity.attributes.entity_picture ]]]
size: 60%
tap_action:
action: navigate
navigation_path: tijd_agenda
hold_action:
action: call_service
service: persistent_notification.dismiss
service_data:
notification_id: party_notification
styles:
card:
- padding: 5px
- font-size: 10px
- color: blue
- background: orange
- animation: >
[[[ if (entity.state === 'on') return 'blink 2s ease infinite';
return 'none'; ]]]
grid:
- grid-template-areas: '"i years" "n n" "original_date original_date" "type type"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- align-self: start
- justify-self: start
- padding-bottom: 4px
- color: pink
img_cell:
- margin: none
custom_fields:
years:
- font-size: 20px
- align-self: start
- justify-self: end
- --text-color-sensor: red
original_date:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: red
type:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: green
custom_fields:
years: >
[[[
return `<ha-icon
icon='mdi:party-popper'
style='width: 20px; height: 20px;color: white;'>
</ha-icon><span style='color: var(--text-color-sensor);'>${entity.attributes.years} </span></span>`
]]]
original_date: >
[[[
return `<span>Date: <span style='color: var(--text-color-sensor);'>${entity.attributes.original_date}</span></span>`
]]]
type: >
[[[
return `<span>Type: <span style='color: var(--text-color-sensor);'>${entity.attributes.type}</span></span>`
]]]
petro
February 19, 2020, 12:48pm
3033
increase size %, the size % pertains to the grid size. If you go 100% the image should fill the entire grid area (Not the whole button). If you want to make it even bigger, change your grid-template-columns: 1fr 1fr to be a little larger on the left side. something like grid-template-columns: 1fr 0.75fr
and for your background area add under card
- background-image: url("/x/y/foo.png")
- background-repeat: no-repeat
- background-size: 100%
- background-position: center
Just make sure the image is larger than the button. This method will preserve the image aspect ratio but if the button is larger than the image, itâll look like a square in the center of the button.
1 Like
thanks Petro, setting it to100% indeed works, hadnât realized it was the percentage of the grid area⊠looking nice on desktop, but getting cropped out on mobileâŠhmm another challenge there.
wat about setting the image as background?
âeditâ
oops.nevermind, crossposted⊠sorry
background-image doesnât work just yetâŠ
- background-image: > # url("/local/family/louise.jpg") doesn't work...
[[[ return "url('/local/family/' + entity.attributes.name.toLowerCase() +'.jpg')" ]]]
Iâve taken out the background: orange, but keep seeing this:
changed grid to:
grid:
- grid-template-areas: '"years years" "n n" "original_date original_date" "type type"'
makes the circle disappear, but still no background picture
petro
February 19, 2020, 1:55pm
3037
quotes are wrong. Also typically when returning proper quoting, I always use the special strings for js.
[[[ return `url("/local/family/${entity.attributes.name.toLowerCase()}.jpg")`; ]]]
1 Like
