Merge pull request #55 from rohankapoorcom/lizsugar_display_attribute

[feat] Add attribute field and display
custom-cards · Aug 13, 2023 · 96a83a2 · 96a83a2
2 parents e1c18df + 7dc8dab
commit 96a83a2
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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}
               ></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
@@ -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}

diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -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": {

diff --git a/src/slider-button-card.ts b/src/slider-button-card.ts
@@ -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`
@@ -193,19 +193,33 @@ 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>
+              : ''}
+
+              <span class="oneliner">
+              ${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 && this.ctrl.attributeLabel
+                    ? html `  ·  `
+                    : ''}
+                ${this.ctrl.attributeLabel}
+                  </span>
                 `
                 : ''}
+              </span>
           </div>
     `;
   }
@@ -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
@@ -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<string, SliderConfig> = 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<string, SliderConfig> = 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<string, SliderConfig> = 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<string, SliderConfig> = 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<string, SliderConfig> = 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<string, SliderConfig> = 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<string, SliderConfig> = 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<string, SliderConfig> = new Map([
     show_track: true,
     toggle_on_click: false,
     force_square: false,
+    show_attribute: false,
   }],
 ]);