Merge pull request #16 from artem-sedykh/dev

1.0.8
artem-sedykh · May 20, 2020 · 8a7c77c · 8a7c77c
2 parents 93d3d20 + a1b50fb
commit 8a7c77c
Show file tree

Hide file tree

Showing 13 changed files with 219 additions and 37 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.7
+    - url: /local/mini-humidifier-bundle.js?v=1.0.8
       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.7
+    - url: /local/mini-humidifier-bundle.js?v=1.0.8
       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.7
+    - url: /local/mini-humidifier-bundle.js?v=1.0.8
       type: module
   ```
 
@@ -144,6 +144,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | toggle_button: `default` | boolean | optional | v1.0.5 | Default toggle_button state, default value `off`, [example](#always-show-control-buttons).
 | **depth** | object | optional | v1.0.1 | Information indicator, showing how much water is left in the humidifier
 | depth: `icon` | string | optional | v1.0.1 | Custom icon, default value `mdi:beaker-outline`
+| depth: `icon_template` | string | optional | v1.0.8 | Custom icon template, context values: `depth`(calculated value) and `raw`(raw depth value) [example](#icon-template-example)
 | depth: `hide` | boolean | optional | v1.0.1 | Hide indicator, default value `False`
 | 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`
@@ -153,6 +154,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | 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: `icon_template` | string | optional | v1.0.8 | Custom icon template, context value: `temperature`
 | 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`
@@ -162,6 +164,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | 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
 | **humidity** | object | optional | v1.0.1 | Information indicator, showing humidity
 | humidity: `icon` | string | optional | v1.0.1 | Custom icon, default value `mdi:water-outline`
+| humidity: `icon_template` | string | optional | v1.0.8 | Custom icon template, context value: `humidity`
 | 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 `%`
@@ -171,6 +174,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 | 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
 | **target_humidity** | object | optional | v1.0.1 | Target humidity
 | target_humidity: `icon` | string | optional | v1.0.1 | Custom icon, default value `mdi:water-outline`
+| target_humidity: `icon_template` | string | optional | v1.0.8 | Custom icon template, context value: `targetHumidity`
 | target_humidity: `hide` | boolean | optional | v1.0.1 | Hide indicator, default value `False`
 | target_humidity: `unit` | string | optional | v1.0.1 | display unit, default `%`
 | target_humidity: `min` | number | optional | v1.0.1 | minimum target humidity, default value `30` [see](https://www.home-assistant.io/integrations/fan.xiaomi_miio/)
@@ -423,6 +427,26 @@ For use Entities card you need to add `group: on`
 ```
 
 
+#### icon template example
+
+when changing `depth` value we change the icon
+```yaml
+- type: custom:mini-humidifier
+  entity: fan.xiaomi_miio_device
+  depth:
+    icon_template: >
+      {% if depth < 10 %}
+        <ha-icon class='state__value_icon' icon='mdi:tray-alert' style='color: #bd1c1c;'></ha-icon>
+      {% elseif depth < 45 %}
+        <ha-icon class='state__value_icon' icon='mdi:tray-minus'></ha-icon>
+      {% else %}
+        <ha-icon class='state__value_icon' icon='mdi:tray-full'></ha-icon>
+      {% endif %}
+```
+used plugin [jinja-js](https://github.com/sstur/jinja-js)
+
+<img src="https://user-images.githubusercontent.com/861063/82473688-a1685380-9ad2-11ea-9f7f-ba094f1e2d27.png"  alt="expample"/>
+
 
 ## 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.7",
+  "version": "v1.0.8",
   "description": "humidifier card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",
@@ -17,6 +17,7 @@
   "author": "Artem Sedykh <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "jinja-js": "^0.1.8",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
     "resize-observer-polyfill": "^1.5.1"
@@ -29,11 +30,12 @@
     "@babel/plugin-transform-template-literals": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "babel-plugin-iife-wrap": "^1.1.0",
-    "babel-preset-minify": "^0.5.0",
+    "babel-preset-minify": "^0.5.1",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "2.16.0",
-    "rollup": "^0.66.6",
+    "rollup": "^2.10.5",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^3.4.0"
   },
   "scripts": {

diff --git a/release_notes/v1.0.7.md b/release_notes/v1.0.7.md
@@ -1,5 +1,5 @@
 ## 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)
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-humidifier/v1.0.7/total.svg)](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v1.0.7)
 ### ADDED
 - Added rounding configuration for temperature and humidity
 - Added `strong` option(hidden by default) for fan_mode_button source, for zhimi.humidifier.v1

