artem-sedykh / mini-humidifier Goto Github PK

View Code? Open in Web Editor NEW

155.0 9.0 26.0 1.17 MB

Minimalistic humidifier card for Home Assistant Lovelace UI

License: MIT License

JavaScript 100.00%

automation home-assistant hassio lovelace-ui lovelace custom humidifier

mini-humidifier's Introduction

Mini Humidifier Card

Tested on zhimi.humidifier.cb1

A minimalistic yet customizable humidifier card for Home Assistant Lovelace UI.

Please ⭐️ this repo if you find it useful

Inspired by mini media player.

Notice

v3 is only compatible from version 2022.11 onwards

Install

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

Simple install

Download and copy mini-humidifier-bundle.js from the latest release into your config/www directory.
Add a reference to mini-humidifier-bundle.js inside your configuration.yaml.

resources:
  - url: /local/mini-humidifier-bundle.js?v=3.1.1
    type: module

CLI install

Move into your config/www directory
Grab mini-humidifier-bundle.js

$ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v3.1.1/mini-humidifier-bundle.js

Add a reference to mini-humidifier-bundle.js inside your configuration.yaml.

resources:
  - url: /local/mini-humidifier-bundle.js?v=3.1.1
    type: module

Updating

Find your mini-humidifier-bundle.js file in config/www or wherever you ended up storing it.
Replace the local file with the latest one attached in the latest release.
Add the new version number to the end of the cards reference url in your configuration.yaml like below.

resources:
  - url: /local/mini-humidifier-bundle.js?v=3.1.1
    type: module

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

Using the card

Options

Card options

Name	Type	Default	Since	Description
type	string	required	v1.0.1	`custom:mini-humidifier`
entity	string	required	v1.0.1	An entity_id from an entity within the `fan` or `humidifier` domain.
name	string	optional	v1.0.1	Override the entities friendly name.
icon	string	optional	v1.0.1	Specify a custom icon from any of the available mdi icons.
group	boolean	optional	v1.0.1	Removes paddings, background color and box-shadow. example
toggle	object	optional	v2.0.1	Toggle button.
toggle: `icon`	string	optional	v2.0.1	Custom icon, default value `mdi:dots-horizontal`
toggle: `hide`	boolean	optional	v2.0.1	Hide button, default value `False`
toggle: `default`	boolean	optional	v2.0.1	Default toggle button state, default value `off`, example.
secondary_info	object	optional	v2.1.1	secondary_info config. secondary info examples
secondary_info: `type`	string	optional	v2.1.1	available types: `last-changed, mode`
secondary_info: `icon`	string	optional	v2.1.1	icon for type: `mode`
secondary_info: `hide`	boolean	optional	v2.2.6	Hide secondary info, default `False`
power	object	optional	v2.0.1	Power button, example.
power: `type`	string	optional	v2.0.1	`toggle` or `button`, default `button`
power: `icon`	string	optional	v2.0.1	Specify a custom icon from any of the available mdi icons, default `mdi:power`
power: `hide`	boolean	optional	v2.0.1	Hide power button, default value `False`
power: `action_timeout`	number	optional	v2.1.1	`ms` default value `3500`
power: `disabled`	function	optional	v2.0.1	button disabled calculation function, default unset
power: `style`	function	optional	v2.0.1	function for getting custom styles, default unset
power: `state`	object	optional	v2.0.1	config to get power button state.
power: `state:entity`	string	optional	v2.0.1	power button entity_id, default current entity
power: `state:attribute`	string	optional	v2.0.1	state value attribute default 'unset'
power: `state:mapper`	function	optional	v2.0.1	state value processing function, default `unset`
power: `toggle_action`	function	optional	v2.0.1	button click processing function
target_humidity	object	optional	v2.0.1	target humidity config, example.
target_humidity: `icon`	string	optional	v1.0.1	Custom icon, default value `mdi:water`
target_humidity: `icon`	object	optional	v2.0.1	icon config
target_humidity: `icon:template`	function	optional	v2.0.1	icon retrieval function
target_humidity: `icon:style`	function	optional	v2.0.1	function to get icon styles
target_humidity: `hide`	boolean	optional	v1.0.1	Hide target_humidity control, default value `False`
target_humidity: `disabled`	boolean, function	optional	v2.5.3	disable target_humidity slider, default value taken from the defined model and if not set, from the default model
target_humidity: `hide_indicator`	boolean	optional	v2.2.1	Hide indicator, default value `False`
target_humidity: `unit`	string	optional	v1.0.1	display unit, default `%`
target_humidity: `min`	number	optional	v1.0.1	minimum target humidity, default value `30`
target_humidity: `max`	number	optional	v1.0.1	maximum target humidity, default value `80`
target_humidity: `action_timeout`	number	optional	v2.1.1	`ms` default value `3500`
target_humidity: `step`	number	optional	v1.0.1	slider step, default value `10`
target_humidity: `state`	object	optional	v2.0.1	configuration to ge target_humidity value
target_humidity: `state:entity`	object	optional	v2.0.1	target_humidity entity_id, default current entity
target_humidity: `state:attribute`	object	optional	v2.0.1	default value `target_humidity`
target_humidity: `change_action`	function	optional	v2.0.1	target_humidity change function
indicators	object	optional	v2.0.1	any indicators, examples.
indicators: `name`	object	optional	v2.0.1	the name of your indicator see examples.
indicators: `name:icon`	string	optional	v2.0.1	Specify a custom icon from any of the available mdi icons.
indicators: `name:icon`	object	optional	v2.0.1	icon object
indicators: `name:icon:template`	function	optional	v2.0.1	icon template function
indicators: `name:icon:style`	function	optional	v2.0.1	styles
indicators: `name:unit`	string	optional	v2.0.1	display unit.
indicators: `name:round`	number	optional	v2.0.1	rounding number value.
indicators: `name:hide`	boolean	optional	v2.0.1	hide indicator, default `false`
indicators: `name:tap_action`	action object	true	v1.1.0	Action on click/tap.
indicators: `name:source`	object	optional	v2.0.1	data source.
indicators: `name:source:entity`	string	optional	v2.0.1	indicator entity_id
indicators: `name:source:attribute`	string	optional	v2.0.1	entity attribute
indicators: `name:source:mapper`	function	optional	v2.0.1	value processing function
buttons	object	optional	v2.0.1	any buttons, example.
buttons: `name`	object	optional	v2.0.1	the name of your button see examples
buttons: `name:icon`	string	optional	v2.0.1	Specify a custom icon from any of the available mdi icons.
buttons: `name:type`	string	optional	v2.0.1	`dropdown` or `button` default `button`
buttons: `name:action_timeout`	number	optional	v2.1.1	`ms` default value `3500`
buttons: `name:order`	number	optional	v2.0.1	sort order
buttons: `name:state`	object	optional	v2.0.1	config to get button state.
buttons: `name:hide`	object	optional	v2.0.1	hide button, default `false`
buttons: `name:state:entity`	string	optional	v2.0.1	button entity_id.
buttons: `name:state:attribute`	string	optional	v2.0.1	entity attribute
buttons: `name:state:mapper`	function	optional	v2.0.1	state processing function
buttons: `name:disabled`	function	optional	v2.0.1	calc disabled button
buttons: `name:active`	function	optional	v2.0.1	for type `dropdown`
buttons: `name:source`	object	optional	v2.0.1	for type `dropdown`
buttons: `name:source:item`	string	optional	v2.0.1	source item, format horizontal: horizontal
buttons: `name:source:__filter`	function	optional	v2.0.1	filter function
buttons: `name:change_action`	function	optional	v2.0.1	for type `dropdown`
buttons: `name:toggle_action`	function	optional	v2.0.1	for type `button`
buttons: `name:style`	function	optional	v2.0.1	styles
scale	number	optional	v1.0.3	UI scale modifier, default is `1`.
model	string	optional	v2.1.1	default configuration for a specific humidifier model, default value `zhimi.humidifier.cb1`
tap_action	action object	true	v1.0.4	Action on click/tap, examples.

