Thanks. Am I not able to use this version without the hold_action? I removed all references to it, but still not able to toggle anything.
You can, but have to have something on the view that implements longpress still:
- entity-button
- glance
- picture-entity
- picture-glance
Like @RomRider said, weāll find a way around this
Version 0.4.1
New features
-
confirmationnow takes a free text to display in the confirmation box - Fallback to simple click support when longpress is not found. Make sure you read this for long press support!
Fixes
- Fixes #114 (rounded corners with
color_type: card) and supports card-modder now
Breaking changes
-
confirmationis now taking a string.
@scfigg, version 0.4.1 which was just released fixes this. Only single click support if longpress is not found.
Version 0.5.0
New features
-
show_units: true/false -
units: overrides the default units of a sensor -
overflowing text will be cut at the end with
...
-
layout:
Fixes #103
This option enables you to modify the layout of the card.It is fully compatible with every
show_*option. Make sure you setshow_state: trueif you want to show the stateMultiple values are possible, see the image below for examples:
-
vertical(default value if nothing is provided): Everything is centered vertically on top of each other -
icon_name_state: Everything is aligned horizontally, name and state are concatenated -
name_state: Icon sits on top of name and state concatenated on one line -
icon_name: Icon and name are horizontally aligned, state is centered below -
icon_state: Icon and state are horizontally aligned, name is centered below -
icon_name_state2nd: Icon, name and state are horizontally aligned, name is above state -
icon_state_name2nd: Icon, name and state are horizontally aligned, state is above name
-
4 Likes
Hi all
is it possible to change text color on state
Iāve done like this
show_state: false
show_icon: false
show_name: true
state:
- value: 'on'
name: "Acceso"
style:
- color: yellow
But I get the background color to change, not the text.
How can I change just the text?
Thanks
@woody4165, the color of the text is automatically calculated based on the background color, but for that to work, the color has to be expressed in RGB or HEX.
Itās not (yet) possible to define the color of individual elements.
Instead of color: yellow use color: rgb(255,255,0) or color: '#FFFF00' in the state directly, not in the style object:
show_state: false
show_icon: false
show_name: true
state:
- value: 'on'
name: "Acceso"
color: rgb(255, 255, 0)
1 Like
Thanks!
Itās working now.
Hey everyone,
Iām working on this currently:
Which enables you to do stuff like (itās ugly, on purpose
):
Feedback very much welcome, on the PR directly please 
2 Likes
Not sure whatās up, but color and color_type are behaving strangely in both 0.4.1 and 0.50.
With color_type: icon, I get a blue icon and white background (the rgb() is orange so Iād expect an orange icon).
With color_type: card, I get a blue background and a white icon.
If I comment out the color and color_type and assign the color in the style: I get the expected orange background.
- type: custom:button-card
color_type: icon
color: rgba(245,116,56,1)
style:
# - background-color: rgba(245,116,56,1)
- border-radius: 10px
- box-shadow: 3px 3px rgba(0,0,0,0.4)
entity: media_player.firetv_living_room
icon: mdi:stop
name: BUTTON only CType card
hold_action: none
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: media_player.firetv_living_room
command: "input keyevent 86"
If I nest the button within a config-template-card and define the color_type: and color: the button fails to render at all, but works fine if color is defined in the style:
- type: custom:config-template-card
variables:
- states['input_select.firetv_choices'].state
entities:
- input_select.firetv_choices
card:
type: custom:button-card
color_type: card
color: rgb(245,116,56)
style:
# - background-color: rgba(245,116,56,1)
- border-radius: 10px
- box-shadow: 3px 3px rgba(0,0,0,0.4)
entity: "${vars[0] === 'FireTV Living Room' ? 'media_player.firetv_living_room' : 'media_player.firetv_bedroom'}"
icon: mdi:stop
name: Config Template
hold_action: none
tap_action:
action: call-service
service: androidtv.adb_command
service_data:
entity_id: "${vars[0] === 'FireTV Living Room' ? 'media_player.firetv_living_room' : 'media_player.firetv_bedroom'}"
command: "input keyevent 86"I still canāt seem to get hold_action to work, even with a picture entity in the view/card:
- type: horizontal-stack cards: - type: picture-entity entity: switch.furnace_switch_29 name: Furnace state_image: 'off': /local/pictures/furnace-off.png 'on': /local/pictures/furnace.png tap_action: action: toggle hold_action: action: more-info - type: picture-entity entity: switch.lamp name: Lamp state_image: 'off': /local/pictures/lamp-off.jpg 'on': /local/pictures/lamp.jpg tap_action: action: toggle hold_action: action: more-info - type: horizontal-stack cards: - type: 'custom:button-card' name: Bathroom Light entity: switch.bathroom_light hold_action: action: more-info tap_action: action: toggle color: var(--primary-color) icon: attribute - type: 'custom:button-card' name: Bathroom Fan entity: switch.bathroom_fan hold_action: action: more-info tap_action: action: toggle color: var(--primary-color) icon: attribute
Any Ideas? It works for the picture entity
errors in the browser console?
all I see is this, which is a common one:
/frontend_latest/26357108de036797f570.chunk.js:3210 Uncaught TypeError: Cannot read property āreplaceChildā of null
at HTMLElement._rebuildCard (/frontend_latest/26357108de036797f570.chunk.js:3210)
at HTMLElement.t.addEventListener.once (/frontend_latest/26357108de036797f570.chunk.js:3210)
at i (app-652a7f4d.js:410)
at /frontend_latest/26357108de036797f570.chunk.js:4568
Youāve cleared your browser cache since upgrading?
Yeah, I did that
I see six of these in the console:
TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.
from code:
getFontColorBasedOnBackgroundColor(backgroundColor) {
let parsedBackgroundColor = null;
if (backgroundColor.substring(0, 3) === "var") {
let rgb = getComputedStyle(this.parentNode).getPropertyValue(backgroundColor.substring(4).slice(0, -1)).trim();
parsedBackgroundColor = this.hexToRgb(rgb.substring(1));
} else {
const parsedRgbColor = backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
parsedBackgroundColor = parsedRgbColor ? parsedRgbColor : this.hexToRgb(backgroundColor.substring(1));
}
let fontColor = ''; // don't override by default
if (parsedBackgroundColor) {
// Counting the perceptive luminance - human eye favors green color...
const luminance = (0.299 * parsedBackgroundColor[1] + 0.587 * parsedBackgroundColor[2] + 0.114 * parsedBackgroundColor[3]) / 255;
if (luminance > 0.5) {
fontColor = 'rgb(62, 62, 62)'; // bright colors - black font
} else {
fontColor = 'rgb(234, 234, 234)';// dark colors - white font
}
}
return fontColor;
}
Note that when color_type: is āiconā the specified rgb() color is not used. Here is what Inspector shows for Icon:
<ha-icon style="color: var(--paper-item-icon-color); width: 40%; height: auto;" icon="mdi:stop" class=""></ha-icon>
Hey, it randomly started working after I restarted. Thanks!
1 Like
@RomRider Is it possible to show the value of another entity with this button card yet please? e.g. the buttons below show a count from a sensor, but change colour based on an input_boolean on/off state.
The following Lovelace yaml for Tiles Card shows how the Windows button above is coded:
- entity: input_boolean.window_is_open
row: 2
column: 1
background:
value_on: rgb(71,39,45) #Red
value_off: rgb(49,68,42) #Green
label_sec:
color:
value_on: rgb(220,69,121) #Red text
value_off: rgb(134,219,85) #Green text
icon:
color:
value_on: rgb(220,69,121) #Red text
value_off: rgb(134,219,85) #Green text
templates:
label_sec: "return 'Windows: ' + entities['sensor.windows_open'].state;"
style: "return 'font-weight: bold;'"
icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
Thanks in advance!
What browser are you using?
Nope thatās not supported (yet?), feel free to open an issue on github 
Iām currently converting the whole button to typescript following @iantrichās suggestion. Expect some delay before the next feature as this is a massive refactoring process. However, this will fix problems with long press support and prepare the card for a better future!.
3 Likes
Massive work, I canāt wait til the hold_action is working like it should. For now I am holding out on this card but man you are making it so much better now. If only the core button would be something like this.
Other question: wouldnāt it be possible to contribute this to core when it is ready?