Lovelace: Xiaomi Air Purifier card

Hey guys! I would like to share one of my custom lovelace cards tailored for my Xiaomi Purifier 2:

You will need:

Lovelace yaml file:

      - type: picture-elements
        image: /local/purifier2.jpg
        elements:
          - type: state-icon
            tap_action: toggle
            entity: fan.xiaomi_miio_device
            style:
              top: 15%
              left: 74%
              --iron-icon-width: 40px
              --iron-icon-height: 40px
          - type: icon
            icon: mdi:water-percent
            tap_action: none
            style:
              top: 22%
              left: 30%
              --iron-icon-width: 40px
              --iron-icon-height: 40px
          - type: custom:circle-sensor-card
            entity: fan.xiaomi_miio_device
            attribute: 'humidity'
            max: 100
            min: 0
            stroke_width: 10
            gradient: true
            units: '%'
            show_card: false
            font_style:
              color: black
            color_stops:
              0: '#FF0000'
              40: '#00FF00'
              70: '#00FF00'
              100: '#FF0000'
            style:
              top: 31%
              left: 30%
              width: 50px
              height: 50px
              
          - type: icon
            icon: mdi:thermometer
            tap_action: none
            style:
              top: 22%
              left: 42%
              --iron-icon-width: 40px
              --iron-icon-height: 40px
          - type: custom:circle-sensor-card
            entity: fan.xiaomi_miio_device
            attribute: 'temperature'
            max: 50
            min: 0
            stroke_width: 10
            gradient: true
            units: '°C'
            show_card: false
            font_style:
              color: black
            color_stops:
              0: '#FF0000'
              20: '#00FF00'
              26: '#00FF00'
              50: '#FF0000'
            style:
              top: 31%
              left: 42%
              width: 50px
              height: 50px
          - type: icon
            icon: mdi:weather-windy
            tap_action: none
            style:
              top: 22%
              left: 54%
              --iron-icon-width: 40px
              --iron-icon-height: 40px
          - type: icon
            icon: mdi:blackberry
            tap_action: none
            style:
              top: 22%
              left: 54%
              --iron-icon-width: 20px
              --iron-icon-height: 20px
          - type: custom:circle-sensor-card
            entity: fan.xiaomi_miio_device
            attribute: 'aqi'
            max: 70
            min: 0
            stroke_width: 10
            gradient: true
            units: ''
            show_card: false
            font_style:
              color: black
            color_stops:
              0: '#00FF00'
              70: '#FF0000'
            style:
              top: 31%
              left: 54%
              width: 50px
              height: 50px
              
          - type: icon
            icon: mdi:speedometer
            tap_action: none
            style:
              top: 22%
              left: 66%
              --iron-icon-width: 40px
              --iron-icon-height: 40px
          - type: custom:circle-sensor-card
            entity: fan.xiaomi_miio_device
            attribute: 'motor_speed'
            max: 2000
            min: 0
            stroke_width: 10
            gradient: true
            units: ''
            show_card: false
            font_style:
              color: black
            color_stops:
              300: '#00FF00'
              5000: '#FF0000'
            style:
              top: 31%
              left: 66%
              width: 50px
              height: 50px
              
          - type: state-label
            entity: sensor.fan_speed
            style:
              top: 15%
              left: 23.5%
              color: rgb(255, 255, 255)
              transform: translate(0%,-50%)
              pointer-events: none
              text-shadow: 1px 1px black
              font-family: Trebuchet MS
              font-size: 90%
              font-weight: bold
              border-left-style: solid
              border-color: rgb(34, 154, 210)
              background-color: rgb(54, 65, 78)
              opacity: 0.8
          - type: icon
            icon: mdi:brightness-auto
            tap_action: call-service
            entity: fan.xiaomi_miio_device
            service: fan.set_speed
            service_data:
              entity_id: fan.xiaomi_miio_device
              speed: Auto
            style:
              top: 40%
              left: 42%
              --iron-icon-height: 30px
              --iron-icon-width: 30px
          - type: icon
            icon: mdi:power-sleep
            tap_action: call-service
            entity: fan.xiaomi_miio_device
            service: fan.set_speed
            service_data:
              entity_id: fan.xiaomi_miio_device
              speed: Silent
            style:
              top: 40%
              left: 50%
              --iron-icon-height: 30px
              --iron-icon-width: 30px
          - type: icon
            icon: mdi:account-heart
            tap_action: call-service
            entity: fan.xiaomi_miio_device
            service: fan.set_speed
            service_data:
              entity_id: fan.xiaomi_miio_device
              speed: Favorite
            style:
              top: 40%
              left: 57%
              --iron-icon-height: 30px
              --iron-icon-width: 30px