Action object options

Name	Type	Default	Options	Description
action	string	`more-info`	`more-info` / `navigate` / `call-service` / `url` / `none` / `toggle`	Action to perform.
entity	string		Any entity id	Override default entity of `more-info`, when `action` is defined as `more-info`.
service	string		Any service	Service to call (e.g. `fan.turn_on`) when `action` is defined as `call-service`
service_data	object		Any service data	Service data to include with the service call (e.g. `entity_id: fan.xiaomi_miio_device`)
navigation_path	string		Any path	Path to navigate to (e.g. `/lovelace/0/`) when `action` is defined as `navigate`.
url	string		Any URL	URL to open when `action` is defined as `url`.

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.

name	Default	Description
mini-humidifier-name-font-weight	400	Font weight of the entity name
mini-humidifier-info-font-weight	300	Font weight of the states
mini-humidifier-icon-color	--mini-humidifier-base-color, var(--paper-item-icon-color, #44739e)	The color for icons
mini-humidifier-button-color	--mini-humidifier-button-color, var(--paper-item-icon-color, #44739e)	The color for buttons icons
mini-humidifier-accent-color	var(--accent-color)	The accent color of UI elements
mini-humidifier-base-color	var(--primary-text-color) & var(--paper-item-icon-color)	The color of base text
mini-humidifier-background-opacity	1	Opacity of the background
mini-humidifier-scale	1	Scale of the card

Adding the default configuration for the new model

Read the documentation
See an example for zhimi.humidifier.cb1
Create a pull request or issue with the configuration file.

Available default configurations

zhimi.humidifier.cb1 - xiaomi_miio integration
zhimi.humidifier.ca1 - xiaomi_miio integration
zhimi.humidifier.ca4 - xiaomi_miio integration
deerma.humidifier.jsq - xiaomi_miio integration
deerma.humidifier.jsq1 - xiaomi_miio integration
deerma.humidifier.mjjsq - xiaomi_miio integration
zhimi.airpurifier.ma2 - xiaomi_miio integration

xiaomi_miio_airpurifier:deerma.humidifier.mjjsq - xiaomi_miio_airpurifier integration
xiaomi_miio_airpurifier:zhimi.humidifier.cb1 - xiaomi_miio_airpurifier integration
xiaomi_miio_airpurifier:zhimi.humidifier.ca4 by @ravikwow - xiaomi_miio_airpurifier integration
xiaomi_miio_airpurifier:zhimi.airpurifier.mb3 by @regevbr - xiaomi_miio_airpurifier integration

Using the default configuration for a specific model

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
# zhimi.humidifier.cb1 default value may be omitted, added for example.
model: 'zhimi.humidifier.cb1'

deerma.humidifier.mjjsq

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
model: 'xiaomi_miio_airpurifier:deerma.humidifier.mjjsq'

localize status indicator

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
model: 'deerma.humidifier.mjjsq'
indicators:
  status:
    empty: пустой
    filled: полный

target humidity

Functions available for the target_humidity:

Name	Type	execution context	arguments	return type
`state:mapper`	function	target_humidity config	current_value, entity, humidifier_entity	any
`change_action`	function	target_humidity config	value, current_value, entity, humidifier_entity	promise
`icon:template`	function	target_humidity config	current_value, entity, humidifier_entity	string
`icon:style`	function	target_humidity config	current_value, entity, humidifier_entity	object

current_value - selected value
value - target_humidity value
entity - target_humidity entity
humidifier_entity - humidifier entity

execution context methods:

Name	arguments	description	return type
`toggle_state`	sate	toggle state, example: `this.toggle_state('on') => off`	string
`call_service`	domain, service, options,	call Home Assistant service	promise

Configuration example for the target_humidity:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
target_humidity:
  state:
    attribute: target_humidity
    mapper: (current_value, entity, humidifier_entity) => current_value
  icon:
    template: (current_value, entity, humidifier_entity) => 'mdi:tray-full'
    style: "(current_value, entity, humidifier_entity) => ({ color: 'red' })"
  unit: '%'
  hide: off
  min: 30
  max: 80
  step: 10
  change_action: >
    (value, current_value, entity, humidifier_entity) => {
      const options = { entity_id: entity.entity_id, humidity: value };
      return this.call_service('xiaomi_miio', 'fan_set_target_humidity', options);
    }

The default configuration is configured for zhimi.humidifier.cb1,
to set target humidity, use the service xiaomi_miio.fan_set_target_humidity Example:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
target_humidity:
  icon: 'mdi:water'
  state:
    attribute: target_humidity
  unit: '%'
  min: 30
  max: 80
  step: 10
  change_action: >
    (selected, state, entity) => {
      const options = { entity_id: entity.entity_id, humidity: selected };
      return this.call_service('xiaomi_miio', 'fan_set_target_humidity', options);
    }

power button

Functions available for the power:

Name	Type	execution context	arguments	return type
`state:mapper`	function	power config	state, entity, humidifier_entity	string
`disabled`	function	power config	state, entity, humidifier_entity	boolean
`style`	function	power config	state, entity, humidifier_entity	object
`toggle_action`	function	power config	state, entity, humidifier_entity	promise

state - current power state
entity - current power entity
humidifier_entity - humidifier entity

execution context methods:

Name	arguments	description	return type
`toggle_state`	sate	toggle state, example: `this.toggle_state('on') => off`	string
`call_service`	domain, service, options,	call Home Assistant service	promise

The power button can be of two types: button or toggle, default type: button Attention, the following configuration attributes (icon, disabled, state:attribute, style, toggle_action) are not available for the toggle type, since a standard ha-entity-toggle is used, the state of which I do not control

Configuration example for the power button type toggle:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
power:
  hide: off
state:
  mapper: (state, entity, humidifier_entity) => state

Configuration example for the power button type button:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
power:
  icon: 'mdi:power'
  type: button
  state:
    mapper: (state, entity, humidifier_entity) => state
  hide: off
  disabled: (state, entity, humidifier_entity) => false
  style: "(state, entity, humidifier_entity) => ({ color: 'red' })"
  toggle_action: >
    (state, entity) => {
      const service = state === 'on' ? 'turn_off' : 'turn_on';
      return this.call_service('fan', service, { entity_id: entity.entity_id });
    }

The default configuration is configured for zhimi.humidifier.cb1,
to on / off, use the service fan.turn_on, fan.turn_off Example:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
power:
 icon: 'mdi:power'
 type: button
 hide: off
 toggle_action: >
    (current_state, entity) => {
      const service = current_state === 'on' ? 'turn_off' : 'turn_on';
      return this.call_service('fan', service, { entity_id: entity.entity_id });
    }

Indicators

The indicators display additional information on the card, for example, you can display humidity, depth, temperature, etc.
The default configuration for zhimi.humidifier.cb1 uses three indicators depth, temperature, humidity. zhimi.humidifier.cb1 indicators

Adding a simple indicator:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
indicators:
  test:
    icon: mdi:water
    unit: '%'
    round: 1
    source:
      entity: sensor.humidity

indicator functions

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

Name	Type	execution context	arguments	return type
`source:mapper`	function	indicator config	value, entity, humidifier_entity	any
`icon:template`	function	indicator config	value, entity, humidifier_entity	string
`icon:style`	function	indicator config	value, entity, humidifier_entity	object

value - current indicator value
entity - indicator entity
humidifier_entity - humidifier entity

source mapper

Using the mapper function, you can change the indicator value: For zhimi.humidifier.cb1, a maximum depth value of 125 is used, which is 4 liters of tank, let's get how much water is left in liters or in percent

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
indicators:
  depth:
    icon: 'mdi:tray-full'
    unit: '%'
    round: 0
    # variable used in mapper
    max_value: 125
    # variable used in mapper
    volume: 4
    # variable used in mapper
    type: 'percent'
    source:
      attribute: depth
      mapper: > 
        (val) => {
          const value = (100 * (val || 0)) / this.max_value;
          return this.type === 'liters' ? (value * this.volume) / 100 : value;
        }

icon template, style

The indicator icon can be calculated dynamically for example:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
indicators:
  depth:
    icon:
      template: >
        (value) => {
          if (value === 0)
            return 'mdi:tray';

          if (value <= 20)
            return 'mdi:tray-minus';

          return 'mdi:tray-full';
        }
      style: >
        (value) => {
          if (value === 0)
            return { color: 'red' };

          if (value <= 20)
            return { color: '#FD451D' };

          return {};
        }
    unit: '%'
    round: 0
    # variable used in mapper
    max_value: 125
    # variable used in mapper
    volume: 4
    # variable used in mapper
    type: 'liters'
    source:
      attribute: depth
      mapper: > 
        (val) => {
          const value = (100 * (val || 0)) / this.max_value;
          return this.type === 'liters' ? (value * this.volume) / 100 : value;
        }

default-indicators

The plugin is configured by default for zhimi.humidifier.cb1 and 3 default indicators are available in it temperature, humidity, depth Their configuration looks like this:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
indicators:
  depth:
    icon: 'mdi:tray-full'
    unit: '%'
    round: 0
    order: 0
    max_value: 125
    volume: 4
    type: 'percent'
    source:
      attribute: depth
      mapper: >
        (val) => {
          const value = (100 * (val || 0)) / this.max_value;
          return this.type === 'liters' ? (value * this.volume) / 100 : value;
        }
  temperature:
    icon: 'mdi:thermometer-low'
    unit: '°C'
    round: 1
    order: 1
    source:
      attribute: temperature
  humidity:
    icon: 'mdi:water'
    unit: '%'
    round: 1
    order: 2
    source:
      attribute: humidity

You can override the default indicators or even hide them and add your own We will display the depth value in liters and change the humidity icon as well as hide the temperature:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
indicators:
  depth:
    unit: 'L'
    type: 'liters'
  humidity:
    icon: 'mdi:water-outline'
  temperature:
    hide: on

Buttons

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

buttons functions

Name	Type	execution context	arguments	return type
`state:mapper`	function	button config	state, entity, humidifier_entity	any
`source:__filter`	function	button config	state, entity, humidifier_entity	object({ id..., name... }) array
`active`	function	button config	state, entity, humidifier_entity	boolean
`disabled`	function	button config	state, entity, humidifier_entity	boolean
`style`	function	button config	state, entity, humidifier_entity	object
`toggle_action`	function	button config	state, entity, humidifier_entity	promise
`change_action`	function	button config	selected, state, entity, humidifier_entity	promise

state - current button state value
entity - button entity
humidifier_entity - humidifier entity
source - dropdown source object array: [ { id: 'id', name: 'name' }, ... ]
selected - selected dropdown value

execution context methods:

Name	arguments	description	return type
`toggle_state`	sate	toggle state, example: `this.toggle_state('on') => off`	string
`call_service`	domain, service, options,	call Home Assistant service	promise

default buttons

The following buttons are added to the default configuration: dry, mode, led, buzzer, child_lock These buttons are configured for zhimi.humidifier.cb1 It looks like this:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
buttons:
  dry:
    icon: 'mdi:weather-sunny'
    order: 0
    state:
      attribute: dry
      # the dry attribute is of type boolean, for the button the state should be on/off/closed/locked/unavailable/unknown 
      mapper: "(state) => (state ? 'on' : 'off')"
      # service is used xiaomi_miio.fan_set_dry_on or xiaomi_miio.fan_set_dry_off
    toggle_action: >
        (state, entity) => {
          const service = state === 'on' ? 'fan_set_dry_off' : 'fan_set_dry_on';
          const options = { entity_id: entity.entity_id };
          return this.call_service('xiaomi_miio', service, options);
        }
  # dropdown example
  mode:
    icon: 'mdi:fan'
    order: 1
    type: dropdown
    state:
      attribute: mode
    source:
      auto: auto
      silent: silent
      medium: medium
      high: high
    # The button will light up when the humidifier is on.
    active: "(state, entity) => (entity.state !== 'off')"
    # the button will be locked when depth is 0
    # zhimi.humidifier.cb1 does not allow changing the mode when there is no water
    disabled: "(state, entity) => (entity.attributes.depth === 0)"
    # using service: fan.set_speed
    change_action: >
      (selected, state, entity) => {
        const options = { entity_id: entity.entity_id, speed: selected };
        return this.call_service('fan', 'set_speed', options);
      }
  led:
    icon: mdi:lightbulb-on-outline
    order: 2
    type: dropdown
    state:
      attribute: led_brightness
    source:
      0: Bright
      1: Dim
      2: Off
    # button is active while any state except 2 is selected
    active: "state => (state !== 2 && state !== '2')"
    # using service: xiaomi_miio.fan_set_led_brightness
    change_action: >
      (selected, state, entity) => {
        const options = { entity_id: entity.entity_id, brightness: selected };
        return this.call_service('xiaomi_miio', 'fan_set_led_brightness', options);
      }
  buzzer:
    icon: 'mdi:bell-outline'
    order: 3
    state:
      attribute: buzzer
      mapper: "(state) => (state ? 'on' : 'off')"
      # using service: xiaomi_miio.fan_set_buzzer_on and xiaomi_miio.fan_set_buzzer_off
    toggle_action: >
        (state, entity) => {
          const service = state === 'on' ? 'fan_set_buzzer_off' : 'fan_set_buzzer_on';
          const options = { entity_id: entity.entity_id };
          return this.call_service('xiaomi_miio', service, options);
        }
  child_lock:
    icon: 'mdi:lock'
    order: 4
    state:
      attribute: child_lock
      mapper: "(state) => (state ? 'on' : 'off')"
      # using service: xiaomi_miio.fan_set_child_lock_on and xiaomi_miio.fan_set_child_lock_off
    toggle_action: >
        (state, entity) => {
          const service = state === 'on' ? 'fan_set_child_lock_off' : 'fan_set_child_lock_on';
          const options = { entity_id: entity.entity_id };
          return this.call_service('xiaomi_miio', service, options);
        }

You can override the default buttons or even hide them and add your own Let's add translations for the mode and led buttons and hide the child_lock button

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
buttons:
  mode:
    source:
      auto: Авто
      silent: Тихий
      medium: Средний
      high: Высокий
  led:
    source:
      0: Ярко
      1: Тускло
      2: Выкл
  child_lock:
    hide: on

For some models of humidifiers, there are only two button backlight modes, let's change our drop-down list to a button for an example. it can be done in different ways, consider a few:

override current led button

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
buttons:
  led:
    type: 'button'
    on_states: [0, 1]
    off_value: 2
    on_value: 1
    state:
      attribute: led_brightness
      mapper: "(value) => (this.on_states.includes(value) ? 'on' : 'off')"
    toggle_action: >
        (state, entity) => {
          const value = state === 'on' ? this.off_value : this.on_value;
          const options = { entity_id: entity.entity_id, brightness: value };
          return this.call_service('xiaomi_miio', 'fan_set_led_brightness', options);
        }

Hide led button and add new

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
buttons:
  led:
    hide: on
  new_led:
    icon: 'mdi:lightbulb-on-outline'
    type: 'button'
    order: 2
    on_states: [0, 1]
    off_value: 2
    on_value: 1
    state:
      attribute: led_brightness
      mapper: "(value) => (this.on_states.includes(value) ? 'on' : 'off')"
    toggle_action: >
      (state, entity) => {
        const value = state === 'on' ? this.off_value : this.on_value;
        const options = { entity_id: entity.entity_id, brightness: value };
        return this.call_service('xiaomi_miio', 'fan_set_led_brightness', options);
      }

toggle button

toggle button configuration

For example, we want to always show control buttons, and toggle button hide:

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
toggle:
  default: on
  hide: on

secondary info

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
secondary_info: last-changed

type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
secondary_info: #default type mode, changing icon
  icon: 'mdi:fan'

group

To display entities inside the container, set the group configuration parameter to on

type: entities
title: Climate
show_header_toggle: true
state_color: true
entities:
  - entity: fan.xiaomi_miio_device
    type: custom:mini-humidifier
    group: on

Action object options examples

# toggle example
type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
tap_action:
  action: toggle

# call-service example
type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
tap_action:
  action: call-service
  service: xiaomi_miio.fan_set_led_brightness
  service_data:
    brightness: 1

# navigate example
type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
tap_action:
  action: navigate
  navigation_path: '/lovelace/4'

# navigate example
type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
tap_action:
  action: url
  url: 'https://www.google.com/'

# none example
type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
tap_action: none

# more-info for custom entity example
type: custom:mini-humidifier
entity: fan.xiaomi_miio_device
tap_action:
  action: more-info
  entity: sensor.humidity

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-humidifier.git

Add a reference to the card in your configuration.yaml.

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

Instructions

Requires nodejs & npm

Move into the mini-humidifier repo, checkout the dev branch & install dependencies.

$ cd mini-humidifier-dev && git checkout dev && npm install

Make changes to the source
Build the source by running

$ npm run build

Refresh the browser to see changes

Make sure cache is cleared or disabled
(Optional) Watch the source and automatically rebuild on save

$ npm run watch

The new mini-humidifier-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-humidifier-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-humidifier" or running older browsers try replacing type: module with type: js in your resource reference, like below.

resources:
  - url: ...
    type: js

Inspiration

@kalkih - mini-media-player

License

This project is under the MIT license.

mini-humidifier's People

Contributors

Stargazers

Watchers

mini-humidifier's Issues

LED Button

Hi. Thank you for this great plugin.
My humidifier has 3 values for the led brightness. 0 (bright), 1 (low), 2 (off).
Is it possible the get this? Maybe like the dropdown off the speed?
And would it be possible to display the name (with the option to rename) instead the icon?

Work with humidifier domain

Check out
home-assistant/core#36759
It'd be nice if this card had native support for the humidifier domain.

Can you add a clean-mode button for zhimi.humidifier.ca1 or zhimi.humidifier.cb1?

I need clean-mode for this model..

zhimi.humidifier.cb1, integration: xiaomi_miio_airpurifier: migrate to preset_mode

cannot specify target_humidity: state: entity

Hi, i think there is a bug. Setting entity for state of target_humidity doesn't work.

        target_humidity:
          state:
            entity: input_number.target_fan_salon_humiditifier_2

The result is:

Icons problem

Icons are not displayed after the last HA update.

Integration error

I did everything according to the instructions, copied the mini-humidifier-bundle.js file to the specified config/www directory, added the lines to the configuration:
resources:

url: /local/mini-humidifier-bundle.js?v=3.1.1
type:module

When checking the configuration, an error appears:
Integration error: resources - Integration 'resources' not found.

What am I doing wrong?

TypeError: Illegal constructor

Hi, I'm having a trouble enabling the plugin:

Info

Plugin version: 3.0.2
Browser: Firefox Developer Edition 99.0b8

Server Logs

Logger: frontend.js.latest.202202030
Source: components/system_log/__init__.py:190
First occurred: 11:25:22 PM (32 occurrences)
Last logged: 11:34:37 PM

https://xxx/hacsfiles/mini-humidifier/mini-humidifier-bundle.js?hacstag=253019926302:1:2046 TypeError: Illegal constructor.

Icons missing in ha 0.110

With ha 0.110 there is something changed for the icons. See here. Could you please fix it?

How to setup custom mdi icon for depth from attribute humidifire?

Dear friend,

i have some trouble how to change icon for depth, i can not undestand how to call
necessary attribute for JS please help.
below you can see my listing:

 depth:
    icon:
      template: |
        (humidifier_entity) => {
          if (humidifier_entity.attributes.humidifier.fault == 0)
            return 'mdi:tray';

          if (humidifier_entity.attributes.humidifier.fault == 1)
            return 'mdi:tray-minus';

          return 'mdi:tray-full';
        }
    unit: '%'
    round: 0
    max_value: 125
    volume: 4
    type: liters

i want to check attribute humidifire.fault in entity "humidifier.deerma_jsq5_33be_humidifier" but i am not understand how....

default settings for different models of humidifiers

It would be cool to put the configuration of the humidifiers in a separate file and in the settings just indicate the type.
Now the default settings are made for the model zhimi.humidifier.cb1

As an example:

- type: custom:mini-humidifier
  entity: fan.xiaomi_miio_device
  model: 'zhimi.humidifier.cb1'

No example

Example for cb1 wont open

Настройки одной карты распространяются на все

Добрый день!
Столкнулся со следующей проблемой: при задании настроек для одной карты, на другой они дублируются.

Код очистителя:

type: 'custom:mini-humidifier'
entity: fan.purifier
name: Очиститель
indicators:
  depth:
    hide: 'on'
  motor_speed:
    icon: 'mdi:fan'
    order: 0
    unit: rpm
    source:
      attribute: motor_speed
  filter_life_remaining:
    icon: 'mdi:heart'
    order: 0
    unit: '%'
    source:
      attribute: filter_life_remaining
  average_aqi:
    icon: 'mdi:weather-fog'
    order: 0
    unit: μg/m³
    source:
      attribute: average_aqi
target_humidity:
  change_action: |
    (selected, _, entity) => {
      const options = { entity_id: entity.entity_id, level: selected };
      return this.call_service('xiaomi_miio', 'fan_set_favorite_level', options);
    }
  icon: 'mdi:fan'
  max: 14
  min: 0
  state:
    attribute: favorite_level
  step: 1
  unit: ''

Код увлажнителя:


entity: fan.humidifier
name: Увлажнитель
target_humidity:
  change_action: |
    (selected, _, entity) => {
      const options = { entity_id: entity.entity_id, humidity: selected };
      return this.call_service('xiaomi_miio', 'fan_set_target_humidity', options);
    }
  icon: 'mdi:water'
  max: 80
  min: 30
  state:
    attribute: target_humidity
  step: 10
  unit: '%'
type: 'custom:mini-humidifier'

Mobile app HA android

Добрый день. Спасибо за твою работу, карточка мне очень понравилась. В браузере все работает, а вот в мобильном приложении на андроиде такая ошибка : "Custom element doesn't exist: mini-humidifier" . Я предполагаю что проблема в пути который указывается в resources: - url: . Было тоже самое и в браузере, пока не поправил как написано в инструкции при установке (но в приложении, к сожалению, эту проблема не ушла). Подскажи, пожалуйста, своим советом.

Good afternoon. Thank you for your work, I really liked this card. In the browser, everything works, but in the mobile app on android, this error : "Custom element doesn't exist: mini-humidifier" . I assume that the problem is in the path that is specified in resources: - url: . It was the same in the browser, until I corrected it as it is written in the installation instructions (but in the application, unfortunately, this problem did not go away). Tell me, please, with your advice.

TypeError: Illegal constructor

Logger: frontend.js.latest.202202030
Source: components/system_log/init.py:190
First occurred: 12:00:00 (6 occurrences)
Last logged: 12:04:01

http://192.168.1.50:8123/local/community/mini-humidifier/mini-humidifier-bundle.js?v=2.5.5:1:2046 Uncaught TypeError: Illegal constructor
http://192.168.1.50:8123/local/community/mini-humidifier/mini-humidifier-bundle.js:1:2071 TypeError: Illegal constructor

Using mini-humidifier-bundle.js?v=3.0.3
Home Assistant 2022.2.3

zhimi.humidifier.ca4 speed error

hi.
model: zhimi.humidifier.ca4

config lovelace:

      - type: vertical-stack
        cards: 
        - type: custom:mini-humidifier
          toggle:
            default: on
            hide: off
          entity: fan.xiaomi_smartmi_air_humidifier_2
          model: 'zhimi.humidifier.ca4'

config fan

  - platform: xiaomi_miio
    name: Xiaomi Smartmi Air Humidifier 2
    host: 192.168.2.146
    token: !secret xiaomi_fan_token
    model: zhimi.humidifier.ca4

Error when changing speed

    auto: dont work
    silent: dont work
    medium: work
    high: work

Error text
Failed to call service fan/set_speed. 'auto'

No option for Fahrenheit?

temperature:
  unit: '°F'

Does not set the temperature value, it wont change from Celsius. Is this possible? I tried without the special symbol as well.

How to apply the "color" style to values?

В примерах описано как можно менять цвет значка в зависимости от значения датчика:
The examples describe how you can change the color of the icon depending on the sensor value:

- type: custom:mini-humidifier
  entity: fan.xiaomi_miio_device
  indicators:
    depth:
      icon:
        template: >
          (value) => {
            if (value === 0)
              return "mdi:tray";
            if (value <= 20)
              return "mdi:tray-minus";
            return "mdi:tray-full";
          }
        style: >
          (value) => {
            if (value === 0)
              return { color: "red" };
            if (value <= 20)
              return { color: "#FD451D" };
            return {};
          }

Это можно сделать для значков температуры и влажности (например: t<=20 синий цвет, 20<t<30 зеленый цвет, t>=30 красный цвет)
This can be done for temperature and humidity icons (for example: t<=20 blue, 20<t<30 green, t>=30 red)

Как прописать правило для изменения цвета текста значения? (цифры)
How do I write a rule for changing the color of the text value? (numbers)

Border when embedded since 2022.11.0

When the card is embedded in an entities card, there is a border around the mini-humidifier card.
Before HA 2022.11.0, there was no border.
mini-climate-card fixed in artem-sedykh/mini-climate-card#109 and released under 2.4.2

After upgrading HASS to 2021.8 it doesn't work anymore

Dashobaords on which I have the card don't load anymore, these errors occur in the logs:

021-08-07 11:38:38 ERROR (MainThread) [frontend.js.latest.202108040] http://homeassistant.local:8123/hacsfiles/mini-humidifier/mini-humidifier-bundle.js:1:67826 Uncaught TypeError: Cannot read property 'id' of undefined
2021-08-07 11:39:00 ERROR (MainThread) [frontend.js.latest.202108040] http://homeassistant.local:8123/hacsfiles/mini-humidifier/mini-humidifier-bundle.js:1:67826 Uncaught TypeError: Cannot read property 'id' of undefined

Removed the integration for now, and dashboards work again.

Maybe something to do with the breaking change:

**Xiaomi Miio
Existing Xiaomi Mi automations using the platform specific services for humidifiers will have a breaking change. You need to change their automation to use new services. Existing fan entities will be automatically replaced with new humidity entities.

The entity name is migrated from the fan entity name. The fan entity_id will change because the platform will change.

For the related entities the old fan entity name will be prepended to the new entities.

Example:

Entity with entity_id “fan.my_device” and name “My humidifier” will migrate to an entity with entity_id “humidifier.my_humidifier” and name “My humidifier”.

A sensor for humidity will have a name like “My humidifier Humidity”.

(@jbouwh - #52366) (xiaomi_miio docs)**

Purifier

Is it possible to add Xiaomi purifier support to your plugin?

deerma.humidifier.jsq - water level

Hey Artem,
I got the tip to write you directly, so here goes nothing.
I think the easiest way is to link the ha-post and to ask you to read the last few posts.
In conculsion - the water level of the on the title mentioned humidifier isn't shown, it always shows 0.
Looking forward to your answer.
Regards

add action_timeout

When you click on the button until the action is applied on the device and the response has not been received, for some time, consider that the click was applied.

Жаль, но у меня не заработало

Я видел у вас внизу описание, что делать если не работает, но для кранов вроде меня, не понятно. В общем выдает такую ошибку. Если есть возможность помочь, буду признателен.

Button color

I think it would be better than
mini-humidifier-button-color also has default var(--paper-item-icon-color)

use the variable ha-card-border-radius

use the ha-card-border-radius variable to round the edges of the map in various themes.
Now it looks like this:

fixed:

bug frontend HA 2022.11.*

Привет! На версии 11 добавили скругленные края карточек. К сожалению, теперь карточка имеет квадратные края поверх скругленных.

add configuration for secondary_info

Support zhimi.humidifier.ca1

Hello,

Syssi had support zhimi.humidifier.ca1 at this repo https://github.com/syssi/xiaomi_airpurifier
Can you can check and support it ?

I'm tried add but not thing to show

Thanks

Unable to create 2 cards for 2 devices zhimi.humidifier.ca4

have a very strange card behavior. I have 2 identical humidifiers via Xiaomi Miio integration (https://www.home-assistant.io/integrations/xiaomi_miio). I connect 1 humidifier and get the states of all sensors and switches. But on the second humidifier I don't get this card configuration. About the humidifier work when you turn on the mini-humidifier card. The sensors of both devices are controlled from a custom card.

type: custom:mini-humidifier entity: humidifier.zhimi_humidifier_ca4_2 model: zhimi.humidifier.ca4 toggle: default: 'on' hide: 'on'

HUCS: 1.25.5
Home Assistant Core 2022.6.6

zhimi.humidifier.ca4 and xiaomi_miio_airpurifier syssi

how to set up correctly? services do not start, only some functions work

Group switch on CARD ?

Подскажите,как сделать отдельную кнопку в карточке на отдельный свитч?
Tell me how to make a separate button in the card for a separate group switch?
auto:
icon: 'mdi:brightness-auto'
order: 5
state:
entity: group.manual_brizer
mapper: "(state) => (state ? 'on' : 'off')"
toggle_action: >

Card not displaying right based on entity name

If the entity name is fan.zhimi_airpurifier_mb4 it will display all the sensors and buzzer/lock buttons if it is fan.zhimi_airpurifier_mb4_2 nothing just preset button

Target humidity with input_number

deerma.humidifier.mjjsq has an issue:
In "Humidity=Auto" mode the target_humidity attribute works fine, but in all other modes (Low, Medium, High) the target_humidity attribute equals 0 (automatically).
So, I changed it with input_number and some automations (see for details)

    input_number:
        lr_humidifier_target_humidity:
          name: Favorite Level
          initial: 50
          min: 30
          max: 60
          step: 1

        - type: custom:mini-humidifier
          entity: fan.lr_humidifier
          name: Hum
          model: 'xiaomi_miio_airpurifier:deerma.humidifier.mjjsq'
          target_humidity:
            state:
              entity: input_number.lr_humidifier_target_humidity

But now I cannot change the value of the input_number via the mini-humidifier card.
I try to change (e.g. from 50 to 40), but it becomes back 50 and nothing changes.

Icons not shown on entities card

My configuration:

type: entities
entities:
  - type: custom:mini-humidifier
    entity: fan.mi_humidifier
    model: xiaomi_miio_airpurifier:deerma.humidifier.mjjsq
    name: Увлажнитель в спальне
    group: true
  - type: custom:mini-humidifier
    entity: fan.mi_humidifier_kids
    model: xiaomi_miio_airpurifier:deerma.humidifier.mjjsq
    name: Увлажнитель в детской
    group: true
  - type: custom:mini-humidifier
    entity: fan.mi_humidifier_old
    model: xiaomi_miio_airpurifier:deerma.humidifier.mjjsq
    name: Увлажнитель старый
    icon: mdi:air-purifier
    group: true

There are no icons:

But (!!!) if i add card with one humidifier:

type: custom:mini-humidifier
entity: fan.mi_humidifier
model: xiaomi_miio_airpurifier:deerma.humidifier.mjjsq

It fixes all humidifiers on all cards:

the card does not display

type: custom:mini-humidifier
entity: fan.xiaomi_air_humidifier
model: deerma.humidifier.jsq

Custom element doesn't exist: mini-humidifier.

Done everything as on the Manual.
The card is throwing this error: "Custom element doesn't exist: mini-humidifier."

No matching entities found using FAN

Although I have fan.air_humidifier

Model
zhimi.humidifier.ca4

Card can not display in Android APP and some browser

First of all，thanks for the UI card.I found the card can not display in some browser,the same as in Android APP，and there is no message on the page,just display noting.and it resault the whole page become blank even if there are other cards on the page.I try to clearing the browsers cache and restart Home Assistant,that can not work.

Android chrome browser: not OK
homeassistant Android APP: not OK
Android HUAWEI browser: OK
PC chrome browser: OK
PC firefox browser: OK

deerma.humidifier.jsq5

hello, could you integrate deerma.humidifier.jsq5 ?

thanks

deerma.humidifier.mjjsq fan.set_speed not work

May need to be replaced with preset_mode
my config

      - type: custom:mini-humidifier
        entity: fan.humidifier
        model: xiaomi_miio_airpurifier:deerma.humidifier.mjjsq

Default configuration (model) documentation

Please fix the documentation around available default configurations.
Probably the link deerma.humidifier.mjjsq by @dedors [xiaomi_miio integration](https://www.home-assistant.io/integrations/xiaomi_miio) is wrong. I don see any humidifier integrations at @dedors repositories.
https://www.home-assistant.io/integrations/xiaomi_miio simply does not support deerma.humidifier.mjjsq
The configuration model: 'deerma.humidifier.mjjsq' never worked for me.
The configuration model: 'xiaomi_miio_airpurifier:deerma.humidifier.mjjsq' works fine, but there is no any configuration sample in the documentation.
Note there is confusion between terms model and default configuration.

And the link deerma.humidifier.mjjsq is wrong too.

Card does not display data

First of all Thank you for your work.
Help me to understand. I am setting up a card for the zhimi.humidifier.ca4 humidifier.
The configuration looks like this
type: custom:mini-humidifier entity: humidifier.zhimi_humidifier_ca4 model: xiaomi_miio_airpurifier:zhimi.humidifier.ca4
But on the card it is displayed like this
https://ibb.co/N6dkW3x
All data is NaN% NaN С NaN rpm. etc.

What am I doing wrong?

Show indicator card on click

The 'fan level' button doesn't work (after updates)

Card config:

- type: 'custom:mini-humidifier'
entity: fan.bedroom_humidifier
model: 'xiaomi_miio_airpurifier:zhimi.humidifier.ca4'

This button has stoped working. Services fan.set_speed and xiaomi_miio_airpurifier.fan_set_fan_level from dev tools also doesn't work.

Проблема с выпадающим списком

Добрый день! Выпадающие списки развернуты. подскажите пожалуйста как исправить.

Support for deerma.humidifier.mjjsq

I am using the custom HACS component Xiaomi Mi Air Purifier to integrate my Xiaomi Mijia SCK0A45 humidifier (model: deerma.humidifier.mjjsq). It works great, but now I want a nice frontend with this card.

Unfortunately, I added the card but nothing happens. No errors but no card shows up.
- entity: fan.xiaomi_miio_device
type: 'custom:mini-humidifier'

Can you add support for this model humidifier? Many thanks!

Target humidity slider does not appear for MQTT humidifier

I'm trying to get an MQTT dehumidifier working with this card (https://www.home-assistant.io/integrations/humidifier.mqtt/).

After configuration, the target humidity slider won't appear on the card. My Tasmota-based no-frills dehumidifier does not have any modes, just an on/off and humidity setting.

Here is my config:

type: custom:mini-humidifier
entity: humidifier.basement_dehumidifier
power:
  type: toggle
indicators:
  humidity:
    icon: mdi:water
    unit: '%'
    source:
      entity: sensor.basement_climate_humidity
  temperature:
    source:
      entity: sensor.basement_climate_temperature
target_humidity:
  hide: 'off'
  unit: '%'
  min: 10
  max: 80
  step: 5
  attribute: humidity
  mapper: (current_value, entity, humidifier_entity) => current_value
  change_action: |
    (selected, state, entity) => {
      const options = { entity_id: entity.entity_id, humidity: selected };
      return this.call_service('humidifier', 'set_humidity', options);
    }

Here is how the card looks like:

HA Version: 2021.9.5

'group: on' don’t work anymore with ha 0.113.0 beta

Hello.
The option group: on don‘t work anymore with Home Assistant 0.113.0 beta.

Mode of Humidifier

Please tell me how to make the text of the operating mode with number 2 on the card the same as when opening the card, like text 1.

i use "generic_hygrostat"

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

artem-sedykh / mini-humidifier Goto Github PK

mini-humidifier's Introduction

Mini Humidifier Card

Notice

Install

Simple install

CLI install

Updating

Using the card

Options

Card options

Action object options

Theme variables

Adding the default configuration for the new model

Available default configurations

target humidity

power button

Indicators

indicator functions

source mapper

icon template, style

default-indicators

Buttons

buttons functions

default buttons

toggle button

secondary info

group

Action object options examples

Development

Instructions

Getting errors?

Inspiration

License

mini-humidifier's People

Contributors

Stargazers

Watchers

Forkers

mini-humidifier's Issues

Info

Server Logs

Recommend Projects

Recommend Topics

Recommend Org