Merge pull request #15 from artem-sedykh/dev

v1.0.7
artem-sedykh · May 18, 2020 · 93d3d20 · 93d3d20
2 parents a9279ec + ac74d8e
commit 93d3d20
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=1.0.6
+    - url: /local/mini-humidifier-bundle.js?v=1.0.7
       type: module
   ```
 
@@ -43,7 +43,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=1.0.6
+    - url: /local/mini-humidifier-bundle.js?v=1.0.7
       type: module
   ```
 
@@ -56,7 +56,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=1.0.6
+    - url: /local/mini-humidifier-bundle.js?v=1.0.7
       type: module
   ```
 
@@ -107,6 +107,11 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | fan_mode_button: `source: high: name` | string | optional | v1.0.6 | Display name, default `High`
 | fan_mode_button: `source: high: order` | number | optional | v1.0.6 | Sort order, default `3`
 | fan_mode_button: `source: high: hide` | boolean | optional | v1.0.6 | Hide from dropdown list, default `False`
+| fan_mode_button: `source: strong` | object | optional | v1.0.7 | strong mode configuration, for `ZHIMI.HUMIDIFIER.V1`
+| fan_mode_button: `source: strong: value` | string | optional | v1.0.7 | value, default `High`
+| fan_mode_button: `source: strong: name` | string | optional | v1.0.7 | Display name, default `Strong`
+| fan_mode_button: `source: strong: order` | number | optional | v1.0.7 | Sort order, default `4`
+| fan_mode_button: `source: strong: hide` | boolean | optional | v1.0.7 | Hide from dropdown list, default `True`
 | **led_button** | object | optional | v1.0.1 | Button Illumination on/off
 | led_button: `icon` | string | optional | v1.0.1 | Custom icon, default value `mdi:lightbulb-on-outline`
 | led_button: `hide` | boolean | optional | v1.0.1 | Hide button, default value `False`
@@ -143,14 +148,15 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | depth: `order` | number | optional | v1.0.1 | Indicator sort order, default value `0`
 | depth: `unit_type` | string | optional | v1.0.1 | Indicator type available Values: `liters` or `percent`, default `percent`
 | depth: `unit` | string | optional | v1.0.1 | display unit, default `%`
-| depth: `max_value` | number | optional | v1.0.1 | Depth attribute value with a full tank of humidifier, default `120`
+| depth: `max_value` | number | optional | v1.0.1 | Depth attribute value with a full tank of humidifier, default `125`
 | depth: `volume` | number | optional | v1.0.1 | Humidifier tank volume, needed to calculate values in liters, default `4` liters
 | depth: `fixed` | number | optional | v1.0.1 | Rounding the calculated values, default value `0`
 | **temperature** | object | optional | v1.0.1 | Information indicator, showing temperature
 | temperature: `icon` | string | optional | v1.0.1 | Custom icon, default value `mdi:thermometer-low`
 | temperature: `hide` | boolean | optional | v1.0.1 | Hide indicator, default value `False`
 | temperature: `order` | number | optional | v1.0.1 | Indicator sort order, default value `1`
 | temperature: `unit` | string | optional | v1.0.1 | display unit, default `°C`
+| temperature: `fixed` | number | optional | v1.0.7 | Rounding the calculated values, default value `1`
 | temperature: `source` | object | optional | v1.0.6 | data source, by default, data taken from the attribute `temperature` [examples](#temperature-source-examples).
 | temperature: `source: entity` | string | optional | v1.0.6 | custom entity, if the attribute is not set, the state value
 | temperature: `source: attribute` | string | optional | v1.0.6 | if the entity parameter is not set, then the data will be obtained from the specified entity attribute, otherwise from the current entity attribute
@@ -159,6 +165,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | humidity: `hide` | boolean | optional | v1.0.1 | Hide indicator, default value `False`
 | humidity: `order` | number | optional | v1.0.1 | Indicator sort order, default value `2`
 | humidity: `unit` | string | optional | v1.0.1 | display unit, default `%`
+| humidity: `fixed` | number | optional | v1.0.7 | Rounding the calculated values, default value `1`
 | humidity: `source` | object | optional | v1.0.6 | data source, by default, data taken from the attribute `humidity`
 | humidity: `source: entity` | string | optional | v1.0.6 | custom entity, if the attribute is not set, the state value
 | humidity: `source: attribute` | string | optional | v1.0.6 | if the entity parameter is not set, then the data will be obtained from the specified entity attribute, otherwise from the current entity attribute
@@ -393,6 +400,30 @@ For use Entities card you need to add `group: on`
 ```
 
 