Additional configuration:

sensor:
  - platform: template
    sensors:
      fan_speed:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.speed }}"
      bedroom_temperature:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.temperature }}"
      bedroom_humidity:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.humidity }}"
      bedroom_aqi:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.aqi }}"

You can change the picture to your own or find something on the internet, I didn’t want to share some copyrighted image, so I took a picture of my own. https://imgur.com/T2ZmDNF

If you have suggestion for better colors, please let me know. Also you can customize the icon of the power switch in configuration->customization->Xiaomi Miio Device (fan) and override the icon attribute.

4 Likes

I have made few changes. Can you post your service calls?
air

Nice so far. Thank you!
The tap actions weren’t working at all. I fixed it.
I also added a dropdown list to choose the desired “Favorite Mode”-Fanspeed. Unfortunately I did not found a way to set the current value in that input select list. This also need the vertical stack custom card.

Lovelace.ui:
Requires:

_

type: 'custom:vertical-stack-in-card'
cards:
  - image: /local/purifier2.jpg
    title: Vacuum
    type: picture-elements  
    elements:    
      - type: state-icon
        tap_action: fan.toggle
        entity: fan.xiaomi_miio_device
        style:
          top: 15%
          left: 74%
          '--iron-icon-width': 40px
          '--iron-icon-height': 40px
      - type: icon
        icon: 'mdi:water-percent'
        tap_action: none
        style:
          top: 22%
          left: 30%
          '--iron-icon-width': 40px
          '--iron-icon-height': 40px
      - type: 'custom:circle-sensor-card'
        entity: fan.xiaomi_miio_device
        attribute: humidity
        max: 100
        min: 0
        stroke_width: 10
        gradient: true
        units: '%'
        show_card: false
        font_style:
          color: black
        color_stops:
          '0': '#FF0000'
          '40': '#00FF00'
          '70': '#00FF00'
          '100': '#FF0000'
        style:
          top: 31%
          left: 30%
          width: 50px
          height: 50px
      - type: icon
        icon: 'mdi:thermometer'
        tap_action: none
        style:
          top: 22%
          left: 42%
          '--iron-icon-width': 40px
          '--iron-icon-height': 40px
      - type: 'custom:circle-sensor-card'
        entity: fan.xiaomi_miio_device
        attribute: temperature
        max: 50
        min: 0
        stroke_width: 10
        gradient: true
        units: °C
        show_card: false
        font_style:
          color: black
        color_stops:
          '0': '#FF0000'
          '20': '#00FF00'
          '26': '#00FF00'
          '50': '#FF0000'
        style:
          top: 31%
          left: 42%
          width: 50px
          height: 50px
      - type: icon
        icon: 'mdi:weather-windy'
        tap_action: none
        style:
          top: 22%
          left: 54%
          '--iron-icon-width': 40px
          '--iron-icon-height': 40px
      - type: icon
        icon: 'mdi:blackberry'
        tap_action: none
        style:
          top: 22%
          left: 54%
          '--iron-icon-width': 20px
          '--iron-icon-height': 20px
      - type: 'custom:circle-sensor-card'
        entity: fan.xiaomi_miio_device
        attribute: aqi
        max: 70
        min: 0
        stroke_width: 10
        gradient: true
        units: ''
        show_card: false
        font_style:
          color: black
        color_stops:
          '0': '#00FF00'
          '70': '#FF0000'
        style:
          top: 31%
          left: 54%
          width: 50px
          height: 50px
      - type: icon
        icon: 'mdi:speedometer'
        tap_action: none
        style:
          top: 22%
          left: 66%
          '--iron-icon-width': 40px
          '--iron-icon-height': 40px
      - type: 'custom:circle-sensor-card'
        entity: fan.xiaomi_miio_device
        attribute: motor_speed
        max: 2000
        min: 0
        stroke_width: 10
        gradient: true
        units: ''
        show_card: false
        font_style:
          color: black
        color_stops:
          '300': '#00FF00'
          '5000': '#FF0000'
        style:
          top: 31%
          left: 66%
          width: 50px
          height: 50px
      - type: state-label
        entity: sensor.purifier_fan_speed
        style:
          top: 15%
          left: 23.5%
          color: 'rgb(255, 255, 255)'
          transform: 'translate(0%,-50%)'
          pointer-events: none
          text-shadow: 1px 1px black
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-left-style: solid
          border-color: 'rgb(34, 154, 210)'
          background-color: 'rgb(54, 65, 78)'
          opacity: 0.8
      - type: icon
        icon: 'mdi:brightness-auto'
        tap_action:
          action: call-service
          service: fan.set_speed
          service_data:
            entity_id: fan.xiaomi_miio_device
            speed: Auto
        style:
          top: 40%
          left: 42%
          '--iron-icon-height': 30px
          '--iron-icon-width': 30px
      - type: icon
        icon: 'mdi:power-sleep'
        tap_action:
          action: call-service
          service: fan.set_speed
          service_data:
            entity_id: fan.xiaomi_miio_device
            speed: Silent
        style:
          top: 40%
          left: 50%
          '--iron-icon-height': 30px
          '--iron-icon-width': 30px
      - type: icon
        icon: 'mdi:account-heart'
        tap_action:
          action: call-service
          service: fan.set_speed
          service_data:
            entity_id: fan.xiaomi_miio_device
            speed: Favorite
        style:
          top: 40%
          left: 57%
          '--iron-icon-height': 30px
          '--iron-icon-width': 30px
  - entities:
      - entity: input_select.purifier_fan
    type: entities          

