{"id":31771843,"url":"https://github.com/artem-sedykh/mini-humidifier","last_synced_at":"2025-10-10T03:47:43.481Z","repository":{"id":37906157,"uuid":"253019926","full_name":"artem-sedykh/mini-humidifier","owner":"artem-sedykh","description":"Minimalistic humidifier card for Home Assistant Lovelace UI","archived":false,"fork":false,"pushed_at":"2024-04-10T10:27:38.000Z","size":1199,"stargazers_count":152,"open_issues_count":16,"forks_count":27,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-05-03T15:52:10.099Z","etag":null,"topics":["automation","custom","hassio","home-assistant","humidifier","lovelace","lovelace-ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artem-sedykh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-04-04T14:35:45.000Z","updated_at":"2024-04-05T21:06:56.000Z","dependencies_parsed_at":"2024-04-10T11:31:00.475Z","dependency_job_id":"78b7e170-da9b-4685-ae2d-1dc397e03230","html_url":"https://github.com/artem-sedykh/mini-humidifier","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/artem-sedykh/mini-humidifier","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-humidifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-humidifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-humidifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-humidifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artem-sedykh","download_url":"https://codeload.github.com/artem-sedykh/mini-humidifier/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-humidifier/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002601,"owners_count":26083426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automation","custom","hassio","home-assistant","humidifier","lovelace","lovelace-ui"],"created_at":"2025-10-10T03:47:29.526Z","updated_at":"2025-10-10T03:47:43.472Z","avatar_url":"https://github.com/artem-sedykh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mini Humidifier Card\n\n[![Last Version](https://img.shields.io/github/package-json/v/artem-sedykh/mini-humidifier?label.svg=release)](https://github.com/artem-sedykh/mini-humidifier/releases/latest)\n[![Build Status](https://travis-ci.com/artem-sedykh/mini-humidifier.svg?branch=master)](https://travis-ci.com/artem-sedykh/mini-humidifier)\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/artem-sedykh/mini-humidifier)\n\nTested on [zhimi.humidifier.cb1](https://www.home-assistant.io/integrations/fan.xiaomi_miio/)\n\nA minimalistic yet customizable humidifier card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI.  \n\nPlease ⭐️ this repo if you find it useful  \n\nInspired by [mini media player](https://github.com/kalkih/mini-media-player).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/artem-sedykh/mini-humidifier/master/images/preview.png\" /\u003e\n\u003c/p\u003e\n\n## Notice\nv3 is only compatible from version 2022.11 onwards\n\n## Install\n\n*This card is available in [HACS](https://github.com/custom-components/hacs) (Home Assistant Community Store)*\n\n### Simple install\n\n1. Download and copy `mini-humidifier-bundle.js` from the [latest release](https://github.com/artem-sedykh/mini-humidifier/releases/latest) into your `config/www` directory.\n\n2. Add a reference to `mini-humidifier-bundle.js` inside your `configuration.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-humidifier-bundle.js?v=3.1.1\n      type: module\n  ```\n\n### CLI install\n\n1. Move into your `config/www` directory\n\n2. Grab `mini-humidifier-bundle.js`\n\n  ```console\n  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v3.1.1/mini-humidifier-bundle.js\n  ```\n\n3. Add a reference to `mini-humidifier-bundle.js` inside your `configuration.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-humidifier-bundle.js?v=3.1.1\n      type: module\n  ```\n\n## Updating\n1. Find your `mini-humidifier-bundle.js` file in `config/www` or wherever you ended up storing it.\n\n2. Replace the local file with the latest one attached in the [latest release](https://github.com/artem-sedykh/mini-humidifier/releases/latest).\n\n3. Add the new version number to the end of the cards reference url in your `configuration.yaml` like below.\n\n  ```yaml\n  resources:\n    - url: /local/mini-humidifier-bundle.js?v=3.1.1\n      type: module\n  ```\n\n*You may need to empty the browsers cache if you have problems loading the updated card.*\n\n## Using the card\n\n### Options\n\n#### Card options\n| Name | Type | Default | Since | Description |\n|------|------|---------|-------|-------------|\n| type | string | **required** | v1.0.1 | `custom:mini-humidifier`\n| entity | string | **required** | v1.0.1 | An entity_id from an entity within the `fan` or `humidifier` domain.\n| name | string | optional | v1.0.1 | Override the entities friendly name.\n| icon | string | optional | v1.0.1 | Specify a custom icon from any of the available mdi icons.\n| group | boolean | optional | v1.0.1 | Removes paddings, background color and box-shadow. [example](#group)\n| **toggle** | object | optional | v2.0.1 | Toggle button.\n| toggle: `icon` | string | optional | v2.0.1 | Custom icon, default value `mdi:dots-horizontal`\n| toggle: `hide` | boolean | optional | v2.0.1 | Hide button, default value `False`\n| toggle: `default` | boolean | optional | v2.0.1 | Default toggle button state, default value `off`, [example](#toggle-button).\n| **secondary_info** | object | optional | v2.1.1 | secondary_info config. [secondary info examples](#secondary-info)\n| secondary_info: `type` | string | optional | v2.1.1 | available types: `last-changed, mode`\n| secondary_info: `icon` | string | optional | v2.1.1 | icon for type: `mode`\n| secondary_info: `hide` | boolean | optional | v2.2.6 | Hide secondary info, default `False`\n| **power** | object | optional | v2.0.1 | Power button, [example](#power-button).\n| power: `type` | string | optional | v2.0.1 | `toggle` or `button`, default `button`\n| power: `icon` | string | optional | v2.0.1 | Specify a custom icon from any of the available mdi icons, default `mdi:power`\n| power: `hide` | boolean | optional | v2.0.1 | Hide power button, default value `False`\n| power: `action_timeout` | number | optional | v2.1.1 | `ms` default value `3500`\n| power: `disabled` | function | optional | v2.0.1 | button disabled calculation function, default unset\n| power: `style` | function | optional | v2.0.1 | function for getting custom styles, default unset\n| power: `state` | object | optional | v2.0.1 | config to get power button state.\n| power: `state:entity` | string | optional | v2.0.1 | power button entity_id, default current entity\n| power: `state:attribute` | string | optional | v2.0.1 | state value attribute default 'unset'\n| power: `state:mapper` | function | optional | v2.0.1 | state value processing function, default `unset`\n| power: `toggle_action` | function | optional | v2.0.1 | button click processing function\n| **target_humidity** | object | optional | v2.0.1 | target humidity config, [example](#target-humidity).\n| target_humidity: `icon` | string | optional | v1.0.1 | Custom icon, default value `mdi:water`\n| target_humidity: `icon` | object | optional | v2.0.1 | icon config\n| target_humidity: `icon:template` | function | optional | v2.0.1 | icon retrieval function\n| target_humidity: `icon:style` | function | optional | v2.0.1 | function to get icon styles\n| target_humidity: `hide` | boolean | optional | v1.0.1 | Hide target_humidity control, default value `False`\n| target_humidity: `disabled` | boolean, function | optional | v2.5.3 | disable target_humidity slider, default value taken from the defined [model](#adding-the-default-configuration-for-the-new-model) and if not set, from the default [model](https://github.com/artem-sedykh/mini-humidifier/blob/master/src/configurations/xiaomi_miio/zhimi_humidifier_cb1.js#L28)\n| target_humidity: `hide_indicator` | boolean | optional | v2.2.1 | Hide indicator, default value `False`\n| target_humidity: `unit` | string | optional | v1.0.1 | display unit, default `%`\n| target_humidity: `min` | number | optional | v1.0.1 | minimum target humidity, default value `30`\n| target_humidity: `max` | number | optional | v1.0.1 | maximum target humidity, default value `80`\n| target_humidity: `action_timeout` | number | optional | v2.1.1 | `ms` default value `3500`\n| target_humidity: `step` | number | optional | v1.0.1 | slider step, default value `10`\n| target_humidity: `state` | object | optional | v2.0.1 | configuration to ge target_humidity value\n| target_humidity: `state:entity` | object | optional | v2.0.1 | target_humidity entity_id, default current entity\n| target_humidity: `state:attribute` | object | optional | v2.0.1 | default value `target_humidity`\n| target_humidity: `change_action` | function | optional | v2.0.1 | target_humidity change function\n| **indicators** | object | optional | v2.0.1 | any indicators, [examples](#indicators).\n| indicators: `name` | object | optional | v2.0.1 | the name of your indicator see [examples](#indicators).\n| indicators: `name:icon` | string | optional | v2.0.1 | Specify a custom icon from any of the available mdi icons.\n| indicators: `name:icon` | object | optional | v2.0.1 | icon object\n| indicators: `name:icon:template` | function | optional | v2.0.1 | icon template function\n| indicators: `name:icon:style` | function | optional | v2.0.1 | styles\n| indicators: `name:unit` | string | optional | v2.0.1 | display unit.\n| indicators: `name:round` | number | optional | v2.0.1 | rounding number value.\n| indicators: `name:hide` | boolean | optional | v2.0.1 | hide indicator, default `false`\n| indicators: `name:tap_action` | [action object](#action-object-options) | true | v1.1.0 | Action on click/tap.\n| indicators: `name:source` | object | optional | v2.0.1 | data source.\n| indicators: `name:source:entity` | string | optional | v2.0.1 | indicator entity_id\n| indicators: `name:source:attribute` | string | optional | v2.0.1 | entity attribute\n| indicators: `name:source:mapper` | function | optional | v2.0.1 | value processing function\n| **buttons** | object | optional | v2.0.1 | any buttons, [example](#buttons).\n| buttons: `name` | object | optional | v2.0.1 | the name of your button see examples\n| buttons: `name:icon` | string | optional | v2.0.1 | Specify a custom icon from any of the available mdi icons.\n| buttons: `name:type` | string | optional | v2.0.1 | `dropdown` or `button` default `button`\n| buttons: `name:action_timeout` | number | optional | v2.1.1 | `ms` default value `3500`\n| buttons: `name:order` | number | optional | v2.0.1 | sort order\n| buttons: `name:state` | object | optional | v2.0.1 | config to get button state.\n| buttons: `name:hide` | object | optional | v2.0.1 | hide button, default `false`\n| buttons: `name:state:entity` | string | optional | v2.0.1 | button entity_id.\n| buttons: `name:state:attribute` | string | optional | v2.0.1 | entity attribute\n| buttons: `name:state:mapper` | function | optional | v2.0.1 | state processing function\n| buttons: `name:disabled` | function | optional | v2.0.1 | calc disabled button\n| buttons: `name:active` | function | optional | v2.0.1 | for type `dropdown`\n| buttons: `name:source` | object | optional | v2.0.1 | for type `dropdown`\n| buttons: `name:source:item` | string | optional | v2.0.1 | source item, format horizontal: horizontal\n| buttons: `name:source:__filter` | function | optional | v2.0.1 | filter function\n| buttons: `name:change_action` | function | optional | v2.0.1 | for type `dropdown`\n| buttons: `name:toggle_action` | function | optional | v2.0.1 | for type `button`\n| buttons: `name:style` | function | optional | v2.0.1 | styles\n| scale | number | optional | v1.0.3 | UI scale modifier, default is `1`.\n| model | string | optional | v2.1.1 | default configuration for a specific humidifier model, default value `zhimi.humidifier.cb1`\n| tap_action | [action object](#action-object-options) | true | v1.0.4 | Action on click/tap, [examples](#action-object-options-examples).\n\n#### Action object options\n| Name | Type | Default | Options | Description |\n|------|:----:|:-------:|:-----------:|-------------|\n| action | string | `more-info` | `more-info` / `navigate` / `call-service`  / `url` / `none` / `toggle` | Action to perform.\n| entity | string |  | Any entity id | Override default entity of `more-info`, when  `action` is defined as `more-info`.\n| service | string |  | Any service | Service to call (e.g. `fan.turn_on`) when `action` is defined as `call-service`\n| service_data | object |  | Any service data | Service data to include with the service call (e.g. `entity_id: fan.xiaomi_miio_device`)\n| navigation_path | string |  | Any path | Path to navigate to (e.g. `/lovelace/0/`) when `action` is defined as `navigate`.\n| url | string |  | Any URL | URL to open when `action` is defined as `url`.\n\n### Theme variables\nThe following variables are available and can be set in your theme to change the appearence of the card.\nCan be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.\n\n| name | Default | Description |\n|------|---------|-------------|\n| mini-humidifier-name-font-weight | 400 | Font weight of the entity name\n| mini-humidifier-info-font-weight | 300 | Font weight of the states\n| mini-humidifier-icon-color | --mini-humidifier-base-color, var(--paper-item-icon-color, #44739e) | The color for icons\n| mini-humidifier-button-color |--mini-humidifier-button-color, var(--paper-item-icon-color, #44739e) | The color for buttons icons\n| mini-humidifier-accent-color | var(--accent-color) | The accent color of UI elements\n| mini-humidifier-base-color | var(--primary-text-color) \u0026 var(--paper-item-icon-color) | The color of base text\n| mini-humidifier-background-opacity | 1 | Opacity of the background\n| mini-humidifier-scale | 1 | Scale of the card\n\n\n### Adding the default configuration for the new model\n\n 1. Read the documentation\n 2. See an example for [zhimi.humidifier.cb1](https://github.com/artem-sedykh/mini-humidifier/blob/master/src/configurations/xiaomi_miio/zhimi_humidifier_cb1.js)\n 3. Create a pull request or issue with the configuration file.\n \n #### Available default configurations\n `zhimi.humidifier.cb1` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio#air-humidifier-cb-zhimihumidifiercb1)  \n `zhimi.humidifier.ca1` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio#air-humidifier-ca-zhimihumidifierca1)  \n `zhimi.humidifier.ca4` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio#air-humidifier-ca-zhimihumidifierca4)  \n `deerma.humidifier.jsq` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio/#air-humidifier-jsqjsq1mjjsq-deermahumidifierjsqdeermahumidifierjsq1deermahumidifiermjjsq)  \n `deerma.humidifier.jsq1` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio/#air-humidifier-jsqjsq1mjjsq-deermahumidifierjsqdeermahumidifierjsq1deermahumidifiermjjsq)  \n `deerma.humidifier.mjjsq` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio/#air-humidifier-jsqjsq1mjjsq-deermahumidifierjsqdeermahumidifierjsq1deermahumidifiermjjsq)  \n `zhimi.airpurifier.ma2` - [xiaomi_miio integration](https://www.home-assistant.io/integrations/fan.xiaomi_miio/)  \n\n `xiaomi_miio_airpurifier:deerma.humidifier.mjjsq` - [xiaomi_miio_airpurifier integration](https://github.com/syssi/xiaomi_airpurifier)  \n `xiaomi_miio_airpurifier:zhimi.humidifier.cb1` - [xiaomi_miio_airpurifier integration](https://github.com/syssi/xiaomi_airpurifier)  \n `xiaomi_miio_airpurifier:zhimi.humidifier.ca4` by @ravikwow - [xiaomi_miio_airpurifier integration](https://github.com/syssi/xiaomi_airpurifier)  \n `xiaomi_miio_airpurifier:zhimi.airpurifier.mb3` by @regevbr - [xiaomi_miio_airpurifier integration](https://github.com/syssi/xiaomi_airpurifier)  \n \n\u003e Using the default configuration for a specific model\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\n# zhimi.humidifier.cb1 default value may be omitted, added for example.\nmodel: 'zhimi.humidifier.cb1' \n```\n\n[deerma.humidifier.mjjsq](https://github.com/artem-sedykh/mini-humidifier/blob/master/src/configurations/xiaomi_miio_airpurifier/deerma_humidifier_mjjsq.js)\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nmodel: 'xiaomi_miio_airpurifier:deerma.humidifier.mjjsq' \n```\n\u003e localize status indicator\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nmodel: 'deerma.humidifier.mjjsq'\nindicators:\n  status:\n    empty: пустой\n    filled: полный\n```\n\n#### target humidity\n\n\u003e Functions available for the target_humidity:  \n\n| Name | Type | execution context | arguments | return type |\n|------|------|-------------------|-----------|-------------|\n|`state:mapper` | function | target_humidity config | current_value, entity, humidifier_entity  | any\n|`change_action` | function | target_humidity config | value, current_value, entity, humidifier_entity  | promise\n|`icon:template` | function | target_humidity config | current_value, entity, humidifier_entity | string\n|`icon:style` | function | target_humidity config | current_value, entity, humidifier_entity | object\n\n`current_value` - selected value  \n`value` - target_humidity value  \n`entity` - target_humidity entity  \n`humidifier_entity` - humidifier entity  \n\n**execution context methods:**  \n\n| Name | arguments | description | return type |\n|------|-----------|-------------|-------------|\n|`toggle_state` | sate | toggle state, example: `this.toggle_state('on') =\u003e off`  | string\n|`call_service` | domain, service, options, | call Home Assistant service | promise\n\n\u003e Configuration example for the target_humidity:  \n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntarget_humidity:\n  state:\n    attribute: target_humidity\n    mapper: (current_value, entity, humidifier_entity) =\u003e current_value\n  icon:\n    template: (current_value, entity, humidifier_entity) =\u003e 'mdi:tray-full'\n    style: \"(current_value, entity, humidifier_entity) =\u003e ({ color: 'red' })\"\n  unit: '%'\n  hide: off\n  min: 30\n  max: 80\n  step: 10\n  change_action: \u003e\n    (value, current_value, entity, humidifier_entity) =\u003e {\n      const options = { entity_id: entity.entity_id, humidity: value };\n      return this.call_service('xiaomi_miio', 'fan_set_target_humidity', options);\n    }\n``` \n\n\u003e The default configuration is configured for `zhimi.humidifier.cb1`,  \n\u003e to set target humidity, use the service `xiaomi_miio.fan_set_target_humidity`\n\u003e Example:\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntarget_humidity:\n  icon: 'mdi:water'\n  state:\n    attribute: target_humidity\n  unit: '%'\n  min: 30\n  max: 80\n  step: 10\n  change_action: \u003e\n    (selected, state, entity) =\u003e {\n      const options = { entity_id: entity.entity_id, humidity: selected };\n      return this.call_service('xiaomi_miio', 'fan_set_target_humidity', options);\n    }\n``` \n#### power button\n\n\u003e Functions available for the power:  \n\n| Name | Type | execution context | arguments | return type |\n|------|------|-------------------|-----------|-------------|\n|`state:mapper` | function | power config | state, entity, humidifier_entity | string\n|`disabled` | function | power config | state, entity, humidifier_entity | boolean\n|`style` | function | power config | state, entity, humidifier_entity | object\n|`toggle_action` | function | power config | state, entity, humidifier_entity | promise\n\n`state` - current power state  \n`entity` - current power entity  \n`humidifier_entity` - humidifier entity  \n\n**execution context methods:**  \n\n| Name | arguments | description | return type |\n|------|-----------|-------------|-------------|\n|`toggle_state` | sate | toggle state, example: `this.toggle_state('on') =\u003e off`  | string\n|`call_service` | domain, service, options, | call Home Assistant service | promise\n\n\u003e The power button can be of two types: `button` or `toggle`, default type: `button`\n\u003e Attention, the following configuration attributes (icon, disabled, state:attribute, style, toggle_action) are not available for the toggle type,\n\u003e since a standard ha-entity-toggle is used, the state of which I do not control\n\n\u003e Configuration example for the power button type `toggle`: \n  \n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\npower:\n  hide: off\nstate:\n  mapper: (state, entity, humidifier_entity) =\u003e state\n``` \n\n\u003e Configuration example for the power button type `button`: \n  \n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\npower:\n  icon: 'mdi:power'\n  type: button\n  state:\n    mapper: (state, entity, humidifier_entity) =\u003e state\n  hide: off\n  disabled: (state, entity, humidifier_entity) =\u003e false\n  style: \"(state, entity, humidifier_entity) =\u003e ({ color: 'red' })\"\n  toggle_action: \u003e\n    (state, entity) =\u003e {\n      const service = state === 'on' ? 'turn_off' : 'turn_on';\n      return this.call_service('fan', service, { entity_id: entity.entity_id });\n    }\n``` \n\u003e The default configuration is configured for `zhimi.humidifier.cb1`,  \n\u003e to on / off, use the service `fan.turn_on`, `fan.turn_off`\n\u003e Example:\n\n ```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\npower:\n  icon: 'mdi:power'\n  type: button\n  hide: off\n  toggle_action: \u003e\n     (current_state, entity) =\u003e {\n       const service = current_state === 'on' ? 'turn_off' : 'turn_on';\n       return this.call_service('fan', service, { entity_id: entity.entity_id });\n     }\n ``` \n\n#### Indicators\n\n\u003e The indicators display additional information on the card, for example, you can display humidity, depth, temperature, etc.  \n\u003e The default configuration for `zhimi.humidifier.cb1`  uses three indicators depth, temperature, humidity.\n\u003e [zhimi.humidifier.cb1 indicators](#default-indicators)\n\n\u003e Adding a simple indicator:\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nindicators:\n  test:\n    icon: mdi:water\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.humidity\n```\n##### indicator functions\n\n\u003e Consider configuring an indicator using javascript\n\u003e Functions available for the indicator:  \n\n| Name | Type | execution context | arguments | return type |\n|------|------|-------------------|-----------|-------------|\n|`source:mapper` | function | indicator config | value, entity, humidifier_entity | any\n|`icon:template` | function | indicator config | value, entity, humidifier_entity | string\n|`icon:style` | function | indicator config | value, entity, humidifier_entity | object\n\n`value` - current indicator value  \n`entity` - indicator entity  \n`humidifier_entity` - humidifier entity\n\n##### source mapper\n\n\u003e Using the mapper function, you can change the indicator value:\n\u003e For zhimi.humidifier.cb1, a maximum depth value of 125 is used, which is 4 liters of tank,\n\u003e let's get how much water is left in liters or in percent\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nindicators:\n  depth:\n    icon: 'mdi:tray-full'\n    unit: '%'\n    round: 0\n    # variable used in mapper\n    max_value: 125\n    # variable used in mapper\n    volume: 4\n    # variable used in mapper\n    type: 'percent'\n    source:\n      attribute: depth\n      mapper: \u003e \n        (val) =\u003e {\n          const value = (100 * (val || 0)) / this.max_value;\n          return this.type === 'liters' ? (value * this.volume) / 100 : value;\n        }\n```\n\n##### icon template, style\n\n\u003e The indicator icon can be calculated dynamically\n  for example:\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nindicators:\n  depth:\n    icon:\n      template: \u003e\n        (value) =\u003e {\n          if (value === 0)\n            return 'mdi:tray';\n\n          if (value \u003c= 20)\n            return 'mdi:tray-minus';\n\n          return 'mdi:tray-full';\n        }\n      style: \u003e\n        (value) =\u003e {\n          if (value === 0)\n            return { color: 'red' };\n\n          if (value \u003c= 20)\n            return { color: '#FD451D' };\n\n          return {};\n        }\n    unit: '%'\n    round: 0\n    # variable used in mapper\n    max_value: 125\n    # variable used in mapper\n    volume: 4\n    # variable used in mapper\n    type: 'liters'\n    source:\n      attribute: depth\n      mapper: \u003e \n        (val) =\u003e {\n          const value = (100 * (val || 0)) / this.max_value;\n          return this.type === 'liters' ? (value * this.volume) / 100 : value;\n        }\n```\n\n##### default-indicators\n\n\u003e The plugin is configured by default for zhimi.humidifier.cb1 and 3 default indicators are available in it temperature, humidity, depth\n\u003e Their configuration looks like this:\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nindicators:\n  depth:\n    icon: 'mdi:tray-full'\n    unit: '%'\n    round: 0\n    order: 0\n    max_value: 125\n    volume: 4\n    type: 'percent'\n    source:\n      attribute: depth\n      mapper: \u003e\n        (val) =\u003e {\n          const value = (100 * (val || 0)) / this.max_value;\n          return this.type === 'liters' ? (value * this.volume) / 100 : value;\n        }\n  temperature:\n    icon: 'mdi:thermometer-low'\n    unit: '°C'\n    round: 1\n    order: 1\n    source:\n      attribute: temperature\n  humidity:\n    icon: 'mdi:water'\n    unit: '%'\n    round: 1\n    order: 2\n    source:\n      attribute: humidity\n```\n\n\u003e You can override the default indicators or even hide them and add your own\n\u003e We will display the depth value in liters and change the humidity icon as well as hide the temperature:\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nindicators:\n  depth:\n    unit: 'L'\n    type: 'liters'\n  humidity:\n    icon: 'mdi:water-outline'\n  temperature:\n    hide: on\n```\n\n#### Buttons\n\n\u003e You can add various buttons, supported types: button and dropdown\n\n##### buttons functions\n\n| Name | Type | execution context | arguments | return type |\n|------|------|-------------------|-----------|-------------|\n|`state:mapper` | function | button config | state, entity, humidifier_entity | any\n|`source:__filter` | function | button config | state, entity, humidifier_entity | object({ id..., name... }) array\n|`active` | function | button config | state, entity, humidifier_entity | boolean\n|`disabled` | function | button config | state, entity, humidifier_entity | boolean\n|`style` | function | button config | state, entity, humidifier_entity | object\n|`toggle_action` | function | button config | state, entity, humidifier_entity | promise\n|`change_action` | function | button config | selected, state, entity, humidifier_entity | promise\n\n`state` - current button state value  \n`entity` - button entity  \n`humidifier_entity` - humidifier entity  \n`source` - dropdown source object array: [ { id: 'id', name: 'name' }, ... ]  \n`selected` -  selected dropdown value  \n\n**execution context methods:**  \n\n| Name | arguments | description | return type |\n|------|-----------|-------------|-------------|\n|`toggle_state` | sate | toggle state, example: `this.toggle_state('on') =\u003e off`  | string\n|`call_service` | domain, service, options, | call Home Assistant service | promise \n\n\n##### default buttons\n\n\u003e The following buttons are added to the default configuration: dry, mode, led, buzzer, child_lock\n\u003e These buttons are configured for zhimi.humidifier.cb1\n\u003e It looks like this:\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nbuttons:\n  dry:\n    icon: 'mdi:weather-sunny'\n    order: 0\n    state:\n      attribute: dry\n      # the dry attribute is of type boolean, for the button the state should be on/off/closed/locked/unavailable/unknown \n      mapper: \"(state) =\u003e (state ? 'on' : 'off')\"\n      # service is used xiaomi_miio.fan_set_dry_on or xiaomi_miio.fan_set_dry_off\n    toggle_action: \u003e\n        (state, entity) =\u003e {\n          const service = state === 'on' ? 'fan_set_dry_off' : 'fan_set_dry_on';\n          const options = { entity_id: entity.entity_id };\n          return this.call_service('xiaomi_miio', service, options);\n        }\n  # dropdown example\n  mode:\n    icon: 'mdi:fan'\n    order: 1\n    type: dropdown\n    state:\n      attribute: mode\n    source:\n      auto: auto\n      silent: silent\n      medium: medium\n      high: high\n    # The button will light up when the humidifier is on.\n    active: \"(state, entity) =\u003e (entity.state !== 'off')\"\n    # the button will be locked when depth is 0\n    # zhimi.humidifier.cb1 does not allow changing the mode when there is no water\n    disabled: \"(state, entity) =\u003e (entity.attributes.depth === 0)\"\n    # using service: fan.set_speed\n    change_action: \u003e\n      (selected, state, entity) =\u003e {\n        const options = { entity_id: entity.entity_id, speed: selected };\n        return this.call_service('fan', 'set_speed', options);\n      }\n  led:\n    icon: mdi:lightbulb-on-outline\n    order: 2\n    type: dropdown\n    state:\n      attribute: led_brightness\n    source:\n      0: Bright\n      1: Dim\n      2: Off\n    # button is active while any state except 2 is selected\n    active: \"state =\u003e (state !== 2 \u0026\u0026 state !== '2')\"\n    # using service: xiaomi_miio.fan_set_led_brightness\n    change_action: \u003e\n      (selected, state, entity) =\u003e {\n        const options = { entity_id: entity.entity_id, brightness: selected };\n        return this.call_service('xiaomi_miio', 'fan_set_led_brightness', options);\n      }\n  buzzer:\n    icon: 'mdi:bell-outline'\n    order: 3\n    state:\n      attribute: buzzer\n      mapper: \"(state) =\u003e (state ? 'on' : 'off')\"\n      # using service: xiaomi_miio.fan_set_buzzer_on and xiaomi_miio.fan_set_buzzer_off\n    toggle_action: \u003e\n        (state, entity) =\u003e {\n          const service = state === 'on' ? 'fan_set_buzzer_off' : 'fan_set_buzzer_on';\n          const options = { entity_id: entity.entity_id };\n          return this.call_service('xiaomi_miio', service, options);\n        }\n  child_lock:\n    icon: 'mdi:lock'\n    order: 4\n    state:\n      attribute: child_lock\n      mapper: \"(state) =\u003e (state ? 'on' : 'off')\"\n      # using service: xiaomi_miio.fan_set_child_lock_on and xiaomi_miio.fan_set_child_lock_off\n    toggle_action: \u003e\n        (state, entity) =\u003e {\n          const service = state === 'on' ? 'fan_set_child_lock_off' : 'fan_set_child_lock_on';\n          const options = { entity_id: entity.entity_id };\n          return this.call_service('xiaomi_miio', service, options);\n        }\n```\n\n\u003e You can override the default buttons or even hide them and add your own\n\u003e Let's add translations for the mode and led buttons and hide the child_lock button\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nbuttons:\n  mode:\n    source:\n      auto: Авто\n      silent: Тихий\n      medium: Средний\n      high: Высокий\n  led:\n    source:\n      0: Ярко\n      1: Тускло\n      2: Выкл\n  child_lock:\n    hide: on\n```\n\n\u003e For some models of humidifiers, there are only two button backlight modes,\n\u003e let's change our drop-down list to a button for an example.\n\u003e it can be done in different ways, consider a few:\n\n\u003e 1. override current led button\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nbuttons:\n  led:\n    type: 'button'\n    on_states: [0, 1]\n    off_value: 2\n    on_value: 1\n    state:\n      attribute: led_brightness\n      mapper: \"(value) =\u003e (this.on_states.includes(value) ? 'on' : 'off')\"\n    toggle_action: \u003e\n        (state, entity) =\u003e {\n          const value = state === 'on' ? this.off_value : this.on_value;\n          const options = { entity_id: entity.entity_id, brightness: value };\n          return this.call_service('xiaomi_miio', 'fan_set_led_brightness', options);\n        }\n```\n\n\u003e 2. Hide led button and add new\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nbuttons:\n  led:\n    hide: on\n  new_led:\n    icon: 'mdi:lightbulb-on-outline'\n    type: 'button'\n    order: 2\n    on_states: [0, 1]\n    off_value: 2\n    on_value: 1\n    state:\n      attribute: led_brightness\n      mapper: \"(value) =\u003e (this.on_states.includes(value) ? 'on' : 'off')\"\n    toggle_action: \u003e\n      (state, entity) =\u003e {\n        const value = state === 'on' ? this.off_value : this.on_value;\n        const options = { entity_id: entity.entity_id, brightness: value };\n        return this.call_service('xiaomi_miio', 'fan_set_led_brightness', options);\n      }\n```\n\n#### toggle button\n\n\u003e toggle button configuration\n\n\u003e For example, we want to always show control buttons, and toggle button hide:\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntoggle:\n  default: on\n  hide: on\n```\n\n#### secondary info\n\n```yaml\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nsecondary_info: last-changed\n\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\nsecondary_info: #default type mode, changing icon\n  icon: 'mdi:fan'\n```\n\n#### group\n\n\u003e To display entities inside the container, set the group configuration parameter to `on`\n\n```yaml\ntype: entities\ntitle: Climate\nshow_header_toggle: true\nstate_color: true\nentities:\n  - entity: fan.xiaomi_miio_device\n    type: custom:mini-humidifier\n    group: on\n```\n\n#### Action object options examples\n\n```yaml\n# toggle example\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntap_action:\n  action: toggle\n\n# call-service example\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntap_action:\n  action: call-service\n  service: xiaomi_miio.fan_set_led_brightness\n  service_data:\n    brightness: 1\n\n# navigate example\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntap_action:\n  action: navigate\n  navigation_path: '/lovelace/4'\n\n# navigate example\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntap_action:\n  action: url\n  url: 'https://www.google.com/'\n\n# none example\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntap_action: none\n\n# more-info for custom entity example\ntype: custom:mini-humidifier\nentity: fan.xiaomi_miio_device\ntap_action:\n  action: more-info\n  entity: sensor.humidity\n```\n\n## Development\n*If you plan to contribute back to this repo, please fork \u0026 create the PR against the [dev](https://github.com/artem-sedykh/mini-humidifier/tree/dev) branch.*\n\n**Clone this repository into your `config/www` folder using git.**\n\n ```console\n$ git clone https://github.com/artem-sedykh/mini-humidifier.git\n```\n\n**Add a reference to the card in your `configuration.yaml`.**\n\n```yaml\nresources:\n  - url: /local/mini-humidifier/dist/mini-humidifier-bundle.js\n    type: module\n```\n\n### Instructions\n\n*Requires `nodejs` \u0026 `npm`*\n\n1. Move into the `mini-humidifier` repo, checkout the *dev* branch \u0026 install dependencies.\n```console\n$ cd mini-humidifier-dev \u0026\u0026 git checkout dev \u0026\u0026 npm install\n```\n\n2. Make changes to the source\n\n3. Build the source by running\n```console\n$ npm run build\n```\n\n4. Refresh the browser to see changes\n\n    *Make sure cache is cleared or disabled*\n\n5. *(Optional)* Watch the source and automatically rebuild on save\n```console\n$ npm run watch\n```\n\n*The new `mini-humidifier-bundle.js` will be build and ready inside `/dist`.*\n\n\n## Getting errors?\nMake sure you have `javascript_version: latest` in your `configuration.yaml` under `frontend:`.\n\nMake sure you have the latest version of `mini-humidifier-bundle.js`.\n\nIf you have issues after updating the card, try clearing your browsers cache or restart Home Assistant.\n\nIf you are getting \"Custom element doesn't exist: mini-humidifier\" or running older browsers try replacing `type: module` with `type: js` in your resource reference, like below.\n\n```yaml\nresources:\n  - url: ...\n    type: js\n```\n\n## Inspiration\n- [@kalkih](https://github.com/kalkih) - [mini-media-player](https://github.com/kalkih/mini-media-player)\n\n## License\nThis project is under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartem-sedykh%2Fmini-humidifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartem-sedykh%2Fmini-humidifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartem-sedykh%2Fmini-humidifier/lists"}