Support friendly/custom name

README.md

@@ -19,13 +19,18 @@ If you want to use the vacuum background image, add [img/vacuum.png](https://raw
 | ---- | ---- | ------- | -----------
 | type | string | **Required** | `custom:xiaomi-vacuum-card`
 | entity | string | **Required** | `vacuum.my_xiaomi_vacuum`
+| name | string/bool | `friendly_name` | Override entity friendly name (set to false to hide title)
 | background | string/bool | `img/vacuum.png` | Custom path/name of background image (set to false to disable background)
 | buttons | bool | `true` | Set to false to hide button row
 
 ### Examples
 
 ![xiaomi-vacuum-card](https://raw.githubusercontent.com/benct/lovelace-xiaomi-vacuum-card/master/examples/default.png)
 
+Hidden title/name
+
+![xiaomi-vacuum-card-no-title](https://raw.githubusercontent.com/benct/lovelace-xiaomi-vacuum-card/master/examples/no-title.png)
+
 Hidden button row
 
 ![xiaomi-vacuum-card-no-buttons](https://raw.githubusercontent.com/benct/lovelace-xiaomi-vacuum-card/master/examples/no-buttons.png)
@@ -38,6 +43,7 @@ No background image
 - type: custom:xiaomi-vacuum-card
   entity: vacuum.xiaomi_vacuum_cleaner
   background: custom/folder/and/file.png
+  name: Xiaomi Vacuum
   buttons: false
 ```
 

xiaomi-vacuum-card.js

@@ -8,6 +8,14 @@ class XiaomiVacuumCard extends Polymer.Element {
               background-position: center center;
               background-size: cover;
             }
+            .title {
+              font-size: 20px;
+              padding: 16px 16px 0;
+              text-align: center;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
             .content {
               cursor: pointer;
             }
@@ -42,6 +50,9 @@ class XiaomiVacuumCard extends Polymer.Element {
             }
           </style>
           <ha-card hass="[[_hass]]" config="[[_config]]" class="background" style="[[background]]">
+            <template is="dom-if" if="{{name}}">
+              <div class="title" style="[[text]]">[[name]]</div>
+            </template>
             <div class="content" on-click="moreInfo" style="[[padding]]">
               <div class="grid" style="[[text]]">
                 <div class="grid-content grid-left">
@@ -104,6 +115,8 @@ class XiaomiVacuumCard extends Polymer.Element {
     }
 
     getCardSize() {
+        if (this.name && this.buttons) return 5;
+        if (this.name || this.buttons) return 4;
         return 3;
     }
 
@@ -124,6 +137,10 @@ class XiaomiVacuumCard extends Polymer.Element {
 
         if (hass && this._config) {
             this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
+
+            if (this.stateObj) {
+                this.name = this._config.name !== false && (this._config.name || this.stateObj.attributes.friendly_name);
+            }
         }
     }
 }