diff --git a/README.md b/README.md index c62f5bb..4905390 100644 --- a/README.md +++ b/README.md @@ -73,9 +73,11 @@ Slider Button Card supports Lovelace's Visual Editor. | type | string | **Required** | `custom:slider-button-card` | | entity | string | **Required** | HA entity ID from domain `light, switch, fan, cover, input_boolean, media_player, climate, lock` | | | name | string | **Optional** | Name | `entity.friendly_name` | +| show_attribute | boolean | **Optional** | Show attribute | `false` (except for `media_player` entities) | | show_name | boolean | **Optional** | Show name | `true` | | show_state | boolean | **Optional** | Show state | `true` | | compact | boolean | **Optional** | Compact mode, display name and state inline with icon. Useful for full width cards. | `false` | +| attribute | string | **Optional** | Name of the attribute to display if `show_attribute` is `true`. | icon | object | **Optional** | [Icon options](#icon-options) | | | slider | object | **Optional** | [Slider options](#slider-options) | | | action_button | object | **Optional** | [Action button options](#action-button-options) | | diff --git a/src/controllers/controller.ts b/src/controllers/controller.ts index 0db9cb5..1e80c74 100644 --- a/src/controllers/controller.ts +++ b/src/controllers/controller.ts @@ -91,6 +91,13 @@ export abstract class Controller { return `${this.targetValue}`; } + get attributeLabel(): string { + if (this._config.attribute) { + return this.stateObj.attributes[this._config.attribute]; + } + return ''; + } + get hidden(): boolean { return false; } diff --git a/src/editor.ts b/src/editor.ts index 53cb503..e073b99 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -62,6 +62,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd return typeof this._config?.show_state === 'undefined' ? true : this._config?.show_state; } + get _show_attribute(): boolean { + return typeof this._config?.show_attribute === 'undefined' ? true : this._config?.show_attribute; + } + get _compact(): boolean { return typeof this._config?.compact !== 'boolean' ? false : this._config?.compact; } @@ -70,6 +74,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd return this._config?.entity || ''; } + get _attribute(): string { + return this._config?.attribute || ''; + } + get _icon(): IconConfig { return this._config?.icon || IconConfigDefault; } @@ -112,6 +120,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd .configValue=${'name'} @value-changed=${this._valueChanged} > +
+ + + ${this.ctrl.name}
` - : ''} - ${this.config.show_state - ? html` -
- ${this.ctrl.isUnavailable - ? html` - ${this.hass.localize('state.default.unavailable')} - ` : html` - ${this.ctrl.label} - `} -
+ : ''} + + + ${this.config.show_state + ? html` + + ${this.ctrl.isUnavailable + ? html` + ${this.hass.localize('state.default.unavailable')} + ` : html` + ${this.ctrl.label} + `} + + ` + : ''} + + ${this.config.show_attribute + ? html` + + ${this.config.show_state && this.ctrl.attributeLabel + ? html ` ยท ` + : ''} + ${this.ctrl.attributeLabel} + ` : ''} + `; } @@ -581,7 +595,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { /* --- LABEL --- */ .name { - color: var(--label-color-on, var(--primary-text-color, white)); + color: var(--label-color-on, var(--primary-text-color, white)); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -602,7 +616,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { /* --- STATE --- */ .state { - color: var(--state-color-on, var(--label-badge-text-color, white)); + color: var(--state-color-on, var(--label-badge-text-color, white)); text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--state-text-shadow); @@ -623,7 +637,32 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { overflow: hidden; } - + /* --- ATTRIBUTE --- */ + + .attribute { + /* + color: var(--state-color-on, var(--label-badge-text-color, white)); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-shadow: var(--state-text-shadow); + max-width: calc(50% -2em); + transition: font-size 0.1s ease-in-out; + border: 1px solid red; + */ + } + + .oneliner { + color: var(--state-color-on, var(--label-badge-text-color, white)); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 20px; + width: 20px; + text-shadow: var(--state-text-shadow); + transition: font-size 0.1s ease-in-out; + /*border: 1px solid blue;*/ + } /* --- SLIDER --- */ .slider { diff --git a/src/types.ts b/src/types.ts index d0182f3..5c65adb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,9 +11,11 @@ declare global { export interface SliderButtonCardConfig extends LovelaceCardConfig { type: string; entity: string; + attribute?: string; name?: string; show_name?: boolean; show_state?: boolean; + show_attribute?: boolean; icon?: IconConfig; action_button?: ActionButtonConfig; slider?: SliderConfig; @@ -120,6 +122,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: false, toggle_on_click: false, force_square: false, + show_attribute: false, }], [Domain.FAN, { direction: SliderDirections.LEFT_RIGHT, @@ -129,6 +132,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: false, toggle_on_click: false, force_square: false, + show_attribute: false, }], [Domain.SWITCH, { direction: SliderDirections.LEFT_RIGHT, @@ -138,6 +142,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: false, toggle_on_click: true, force_square: false, + show_attribute: false, }], [Domain.COVER, { direction: SliderDirections.TOP_BOTTOM, @@ -148,6 +153,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: false, force_square: false, invert: true, + show_attribute: false, }], [Domain.INPUT_BOOLEAN, { direction: SliderDirections.LEFT_RIGHT, @@ -157,6 +163,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: false, toggle_on_click: true, force_square: false, + show_attribute: false, }], [Domain.MEDIA_PLAYER, { direction: SliderDirections.LEFT_RIGHT, @@ -166,6 +173,8 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: true, toggle_on_click: false, force_square: false, + show_attribute: true, + attribute: "media_title", }], [Domain.LOCK, { direction: SliderDirections.LEFT_RIGHT, @@ -175,6 +184,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: false, toggle_on_click: true, force_square: false, + show_attribute: false, }], [Domain.CLIMATE, { direction: SliderDirections.LEFT_RIGHT, @@ -184,6 +194,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: true, toggle_on_click: false, force_square: false, + show_attribute: false, }], ]);