Mini Climate Card

A minimalistic yet customizable climate card for Home Assistant Lovelace UI.
Please ⭐️ this repo if you find it useful

Install

This card is available in HACS (Home Assistant Community Store)

Simple install

1. Download and copy mini-climate-card-bundle.js from the latest release into your config/www directory.

2. Add a reference to mini-climate-card-bundle.js inside your ui-lovelace.yaml.

resources:
  - url: /local/mini-climate-card-bundle.js?v=1.2.7
    type: module

CLI install

1. Move into your config/www directory

2. Grab mini-climate-card-bundle.js

$ wget https://github.com/artem-sedykh/mini-climate-card/releases/download/v1.2.7/mini-climate-card-bundle.js

3. Add a reference to mini-climate-card-bundle.js inside your ui-lovelace.yaml.

resources:
  - url: /local/mini-climate-card-bundle.js?v=1.2.7
    type: module

Updating

1. Find your mini-climate-card-bundle.js file in config/www or wherever you ended up storing it.

2. Replace the local file with the latest one attached in the latest release.

3. Add the new version number to the end of the cards reference url in your ui-lovelace.yaml like below.

resources:
  - url: /local/mini-climate-card-bundle.js?v=1.2.7
    type: module

You may need to empty the browsers cache if you have problems loading the updated card.

Using the card

Options

Card options

temperature

Configuration example for the temperature:

- type: custom:mini-climate
  entity: climate.my_ac
  temperature:
    unit: '°C'
    round: 1
    # use an external temperature sensor
    source:
      entity: sensor.temperature

target_temperature

Functions available for the target_temperature:

value - target_temperature value
entity - target_temperature entity
climate_entity - climate entity

execution context methods:

Configuration example for the target_temperature:

- type: custom:mini-climate
  entity: climate.my_ac
  target_temperature:
    icons:
      up: mdi:chevron-up
      down: mdi:chevron-down
    unit: '°C'
    min: 16
    max: 31
    step: 0.5
    change_action: >
      (value, entity) => this.call_service('climate', 'set_temperature', { entity_id: entity.entity_id, temperature: value })

hvac_mode

Functions available for the hvac_mode:

state - current hvac state
selected - selected value
entity - hvac entity
climate_entity - current climate entity

execution context methods:

Configuration example for the hvac_mode:

- type: custom:mini-climate
  entity: climate.my_ac
  hvac_mode:
    style: "(value, entity) => ({ color: 'black' })"
    source:
      'off':
        icon: mdi:power
        name: 'off'
      heat:
        icon: mdi:weather-sunny
        name: heat
      auto:
        icon: mdi:cached
        name: auto
      cool:
        icon: mdi:snowflake
        name: cool
      dry:
        icon: mdi:water
        name: dry
      fan_only:
        icon: mdi:fan
        name: fan
    change_action: >
      (selected, entity) => this.call_service('climate', 'set_hvac_mode', { entity_id: entity.entity_id, hvac_mode: selected })

fan_mode

Functions available for the fan_mode:

state - current button state value
entity - button entity
climate_entity - climate entity
hvac_mode - current hvac_mode
source - dropdown source object array: [ { id: 'id', name: 'name' }, ... ]
selected_value - selected dropdown value

execution context methods:

Configuration example for the fan_mode:

- type: custom:mini-climate
  entity: climate.my_ac
  fan_mode:
    hide: off
    icon: mdi:fan
    order: 0
    active: (state, entity) => entity.state !== 'off'
    source:
      auto: auto
      low: low
      medium: medium
      high: high
      # filter usage example
      __filter: >
        (source, state, entity) => entity.attributes
          .fan_modes_al.map(fan_mode => source.find(s => s.id === fan_mode))
          .filter(fan_mode=>fan_mode)
    change_action: >
      (selected, state, entity) => this.call_service('climate', 'set_fan_mode', { entity_id: entity.entity_id, fan_mode: selected })

Indicators

The indicators display additional information on the card, for example, you can display humidity, consumption, etc.
Adding a simple indicator:

- type: custom:mini-climate
  entity: climate.my_ac
  indicators:
    humidity:
      icon: mdi:water
      unit: '%'
      round: 1
      source:
        entity: sensor.humidity

indicator functions

Consider configuring an indicator using javascript Functions available for the indicator:

value - current indicator value
entity - indicator entity
climate_entity - climate entity hvac_mode - current hvac_mode

source mapper

Using the mapper function, you can change the indicator value:

