",
"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
index a51bfcc..711244f 100644
--- a/release_notes/v1.0.7.md
+++ b/release_notes/v1.0.7.md
@@ -1,5 +1,5 @@
## v1.0.7
-[](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v1.0.4)
+[](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
new file mode 100644
index 0000000..ae1542c
--- /dev/null
+++ b/release_notes/v1.0.8.md
@@ -0,0 +1,27 @@
+## v1.0.8
+[](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 %}
+
+ {% elseif depth < 45 %}
+
+ {% else %}
+
+ {% 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
index 8d2f740..2bbcfd8 100644
--- 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
index dcfc905..94b456c 100644
--- 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,9 +11,13 @@ class MiniHumidifierInfo extends LitElement {
}
renderDepth(context) {
+ const icon = context.config.depth.icon_template
+ ? unsafeHTML(context.humidifier.depthIcon)
+ : html``;
+
return html`
-
+ ${icon}
${context.humidifier.depth}
${context.config.depth.unit}
@@ -20,9 +25,13 @@ class MiniHumidifierInfo extends LitElement {
}
renderTemperature(context) {
+ const icon = context.config.temperature.icon_template
+ ? unsafeHTML(context.humidifier.temperatureIcon)
+ : html``;
+
return html`
-
+ ${icon}
${context.humidifier.temperature}
${context.config.temperature.unit}
@@ -30,9 +39,12 @@ class MiniHumidifierInfo extends LitElement {
}
renderHumidity(context) {
+ const icon = context.config.humidity.icon_template
+ ? unsafeHTML(context.humidifier.humidityIcon)
+ : html``;
return html`
-
+ ${icon}
${context.humidifier.humidity}
${context.config.humidity.unit}
@@ -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);
diff --git a/src/components/targetHumiditySlider.js b/src/components/targetHumiditySlider.js
index 04a1ed2..34bc885 100644
--- a/src/components/targetHumiditySlider.js
+++ b/src/components/targetHumiditySlider.js
@@ -1,4 +1,5 @@
import { LitElement, html, css } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
class MiniHumidifierTargetHumiditySlider extends LitElement {
static get properties() {
@@ -19,9 +20,13 @@ class MiniHumidifierTargetHumiditySlider extends LitElement {
if (this.config.target_humidity.hide)
return html``;
+ const icon = this.config.humidity.icon_template
+ ? unsafeHTML(this.humidifier.targetHumidityIcon)
+ : html``;
+
return html`
-
+ ${icon}
${sliderValue}
${this.config.target_humidity.unit}
@@ -75,13 +80,14 @@ 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);
+ width: calc(var(--mh-unit) * .5);
color: var(--mh-icon-color);
+ --mdc-icon-size: calc(var(--mh-unit) * .425);
}
.state__value {
- 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) * .475);
+ margin: 0px 1px;
}
.state__uom {
font-size: calc(var(--mh-unit) * .275);
diff --git a/src/const.js b/src/const.js
index 763c579..d844c06 100644
--- a/src/const.js
+++ b/src/const.js
@@ -2,9 +2,9 @@
const ICON = {
DEFAULT: 'mdi:air-filter',
FAN: 'mdi:fan',
- HUMIDITY: 'mdi:water-outline',
+ HUMIDITY: 'mdi:water',
TEMPERATURE: 'mdi:thermometer-low',
- DEPTH: 'mdi:beaker-outline',
+ DEPTH: 'mdi:tray-full',
DRY: 'mdi:weather-sunny',
BUZZER: 'mdi:bell-outline',
LEDBUTTON: 'mdi:lightbulb-on-outline',
diff --git a/src/main.js b/src/main.js
index 3c63921..f7cd2c1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import HumidifierObject from './model';
import style from './style';
import sharedStyle from './sharedStyle';
import handleClick from './utils/handleClick';
+import trimTo from './utils/trimTo';
import './components/dropdown';
import './components/powerstrip';
@@ -235,6 +236,7 @@ class MiniHumidifier extends LitElement {
this.config.depth = {
icon: ICON.DEPTH,
+ icon_template: '',
max_value: 125,
unit_type: 'percent',
fixed: 0,
@@ -414,7 +416,8 @@ class MiniHumidifier extends LitElement {
get secondaryInfoLabel() {
const item = this.humidifier.fanSpeed;
- return item ? item.name : '';
+
+ return trimTo(item ? item.name : '', 9);
}
computeIcon() {
diff --git a/src/model.js b/src/model.js
index a29c752..0f97080 100644
--- a/src/model.js
+++ b/src/model.js
@@ -1,3 +1,4 @@
+import jinja from 'jinja-js';
export default class HumidifierObject {
constructor(hass, config, entity) {
@@ -38,6 +39,14 @@ export default class HumidifierObject {
return this.round(value, this.config.depth.fixed);
}
+ get depthIcon() {
+ if (!this.config.depth.icon_template)
+ return '';
+
+ const context = { depth: this.depth, raw: this.attr.depth || 0 };
+ return jinja.render(this.config.depth.icon_template, context);
+ }
+
get targetHumidity() {
const humidity = this.attr.target_humidity || 0;
return {
@@ -48,6 +57,14 @@ export default class HumidifierObject {
};
}
+ get targetHumidityIcon() {
+ if (!this.config.target_humidity.icon_template)
+ return '';
+
+ const context = { targetHumidity: this.targetHumidity.value };
+ return jinja.render(this.config.target_humidity.icon_template, context);
+ }
+
get fanSpeed() {
if (this.attr.mode)
return this.fanSpeedSource.find(s => s.value.toUpperCase() === this.attr.mode.toUpperCase());
@@ -116,11 +133,27 @@ export default class HumidifierObject {
return this.round(value, this.config.temperature.fixed);
}
+ get temperatureIcon() {
+ if (!this.config.temperature.icon_template)
+ return '';
+
+ const context = { temperature: this.temperature };
+ return jinja.render(this.config.temperature.icon_template, context);
+ }
+
get humidity() {
const value = this.getValue(this.config.humidity.source, this.attr.humidity);
return this.round(value, this.config.humidity.fixed);
}
+ get humidityIcon() {
+ if (!this.config.humidity.icon_template)
+ return '';
+
+ const context = { humidity: this.humidity };
+ return jinja.render(this.config.humidity.icon_template, context);
+ }
+
getValue(config, defaultValue) {
if (!config)
return defaultValue;
diff --git a/src/style.js b/src/style.js
index 02bd15f..db37eb3 100644
--- a/src/style.js
+++ b/src/style.js
@@ -117,17 +117,18 @@ const style = css`
}
.entity__secondary_info_icon {
color: var(--mh-icon-color);
- width: calc(var(--mh-unit) * .375);
- height: calc(var(--mh-unit) * .375);
- min-width: calc(var(--mh-unit) * .375);
+ height: calc(var(--mh-unit) * .475);
+ width: calc(var(--mh-unit) * .5);
+ min-width: calc(var(--mh-unit) * .5);
--mdc-icon-size: calc(var(--mh-unit) * .375);
}
.entity__secondary_info {
margin-top: -2px;
}
.entity__secondary_info__name {
- font-size: calc(var(--mh-unit) * 0.325);
+ font-size: calc(var(--mh-unit) * .35);
font-weight: var(--mh-info-font-weight);
+ line-height: calc(var(--mh-unit) * .525);
}
mh-powerstrip {
flex: 1;
@@ -151,6 +152,7 @@ const style = css`
}
.mh-humidifier__bottom {
margin: 0;
+ margin-top: calc(var(--mh-unit) * .075);
margin-left: calc(calc(calc(var(--mh-unit) / 5) + var(--mh-unit)) + var(--mh-entity-info-left-offset));
justify-content: space-between;
}
diff --git a/src/utils/trimTo.js b/src/utils/trimTo.js
new file mode 100644
index 0000000..c90281d
--- /dev/null
+++ b/src/utils/trimTo.js
@@ -0,0 +1,13 @@
+const trimTo = (value, size) => {
+ if (!value)
+ return value;
+
+ const str = value.toString();
+
+ if (str && str.length > size)
+ return str.substr(0, str.length - 3).concat('...');
+
+ return str;
+};
+
+export default trimTo;
+
## 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
index 4bca2be..344fd4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "mini-humidifier",
- "version": "v1.0.7",
+ "version": "v1.0.8",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -1008,12 +1008,6 @@
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
"dev": true
},
- "@types/node": {
- "version": "13.11.0",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-13.11.0.tgz",
- "integrity": "sha512-uM4mnmsIIPK/yeO+42F2RQhGUIs39K2RFmugcJANppXe6J1nvH87PvzPZYpza7Xhhs8Yn9yIAVdLZ84z61+0xQ==",
- "dev": true
- },
"acorn": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
@@ -2822,6 +2816,12 @@
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"dev": true
},
+ "estree-walker": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+ "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+ "dev": true
+ },
"esutils": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3094,6 +3094,13 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
+ "fsevents": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+ "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+ "dev": true,
+ "optional": true
+ },
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -3507,6 +3514,15 @@
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
"dev": true
},
+ "is-reference": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
+ "integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
+ "dev": true,
+ "requires": {
+ "@types/estree": "0.0.39"
+ }
+ },
"is-regex": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
@@ -3551,6 +3567,11 @@
"dev": true,
"optional": true
},
+ "jinja-js": {
+ "version": "0.1.8",
+ "resolved": "https://registry.npmjs.org/jinja-js/-/jinja-js-0.1.8.tgz",
+ "integrity": "sha1-CxPuuW6QmT8EBRTXzmT1N4b1hRE="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3684,6 +3705,15 @@
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
+ "magic-string": {
+ "version": "0.25.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+ "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+ "dev": true,
+ "requires": {
+ "sourcemap-codec": "^1.4.4"
+ }
+ },
"make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -4364,13 +4394,25 @@
}
},
"rollup": {
- "version": "0.66.6",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.66.6.tgz",
- "integrity": "sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==",
+ "version": "2.10.5",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.10.5.tgz",
+ "integrity": "sha512-05WRM/tjmPYwhOBvm/G9Qwa/HnAqn0TK0XxLDLQzoM4XdSmKjPBvhBl+U+Q/C6VJsucljyTQjGkZD503mjbPQg==",
+ "dev": true,
+ "requires": {
+ "fsevents": "~2.1.2"
+ }
+ },
+ "rollup-plugin-commonjs": {
+ "version": "10.1.0",
+ "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
+ "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
"dev": true,
"requires": {
- "@types/estree": "0.0.39",
- "@types/node": "*"
+ "estree-walker": "^0.6.1",
+ "is-reference": "^1.1.2",
+ "magic-string": "^0.25.2",
+ "resolve": "^1.11.0",
+ "rollup-pluginutils": "^2.8.1"
}
},
"rollup-plugin-node-resolve": {
@@ -4384,6 +4426,15 @@
"resolve": "^1.1.6"
}
},
+ "rollup-pluginutils": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+ "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+ "dev": true,
+ "requires": {
+ "estree-walker": "^0.6.1"
+ }
+ },
"run-async": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
@@ -4637,6 +4688,12 @@
"dev": true,
"optional": true
},
+ "sourcemap-codec": {
+ "version": "1.4.8",
+ "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+ "dev": true
+ },
"spdx-correct": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
diff --git a/package.json b/package.json
index aa59ea8..23d6ca5 100644
--- 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