+#### ZHIMI.HUMIDIFIER.V1 configuration
+
+
+```yaml
+- type: custom:mini-humidifier
+  entity: fan.xiaomi_miio_device
+# hide the indicator showing the amount of water
+  depth:
+    hide: on
+# hide dry button
+  dry_button:
+    hide: on
+  fan_mode_button:
+    source:
+# hide auto mode option
+      auto:
+        hide: on
+# show strong option
+      strong:
+        hide: off
+```
+
+
+
 ## Development
 *If you plan to contribute back to this repo, please fork & create the PR against the [dev](https://github.com/artem-sedykh/mini-humidifier/tree/dev) branch.*
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-humidifier",
-  "version": "v1.0.6",
+  "version": "v1.0.7",
   "description": "humidifier card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

diff --git a/release_notes/v1.0.7.md b/release_notes/v1.0.7.md
@@ -0,0 +1,11 @@
+## v1.0.7
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-humidifier/v1.0.4/total.svg)](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v1.0.4)
+### ADDED
+- Added rounding configuration for temperature and humidity
+- Added `strong` option(hidden by default) for fan_mode_button source, for zhimi.humidifier.v1
+
+### CHANGED
+- `depth:max_value` changed default value from `120` to `125`
+
+### FIXED
+- HA > 0.110.0 support, #14
diff --git a/src/components/controls.js b/src/components/controls.js
@@ -32,11 +32,11 @@ class MiniHumidifierControls extends LitElement {
 
   renderDryButton(context) {
     return html`
-      <paper-icon-button class='dry-button'
+      <ha-icon-button class='dry-button'
         .icon=${context.config.dry_button.icon}
         @click=${e => context.toggleDry(e)}
         ?color=${context.humidifier.isDryOn}>
-      </paper-icon-button>
+      </ha-icon-button>
     `;
   }
 
@@ -61,31 +61,31 @@ class MiniHumidifierControls extends LitElement {
       `;
 
     return html`
-       <paper-icon-button 
+       <ha-icon-button 
           .icon=${context.config.led_button.icon}
           @click=${e => context.toggleLedBrightness(e)}
           ?color=${context.humidifier.isLedBrightnessOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 
   renderBuzzerButton(context) {
     return html`
-       <paper-icon-button class='buzzer-button'
+       <ha-icon-button class='buzzer-button'
           .icon=${context.config.buzzer_button.icon}
           @click=${e => context.toggleBuzzer(e)}
           ?color=${context.humidifier.isBuzzerOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 
   renderChildLockButton(context) {
     return html`
-       <paper-icon-button class='child-lock-button'
+       <ha-icon-button class='child-lock-button'
           .icon=${context.config.child_lock_button.icon}
           @click=${e => context.toggleChildLock(e)}
           ?color=${context.humidifier.isChildLockOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 

diff --git a/src/components/dropdown.js b/src/components/dropdown.js
@@ -40,11 +40,11 @@ class MiniHumidifierDropdown extends LitElement {
         .dynamicAlign=${true}
         ?disabled=${this.disabled}
         @click=${e => e.stopPropagation()}>
-        <paper-icon-button class='mh-dropdown__button icon' slot='dropdown-trigger'
+        <ha-icon-button class='mh-dropdown__button icon' slot='dropdown-trigger'
           .icon=${this.icon}
           ?disabled=${this.disabled}
           ?color=${this.active}>
-        </paper-icon-button>
+        </ha-icon-button>
         <paper-listbox slot="dropdown-content" .selected=${this.selectedId} @iron-select=${this.onChange}>
           ${this.items.map(item => html`
             <paper-item value=${item.id || item.name}>
@@ -75,7 +75,7 @@ class MiniHumidifierDropdown extends LitElement {
           padding: 0;
           display: block;
         }
-        paper-icon-button[disabled] {
+        ha-icon-button[disabled] {
           opacity: .25;
           pointer-events: none;
         }
@@ -86,10 +86,10 @@ class MiniHumidifierDropdown extends LitElement {
         paper-item > *:nth-child(2) {
           margin-left: 4px;
         }
-        paper-menu-button[focused] paper-icon-button {
+        paper-menu-button[focused] ha-icon-button {
           color: var(--mh-accent-color);
         }
-        paper-menu-button[focused] paper-icon-button[focused] {
+        paper-menu-button[focused] ha-icon-button[focused] {
           color: var(--mh-text-color);
           transform: rotate(0deg);
         }

diff --git a/src/components/info.js b/src/components/info.js
@@ -12,7 +12,7 @@ class MiniHumidifierInfo extends LitElement {
   renderDepth(context) {
     return html`
        <div class='state depth'>
-         <iron-icon class='state__value_icon' .icon=${context.config.depth.icon}></iron-icon>
+         <ha-icon class='state__value_icon' .icon=${context.config.depth.icon}></ha-icon>
          <span class='state__value'>${context.humidifier.depth}</span>
          <span class='state__uom'>${context.config.depth.unit}</span>
        </div>
@@ -22,7 +22,7 @@ class MiniHumidifierInfo extends LitElement {
   renderTemperature(context) {
     return html`
        <div class='state temperature'>
-         <iron-icon class='state__value_icon' .icon=${context.config.temperature.icon}></iron-icon>
+         <ha-icon class='state__value_icon' .icon=${context.config.temperature.icon}></ha-icon>
          <span class='state__value'>${context.humidifier.temperature}</span>
          <span class='state__uom'>${context.config.temperature.unit}</span>
        </div>
@@ -32,7 +32,7 @@ class MiniHumidifierInfo extends LitElement {
   renderHumidity(context) {
     return html`
        <div class='state humidity'>
-         <iron-icon class='state__value_icon' .icon=${context.config.humidity.icon}></iron-icon>
+         <ha-icon class='state__value_icon' .icon=${context.config.humidity.icon}></ha-icon>
          <span class='state__value'>${context.humidifier.humidity}</span>
          <span class='state__uom'>${context.config.humidity.unit}</span>
        </div>
@@ -82,6 +82,7 @@ class MiniHumidifierInfo extends LitElement {
         height: calc(var(--mh-unit) * .475);
         width: calc(var(--mh-unit) * .425);
         color: var(--mh-icon-color);
+        --mdc-icon-size: calc(var(--mh-unit) * .425);
      }
      .state__value {
         margin: 0 1px;

diff --git a/src/components/powerstrip.js b/src/components/powerstrip.js
@@ -29,11 +29,11 @@ class MiniHumidifierPowerstrip extends LitElement {
     }
 
     return html`
-        <paper-icon-button class='power-button'
+        <ha-icon-button class='power-button'
           .icon=${this.config.power_button.icon}
           @click=${e => this.humidifier.togglePower(e)}
           ?color=${this.humidifier.isOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 

diff --git a/src/components/targetHumiditySlider.js b/src/components/targetHumiditySlider.js
@@ -21,7 +21,7 @@ class MiniHumidifierTargetHumiditySlider extends LitElement {
 
     return html`
         <div class="mh-target_humidifier__state">
-           <iron-icon class='state__value_icon' .icon=${this.config.target_humidity.icon}></iron-icon>
+           <ha-icon class='state__value_icon' .icon=${this.config.target_humidity.icon}></ha-icon>
            <span class='state__value ellipsis'>${sliderValue}</span>
            <span class='state__uom ellipsis'>${this.config.target_humidity.unit}</span>
         </div>
@@ -76,6 +76,7 @@ class MiniHumidifierTargetHumiditySlider extends LitElement {
      .state__value_icon {
         height: calc(var(--mh-unit) * .475);
         width: calc(var(--mh-unit) * .425);
+        --mdc-icon-size: calc(var(--mh-unit) * .425);
         color: var(--mh-icon-color);
      }
      .state__value {

diff --git a/src/main.js b/src/main.js
@@ -21,6 +21,13 @@ if (!customElements.get('ha-slider')) {
   );
 }
 
+if (!customElements.get('ha-icon-button')) {
+  customElements.define(
+    'ha-icon-button',
+    class extends customElements.get('paper-icon-button') {},
+  );
+}
+
 class MiniHumidifier extends LitElement {
   constructor() {
     super();
@@ -109,6 +116,13 @@ class MiniHumidifier extends LitElement {
         name: 'High',
         hide: false,
         order: 3,
+      },
+      {
+        id: 'strong',
+        value: 'Strong',
+        name: 'Strong',
+        hide: true,
+        order: 4,
       }];
 
     const data = Object.entries(fanModeConf.source);
@@ -221,7 +235,7 @@ class MiniHumidifier extends LitElement {
 
     this.config.depth = {
       icon: ICON.DEPTH,
-      max_value: 120,
+      max_value: 125,
       unit_type: 'percent',
       fixed: 0,
       order: 0,
@@ -249,6 +263,7 @@ class MiniHumidifier extends LitElement {
       unit: '°C',
       source: { enitity: undefined, attribute: undefined },
       order: 1,
+      fixed: 1,
       hide: false,
       ...config.temperature || {},
     };
@@ -257,6 +272,7 @@ class MiniHumidifier extends LitElement {
       unit: '%',
       source: { enitity: undefined, attribute: undefined },
       order: 2,
+      fixed: 1,
       hide: false,
       ...config.humidity || {},
     };
@@ -345,10 +361,10 @@ class MiniHumidifier extends LitElement {
 
     return html`
         <div class='mh-humidifier__toggle'>
-          <paper-icon-button class='toggle-button ${this.toggleButtonCls()}'
+          <ha-icon-button class='toggle-button ${this.toggleButtonCls()}'
           .icon=${this.config.toggle_button.icon}
           @click=${e => this.handleToggle(e)}>
-          </paper-icon-button>
+          </ha-icon-button>
         </div>
     `;
   }
@@ -390,7 +406,7 @@ class MiniHumidifier extends LitElement {
 
     return html`
       <div class='entity__secondary_info'>
-         <iron-icon class='entity__secondary_info_icon' .icon=${this.config.fan_mode_button.icon}></iron-icon>
+         <ha-icon class='entity__secondary_info_icon' .icon=${this.config.fan_mode_button.icon}></ha-icon>
          <span class='entity__secondary_info__name'>${this.secondaryInfoLabel}</span>
       </div>
     `;

diff --git a/src/model.js b/src/model.js
@@ -112,11 +112,13 @@ export default class HumidifierObject {
   }
 
   get temperature() {
-    return this.getValue(this.config.temperature.source, this.attr.temperature);
+    const value = this.getValue(this.config.temperature.source, this.attr.temperature);
+    return this.round(value, this.config.temperature.fixed);
   }
 
   get humidity() {
-    return this.getValue(this.config.humidity.source, this.attr.humidity);
+    const value = this.getValue(this.config.humidity.source, this.attr.humidity);
+    return this.round(value, this.config.humidity.fixed);
   }
 
   getValue(config, defaultValue) {

diff --git a/src/sharedStyle.js b/src/sharedStyle.js
@@ -13,17 +13,18 @@ const sharedStyle = css`
     width: calc(var(--mh-unit) * .6);
     height: calc(var(--mh-unit) * .6);
   }
-  paper-icon-button {
+  ha-icon-button {
     width: calc(var(--mh-unit));
     height: calc(var(--mh-unit));
+    --mdc-icon-button-size: calc(var(--mh-unit));
     color: var(--mh-button-color);
     transition: color .25s;
   }
-  paper-icon-button[color] {
+  ha-icon-button[color] {
     color: var(--mh-icon-active-color) !important;
     opacity: 1 !important;
   }
-  paper-icon-button[inactive] {
+  ha-icon-button[inactive] {
     opacity: .5;
   }
 `;