Skip to content

Commit

Permalink
Name per state and new show_name parameter (#95)
Browse files Browse the repository at this point in the history 
* Possibility to define a name per state and introduce a show_name parameter, defaults to using the entity name
  • Loading branch information
@RomRider
RomRider authored Apr 20, 2019
1 parent d075d7d commit 7c7afb4
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 5 deletions.
5 changes: 4 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Lovelace Button card for your entities.
## Features

- works with any toggleable entity
- 3 actions on tap `none`, `toggle`, `more-info` and `call-service`
- 5 actions on tap `none`, `toggle`, `more-info`, `navigate` and `call-service`
- state display (optional)
- custom color (optional), or based on light rgb value
- custom state definition with customizable color, icon and style (optional)
Expand Down Expand Up @@ -48,6 +48,7 @@ Lovelace Button card for your entities.
| `size` | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
| `tap_action` | object | optional | See [Service](#Action) | Define the type of action, if undefined, toggle will be used. |
| `name` | string | optional | `Air conditioner` | Define an optional text to show below the icon |
| `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 |
| `show_state` | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set |
| `show_icon` | boolean | `true` | `true` \| `false` | Wether to show the icon or not. Unless redefined in `icon`, uses the default entity icon from hass |
| `style` | object list | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card |
Expand All @@ -70,6 +71,7 @@ Lovelace Button card for your entities.
| ---------- | ------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `operator` | string | `==` | See [Available Operators](#Available-operators) | The operator used to compare the current state against the `value` |
| `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 |
| `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 |
| `icon` | string | optional | `mdi:battery` | The icon to display for this state. Defaults to the entity icon. Hide with `show_icon: false` |
| `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`) |
| `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 |
Expand Down Expand Up @@ -357,6 +359,7 @@ The `navigation_path` also accepts any Home Assistant internal URL such as /dev-
#### blink

You can make the whole button blink:

![blink-animation](examples/blink-animation.gif)

```yaml
Expand Down
27 changes: 23 additions & 4 deletions button-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,21 @@ export default function domainIcon(domain, state) {
return cardStyle;
}

buildName(state, configState) {
let name = null;
if (configState && configState.name) {
name = configState.name;
} else if (this.config.name) {
name = this.config.name;
} else {
if (state) {
name = state.attributes && state.attributes.friendly_name ?
state.attributes.friendly_name : state.entity_id.split('.', 2)[1];
}
}
return name;
}

isClickable(state, config) {
let clickable = true;
if (config.tap_action.action == 'toggle') {
Expand Down Expand Up @@ -411,12 +426,13 @@ export default function domainIcon(domain, state) {
const fontColor = this.getFontColorBasedOnBackgroundColor(color);
const icon = this.buildIcon(state, config, configState);
const style = this.buildStyle(state, config, configState);
const name = this.buildName(state, configState);
return html`
<ha-card style="color: ${fontColor}; position: relative;" @tap="${ev => this._handleTap(state, config)}">
<button-card-button class="${this.isClickable(state, config) ? '' : "disabled"}" style="background-color: ${color}">
<div class="main" style="${style}">
${config.show_icon && icon ? html`<ha-icon style="width: ${config.size}; height: auto;" icon="${icon}" class="${this.rotate(configState)}"></ha-icon>` : ''}
${config.name ? html`<div>${config.name}</div>` : ''}
${config.show_name && name ? html`<div>${name}</div>` : ''}
</div>
</button-card-button>
</ha-card>
Expand All @@ -428,12 +444,13 @@ export default function domainIcon(domain, state) {
const fontColor = this.getFontColorBasedOnBackgroundColor(color);
const icon = this.buildIcon(state, config, configState);
const style = this.buildStyle(state, config, configState);
const name = this.buildName(state, configState);
return html`
<ha-card style="color: ${fontColor}; position: relative;" @tap="${ev => this._handleTap(state, config)}">
<button-card-button class="${this.isClickable(state, config) ? '' : "disabled"}" style="background-color: ${color};">
<div class="main" style="${style}">
${config.show_icon && icon ? html`<ha-icon style="width: ${config.size}; height: auto;" icon="${icon}" class="${this.rotate(configState)}"></ha-icon>` : ''}
${config.name ? html`<div>${config.name}</div>` : ''}
${config.show_name && name ? html`<div>${name}</div>` : ''}
${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
</div>
</button-card-button>
Expand All @@ -445,12 +462,13 @@ export default function domainIcon(domain, state) {
const color = this.buildCssColorAttribute(state, config, configState);
const icon = this.buildIcon(state, config, configState);
const style = this.buildStyle(state, config, configState);
const name = this.buildName(state, configState);
return html`
<ha-card style="position: relative;" @tap="${ev => this._handleTap(state, config)}">
<button-card-button class="${this.isClickable(state, config) ? '' : "disabled"}">
<div class="main" style="${style}">
${config.show_icon && icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: auto;" icon="${icon}" class="${this.rotate(configState)}"></ha-icon>` : ''}
${config.name ? html`<div>${config.name}</div>` : ''}
${config.show_name && name ? html`<div>${name}</div>` : ''}
${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
</div>
</button-card-button>
Expand All @@ -464,7 +482,8 @@ export default function domainIcon(domain, state) {
size: '40%',
color_type: 'icon',
default_color: 'var(--primary-text-color)',
name: '',
show_name: true,
show_state: false,
show_icon: true,
...config
};
Expand Down

0 comments on commit 7c7afb4

Please sign in to comment.