- type: custom:mini-climate
  entity: climate.my_ac
  indicators:
    power:
      icon: mdi:power-plug
      source:
        values:
          'on': 'power is on!'
          'off': 'power is off!'
        entity: switch.ac_power
        # since the current execution context is an indicator config, we can use this.source.values to get values
        mapper: value => this.source.values[value]
        # example of using all function arguments
        # mapper: >
        #   (value, entity, climate_entity, hvac_mode) => {
        #     console.log(value);
        #     console.log(entity);
        #     console.log(climate_entity);
        #     console.log(hvac_mode);
        #     console.log(this);
        #     return ...
        #   }

icon template

The indicator icon can be calculated dynamically for example:

- type: custom:mini-climate
  entity: climate.my_ac
  indicators:
    humidity:
      icon:
        template: >
          (value) => (value > 30 ? 'mdi:weather-rainy' : 'mdi:water')
      unit: '%'
      round: 1
      source:
        entity: sensor.humidity

icon template

You can also set custom styles. for example:

- type: custom:mini-climate
  entity: climate.my_ac
  indicators:
    humidity:
      icon:
        template: () => 'mdi:water'
        style: >
          (value) => (value > 30 ? { color: 'red'} : {})
      unit: '%'
      round: 1
      source:
        entity: sensor.humidity

Buttons

You can add various buttons, supported types: button and dropdown

buttons functions

state - current button state value
entity - button entity
climate_entity - climate entity
hvac_mode - current hvac_mode
source - dropdown source object array: [ { id: 'id', name: 'name' }, ... ]
selected_value - selected dropdown value

execution context methods:

dropdown

Consider an example swing_mode configuration:

- type: custom:mini-climate
  entity: climate.my_ac
  buttons:
    swing_mode:
      type: dropdown
      icon: mdi:approximately-equal
      state:
        attribute: swing_mode
      active: state => state !== 'off'
      source:
        'off': Off
        horizontal: On
      change_action: >
        (selected, state, entity) => this.call_service('climate', 'set_swing_mode', { entity_id: entity.entity_id, swing_mode: selected })

button

Consider the example of adding buttons:

- type: custom:mini-climate
  entity: climate.my_ac
  buttons:
    power:
      icon: mdi:power-plug
      state:
        entity: switch.ac_power
# for the button type, if no toggle_action is specified, the switch.toggle method is called

- type: custom:mini-climate
  entity: climate.my_ac
  buttons:
    turbo:
      icon: mdi:weather-hurricane
      state:
        attribute: turbo
        mapper: "state => (state ? 'on': 'off')"
      disabled: (state, entity) => !entity.attributes.turbo_al
      toggle_action: >
        (state) => this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: 'my_ac/turbo/set', retain: false, qos: 1 })

tap action object

tap action example

# toggle example
# call-service example
- type: custom:mini-climate
  entity: climate.my_ac
  tap_action:
    action: call-service
    service: climate.set_hvac_mode
    service_data:
      entity_id: climate.my_ac
      hvac_mode: 'off'

# navigate example
- type: custom:mini-climate
  entity: climate.my_ac
  tap_action:
    action: navigate
    navigation_path: '/lovelace/4'

# navigate example
- type: custom:mini-climate
  entity: climate.my_ac
  tap_action:
    action: url
    url: 'https://www.google.com/'

# none example
- type: custom:mini-climate
  entity: climate.my_ac
  tap_action: none

# more-info for custom entity example
- type: custom:mini-climate
  entity: climate.my_ac
  tap_action:
    action: more-info
    entity: sensor.humidity

secondary info

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info: last-changed

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info:
    type: fan-mode
    icon: 'mdi:fan'

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info: hvac-mode

hvac-action type

By default, translations from ha frontend

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info:
    type: hvac-action

but you can customize your translations

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info:
    type: hvac-action
    source:
      cooling: Охлаждение

You can set your own icon for each hvac-action

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info:
    type: hvac-action
    source:
      cooling:
        icon: 'mdi:snowflake'
        name: Охлаждение

You can set your own icon for each hvac-action

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info:
    type: hvac-action
    source:
      cooling:
        icon: 'mdi:snowflake'
        name: Охлаждение

Or you can use one permanent icon

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info:
    type: hvac-action
    icon: 'mdi:cached'

fan-mode-dropdown

- type: custom:mini-climate
  entity: climate.dahatsu
  secondary_info: fan-mode-dropdown

Theme variables

