Skip to content

Commit 7c7afb4

Browse files
RomRiderRomRider
authored
Name per state and new show_name parameter (#95)
* Possibility to define a name per state and introduce a show_name parameter, defaults to using the entity name
1 parent d075d7d commit 7c7afb4

File tree

2 files changed

+27
-5
lines changed

2 files changed

+27
-5
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Lovelace Button card for your entities.
1616
## Features
1717

1818
- works with any toggleable entity
19-
- 3 actions on tap `none`, `toggle`, `more-info` and `call-service`
19+
- 5 actions on tap `none`, `toggle`, `more-info`, `navigate` and `call-service`
2020
- state display (optional)
2121
- custom color (optional), or based on light rgb value
2222
- custom state definition with customizable color, icon and style (optional)
@@ -48,6 +48,7 @@ Lovelace Button card for your entities.
4848
| `size` | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
4949
| `tap_action` | object | optional | See [Service](#Action) | Define the type of action, if undefined, toggle will be used. |
5050
| `name` | string | optional | `Air conditioner` | Define an optional text to show below the icon |
51+
| `show_name` | boolean | `true` | `true` \| `false` | Wether to show the name or not. Will pick entity_id's name by default, unless redefined in the `name` property or in any state `name` property |
5152
| `show_state` | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set |
5253
| `show_icon` | boolean | `true` | `true` \| `false` | Wether to show the icon or not. Unless redefined in `icon`, uses the default entity icon from hass |
5354
| `style` | object list | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card |
@@ -70,6 +71,7 @@ Lovelace Button card for your entities.
7071
| ---------- | ------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
7172
| `operator` | string | `==` | See [Available Operators](#Available-operators) | The operator used to compare the current state against the `value` |
7273
| `value` | string/number | **required** (unless operator is `default`) | If your entity is a sensor with numbers, use a number directly, else use a string | The value which will be compared against the current state of the entity |
74+
| `name` | string | optional | Any string, `'Alert'`, `'My little switch is on'`, ... | if `show_name` is `true`, the name to display for this state. If undefined, uses the general config `name`, and if undefined uses the entity name |
7375
| `icon` | string | optional | `mdi:battery` | The icon to display for this state. Defaults to the entity icon. Hide with `show_icon: false` |
7476
| `color` | string | `var(--primary-text-color)` | Any color, eg: `rgb(28, 128, 199)` or `blue` | The color of the icon (if `color_type: icon`) or the background (if `color_type: card`) |
7577
| `style` | string | optional | Any CSS style. If nothing is specified, the main style is used unless undefined. If you want to override the default style of the main part of the config, use `style: []` | Define a list of css attribute and their value to apply to the card |
@@ -357,6 +359,7 @@ The `navigation_path` also accepts any Home Assistant internal URL such as /dev-
357359
#### blink
358360

359361
You can make the whole button blink:
362+
360363
![blink-animation](examples/blink-animation.gif)
361364

362365
```yaml

‎button-card.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,21 @@ export default function domainIcon(domain, state) {
371371
return cardStyle;
372372
}
373373

374+
buildName(state, configState) {
375+
let name = null;
376+
if (configState && configState.name) {
377+
name = configState.name;
378+
} else if (this.config.name) {
379+
name = this.config.name;
380+
} else {
381+
if (state) {
382+
name = state.attributes && state.attributes.friendly_name ?
383+
state.attributes.friendly_name : state.entity_id.split('.', 2)[1];
384+
}
385+
}
386+
return name;
387+
}
388+
374389
isClickable(state, config) {
375390
let clickable = true;
376391
if (config.tap_action.action == 'toggle') {
@@ -411,12 +426,13 @@ export default function domainIcon(domain, state) {
411426
const fontColor = this.getFontColorBasedOnBackgroundColor(color);
412427
const icon = this.buildIcon(state, config, configState);
413428
const style = this.buildStyle(state, config, configState);
429+
const name = this.buildName(state, configState);
414430
return html`
415431
<ha-card style="color: ${fontColor}; position: relative;" @tap="${ev => this._handleTap(state, config)}">
416432
<button-card-button class="${this.isClickable(state, config) ? '' : "disabled"}" style="background-color: ${color}">
417433
<div class="main" style="${style}">
418434
${config.show_icon && icon ? html`<ha-icon style="width: ${config.size}; height: auto;" icon="${icon}" class="${this.rotate(configState)}"></ha-icon>` : ''}
419-
${config.name ? html`<div>${config.name}</div>` : ''}
435+
${config.show_name && name ? html`<div>${name}</div>` : ''}
420436
</div>
421437
</button-card-button>
422438
</ha-card>
@@ -428,12 +444,13 @@ export default function domainIcon(domain, state) {
428444
const fontColor = this.getFontColorBasedOnBackgroundColor(color);
429445
const icon = this.buildIcon(state, config, configState);
430446
const style = this.buildStyle(state, config, configState);
447+
const name = this.buildName(state, configState);
431448
return html`
432449
<ha-card style="color: ${fontColor}; position: relative;" @tap="${ev => this._handleTap(state, config)}">
433450
<button-card-button class="${this.isClickable(state, config) ? '' : "disabled"}" style="background-color: ${color};">
434451
<div class="main" style="${style}">
435452
${config.show_icon && icon ? html`<ha-icon style="width: ${config.size}; height: auto;" icon="${icon}" class="${this.rotate(configState)}"></ha-icon>` : ''}
436-
${config.name ? html`<div>${config.name}</div>` : ''}
453+
${config.show_name && name ? html`<div>${name}</div>` : ''}
437454
${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
438455
</div>
439456
</button-card-button>
@@ -445,12 +462,13 @@ export default function domainIcon(domain, state) {
445462
const color = this.buildCssColorAttribute(state, config, configState);
446463
const icon = this.buildIcon(state, config, configState);
447464
const style = this.buildStyle(state, config, configState);
465+
const name = this.buildName(state, configState);
448466
return html`
449467
<ha-card style="position: relative;" @tap="${ev => this._handleTap(state, config)}">
450468
<button-card-button class="${this.isClickable(state, config) ? '' : "disabled"}">
451469
<div class="main" style="${style}">
452470
${config.show_icon && icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: auto;" icon="${icon}" class="${this.rotate(configState)}"></ha-icon>` : ''}
453-
${config.name ? html`<div>${config.name}</div>` : ''}
471+
${config.show_name && name ? html`<div>${name}</div>` : ''}
454472
${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
455473
</div>
456474
</button-card-button>
@@ -464,7 +482,8 @@ export default function domainIcon(domain, state) {
464482
size: '40%',
465483
color_type: 'icon',
466484
default_color: 'var(--primary-text-color)',
467-
name: '',
485+
show_name: true,
486+
show_state: false,
468487
show_icon: true,
469488
...config
470489
};

0 commit comments

Comments
 (0)