From 57685a1b8442dc3d289b78779f0781ec83221e7a Mon Sep 17 00:00:00 2001 From: Liz Sugar Date: Fri, 22 Apr 2022 17:31:35 -0700 Subject: [PATCH 1/5] initial attribute yaml config --- src/controllers/media-controller.ts | 27 ++++++++++++++++++++++++--- src/types.ts | 1 + 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/controllers/media-controller.ts b/src/controllers/media-controller.ts index 4cb514b..bf009b6 100644 --- a/src/controllers/media-controller.ts +++ b/src/controllers/media-controller.ts @@ -31,11 +31,32 @@ export class MediaController extends Controller { return this.stateObj.state === 'off'; } +/* +Attributes desired: +Playstation: source, media_title +TV: source +Chromecast: app_name, media_title, media_series, media_... + Plex is a bit of an outlier with no media_title +*/ + get label(): string { - if (this.stateObj.attributes.is_volume_muted) return '-'; - return !!this.stateObj.attributes.volume_level + let output; + let primary_info; + let secondary_info; + + if (this.stateObj.attributes.is_volume_muted) primary_info = '-'; + + primary_info = !!this.stateObj.attributes.volume_level ? `${this.percentage}%` - : this._hass.localize(`component.media_player.state._.${this.state}`); + : `${this._hass.localize(`component.media_player.state._.${this.state}`)}`; + + secondary_info = this._config.attribute; + + output = primary_info; + + if (secondary_info) output = output + " · " + secondary_info; + + return output; } } diff --git a/src/types.ts b/src/types.ts index d0182f3..c8f1677 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,6 +11,7 @@ declare global { export interface SliderButtonCardConfig extends LovelaceCardConfig { type: string; entity: string; + attribute?: string; name?: string; show_name?: boolean; show_state?: boolean; From 6a0e15eea4218d2314435dc8bc9be137b0548778 Mon Sep 17 00:00:00 2001 From: Liz Sugar Date: Tue, 26 Apr 2022 14:24:47 -0700 Subject: [PATCH 2/5] Display user-defined attribute GUI and YAML options added, english translation added Current bugs: if attribute value is too long, then state and attribute will not stay on the same line. --- src/controllers/controller.ts | 7 +++++ src/controllers/media-controller.ts | 27 ++--------------- src/editor.ts | 22 ++++++++++++++ src/localize/languages/en.json | 2 ++ src/slider-button-card.ts | 45 +++++++++++++++++++++-------- src/types.ts | 1 + 6 files changed, 68 insertions(+), 36 deletions(-) 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/controllers/media-controller.ts b/src/controllers/media-controller.ts index bf009b6..4cb514b 100644 --- a/src/controllers/media-controller.ts +++ b/src/controllers/media-controller.ts @@ -31,32 +31,11 @@ export class MediaController extends Controller { return this.stateObj.state === 'off'; } -/* -Attributes desired: -Playstation: source, media_title -TV: source -Chromecast: app_name, media_title, media_series, media_... - Plex is a bit of an outlier with no media_title -*/ - get label(): string { - let output; - let primary_info; - let secondary_info; - - if (this.stateObj.attributes.is_volume_muted) primary_info = '-'; - - primary_info = !!this.stateObj.attributes.volume_level + if (this.stateObj.attributes.is_volume_muted) return '-'; + return !!this.stateObj.attributes.volume_level ? `${this.percentage}%` - : `${this._hass.localize(`component.media_player.state._.${this.state}`)}`; - - secondary_info = this._config.attribute; - - output = primary_info; - - if (secondary_info) output = output + " · " + secondary_info; - - return output; + : this._hass.localize(`component.media_player.state._.${this.state}`); } } 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 + ? html ` · ` + : ''} + ${this.ctrl.attributeLabel} + ` : ''} @@ -623,6 +634,16 @@ 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; + white-space: nowrap; + text-shadow: var(--state-text-shadow); + transition: font-size 0.1s ease-in-out; + max-width: calc(100% - 2em); + } /* --- SLIDER --- */ diff --git a/src/types.ts b/src/types.ts index c8f1677..3a5f2df 100644 --- a/src/types.ts +++ b/src/types.ts @@ -15,6 +15,7 @@ export interface SliderButtonCardConfig extends LovelaceCardConfig { name?: string; show_name?: boolean; show_state?: boolean; + show_attribute?: boolean; icon?: IconConfig; action_button?: ActionButtonConfig; slider?: SliderConfig; From b9e148f3058dc8b19a07aa5d7fd3e6eedb5c43dd Mon Sep 17 00:00:00 2001 From: Liz Sugar Date: Tue, 26 Apr 2022 15:06:14 -0700 Subject: [PATCH 3/5] minor visual changes and default attribute options by domain --- src/slider-button-card.ts | 6 +++--- src/types.ts | 9 +++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/slider-button-card.ts b/src/slider-button-card.ts index fb3830a..8174b05 100644 --- a/src/slider-button-card.ts +++ b/src/slider-button-card.ts @@ -204,13 +204,14 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { ` : html` ${this.ctrl.label} `} - ` + + ` : ''} ${this.config.show_attribute ? html` - ${this.config.show_state + ${this.config.show_state && this.ctrl.attributeLabel ? html ` · ` : ''} ${this.ctrl.attributeLabel} @@ -642,7 +643,6 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { white-space: nowrap; text-shadow: var(--state-text-shadow); transition: font-size 0.1s ease-in-out; - max-width: calc(100% - 2em); } /* --- SLIDER --- */ diff --git a/src/types.ts b/src/types.ts index 3a5f2df..5c65adb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -122,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, @@ -131,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, @@ -140,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, @@ -150,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, @@ -159,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, @@ -168,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, @@ -177,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, @@ -186,6 +194,7 @@ export const SliderConfigDefaultDomain: Map = new Map([ show_track: true, toggle_on_click: false, force_square: false, + show_attribute: false, }], ]); From 52c592587f93037ed7c63916611c849efd1a6e9e Mon Sep 17 00:00:00 2001 From: Liz Sugar Date: Fri, 29 Apr 2022 15:19:49 -0700 Subject: [PATCH 4/5] State and attribute are now displyed on a single line --- src/slider-button-card.ts | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/slider-button-card.ts b/src/slider-button-card.ts index 8174b05..409338e 100644 --- a/src/slider-button-card.ts +++ b/src/slider-button-card.ts @@ -195,6 +195,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { ` : ''} + ${this.config.show_state ? html` @@ -218,6 +219,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { ` : ''} + `; } @@ -593,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; @@ -614,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); @@ -638,13 +640,29 @@ export class SliderButtonCard extends LitElement implements LovelaceCard { /* --- ATTRIBUTE --- */ .attribute { - 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; + 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 { From 7dc8dabad8da18fdc04523badec5a950ddb4c38d Mon Sep 17 00:00:00 2001 From: Rohan Kapoor Date: Sat, 12 Aug 2023 18:52:12 -0700 Subject: [PATCH 5/5] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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) | |