Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] Add attribute field and display #55

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
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.
  • Loading branch information
lizsugar authored and rohankapoorcom committed Aug 13, 2023
commit 6a0e15eea4218d2314435dc8bc9be137b0548778
7 changes: 7 additions & 0 deletions src/controllers/controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
27 changes: 3 additions & 24 deletions src/controllers/media-controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
}

}
22 changes: 22 additions & 0 deletions src/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -112,6 +120,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
.configValue=${'name'}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
label="${localize('tabs.general.attribute')}"
.value=${this._attribute}
.placeholder=""
.configValue=${'attribute'}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<ha-formfield .label=${localize('tabs.general.show_name')}>
<ha-switch
Expand All @@ -127,6 +142,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<ha-formfield .label=${localize('tabs.general.show_attribute')}>
<ha-switch
.checked=${this._show_attribute}
.configValue=${'show_attribute'}
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<ha-formfield .label=${localize('tabs.general.compact')}>
<ha-switch
.checked=${this._compact}
Expand Down
2 changes: 2 additions & 0 deletions src/localize/languages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
"general": {
"title": "General",
"entity": "Entity (Required)",
"attribute": "Attribute (Optional)",
"name": "Name (Optional)",
"show_name": "Show name?",
"show_state": "Show state?",
"show_attribute": "Show attribute?",
"compact": "Compact?"
},
"icon": {
Expand Down
45 changes: 33 additions & 12 deletions src/slider-button-card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
}

private renderText(): TemplateResult {
if (!this.config.show_name && !this.config.show_state) {
if (!this.config.show_name && !this.config.show_state && !this.config.show_attribute) {
return html``;
}
return html`
Expand All @@ -193,17 +193,28 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
? html`
<div class="name">${this.ctrl.name}</div>
`
: ''}
${this.config.show_state
? html`
<div class="state">
${this.ctrl.isUnavailable
? html`
${this.hass.localize('state.default.unavailable')}
` : html`
${this.ctrl.label}
`}
</div>
: ''}

${this.config.show_state
? html`
<span class="state">
${this.ctrl.isUnavailable
? html`
${this.hass.localize('state.default.unavailable')}
` : html`
${this.ctrl.label}
`}
</span>`
: ''}

${this.config.show_attribute
? html`
<span class="attribute">
${this.config.show_state
? html ` · `
: ''}
${this.ctrl.attributeLabel}
</span>
`
: ''}
</div>
Expand Down Expand Up @@ -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 --- */

Expand Down
1 change: 1 addition & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down