purifier.yaml:
You can either put this all in your config files accordingly or just put it in a single file packages\purifier.yaml and add packages: !include_dir_named packages to “homeassistant:” in configuration.yaml

##
##XIAOMI PURIFIER CONFIG
########################################

fan:
  - platform: xiaomi_miio
    host: 192.168.0.38
    token: !secret purifier_token
sensor:
  - platform: template
    sensors:
      purifier_fan_speed:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.speed }}"
      purifier_temperature:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.temperature }}"
      purifier_humidity:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.humidity }}"
      purifier_aqi:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.aqi }}"  
      purifier_favspeed:
        value_template: "{{ states.fan.xiaomi_miio_device.attributes.favorite_level }}"          
        
input_select:
  purifier_fan:
    icon: mdi:fan
    name: Purifier Favorite Mode Fan Speed
#    initial: "{{ states('fan.xiaomi_miio_device.attributes.favorite_level') }}" #does not work like that. 
    options:
        - 0
        - 2
        - 4
        - 6
        - 8
        - 10
        - 12
        - 14
        
automation:
  - alias: Set Purifier Fan Speed
    id: 'purifier_set_fan_speed'
    trigger:
    - platform: state
      entity_id: input_select.purifier_fan
    action:
    - service: fan.xiaomi_miio_set_favorite_level
      data_template:
        entity_id: fan.xiaomi_miio_device
        level: "{{ states('input_select.purifier_fan') }}"
        
     
       
##END XIAOMI PURIFIER CONFIG  
##Dedi

I’m almost giving up on this but…I like the card so:

“Custom element doesn’t exist: circle-sensor-card.”

  • I’ve done what I always do, git, RAW, new file, save.

  • I’ve done method wget and move as on the git page.

  • move to another directory…
    put v2, v3, clear cache, another browser but nothing works

Anyone can tell me what can be wrong?

Thank you guys! :smiley:

1 Like

Care to share your config? :slight_smile:

You can finde sime card config here: