Haha, that works! Thanks! Hopefully my journey taught me something rather than just waste my time.
Lets say I want go with the route I started on, is there anything that can be done about the resource stuff?
If you want to use an icon in a text field, you can use the <ha-icon> element.
<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon>
But why wouldnāt you want to use the standard icon from the button?
Thanks for the response. Mainly, curiosity at this point 
I have some other plans to try to use Dygraphs if possible with in a card and the resource information would be helpful for adding other local resources and being able to use them.
I was over thinking it and ātriggeringā off the wrong entity:
entity: script.clean_master_bedroom
icon: 'mdi:bed-queen'
name: M Bedroom
tap_action:
action: call-service
service: script.clean_master_bedroom
state:
- value: 'off'
color: black
- value: 'on'
color: green
type: 'custom:button-card'
Working perfectly. Black when the script is not running and green when it each. Each of my buttons uses a different script, so Iām all set.
I have two split system air-conditioners which for the most part are dumb. To help integrate them into HA I have purchased a couple of Tuya/Smart Life IR remotes, and have set up scenes within Smart Life to allow me to control them via IFTTT triggers. Works perfectly, but obviously I donāt get any feedback from the units telling me what state theyāre in.
I have created a basic Climate card for two areas of my house, and in each one I have four buttons that call the services I have created. My question is it possible to have the icon of each button change colour when the service is called?
Ideally, I would press the heat button, the icon would change colour, reflecting that was the last button pushed; then when the off button is pushed, the heat button reverts back to itās original colour, and the off button is now coloured. Is that at all possible?
This is the code I have for the four buttons.
- cards:
- entity: scene.q7jxkjtkcfji1nw4
icon: 'mdi:radiator'
name: Heat
state_color: true
tap_action:
action: call-service
service: ifttt.trigger
service_data:
event: ds_split_heat
type: 'custom:button-card'
- entity: scene.0bur1u8q55wflghv
icon: 'mdi:snowflake'
name: Cool
state_color: true
tap_action:
action: call-service
service: ifttt.trigger
service_data:
event: ds_split_cool
type: 'custom:button-card'
- entity: scene.7dmi62dwiietujdn
icon: 'mdi:fan'
name: Fan
state_color: true
tap_action:
action: call-service
service: ifttt.trigger
service_data:
event: ds_split_fan
type: 'custom:button-card'
- entity: scene.ostredmlwuzldksy
icon: 'mdi:toggle-switch-off'
name: 'Off'
state_color: true
tap_action:
action: call-service
service: ifttt.trigger
service_data:
event: ds_split_off
type: 'custom:button-card'
type: horizontal-stack
1 Like
Yeah, you just need to create input booleans and input text entities that you modify the value at the same time you trigger the script/action/etc.
Is may become out of sync, but if instead of toggling, you send specific actions such as āturn_onā or āturn_offā eventually you will sync them again.
1 Like
Thanks. Iām still very new to all this, but Iāll see how I go with that.
Cheers for the help!
Thanks again, buddy! It seemed a bit daunting at first, but Node-RED helped me visualise what I needed to do, and itās all working beautifully!
1 Like
Any idea how to control the bubble āoverlapā that shows the position when you click on it?
It seems to be covered up by the item above rather than displaying as it normally should in the card above. BTW, the above is standard slider-entity-row in an entities card.
- type: 'vertical-stack'
cards:
- show_header_toggle: false
type: horizontal-stack
cards:
- type: 'custom:button-card'
template: curtain_slider_button
entity: cover.curtain_master_bedroom
name: Master
- type: 'custom:button-card'
template: curtain_slider_button
entity: cover.curtain_guest_bedroom
name: Guest
- show_header_toggle: false
type: horizontal-stack
cards:
- type: 'custom:button-card'
template: curtain_slider_button
entity: cover.living_room_curtains
name: Living
- type: 'custom:button-card'
template: curtain_slider_button
entity: cover.curtain_dining_room
name: Dining
template:
curtain_slider_button:
size: 25px
styles:
grid:
- grid-template-areas: '"i n ." "slider slider slider"'
- grid-template-columns: 55px min-content 1fr
- grid-template-rows: 1fr 1fr
card:
- border-radius: 12px
- border-color: pink
- padding-top: 10px
- padding-bottom: 10px
icon:
- color: var(--primary-color)
name:
- font-size: 16px
- color: var(--primary-text-color)
- padding-left: 1px
- padding-right: 1px
label:
- color: var(--primary-text-color)
custom_fields:
slider:
card:
full_row: true
hide_state: true
type: custom:slider-entity-row
entity: '[[[ return entity.entity_id]]]'
HI, I work a lot with button-card but havenāt found a way, to display the weather symbol provided by YR.NO integration on a button card.
My current setup looks like this:
Yes, I can ātranslateā the value into a mdi-symbol. But on the one hand, the possibilities are reduced and on the other hand it produces a lot of code.
Did I miss a simple way?
Isnāt that an entity picture instead of an icon? If so show_entity_picture: true should do the trick
1 Like
You made my day. Thanks a lot. Thatās it.
But why havenāt I found this parameterš¤?
Getting older obviously
hi
i am showing my cover as an button, i have the show_state set to true
so i see the state open or closed now on the button, so far so good
but my covers also have an attributes, like current position
current position : 100 => open
current position : 0 => closed
those 2 are shown
but someitmes they are on current postion : 7 => ventilation stand , how can i show this āventilation standā as a name instead of open/closed? maybe also with another style color / icon on the button card?
my config is now :
type: custom:decluttering-card
template: button
variables:
- entity: cover.zon_rechts
#- color: green
- name: Zon Rechts
- icon: window-shutter
- label:
- show_state: true
- margin-right: 40px
- tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.zon_rechts
haptic: light
- hold_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.zon_rechts
haptic: light
You can use a state label for that and a value template.
state:
- label: Ventilation
operator: template
value: |
[[[
return states['cover.zon_rechts'].attributes
&& (states['cover.zon_rechts'].attributes.position >= 7)
]]]
If you want it to show a different icon, color etc, just list them (like you normal do with button card) and it will show when the state is matched.
For more information make sure to read the ReadMe -> https://github.com/custom-cards/button-card#state-templates
1 Like
Hey, Iām using the buttons to create a menu. Is there a way how to group buttons, to keep track which one is active, so to apply different settings, such as different styling for the active button? Thanks!
Hi all - struggling at the moment with some coding beyond my grasp.
Iāve made a custom media button for my media players and for the text to be legible, I want to have a vertical gradient behind it going from card-background-colour to a transparent version of card-background-colour. I canāt just use static values because this variable changes based on theme and the appearance can look jarring if the wrong colour is used.
I can insert some javascript to calculate the transparent colour RGBA value from the hex value, and I get usable results when testing this with a static variable - however, what Iām struggling to do is pull the actual CSS variable. Hereās the code Iām using:
- background-image: >
[[[ function hexToRgb(hex) {
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return "rgba(" + r + ", " + g + ", " + b + ", 0.0)";
};
return `linear-gradient(to top,
var(--card-background-color),
hexToRgb(var(--card-background-color)))` ]]]
Using unchanged CSS variables like var(--card-background-color) works fine, however the javascript function doesnāt seem to want to pull the variable. I guess Iām not using the right escape characters - $, {, etc - can anyone advise how I can correct this?
I might have misunderstood your goal, but thereās an easy way to do what you want to achieve (color to transparent):
background: linear-gradient(to top, var(--card-background-color), transparent)
1 Like
A menu can only be achieved using an input_select entity. And then you track which entry is actually selected to color the appropriate button.
Thanks will check that out! I also found another solution: https://github.com/thomasloven/hass-lovelace_gen
It doesnāt really work for what Iām trying to do - the transparent colour looks to be rgba 0, 0, 0, 0.0 - ie transparent black - so when it does the gradient it transitions from the background colour through various murky shades of black - on a dark theme this looks fine but looks ugly on a light theme. I want the gradient to keep the rbg colour the same throughout and just adjust the transparency value. Previously I was using custom themes in which I manually specified a transparent version of --card-background-color but with 0.114 and built-in dark themes I want something that makes this value automatically.
This is what happens - with a proper transparent version of --card-background-colour you donāt get the murky background and with album art behind it the gradient looks loads nicer
1 Like