diff --git a/release_notes/v1.0.8.md b/release_notes/v1.0.8.md
@@ -0,0 +1,27 @@
+## v1.0.8
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-humidifier/v1.0.8/total.svg)](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v1.0.8)
+### ADDED
+- Added `humidity: icon_template` icon template for humidity indicator, a simple template engine is used [jinja-js](https://github.com/sstur/jinja-js)
+- Added `target_humidity: icon_template` icon template for target_humidity indicator, a simple template engine is used [jinja-js](https://github.com/sstur/jinja-js)
+- Added `temperature: icon_template` icon template for temperature indicator, a simple template engine is used [jinja-js](https://github.com/sstur/jinja-js)
+- Added `depth: icon_template` icon template for temperature indicator, a simple template engine is used [jinja-js](https://github.com/sstur/jinja-js)
+
+#####Example
+```yaml
+- type: custom:mini-humidifier
+  entity: fan.xiaomi_miio_device
+  depth:
+    icon_template: >
+      {% if depth < 10 %}
+        <ha-icon class='state__value_icon' icon='mdi:tray-alert' style='color: #bd1c1c;'></ha-icon>
+      {% elseif depth < 45 %}
+        <ha-icon class='state__value_icon' icon='mdi:tray-minus'></ha-icon>
+      {% else %}
+        <ha-icon class='state__value_icon' icon='mdi:tray-full'></ha-icon>
+      {% endif %}
+```
+
+### CHANGED
+- styles
+- `humidity:icon` changed default icon from `mdi:water-outline` to `mdi:water`
+- `depth:icon` changed default icon from `mdi:beaker-outline` to `mdi:tray-full`
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,4 +1,5 @@
 import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
 
 export default {
   input: 'src/main.js',
@@ -9,5 +10,6 @@ export default {
   },
   plugins: [
     resolve(),
+    commonjs(),
   ],
 };
diff --git a/src/components/info.js b/src/components/info.js
@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 class MiniHumidifierInfo extends LitElement {
   static get properties() {
@@ -10,29 +11,40 @@ class MiniHumidifierInfo extends LitElement {
   }
 
   renderDepth(context) {
+    const icon = context.config.depth.icon_template
+      ? unsafeHTML(context.humidifier.depthIcon)
+      : html`<ha-icon class='state__value_icon' .icon=${context.config.depth.icon}></ha-icon>`;
+
     return html`
        <div class='state depth'>
-         <ha-icon class='state__value_icon' .icon=${context.config.depth.icon}></ha-icon>
+         ${icon}
          <span class='state__value'>${context.humidifier.depth}</span>
          <span class='state__uom'>${context.config.depth.unit}</span>
        </div>
     `;
   }
 
   renderTemperature(context) {
+    const icon = context.config.temperature.icon_template
+      ? unsafeHTML(context.humidifier.temperatureIcon)
+      : html`<ha-icon class='state__value_icon' .icon=${context.config.temperature.icon}></ha-icon>`;
+
     return html`
        <div class='state temperature'>
-         <ha-icon class='state__value_icon' .icon=${context.config.temperature.icon}></ha-icon>
+         ${icon}
          <span class='state__value'>${context.humidifier.temperature}</span>
          <span class='state__uom'>${context.config.temperature.unit}</span>
        </div>
     `;
   }
 
   renderHumidity(context) {
+    const icon = context.config.humidity.icon_template
+      ? unsafeHTML(context.humidifier.humidityIcon)
+      : html`<ha-icon class='state__value_icon' .icon=${context.config.humidity.icon}></ha-icon>`;
     return html`
        <div class='state humidity'>
-         <ha-icon class='state__value_icon' .icon=${context.config.humidity.icon}></ha-icon>
+         ${icon}
          <span class='state__value'>${context.humidifier.humidity}</span>
          <span class='state__uom'>${context.config.humidity.unit}</span>
        </div>
@@ -66,8 +78,8 @@ class MiniHumidifierInfo extends LitElement {
         box-sizing: border-box;
         min-width: 0;
         overflow: hidden;
-        font-size: calc(var(--mh-unit) * .325);
-        line-height: calc(var(--mh-unit) / 2);
+        font-size: calc(var(--mh-unit) * .35);
+        line-height: calc(var(--mh-unit) * .35);
       }
      .mh-humidifier-state__container {
        display: flex;
@@ -80,13 +92,14 @@ class MiniHumidifierInfo extends LitElement {
      }
      .state__value_icon {
         height: calc(var(--mh-unit) * .475);
-        width: calc(var(--mh-unit) * .425);
+        width: calc(var(--mh-unit) * .5);
         color: var(--mh-icon-color);
         --mdc-icon-size: calc(var(--mh-unit) * .425);
      }
      .state__value {
         margin: 0 1px;
         font-weight: var(--mh-info-font-weight);
+        line-height: calc(var(--mh-unit) * .475);
      }
      .state__uom {
         font-size: calc(var(--mh-unit) * .275);