The following variables are available and can be set in your theme to change the appearence of the card. Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.

My configuration

I originally wrote a plugin for my air conditioner implementation using esphome if interested, you can source esphome-mqtt-climate the following is a configuration example for my air conditioner

- type: custom:mini-climate
  entity: climate.dahatsu
  name: Кондиционер
  fan_mode:
    source:
      auto: Авто
      low: Слабый
      medium: Средний
      high: Сильный
      # for my implementation fan_modes_al is an array of available fan modes of the selected hvac mode
      __filter: >
        (source, state, entity) => entity.attributes
          .fan_modes_al.map(fan_mode => source.find(s => s.id === fan_mode))
          .filter(fan_mode => fan_mode)
  buttons:
    swing_mode:
      type: dropdown
      icon: mdi:approximately-equal
      state:
        attribute: swing_mode
      # the drop-down list will remain active until swing_mode is off
      active: state => state !== 'off'
      source:
        'off': Выкл
        horizontal: Вкл
      change_action: >
        (selected, state, entity) => this.call_service('climate', 'set_swing_mode', { entity_id: entity.entity_id, swing_mode: selected })
    # turbo air conditioning button
    turbo:
      icon: mdi:weather-hurricane
      # control topic
      topic: 'dahatsu/turbo/set'
      state:
        attribute: turbo
        # for my device, the turbo attribute returns boolean type, convert it to on or off
        mapper: "(state, entity) => state ? 'on': 'off'"
      # turbo button is not available for all modes, block it when it is not available
      disabled: (state, entity) => !entity.attributes.turbo_al
      # when you click on the button, send the event to mqtt
      toggle_action: >
        (state) => this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: this.topic, retain: false, qos: 1 })
    # eco button configuration is the same as for turbo button
    eco:
      icon: mdi:leaf
      topic: 'dahatsu/eco/set'
      state:
        attribute: eco
        mapper: "(state, entity) => state ? 'on': 'off'"
      disabled: (state, entity) => !entity.attributes.eco_al
      toggle_action: >
        (state) => this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: this.topic, retain: false, qos: 1 })
    # health button configuration is the same as for turbo button
    health:
      icon: mdi:emoticon-happy-outline
      topic: 'dahatsu/health/set'
      state:
        attribute: health
        mapper: "(state, entity) => state ? 'on': 'off'"
      disabled: (state, entity) => !entity.attributes.health_al
      toggle_action: >
        (state) => this.call_service('mqtt', 'publish', { payload: this.toggle_state(state), topic: this.topic, retain: false, qos: 1  })
    # power off button
    power_switch:
      icon: mdi:power-plug
      state:
        entity: switch.air_conditioner_kitchen_switch_l1
  indicators:
    # humidity indicator
    humidity:
      icon: mdi:water
      unit: '%'
      round: 1
      source:
        entity: sensor.sensor_temp_hum_pre_kitchen_humidity
    # power consumption indicator
    power_consumption:
      icon: mdi:flash
      unit: 'W'
      round: 1
      source:
        entity: sensor.dahatsu_power
    # power indicator
    power:
      icon: mdi:power-plug
      source:
        entity: switch.air_conditioner_kitchen_switch_l1
        values:
          'on': 'вкл'
          'off': 'выкл'
      # localization of values
      mapper: value => this.source.values[value]

Development

If you plan to contribute back to this repo, please fork & create the PR against the dev branch.

Clone this repository into your config/www folder using git.

$ git clone https://github.com/artem-sedykh/mini-climate-card.git

Add a reference to the card in your ui-lovelace.yaml.

resources:
  - url: /local/mini-humidifier/dist/mini-climate-card-bundle.js
    type: module

Instructions

Requires nodejs & npm

1. Move into the mini-climate-card repo, checkout the dev branch & install dependencies.

$ cd mini-climate-card-dev && git checkout dev && npm install

2. Make changes to the source

3. Build the source by running

$ npm run build

4. Refresh the browser to see changes

   Make sure cache is cleared or disabled

5. (Optional) Watch the source and automatically rebuild on save

$ npm run watch

The new mini-climate-card-bundle.js will be build and ready inside /dist.

Getting errors?

Make sure you have javascript_version: latest in your configuration.yaml under frontend:.

Make sure you have the latest version of mini-climate-card-bundle.js.

If you have issues after updating the card, try clearing your browsers cache or restart Home Assistant.

If 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.

resources:
  - url: ...
    type: js

License

This project is under the MIT license.