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.

6 Likes

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

1 Like

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
1 Like

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:

2 Likes

Care to share your config? :slight_smile:

You can finde sime card config here:

2 Likes

10

change kitchen_air_purifier with your entity_id of the fan/purifier

sensors.yaml:

- platform: template
  sensors:
      purifier_fan_mode:
         friendly_name: "Mode"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.speed }}"
      purifier_fan_speed:
         friendly_name: "Motor speed"
         unit_of_measurement: 'rpm'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.motor_speed }}"
      purifier_temperature:
         friendly_name: "Temperature"
         unit_of_measurement: 'C°'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.temperature }}"
      purifier_humidity:
         friendly_name: "Humidity"
         unit_of_measurement: '%'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.humidity }}"
      purifier_aqi:
         friendly_name: "Air Quality Index"
         unit_of_measurement: 'aqi'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.aqi }}"
      purifier_favspeed:
         friendly_name: "Favourite Level"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.favorite_level }}"
      purifier_filter_hours_used:
         friendly_name: "Hours Used"
         unit_of_measurement: 'h'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.filter_hours_used }}"
      purifier_filter_life_remaining:
         friendly_name: "Filter"
         unit_of_measurement: '%'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.filter_life_remaining }}"
      purifier_child_lock:
         friendly_name: "Child Lock"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.child_lock }}"
      purifier_display:
         friendly_name: "Display"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.led }}"
      purifier_button_pressed:
         friendly_name: "Button Pressed"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.button_pressed }}"
      purifier_buzzer:
         friendly_name: "Buzzer"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.buzzer }}"
      purifier_filter_type:
         friendly_name: "Filter Type"
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.filter_type }}"
      purifier_ligt_sensor:
         friendly_name: "Light Sensor"
         unit_of_measurement: 'lux'
         value_template: "{{ states.fan.kitchen_air_purifier.attributes.illuminance }}"

Card:

card:
  cards:
    - elements:
        - entity: sensor.purifier_filter_hours_used
          prefix: 'Used: '
          style:
            background-color: 'rgba(0, 0, 0,.0)'
            border-color: 'rgb(34, 154, 210,.0)'
            border-left-style: solid
            color: dodgerblue
            font-size: 100%
            font-weight: bold
            left: 1.5%
            opacity: 1
            pointer-events: none
            top: 5%
            transform: 'translate(0%,-50%)'
          type: state-label
        - icon: 'mdi:water-percent'
          style:
            '--iron-icon-height': 20px
            '--iron-icon-width': 20px
            color: dodgerblue
            left: 8%
            position: absolute
            top: 17%
          tap_action: none
          type: icon
        - entity: sensor.purifier_humidity
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 100
          min: 0
          show_card: null
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 25%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: '%'
        - icon: 'mdi:thermometer'
          style:
            '--iron-icon-height': 20px
            '--iron-icon-width': 20px
            color: dodgerblue
            left: 7.5%
            position: absolute
            top: 37%
          tap_action: none
          type: icon
        - entity: sensor.purifier_temperature
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 50
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 45%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: °C
        - icon: 'mdi:air-filter'
          style:
            '--iron-icon-height': 17px
            '--iron-icon-width': 17px
            color: dodgerblue
            left: 8%
            top: 56%
          tap_action: none
          type: icon
        - entity: sensor.purifier_filter_life_remaining
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 100
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 65%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: ''
        - entity: sensor.purifier_aqi
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 600
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 13%
            left: 50%
            top: 18.5%
            width: 13%
          type: 'custom:circle-sensor-card'
          units: p
        - icon: 'mdi:speedometer'
          style:
            '--iron-icon-height': 17px
            '--iron-icon-width': 17px
            color: dodgerblue
            left: 8%
            top: 76%
          tap_action: none
          type: icon
        - entity: sensor.purifier_fan_speed
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 1700
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 85%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: ''
        - entity: sensor.purifier_fan_mode
          max: 2000
          min: 0
          prefix: 'Mode: '
          style:
            background-color: 'rgba(0, 0, 0,.0)'
            border-color: 'rgb(34, 154, 210,.0)'
            border-left-style: solid
            color: dodgerblue
            font-size: 100%
            font-weight: bold
            opacity: 1
            pointer-events: none
            right: 1%
            top: 1%
            transform: none
          type: state-label
        - entity: fan.kitchen_air_purifier
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 17%
            top: 17%
          tap_action:
            action: call-service
            service: fan.toggle
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: state-icon
        - icon: 'mdi:brightness-auto'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 4%
            top: 17%
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.kitchen_air_purifier
              speed: Auto
          type: icon
        - icon: 'mdi:power-sleep'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 34%
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.kitchen_air_purifier
              speed: Silent
          type: icon
        - icon: 'mdi:account-heart'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 4%
            top: 34%
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.kitchen_air_purifier
              speed: Favorite
          type: icon
        - icon: 'mdi:monitor'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 51%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_LED_ON
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: icon
        - icon: 'mdi:monitor-off'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 3%
            top: 51%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_LED_OFF
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: icon
        - icon: 'mdi:bell'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 68%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_BUZZER_ON
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: icon
        - icon: 'mdi:lock-alert'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 87%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_CHILD_LOCK_ON
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: icon
        - icon: 'mdi:bell-off-outline'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 3%
            top: 68%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_BUZZER_OFF
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: icon
        - icon: 'mdi:lock-open-outline'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 3%
            top: 87%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_CHILD_LOCK_OFF
            service_data:
              entity_id: fan.kitchen_air_purifier
          type: icon
      image: /local/xiaomi-mi-air-purifier-2s.jpg
      type: picture-elements
  type: 'custom:vertical-stack-in-card'
