{"id":13576228,"url":"https://github.com/artem-sedykh/mini-climate-card","last_synced_at":"2025-10-10T03:47:48.433Z","repository":{"id":37906888,"uuid":"268163975","full_name":"artem-sedykh/mini-climate-card","owner":"artem-sedykh","description":"Minimalistic climate card for Home Assistant Lovelace UI","archived":false,"fork":false,"pushed_at":"2025-02-10T22:04:31.000Z","size":961,"stargazers_count":302,"open_issues_count":36,"forks_count":19,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-05T05:33:11.884Z","etag":null,"topics":["automation","climate","climate-entity","custom","hacktoberfest","hacktoberfest2021","hassio","home-assistant","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,"publiccode":null,"codemeta":null}},"created_at":"2020-05-30T21:39:59.000Z","updated_at":"2025-03-11T13:06:41.000Z","dependencies_parsed_at":"2023-12-11T13:26:57.777Z","dependency_job_id":"4e5341a3-79f7-4063-873e-4ddeb973a8ae","html_url":"https://github.com/artem-sedykh/mini-climate-card","commit_stats":{"total_commits":113,"total_committers":10,"mean_commits":11.3,"dds":0.584070796460177,"last_synced_commit":"a249b2946f55995e87bfc78aec0472044d2706f2"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/artem-sedykh/mini-climate-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-climate-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-climate-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-climate-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-climate-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artem-sedykh","download_url":"https://codeload.github.com/artem-sedykh/mini-climate-card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artem-sedykh%2Fmini-climate-card/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","climate","climate-entity","custom","hacktoberfest","hacktoberfest2021","hassio","home-assistant","lovelace","lovelace-ui"],"created_at":"2024-08-01T15:01:08.205Z","updated_at":"2025-10-10T03:47:48.407Z","avatar_url":"https://github.com/artem-sedykh.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Dashboard Cards"],"sub_categories":["🌡️ Climate cards"],"readme":"# Mini Climate Card\n\n[![Last Version](https://img.shields.io/github/package-json/v/artem-sedykh/mini-climate-card?label.svg=release)](https://github.com/artem-sedykh/mini-climate-card/releases/latest)\n[![Build Status](https://travis-ci.com/artem-sedykh/mini-climate-card.svg?branch=master)](https://travis-ci.com/artem-sedykh/mini-climate-card)\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/hacs/integration)\n\nA minimalistic yet customizable climate card for [Home Assistant](https://home-assistant.io/) Lovelace UI.  \nPlease ⭐️ this repo if you find it useful  \n\n\u003cp style=\"align-content: center\"\u003e\n  \u003cimg alt=\"card preview\" src=\"https://raw.githubusercontent.com/artem-sedykh/mini-climate-card/master/images/preview.png\" /\u003e\n\u003c/p\u003e\n\n## Notice\nv2 is only compatible from version 2022.11 onwards \n\n## Install\n\n*This card is available in [HACS](https://github.com/hacs/integration) (Home Assistant Community Store)*\n\n### Simple install\n\n1. Download and copy `mini-climate-card-bundle.js` from the [latest release](https://github.com/artem-sedykh/mini-climate-card/releases/latest) into your `config/www` directory.\n\n2. Add a reference to `mini-climate-card-bundle.js` inside your `ui-lovelace.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-climate-card-bundle.js?v=2.21\n      type: module\n  ```\n\n### CLI install\n\n1. Move into your `config/www` directory\n\n2. Grab `mini-climate-card-bundle.js`\n\n  ```console\n  $ wget https://github.com/artem-sedykh/mini-climate-card/releases/download/v2.2.1/mini-climate-card-bundle.js\n  ```\n\n3. Add a reference to `mini-climate-card-bundle.js` inside your `ui-lovelace.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-climate-card-bundle.js?v=2.2.1\n      type: module\n  ```\n\n## Updating\n1. Find your `mini-climate-card-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-climate-card/releases/latest).\n\n3. Add the new version number to the end of the cards reference url in your `ui-lovelace.yaml` like below.\n\n  ```yaml\n  resources:\n    - url: /local/mini-climate-card-bundle.js?v=2.2.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-climate`                                                                                         |\n| entity                                    | string                              | **required** | v1.0.1 | An entity_id from an entity within the `climate` domain                                                       |\n| name                                      | string                              | optional     | v1.0.1 | Override the entities friendly name                                                                           |\n| group                                     | boolean                             | optional     | v1.0.2 | Removes border, paddings, background color and box-shadow                                                     |\n| icon                                      | string                              | optional     | v1.0.1 | Specify a custom icon from any of the available mdi icons                                                     |\n| swap_temperatures                         | boolean                             | optional     | V2.1.1 | Swap the current and the target temperature in the card                                                       |\n| hide_current_temperature                  | boolean                             | optional     | V2.1.2 | Hide the current temperature in the card                                                                      |\n| hide_current_temperature                  | function                            | optional     | V2.5.0 | Custom hide the current temperature in the card function                                                      |\n| **toggle**                                | object                              | optional     | v1.0.2 | Show/hide bottom buttons toggle button                                                                        |\n| toggle: `icon`                            | string                              | optional     | v1.0.2 | Custom icon, default value `mdi:dots-horizontal`                                                              |\n| toggle: `hide`                            | boolean                             | optional     | v1.0.2 | Hide toggle button, default value `False`                                                                     |\n| toggle: `hide`                            | function                            | optional     | v2.5.0 | Custom hide toggle button function                                                                            |\n| toggle: `default`                         | boolean                             | optional     | v1.0.2 | Default toggle button state, default value `False`                                                            |\n| **secondary_info**                        | object                              | optional     | v1.1.0 | secondary_info config. [secondary info examples](#secondary-info)                                             |\n| secondary_info: `type`                    | string                              | optional     | v1.1.0 | Available types: `last-changed, last-updated (v2.2.0), fan-mode, fan-mode-dropdown, hvac-mode, hvac-action`   |\n| secondary_info: `icon`                    | string                              | optional     | v1.1.0 | Icon for types: `fan-mode, fan-mode-dropdown, hvac-mode`, `hvac-action`                                       |\n| secondary_info: `hide`                    | boolean                             | optional     | v2.3.0 | Hide secondary_info, default value `False`                                                                    |\n| secondary_info: `hide`                    | function                            | optional     | v2.5.0 | Custom hide secondary_info function.                                                                          |\n| secondary_info: `source`                  | object                              | optional     | v1.2.1 | Source available types: `hvac-action`                                                                         |\n| secondary_info: `source:{item_name}`      | object                              | optional     | v1.2.1 | Source item name                                                                                              |\n| secondary_info: `source:{item_name}:icon` | object                              | optional     | v1.2.1 | Specify a custom icon from any of the available mdi icons                                                     |\n| secondary_info: `source:{item_name}:name` | object                              | optional     | v1.2.1 | Display name                                                                                                  |\n| **temperature**                           | object                              | optional     | v1.0.1 | Current temperature configuration. [temperature examples](#temperature)                                       |\n| temperature: `unit`                       | string                              | optional     | v1.0.1 | Display unit, default `°C`                                                                                    |\n| temperature: `round or fixed`             | number                              | optional     | v1.2.2 | Rounding or fixed value, default `round: 1`                                                                   |\n| temperature: `source`                     | object                              | optional     | v1.0.1 | Data source for target temperature                                                                            |\n| temperature: `source:entity`              | string                              | optional     | v1.0.1 | entity_id, default current climate entity_id                                                                  |\n| temperature: `source:attribute`           | string                              | optional     | v1.0.1 | Default `current_temperature`                                                                                 |\n| **target_temperature**                    | object                              | optional     | v1.0.1 | Target temperature configuration. [target_temperature examples](#target_temperature)                          |\n| target_temperature: `icons`               | object                              | optional     | v1.0.1 | Icons for temperature change buttons                                                                          |\n| target_temperature: `icons:up`            | string                              | optional     | v1.0.1 | Up icon, default `mdi:chevron-up`                                                                             |\n| target_temperature: `icons:down`          | string                              | optional     | v1.0.1 | Down icon, default `mdi:chevron-down`                                                                         |\n| target_temperature: `unit`                | string                              | optional     | v1.0.1 | Display unit, default `°C`                                                                                    |\n| target_temperature: `min`                 | number                              | optional     | v1.0.1 | Minimum temperature, the default value is taken from the attribute `min_temp` of the given entity             |\n| target_temperature: `max`                 | number                              | optional     | v1.0.1 | Maximum temperature, the default value is taken from the attribute `max_temp` of the given entity             |\n| target_temperature: `step`                | number                              | optional     | v1.0.1 | Temperature change step, the default value is taken from the attribute `target_temp_step` of the given entity |\n| target_temperature: `source`              | object                              | optional     | v1.0.1 | Data source for target temperature                                                                            |\n| target_temperature: `source:entity`       | string                              | optional     | v1.0.1 | entity_id, default current climate entity_id                                                                  |\n| target_temperature: `source:attribute`    | string                              | optional     | v1.0.1 | Default `temperature`                                                                                         |\n| target_temperature: `change_action`       | function                            | optional     | v1.0.1 | Custom temperature change function                                                                            |\n| **hvac_mode**                             | object                              | optional     | v1.0.1 | HVAC mode. [hvac_mode examples](#hvac_mode)                                                                   |\n| hvac_mode: `style`                        | function                            | optional     | v1.0.1 | Custom style                                                                                                  |\n| hvac_mode: `change_action`                | function                            | optional     | v1.0.1 | Custom hvac_mode change function                                                                              |\n| hvac_mode: `state`                        | object                              | optional     | v1.0.1 | Config to get hvac_mode state                                                                                 |\n| hvac_mode: `hide`                         | boolean                             | optional     | v1.2.3 | Hide hvac_mode, default value `False`                                                                         |\n| hvac_mode: `hide`                         | function                            | optional     | v2.5.0 | Custom hide hvac_mode function                                                                                |\n| hvac_mode: `state:entity`                 | string                              | optional     | v1.1.0 | hvac_mode entity_id                                                                                           |\n| hvac_mode: `state:attribute`              | string                              | optional     | v1.1.0 | hvac_mode attribute                                                                                           |\n| hvac_mode: `state:mapper`                 | function                            | optional     | v1.1.0 | State processing function                                                                                     |\n| hvac_mode: `active`                       | function                            | optional     | v1.1.0 | Active function                                                                                               |\n| hvac_mode: `source`                       | object                              | optional     | v1.0.1 | Data                                                                                                          |\n| hvac_mode: `source:__filter`              | function                            | optional     | v1.1.0 | Filter function                                                                                               |\n| hvac_mode: `source:item`                  | object                              | optional     | v1.0.1 | `item` - mode name e.g. cool, heat, off, etc.                                                                 |\n| hvac_mode: `source:item:icon`             | string                              | optional     | v1.0.1 | Specify a custom icon from any of the available mdi icons                                                     |\n| hvac_mode: `source:item:name`             | string                              | optional     | v1.0.1 | Display name                                                                                                  |\n| hvac_mode: `source:item:hide`             | boolean                             | optional     | v2.5.0 | Hide source, default value `False`                                                                            |\n| hvac_mode: `source:item:order`            | number                              | optional     | v1.2.5 | Sort order                                                                                                    |\n| **fan_mode**                              | object                              | optional     | v1.0.1 | Fan operation for climate device. [fan_mode examples](#fan_mode)                                              |\n| fan_mode: `icon`                          | string                              | optional     | v1.0.1 | Specify a custom icon from any of the available mdi icons                                                     |\n| fan_mode: `order`                         | number                              | optional     | v1.0.1 | Sort order, default value `0`                                                                                 |\n| fan_mode: `location`                      | string                              | optional     | v1.0.1 | Allows you to display buttons on the main panel, types `main, bottom`, default `bottom`                       |\n| fan_mode: `hide`                          | number                              | optional     | v1.0.1 | Hide button, default value `False`                                                                            |\n| fan_mode: `hide`                          | function                            | optional     | v2.5.0 | Custom hide button function                                                                                   |\n| fan_mode: `style`                         | function                            | optional     | v1.0.1 | Style                                                                                                         |\n| fan_mode: `disabled`                      | function                            | optional     | v1.0.1 | Disabled function                                                                                             |\n| fan_mode: `active`                        | function                            | optional     | v1.0.1 | Active                                                                                                        |\n| fan_mode: `change_action`                 | function                            | optional     | v1.0.1 | Custom fan_mode change function                                                                               |\n| fan_mode: `state`                         | object                              | optional     | v1.0.1 | Config to get fan_mode state                                                                                  |\n| fan_mode: `state:entity`                  | string                              | optional     | v1.0.1 | fan_mode entity_id                                                                                            |\n| fan_mode: `state:attribute`               | string                              | optional     | v1.0.1 | fan_mode attribute, default `fan_mode`                                                                        |\n| fan_mode: `source`                        | object                              | optional     | v1.0.1 | Source for drop down list                                                                                     |\n| fan_mode: `source:item`                   | string                              | optional     | v1.0.1 | `item` - mode name e.g. auto, low, medium...                                                                  |\n| fan_mode: `source:__filter`               | function                            | optional     | v1.0.1 | Source filter                                                                                                 |\n| **indicators**                            | object                              | optional     | v1.0.1 | Any indicators, [examples](#indicators)                                                                       |\n| indicators: `name`                        | object                              | optional     | v1.0.1 | The name of your indicator see [examples](#indicators)                                                        |\n| indicators: `name:icon`                   | string                              | optional     | v1.0.1 | Specify a custom icon from any of the available mdi icons                                                     |\n| indicators: `name:icon`                   | object                              | optional     | v1.0.1 | Icon object                                                                                                   |\n| indicators: `name:icon:template`          | function                            | optional     | v1.0.1 | Icon template function                                                                                        |\n| indicators: `name:icon:style`             | function                            | optional     | v1.0.1 | Styles                                                                                                        |\n| indicators: `name:value`                  | object                              | optional     | v1.0.1 | Value object                                                                                                  |\n| indicators: `name:value:style`            | function                            | optional     | v1.0.1 | Styles                                                                                                        |\n| indicators: `name:unit`                   | string                              | optional     | v1.0.1 | Display unit                                                                                                  |\n| indicators: `name:unit`                   | string                              | optional     | v1.0.1 | Display unit                                                                                                  |\n| indicators: `name:round`                  | number                              | optional     | v1.0.1 | Rounding number value                                                                                         |\n| indicators: `name:hide`                   | boolean                             | optional     | v2.5.0 | Hide indicator, default value `False`                                                                         |\n| indicators: `name:hide`                   | function                            | optional     | v2.5.0 | Custom hide indicator function                                                                                |\n| indicators: `name:source`                 | number                              | optional     | v1.0.1 | Data source                                                                                                   |\n| indicators: `name:source:entity`          | string                              | optional     | v1.0.1 | Indicator entity_id                                                                                           |\n| indicators: `name:source:attribute`       | string                              | optional     | v1.0.1 | Entity attribute                                                                                              |\n| indicators: `name:source:mapper`          | function                            | optional     | v1.0.1 | Value processing function                                                                                     |\n| indicators: `name:tap_action`             | [action object](#tap-action-object) | true         | v1.1.0 | Action on click/tap                                                                                           |\n| **buttons**                               | object                              | optional     | v1.0.1 | Any buttons, [example](#buttons)                                                                              |\n| buttons: `name`                           | object                              | optional     | v1.0.1 | The name of your button see examples                                                                          |\n| buttons: `name:icon`                      | string                              | optional     | v1.0.1 | Specify a custom icon from any of the available mdi icons                                                     |\n| buttons: `name:type`                      | string                              | optional     | v1.0.1 | `dropdown` or `button` default `button`                                                                       |\n| buttons: `name:order`                     | number                              | optional     | v1.0.1 | Sort order                                                                                                    |\n| buttons: `name:location`                  | string                              | optional     | v1.2.1 | Allows you to display buttons on the main panel, types `main, bottom`, default `bottom`                       |\n| buttons: `name:state`                     | object                              | optional     | v1.0.1 | Config to get button state                                                                                    |\n| buttons: `name:state:entity`              | string                              | optional     | v1.0.1 | Button entity_id                                                                                              |\n| buttons: `name:state:attribute`           | string                              | optional     | v1.0.1 | Entity attribute                                                                                              |\n| buttons: `name:state:mapper`              | function                            | optional     | v1.0.1 | State processing function                                                                                     |\n| buttons: `name:disabled`                  | function                            | optional     | v1.0.1 | Calc disabled button                                                                                          |\n| buttons: `name:hide`                      | boolean                             | optional     | v2.5.0 | Hide button, default value `False`                                                                            |\n| buttons: `name:hide`                      | function                            | optional     | v2.5.0 | Custom hide button function                                                                                   |\n| buttons: `name:active`                    | function                            | optional     | v1.0.1 | For type `dropdown`                                                                                           |\n| buttons: `name:source`                    | object                              | optional     | v1.0.1 | For type `dropdown`                                                                                           |\n| buttons: `name:source:item`               | string                              | optional     | v1.0.1 | Source item, format horizontal: horizontal                                                                    |\n| buttons: `name:source:__filter`           | function                            | optional     | v1.0.1 | Filter function                                                                                               |\n| buttons: `name:change_action`             | function                            | optional     | v1.0.1 | For type `dropdown`                                                                                           |\n| buttons: `name:toggle_action`             | function                            | optional     | v1.0.1 | For type `button`                                                                                             |\n| buttons: `name:style`                     | function                            | optional     | v1.0.1 | Styles                                                                                                        |\n| tap_action                                | [action object](#tap-action-object) | true         | v1.0.4 | Action on click/tap, [tap_action](#tap-action-example)                                                        |\n| scale                                     | number                              | optional     | v1.0.1 | UI scale modifier, default is `1`                                                                             |\n\n#### temperature\n\n\u003e Functions available:\n\n| Name                       | Type     | execution context | arguments                                               | return type |\n|----------------------------|----------|-------------------|---------------------------------------------------------|-------------|\n| `hide_current_temperature` | function |                   | value, entity, target_entity, climate_entity, hvac_mode | boolean     |\n\n`value` - temperature value  \n`entity` - temperature entity  \n`target_entity` - target temperature entity  \n`climate_entity` - climate entity\n`hvac_mode` - current hvac_mode\n\n\u003e Configuration example for the temperature:  \n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nhide_current_temperature: \u003e\n  (value) =\u003e value \u003c 20\ntemperature:\n  unit: '°C'\n  round: 1\n  # use an external temperature sensor\n  source:\n    entity: sensor.temperature\n``` \n\n#### target_temperature\n\n\u003e Functions available for the target_temperature:  \n\n| Name            | Type     | execution context         | arguments                     | return type |\n|-----------------|----------|---------------------------|-------------------------------|-------------|\n| `change_action` | function | target_temperature config | value, entity, climate_entity | promise     |\n\n`value` - target_temperature value  \n`entity` - target_temperature entity  \n`climate_entity` - climate entity\n\n**execution context methods:**  \n\n| Name           | arguments                 | description                                             | return type |\n|----------------|---------------------------|---------------------------------------------------------|-------------|\n| `toggle_state` | state                     | 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_temperature:  \n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\ntarget_temperature:\n  icons:\n    up: mdi:chevron-up\n    down: mdi:chevron-down\n  unit: '°C'\n  min: 16\n  max: 31\n  step: 0.5\n  change_action: \u003e\n    (value, entity) =\u003e this.call_service('climate', 'set_temperature', { entity_id: entity.entity_id, temperature: value })\n``` \n\n#### hvac_mode\n\n\u003e Functions available for the hvac_mode:  \n\n| Name              | Type     | execution context | arguments                             | return type                          |\n|-------------------|----------|-------------------|---------------------------------------|--------------------------------------|\n| `state:mapper`    | function | hvac_mode config  | state, entity, climate_entity         | any                                  |\n| `active`          | function | hvac_mode config  | state, entity, climate_entity         | boolean                              |\n| `change_action`   | function | hvac_mode config  | selected, entity, climate_entity      | any                                  |\n| `style`           | function | hvac_mode config  | value, entity, climate_entity         | object                               |\n| `source:__filter` | function | hvac_mode config  | source, state, entity, climate_entity | object({ id..., name...,... }) array |\n| `hide`            | function | hvac_mode config  | state, entity, climate_entity         | boolean                              |\n\n`state` - current hvac state  \n`selected` - selected value  \n`entity` - hvac entity  \n`climate_entity` - current climate entity  \n\n**execution context methods:**  \n\n| Name           | arguments                 | description                                             | return type |\n|----------------|---------------------------|---------------------------------------------------------|-------------|\n| `toggle_state` | state                     | 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 hvac_mode:  \n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nhvac_mode:\n  style: \"(value, entity) =\u003e ({ color: 'black !important' })\"\n  hide: \u003e\n    (state) =\u003e state === 'dry'\n  source:\n    'off':\n      icon: mdi:power\n      name: 'off'\n    heat:\n      icon: mdi:weather-sunny\n      name: heat\n    auto:\n      icon: mdi:cached\n      name: auto\n    cool:\n      icon: mdi:snowflake\n      name: cool\n    dry:\n      icon: mdi:water\n      name: dry\n    fan_only:\n      icon: mdi:fan\n      name: fan\n  change_action: \u003e\n    (selected, entity) =\u003e this.call_service('climate', 'set_hvac_mode', { entity_id: entity.entity_id, hvac_mode: selected })\n``` \n\n#### fan_mode\n\n\u003e Functions available for the fan_mode:  \n\n| Name              | Type     | execution context | arguments                                         | return type                      |\n|-------------------|----------|-------------------|---------------------------------------------------|----------------------------------|\n| `state:mapper`    | function | button config     | state, entity, climate_entity, hvac_mode          | any                              |\n| `source:__filter` | function | button config     | source, state, entity, climate_entity, hvac_mode  | object({ id..., name... }) array |\n| `active`          | function | button config     | value, entity, climate_entity, hvac_mode          | boolean                          |\n| `disabled`        | function | button config     | value, entity, climate_entity, hvac_mode          | boolean                          |\n| `style`           | function | button config     | value, entity, climate_entity, hvac_mode          | object                           |\n| `change_action`   | function | button config     | selected_value, entity, climate_entity, hvac_mode | promise                          |\n| `hide`            | function | button config     | state, entity, climate_entity, hvac_mode          | boolean                          |\n\n`state` - current button state value  \n`entity` - button entity  \n`climate_entity` - climate entity  \n`hvac_mode` - current hvac_mode  \n`source` - dropdown source object array: [ { id: 'id', name: 'name' }, ... ]  \n`selected_value` -  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\u003e Configuration example for the fan_mode:  \n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nfan_mode:\n  hide: \u003e\n    (state) =\u003e state === 'low'\n  icon: mdi:fan\n  order: 0\n  active: (state, entity) =\u003e entity.state !== 'off'\n  source:\n    auto: auto\n    low: low\n    medium: medium\n    high: high\n    # filter usage example\n    __filter: \u003e\n      (source, state, entity) =\u003e entity.attributes\n        .fan_modes_al.map(fan_mode =\u003e source.find(s =\u003e s.id === fan_mode))\n        .filter(fan_mode=\u003efan_mode)\n  change_action: \u003e\n    (selected, state, entity) =\u003e this.call_service('climate', 'set_fan_mode', { entity_id: entity.entity_id, fan_mode: selected })\n``` \n#### Indicators\n\n\u003e The indicators display additional information on the card, for example, you can display humidity, consumption, etc.  \n\u003e Adding a simple indicator:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nindicators:\n  humidity:\n    icon: mdi:water\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.humidity\n```\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, climate_entity, hvac_mode | any         |\n| `icon:template` | function | indicator config  | value, entity, climate_entity, hvac_mode | string      |\n| `icon:style`    | function | indicator config  | value, entity, climate_entity, hvac_mode | object      |\n| `value:style`   | function | indicator config  | value, entity, climate_entity, hvac_mode | object      |\n| `hide`          | function | indicator config  | value, entity, climate_entity, hvac_mode | boolean     |\n\n`value` - current indicator value  \n`entity` - indicator entity  \n`climate_entity` - climate entity\n`hvac_mode` - current hvac_mode  \n\n##### source mapper\n\n\u003e Using the mapper function, you can change the indicator value:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nindicators:\n  power:\n    icon: mdi:power-plug\n    source:\n      values:\n        'on': 'power is on!'\n        'off': 'power is off!'\n      entity: switch.ac_power\n      # since the current execution context is an indicator config, we can use this.source.values to get values\n      mapper: value =\u003e this.source.values[value]\n      # example of using all function arguments\n      # mapper: \u003e\n      #   (value, entity, climate_entity, hvac_mode) =\u003e {\n      #     console.log(value);\n      #     console.log(entity);\n      #     console.log(climate_entity);\n      #     console.log(hvac_mode);\n      #     console.log(this);\n      #     return ...\n      #   }\n```\n\n##### icon template\n\n\u003e The indicator icon can be calculated dynamically\n  for example:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nindicators:\n  humidity:\n    icon:\n      template: \u003e\n        (value) =\u003e (value \u003e 30 ? 'mdi:weather-rainy' : 'mdi:water')\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.humidity\n```\n\n##### icon style\n\n\u003e You can also set custom styles.\n  for example:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nindicators:\n  humidity:\n    icon:\n      template: () =\u003e 'mdi:water'\n      style: \u003e\n        (value) =\u003e (value \u003e 30 ? { color: 'red'} : {})\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.humidity\n```\n\n##### value style\n\n\u003e You can also set custom styles.\n  for example:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nindicators:\n  humidity:\n    value:\n      style: \u003e\n        (value) =\u003e (value \u003e 30 ? { color: 'red'} : {})\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.humidity\n```\n\n##### Hide\n\n\u003e You can also hide based on state.\n  for example:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nindicators:\n  humidity:\n    hide: \u003e\n      (value) =\u003e value \u003c 20\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.humidity\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, climate_entity, hvac_mode          | any                              |\n| `source:__filter` | function | button config     | source, state, entity, climate_entity, hvac_mode  | object({ id..., name... }) array |\n| `active`          | function | button config     | value, entity, climate_entity, hvac_mode          | boolean                          |\n| `disabled`        | function | button config     | value, entity, climate_entity, hvac_mode          | boolean                          |\n| `style`           | function | button config     | value, entity, climate_entity, hvac_mode          | object                           |\n| `toggle_action`   | function | button config     | state, entity, climate_entity, hvac_mode          | promise                          |\n| `change_action`   | function | button config     | selected_value, entity, climate_entity, hvac_mode | promise                          |\n| `hide`            | function | button config     | state, entity, climate_entity, hvac_mode          | boolean                          |\n\n`state` - current button state value  \n`entity` - button entity  \n`climate_entity` - climate entity  \n`hvac_mode` - current hvac_mode  \n`source` - dropdown source object array: [ { id: 'id', name: 'name' }, ... ]  \n`selected_value` -  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##### dropdown\n\u003e Consider an example swing_mode configuration:\n\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nbuttons:\n  swing_mode:\n    type: dropdown\n    icon: mdi:approximately-equal\n    state:\n      attribute: swing_mode\n    active: state =\u003e state !== 'off'\n    source:\n      'off': Off\n      horizontal: On\n    change_action: \u003e\n      (selected, state, entity) =\u003e this.call_service('climate', 'set_swing_mode', { entity_id: entity.entity_id, swing_mode: selected })\n```\n\n##### button\n\u003e Consider the example of adding buttons:\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nbuttons:\n  power:\n    icon: mdi:power-plug\n    state:\n      entity: switch.ac_power\n# for the button type, if no toggle_action is specified, the switch.toggle method is called\n```\n\n```yaml\ntype: custom:mini-climate\nentity: climate.my_ac\nbuttons:\n  turbo:\n    icon: mdi:weather-hurricane\n    hide: \u003e\n      (state, entity) =\u003e !entity.attributes.turbo_al\n    state:\n      attribute: turbo\n      mapper: \"state =\u003e (state ? 'on': 'off')\"\n    disabled: (state, entity) =\u003e !entity.attributes.turbo_al\n    toggle_action: \u003e\n      (state) =\u003e this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: 'my_ac/turbo/set', retain: false, qos: 1 })\n```\n\n#### tap action object\n\n| Name            |  Type  |   Default   |                                    Options                                    | Description                                                                       |\n|-----------------|:------:|:-----------:|:-----------------------------------------------------------------------------:|-----------------------------------------------------------------------------------|\n| action          | string | `more-info` | `more-info` / `navigate` / `call-service` / `fire-dom-event` / `url` / `none` | 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.                                    |\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#### tap action example\n```yaml\n# toggle example\n# call-service example\ntype: custom:mini-climate\nentity: climate.my_ac\ntap_action:\n  action: call-service\n  service: climate.set_hvac_mode\n  service_data:\n    entity_id: climate.my_ac\n    hvac_mode: 'off'\n\n# fire-dom-event + browser mod example\ntype: custom:mini-climate\nentity: climate.my_ac\ntap_action:\n  action: fire-dom-event\n  browser_mod:\n    service: browser_mod.popup\n    data:\n      title: My title\n      content: test\n\n# navigate example\ntype: custom:mini-climate\nentity: climate.my_ac\ntap_action:\n  action: navigate\n  navigation_path: '/lovelace/4'\n\n# navigate example\ntype: custom:mini-climate\nentity: climate.my_ac\ntap_action:\n  action: url\n  url: 'https://www.google.com/'\n\n# none example\ntype: custom:mini-climate\nentity: climate.my_ac\ntap_action: none\n\n# more-info for custom entity example\ntype: custom:mini-climate\nentity: climate.my_ac\ntap_action:\n  action: more-info\n  entity: sensor.humidity\n```\n\n#### secondary info\n\n##### secondary info functions\n\n| Name   | Type     | execution context     | arguments                 | return type |\n|--------|----------|-----------------------|---------------------------|-------------|\n| `hide` | function | secondary info config | climate_entity, hvac_mode | boolean     |\n\n`climate_entity` - climate entity  \n`hvac_mode` - current hvac_mode\n\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info: last-changed\n\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info:\n  type: fan-mode\n  icon: 'mdi:fan'\n  hide: \u003e\n    (climate_entity) =\u003e !climate_entity.attributes.turbo_al\n\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info: hvac-mode\n```\n\n#### toggle\n\n##### toggle functions\n\n| Name   | Type     | execution context | arguments                 | return type |\n|--------|----------|-------------------|---------------------------|-------------|\n| `hide` | function | toggle config     | climate_entity, hvac_mode | boolean     |\n\n`climate_entity` - climate entity  \n`hvac_mode` - current hvac_mode\n\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\ntoggle:\n  default: true\n  icon: 'mdi:fan'\n  hide: \u003e\n    (climate_entity) =\u003e !climate_entity.attributes.turbo_al\n```\n\n##### hvac-action type\n\nBy default, translations from [ha frontend](https://github.com/home-assistant/frontend/blob/master/translations/frontend/en.json#L33)\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info:\n  type: hvac-action\n```\nbut you can customize your translations\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info:\n  type: hvac-action\n  source:\n    cooling: Охлаждение\n```\nYou can set your own icon for each hvac-action\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info:\n  type: hvac-action\n  source:\n    cooling:\n      icon: 'mdi:snowflake'\n      name: Охлаждение\n```\nYou can set your own icon for each hvac-action\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info:\n  type: hvac-action\n  source:\n    cooling:\n      icon: 'mdi:snowflake'\n      name: Охлаждение\n```\nOr you can use one permanent icon\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info:\n  type: hvac-action\n  icon: 'mdi:cached'\n```\n\n##### fan-mode-dropdown\n\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nsecondary_info: fan-mode-dropdown\n```\n![image](https://user-images.githubusercontent.com/861063/84180244-d80d0a80-aa8f-11ea-8275-f4e3db85fd31.png)\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-climate-name-font-weight   | 400                                                                   | Font weight of the entity name  |\n| mini-climate-info-font-weight   | 300                                                                   | Font weight of the states       |\n| mini-climate-icon-color         | --mini-humidifier-base-color, var(--paper-item-icon-color, #44739e)   | The color for icons             |\n| mini-climate-button-color       | --mini-humidifier-button-color, var(--paper-item-icon-color, #44739e) | The color for buttons icons     |\n| mini-climate-accent-color       | var(--accent-color)                                                   | The accent color of UI elements |\n| mini-climate-base-color         | var(--primary-text-color) \u0026 var(--paper-item-icon-color)              | The color of base text          |\n| mini-climate-background-opacity | 1                                                                     | Opacity of the background       |\n| mini-climate-scale              | 1                                                                     | Scale of the card               |\n| mini-climate-card-box-shadow    | var(--ha-card-box-shadow, none)                                       | The card shadow                 |\n\n## My configuration\n\n\u003e I originally wrote a plugin for my air conditioner implementation using [esphome](https://github.com/esphome/esphome)\n\u003e if interested, you can source [esphome-mqtt-climate](https://github.com/artem-sedykh/esphome-mqtt-climate)\n\u003e the following is a configuration example for my air conditioner\n\n```yaml\ntype: custom:mini-climate\nentity: climate.dahatsu\nname: Кондиционер\nfan_mode:\n  source:\n    auto: Авто\n    low: Слабый\n    medium: Средний\n    high: Сильный\n    # for my implementation fan_modes_al is an array of available fan modes of the selected hvac mode\n    __filter: \u003e\n      (source, state, entity) =\u003e entity.attributes\n        .fan_modes_al.map(fan_mode =\u003e source.find(s =\u003e s.id === fan_mode))\n        .filter(fan_mode =\u003e fan_mode)\nbuttons:\n  swing_mode:\n    type: dropdown\n    icon: mdi:approximately-equal\n    state:\n      attribute: swing_mode\n    # the drop-down list will remain active until swing_mode is off\n    active: state =\u003e state !== 'off'\n    source:\n      'off': Выкл\n      horizontal: Вкл\n    change_action: \u003e\n      (selected, state, entity) =\u003e this.call_service('climate', 'set_swing_mode', { entity_id: entity.entity_id, swing_mode: selected })\n  # turbo air conditioning button\n  turbo:\n    icon: mdi:weather-hurricane\n    # control topic\n    topic: 'dahatsu/turbo/set'\n    state:\n      attribute: turbo\n      # for my device, the turbo attribute returns boolean type, convert it to on or off\n      mapper: \"(state, entity) =\u003e state ? 'on': 'off'\"\n    # turbo button is not available for all modes, block it when it is not available\n    disabled: (state, entity) =\u003e !entity.attributes.turbo_al\n    # when you click on the button, send the event to mqtt\n    toggle_action: \u003e\n      (state) =\u003e this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: this.topic, retain: false, qos: 1 })\n  # eco button configuration is the same as for turbo button\n  eco:\n    icon: mdi:leaf\n    topic: 'dahatsu/eco/set'\n    state:\n      attribute: eco\n      mapper: \"(state, entity) =\u003e state ? 'on': 'off'\"\n    disabled: (state, entity) =\u003e !entity.attributes.eco_al\n    toggle_action: \u003e\n      (state) =\u003e this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: this.topic, retain: false, qos: 1 })\n  # health button configuration is the same as for turbo button\n  health:\n    icon: mdi:emoticon-happy-outline\n    topic: 'dahatsu/health/set'\n    state:\n      attribute: health\n      mapper: \"(state, entity) =\u003e state ? 'on': 'off'\"\n    disabled: (state, entity) =\u003e !entity.attributes.health_al\n    toggle_action: \u003e\n      (state) =\u003e this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: this.topic, retain: false, qos: 1  })\n  # power off button\n  power_switch:\n    icon: mdi:power-plug\n    state:\n      entity: switch.air_conditioner_kitchen_switch_l1\nindicators:\n  # humidity indicator\n  humidity:\n    icon: mdi:water\n    unit: '%'\n    round: 1\n    source:\n      entity: sensor.sensor_temp_hum_pre_kitchen_humidity\n  # power consumption indicator\n  power_consumption:\n    icon: mdi:flash\n    unit: 'W'\n    round: 1\n    source:\n      entity: sensor.dahatsu_power\n  # power indicator\n  power:\n    icon: mdi:power-plug\n    source:\n      entity: switch.air_conditioner_kitchen_switch_l1\n      values:\n        'on': 'вкл'\n        'off': 'выкл'\n    # localization of values\n    mapper: value =\u003e this.source.values[value]\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-climate-card/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-climate-card.git\n```\n\n**Add a reference to the card in your `ui-lovelace.yaml`.**\n\n```yaml\nresources:\n  - url: /local/mini-humidifier/dist/mini-climate-card-bundle.js\n    type: module\n```\n\n### Instructions\n\n*Requires `nodejs` \u0026 `npm`*\n\n1. Move into the `mini-climate-card` repo, checkout the *dev* branch \u0026 install dependencies.\n```console\n$ cd mini-climate-card-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-climate-card-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-climate-card-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-climate\" 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## License\nThis project is under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartem-sedykh%2Fmini-climate-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartem-sedykh%2Fmini-climate-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartem-sedykh%2Fmini-climate-card/lists"}