I only have two options in the menu -
Are there some files in CONFIG_FOLDER/www/community/button-card/
: a .js
and a .js.gz
?
If not, HACS didnāt install it properly, if there are some files then please share your resources screenshot.
I donāt think you should have the url:
in front of the path in your resources.
Oh thatās embarrassing
You were absolutely correct, thanks so much for your help.
hi at all!
How can i align to the left label and state???
see image belowā¦
using layout: icon_name_state2nd
state and label seems to be aligned on the right side ā¦
what iām trying to to is move state and label as the attached image.
thanks a lot
That would be:
styles:
label:
- align-self: start
state:
- align-self: start
Hi.
Iām trying to figure out how to template a name for a dynamically changing input_select list.
Basically, Iāll have 4 buttons, each with the name being one of the options (playlists) in input_select.synaudio_playlist. These names occasionally change as I change/add/remove my playlists.
In jinja template, I can use the following templates to return the names in each position on the list.
{%- set playlist1 = state_attr('input_select.synaudio_playlist', 'options').0%}
{{playlist1}}
{%- set playlist2 = state_attr('input_select.synaudio_playlist', 'options').1%}
{{playlist2}}
Itās not working in the button card template though.
Iāve tried a few variations in my button template, like:
- type: 'custom:button-card'
template: tv_source_2
entity: input_select.synaudio_playlist
name: >
[[[
var playlist = (entity.attributes.options.1);
return playlist;
]]]
But I get an error saying unexpected number ā.1ā. Expected ā)ā to end a a compound expression.
Is there a way to make this work or should I just make another bunch of sensor entities using the jinja template to make it work?
Hi,
May I ask you how did you do those header cards above the grid? E.g. āHassio version infoā, āHassio system infoā?
sure, tis a button card in a vertical stack:
type: vertical-stack
cards:
- type: custom:button-card
name: Home Assistant version info
template: button_default_title
- type: horizontal-stack
cards:
based on a template:
button_default_title:
aspect_ratio: 12/1
styles:
card:
- background-color: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 20px
- font-family: Helvetica
- font-weight: bold
the var colors are in my themes, so change according to the theme settings.
Hi. Iām trying to get this effect (icons in a row)
I managed to get what you can see below and unfortunately I donāt know how to achieve my goal (there are only two icons in the code for tests - run and icon2 for tests. Maybe someone can help?
type: 'custom:button-card'
entity: switch.biuro
entity_picture: /local/img/piotr-moji.png
color: auto
show_entity_picture: true
show_name: false
show_icon: true
aspect_ratio: 3/1.3
state:
- value: 'on'
styles:
card:
- box-shadow: '0px 0px 3px 3px #ffeb8a'
entity_picture:
- border: 2px solid yellow
styles:
card:
- background-color: black
- border-radius: 5%
- padding: 5%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 2px black
- text-transform: capitalize
grid:
- grid-template-areas: '" i temp" "i wilg" "i ruch" "i icon2" '
- grid-template-columns: 1fr 2fr
- grid-template-rows: 1fr 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: center
- margin: none
entity_picture:
- height: 140px
- width: 140px
- border-radius: 100%
custom_fields:
temp:
- align-self: start
- justify-self: end
- font-size: 24px
- padding-bottom: 0px
wilg:
- align-self: start
- justify-self: end
- font-size: 24px
- padding-bottom: 0px
custom_fields:
temp: |
[[[
if (states['climate.natalka'].attributes.hvac_action === "heating" && states['climate.natalka'].state === "auto")
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: white;">
</ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C   <ha-icon
icon="mdi:autorenew"
style="width: 25px; height: 25px; color: orange;">
</ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
if (states['climate.natalka'].attributes.hvac_action === "idle" && states['climate.natalka'].state === "auto")
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: white;">
</ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C   <ha-icon
icon="mdi:autorenew"
style="width: 25px; height: 25px; color: silver;">
</ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
if (states['climate.natalka'].attributes.hvac_action === "heating" && states['climate.natalka'].state === "heat")
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: white;">
</ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C   <ha-icon
icon="mdi:fire"
style="width: 25px; height: 25px; color: orange;">
</ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
if (states['climate.natalka'].attributes.hvac_action === "idle" && states['climate.natalka'].state === "heat")
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: white;">
</ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C   <ha-icon
icon="mdi:fire"
style="width: 25px; height: 25px; color: silver;">
</ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
if (states['climate.natalka'].state === "off")
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: white;">
</ha-icon><span>${states['sensor.natalka_temperature'].state} Ā°C</span>`;
else
return `<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; color: white;">
</ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C   <ha-icon
icon="mdi:thermostat"
style="width: 25px; height: 25px; color: silver;">
</ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
]]]
wilg: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 25px; height: 25px; color: lightblue;">
</ha-icon><span>${states['sensor.natalka_humidity'].state} %</span>`
]]]
ruch: |
[[[
if (states['binary_sensor.biuro'].state === "off")
return `<ha-icon
icon="mdi:walk"
style="width: 25px; height: 25px; color: white;">
</ha-icon><br>`;
if (states['binary_sensor.biuro'].state === "on")
return `<ha-icon
icon="mdi:walk"
style="width: 25px; height: 25px; color: red;">
</ha-icon><br><span>${states['sensor.natalka_temperature'].state} Ā°C</span>`;
]]]
icon2: |
[[[
if (states['binary_sensor.biuro'].state === "off")
return `<ha-icon
icon="mdi:fire"
style="width: 25px; height: 25px; color: white;">
</ha-icon><br>`;
if (states['binary_sensor.biuro'].state === "on")
return `<ha-icon
icon="mdi:walk"
style="width: 25px; height: 25px; color: red;">
</ha-icon><br><span>${states['sensor.natalka_temperature'].state} Ā°C</span>`;
]]]
options
is an array, to access an array in javascript you have to use array[index]
.
So for you entity.attributes.options[1]
. Note that the first item has the index 0.
You have to define your grid properly (i.e. One new column per icon). Check the documentation on github, thereās everything you need there about CSS grids.
I could have sworn I tried that buy maybe I made another mistake at the same time.
Thank you!
Does anyone know where I can move my custom:button-card templates to that will be accessible for all of my dashboards? Iād prefer to have them outside of each dashboard so I donāt have to duplicate the code inside each one. I was hoping I could put them in customize_domain.yaml but I donāt think that would work.
You can put it in any new file and !include
that file in your different dashboardsā yaml. Obviously this only works if youāre using lovelace in yaml mode, there is no solution if youāre using the UI editor.
Eg, for me (in my ui-lovelace.yml):
button_card_templates:
!include lovelace/square/templates/button_square.yaml
Hi
Anyone knows why my background starts without the set background on all buttons, but when I press one of them it updates to the set color?
When I close the popup it resets to no background?
Seems like you are using stack-in-card or vertical-stack-in-card. If you are using stack thereās an option to keep the background, check the documentation. If itās vertical-stack-in-card thereās no option for that AFAIK
Hmm, tried to apply it to the overall stack-in-card. Doesnāt work
Can you see what Iām doing wrong?
probably this will work instead of what you have currently:
type: custom:stack-in-card
mode: vertical
keep:
background: true
Hi there,
nicely done card, I like the styleā¦perhaps would you share the code for the button cards with the graph (humidity or Illumination)? I would like to achieve something like that in my configuration
thanks