style:
  background-image: url("/local/xiaomi-mi-air-purifier-2s.jpg")
  background-repeat: no-repeat
  background-size: 100% 100%
  height: 100%
  position: relative
type: 'custom:card-modder'

Put the following background image in www directory.
Background image:xiaomi-mi-air-purifier-2s

7 Likes

Hello and thanks
could you help

when i want to create card it write error : custom:card-modder doesnt exist…
i cant creat the card
thx

Download card-modder.js from here:


Then place it to your www directory …
Then add this to your LoveLace UI trough “Configure UI” and then “Raw config editor”:
resources:
  - type: js
    url: /local/card-modder.js?v=1
1 Like

ok i did this and it doesnt work!
could you explain a little
MB

Hello
I have exactly Same pb


M

Hello,

I have add this in my home assistant. it’s OK.
But the card-modder is deprecated ( source : https://github.com/thomasloven/lovelace-card-modder ), Do you plan to update ?

you can just use Card Mod https://github.com/thomasloven/lovelace-card-mod
it’s working fine for me.

It’s also available via HACS

1 Like

Would you mind sending your card config? It would save me some time. I couldn’t find the card in HACS anywhere.

Hi,

I have update HA to 0.110 version and i have this error on the card : Cannot read property ‘states’ of undefined

Hi all, I’ve updated the most recent card shown above with the new service calls and explicitly colored icons and no need for card modder. Haven’t tried it on .110, but works on .107. Just change fan.master_bedroom_air_purifier to your entitiy ID.

  - type: picture-elements
    image: /local/images/air_purifier.jpeg
    elements:
      - type: state-label
        entity: sensor.master_bedroom_purifier_filter_hours_used
        prefix: 'Used: '
        style:
          background-color: 'rgba(0, 0, 0,.0)'
          border-color: 'rgb(34, 154, 210,.0)'
          border-left-style: solid
          color: dodgerblue
          font-size: 100%
          font-weight: bold
          left: 1.5%
          opacity: 1
          pointer-events: none
          top: 5%
          transform: 'translate(0%,-50%)' 
      - type: icon
        icon: 'mdi:water-percent'
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          color: dodgerblue
          left: 8%
          position: absolute
          top: 17%
        tap_action: none
      - type: custom:circle-sensor-card
        units: '%'
        entity: sensor.master_bedroom_purifier_humidity
        fill: 'rgba(0,0,0,0.3)'
        font_style:
          color: white
        gradient: true
        max: 100
        min: 0
        show_card: null
        stroke_width: 10
        style:
          height: 17%
          left: 15%
          top: 25%
          width: 17%
      - type: icon
        icon: 'mdi:thermometer'
        style:
          '--iron-icon-height': 20px
          '--iron-icon-width': 20px
          color: dodgerblue
          left: 7.5%
          position: absolute
          top: 37%
        tap_action: none
      - type: custom:circle-sensor-card
        units: °C
        entity: sensor.master_bedroom_purifier_temperature
        fill: 'rgba(0,0,0,0.3)'
        font_style:
          color: white
        gradient: true
        max: 50
        min: 0
        show_card: false
        stroke_width: 10
        style:
          height: 17%
          left: 15%
          top: 45%
          width: 17%
      - type: icon
        icon: 'mdi:air-filter'
        style:
          '--iron-icon-height': 17px
          '--iron-icon-width': 17px
          color: dodgerblue
          left: 8%
          top: 56%
        tap_action: none
      - type: custom:circle-sensor-card
        units: ''
        entity: sensor.master_bedroom_purifier_filter_life_remaining
        fill: 'rgba(0,0,0,0.3)'
        font_style:
          color: white
        gradient: true
        max: 100
        min: 0
        show_card: false
        stroke_width: 10
        style:
          height: 17%
          left: 15%
          top: 65%
          width: 17%
      - type: custom:circle-sensor-card
        units: p
        entity: sensor.master_bedroom_purifier_aqi
        fill: 'rgba(0,0,0,0.3)'
        font_style:
          color: white
        gradient: true
        max: 600
        min: 0
        show_card: false
        stroke_width: 10
        style:
          height: 13%
          left: 50%
          top: 18.5%
          width: 13%
      - type: icon
        tap_action: none
        icon: 'mdi:speedometer'
        style:
          '--iron-icon-height': 17px
          '--iron-icon-width': 17px
          color: dodgerblue
          left: 8%
          top: 76%
      - type: custom:circle-sensor-card
        units: ''
        entity: sensor.master_bedroom_purifier_fan_speed
        fill: 'rgba(0,0,0,0.3)'
        font_style:
          color: white
        gradient: true
        max: 1700
        min: 0
        show_card: false
        stroke_width: 10
        style:
          height: 17%
          left: 15%
          top: 85%
          width: 17%  
      - type: state-label
        entity: sensor.master_bedroom_purifier_fan_mode
        max: 2000
        min: 0
        prefix: 'Mode: '
        style:
          background-color: 'rgba(0, 0, 0,.0)'
          border-color: 'rgb(34, 154, 210,.0)'
          border-left-style: solid
          color: dodgerblue
          font-size: 100%
          font-weight: bold
          opacity: 1
          pointer-events: none
          right: 1%
          top: 1%
          transform: none  
      - type: state-icon
        entity: fan.master_bedroom_air_purifier
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          margin-right: '-10%'
          '--paper-item-icon-color': black
          '--paper-item-icon-active-color': dodgerblue
          right: 18%
          top: 17%
        tap_action:
          action: call-service
          service: fan.toggle
          service_data:
            entity_id: fan.master_bedroom_air_purifier
      - type: icon
        icon: 'mdi:brightness-auto'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          color: black
          right: 4%
          top: 17%
        tap_action:
          action: call-service
          service: fan.set_speed
          service_data:
            entity_id: fan.master_bedroom_air_purifier
            speed: Auto
      - type: icon
        icon: 'mdi:power-sleep'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          margin-right: '-10%'
          color: black
          right: 22%
          top: 34%
        tap_action:
          action: call-service
          service: fan.set_speed
          service_data:
            entity_id: fan.master_bedroom_air_purifier
            speed: Silent 
      - type: icon
        icon: 'mdi:account-heart'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          color: black
          right: 4%
          top: 34%
        tap_action:
          action: call-service
          service: fan.set_speed
          service_data:
            entity_id: fan.master_bedroom_air_purifier
            speed: Favorite
      - type: icon
        icon: 'mdi:monitor'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          margin-right: '-10%'
          color: black
          right: 22%
          top: 51%
        tap_action:
          action: call-service
          service: xiaomi_miio.fan_set_led_on
          service_data:
            entity_id: fan.master_bedroom_air_purifier 
      - type: icon
        icon: 'mdi:monitor-off'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          color: black
          right: 3%
          top: 51%
        tap_action:
          action: call-service
          service: xiaomi_miio.fan_set_led_off
          service_data:
            entity_id: fan.master_bedroom_air_purifier 
      - type: icon
        icon: 'mdi:bell'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          margin-right: '-10%'
          color: black
          right: 22%
          top: 68%
        tap_action:
          action: call-service
          service: xiaomi_miio.fan_set_buzzer_on
          service_data:
            entity_id: fan.master_bedroom_air_purifier
      - type: icon
        icon: 'mdi:lock-alert'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          margin-right: '-10%'
          color: black
          right: 22%
          top: 87%
        tap_action:
          action: call-service
          service: xiaomi_miio.fan_set_child_lock_on
          service_data:
            entity_id: fan.master_bedroom_air_purifier   
      - type: icon
        icon: 'mdi:bell-off-outline'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          color: black
          right: 3%
          top: 68%
        tap_action:
          action: call-service
          service: xiaomi_miio.fan_set_buzzer_off
          service_data:
            entity_id: fan.master_bedroom_air_purifier
      - type: icon
        icon: 'mdi:lock-open-outline'
        style:
          '--iron-icon-height': 22px
          '--iron-icon-width': 22px
          color: black
          right: 3%
          top: 87%
        tap_action:
          action: call-service
          service: xiaomi_miio.fan_set_child_lock_off
          service_data:
            entity_id: fan.master_bedroom_air_purifier
1 Like

The “Cannot read property ‘states’ of undefined” is a problem as a result of the custom:circle-sensor-card issue with version 110

reported on github, although no activity with circle sensor card development for a couple of years, so it “may” not be fixed

for the moment i have commented out the circle-sensor-card entries and use “type: state-badge” unitll, and if this is resolved. Not as nice, however at least gets the picture-elements card loaded without the error

      - type: state-badge
          entity: sensor.airpurifier_lounge_motor_speed
          title: Fan1
          tap_action:
           action: more-info
          style:
            top: 35%
            left: 15%
            height: 40%
            transform: 'translate(-50%,-50%) scale(0.85,0.85)'

Capture

1 Like

@MaAamie I don’t know why this error appears. I have to dig some more, as I’m still on HA v0.94. :slight_smile: Some breaking change probably (the main reason I stopped updating - tired of breaking changes). :slight_smile:

May you post the entire card?
It could be very useful (and simpler)

Thank you in advance