KameDomotics
September 25, 2021, 12:18pm
5985
this is the last of the attempts, but even with other tests it only shows me a thermostat icon…
type: custom:button-card
tap_action:
action: toggle
entity: climate.termostato
aspect_ratio: 1/1
styles:
card:
- border-radius: 12%
- font-size: 100%
name:
- font-weight: bold
- font-size: 18px
- align-self: middle
- justify-self: center
- padding-bottom: 5px
img_cell:
- justify-content: center
- align-items: center
- margin: none
icon:
- width: 64%
rmertz3282
September 25, 2021, 12:58pm
5986
Where’s your reference to the thermostat card?
The example should look something like this.
- type: custom:button-card
aspect_ratio: 1/1
custom_fields:
graph:
card:
type: sensor
entity: sensor.sensor1
graph: line
style: |
ha-card {
box-shadow: none;
}
1 Like
KameDomotics
September 25, 2021, 1:34pm
5987
ok now it works, thanks!
Is it possible to hide the entity name?
rmertz3282
September 25, 2021, 2:56pm
5988
The thermostat name? Where did you insert that line?
Keep in mind you technically have a card within a card. The show_name: false works at the button level. The thermostat card will still have a name.
Within the tstat card I think you can override the entity name only. Try something like…
name: []
KameDomotics
September 25, 2021, 3:51pm
5989
Many thanks!
Hello, i would like to know how can i return a list to use it inside button card.
my orginal code , i wanna return a list value inside button card template.
cards:
- type: custom:button-card
color_type: label-card
color: rgb(44, 109, 214)
entity: light.bed_light
template: |
[[[ return variables.icon ]]]
template: |
[[[ return variables.icon_1 ]]]
Output passed in button card template :
template: light_white
Failed:
template: |
- [[[ return variables.icon_1 ]]]
- [[[ return variables.icon_2 ]]]
how can i do to output a list just like below?
template:
- light_white
- light_rgb
pedolsky
September 25, 2021, 8:23pm
5991
You can simply use a custom field inside your card:
type: custom:button-card
entity: sensor.time
show_icon: false
show_name: false
show_state: true
custom_fields:
counter: |
[[[ return states['counter.testzaehler'].state ]]]
styles:
card: null
state:
- padding-bottom: 11px
grid:
- grid-template-areas: "'s' 'counter'"
- grid-template-columns: 1
returns
Or you can use a custom:button-card as custom field:
type: custom:button-card
entity: sensor.time
show_icon: false
show_name: false
show_state: true
custom_fields:
counter:
card:
type: custom:button-card
entity: counter.testzaehler
show_icon: false
show_name: false
show_state: true
styles:
card:
- box-shadow: none
- border-radius: 0%
- border-top: 1px dotted
styles:
card:
- padding: 0
state:
- padding: 14px
grid:
- grid-template-areas: "'s' 'counter'"
- grid-template-columns: 1
returns
The advantage of the second variant is that you have the more info dialogue on tap/click.
BeastHouse
September 26, 2021, 12:51pm
5992
Could you post a shot of the final result?
krovachek
September 27, 2021, 5:25am
5995
I played with similar card like this:
1 Like
Hello,
How does scaling works ? In the second picture (from my laptop screen) they lose “data” from the right side or the screen, why ? I guess is normal for the text as it has a px fixed size …
Why do I have to pad-bottom to push the icon on the top ? I tried with align top and it was just aligning quite far from top …
Why is CPU slightly further away than the others ? They should be at equal distance, right !?
How can I make the full page (txt, img, sub-cards) to work/scale on any device / screen size ?
Deskop: Imgur: The magic of the Internet Imgur: The magic of the Internet
type: custom:button-card
entity: sensor.docker_homeassistant_state
icon: mdi:home-assistant
aspect_ratio: 1/1
name: Home Assistant
styles:
card:
- border-radius: 10%
- padding: 5%
- font-size: 10px
grid:
- grid-template-areas: '"i n n " "sts sts sts" "cpu ramp ram"'
- grid-template-columns: 33% 33% 33%
- grid-template-rows: 30% 10% 60%
name:
- font-weight: bold
- font-size: 100%
- color: dodgerblue
- align-self: top
- justify-self: right
- padding-bottom: 25%
img_cell:
- justify-content: left
- align-items: top
- padding-top: 10%
- padding-bottom: 50%
icon:
- width: 60%
- padding-top: 10%
- color: |
[[[
if (entity.state = "Running") return 'lime';
if (entity.state = "Restarting") return 'yellow';
else return 'red';
]]]
custom_fields:
sts:
- align-self: top
- justify-self: right
- font-size: 8px
- padding-bottom: 40%
- '--text-color-sensor': |-
[[[ if (entity.state = "Running") return 'lime';
if (entity.state ="Restarting") return 'yellow';
else return 'red';
]]]
cpu:
- justify-self: left
ramp:
- justify-self: left
ram:
- justify-self: left
custom_fields:
sts: |
[[[
return `<span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_status'].state}</span></span>`
]]]
cpu:
card:
type: custom:bar-card
entity: sensor.docker_homeassistant_1cpu
name: CPU
height: 50px
width: 10px
direction: up
positions:
icon: 'off'
indicator: 'on'
minmax: 'off'
title: outside
value: outside
name: outside
decimal: 1
animation:
state: 'on'
entity_row: true
severity:
- color: '#00BFFF'
from: 0
to: 10
- color: '#40bf40'
from: 11
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 81
to: 100
ramp:
card:
type: custom:bar-card
entity: sensor.docker_homeassistant_memory_percent
name: RAM%
height: 50px
width: 10px
direction: up
positions:
icon: 'off'
indicator: 'off'
minmax: 'off'
title: outside
value: outside
name: outside
decimal: 1
animation:
state: 'on'
entity_row: true
severity:
- color: '#00BFFF'
from: 0
to: 10
- color: '#40bf40'
from: 11
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 81
to: 100
ram:
card:
type: custom:bar-card
entity: sensor.docker_homeassistant_memory
name: RAM
height: 50px
width: 10px
direction: up
max: 2048
positions:
icon: 'off'
indicator: 'off'
minmax: 'off'
title: outside
value: outside
name: outside
decimal: 0
animation:
state: 'on'
entity_row: true
severity:
- color: '#00BFFF'
from: 0
to: 204
- color: '#40bf40'
from: 205
to: 820
- color: '#ffde00'
from: 821
to: 1642
- color: '#fd0000'
from: 1643
to: 2048
flemmingss
September 30, 2021, 12:13pm
5998
This must be simple, but I can’t find out how. I just wan to add a “Dim level: XX%” to my card. How do I accomplish this?
type: custom:button-card
name: Under seng
show_state: true
entity: light.zigbee_29
icon: mdi:bed
color_type: card
color: auto
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.zigbee_29
brightness: 255
kelvin: 40000
pedolsky
September 30, 2021, 3:17pm
5999
If you mean brightness level, search for Math.round here.
Hi, can someone please guide me on getting the icon to align to the right, opposed to center?
I’ve tried various ideas using the developer console. As an example, i thought if i changed justify-content to right on the img-cell it would solve it.
I confess i have very little knowledge of CSS so any pointers would be really great.
Ed
Luxor73
October 2, 2021, 3:09pm
6001
4 Likes
Pulsaro
October 4, 2021, 1:28am
6003
Hello Community,
pjn77
October 4, 2021, 5:17pm
6004
How can I get a button that calls a script to show the current color of a light entity? I’ve tried using a template in the color: value of the config but that doesn’t work.
pedolsky
October 4, 2021, 6:09pm
6005
styles:
card:
- border-radius: 5%
or:
styles:
card:
- border-radius: 25px
2 Likes
Jason_hill
October 4, 2021, 6:12pm
6006
Install card-mod and use border radius
´
