Xiaomi Smartmi Fan CSS-animated Card

Tags: #<Tag:0x00007f73ae25e238> #<Tag:0x00007f73ae25dec8>

Hey everyone, Happy New Year!

I’m here to share my Lovelace card for Xiaomi Smartmi Fan, compatible up to the latest Xiaomi Smartmi Fan 2S. Works with syssi/xiaomi_fan integration.

Preview

Installation

Search HACS for:
Xiaomi Smartmi Fan Card

Github:

Features

Animations

  • Fan animation when powered on
  • Fan oscillation animation

Buttons

  • Hidden buttons to the left and right of fan image that rotate the fan by 5 degrees
  • Button to cycle through 5 speed-levels
  • Button to toggle oscillation
  • Button to toggle natural mode

Status Indicators

  • Child lock status indicator
  • Current oscillation angle indicator
  • Timer indicator (time left to power off)

Credits

This is a fork of the great work by fineemb. I fixed some bugs, translated it to English and made some changes so that it works with Xiaomi Smartmi Fan 2S (zhimi.za4).

Why fork?

  • Instructions and UI is in Chinese
  • Limited support for the Smartmi Fan 2S.
    • Temperature, humidity, battery level sensors no longer exist in the 2S
    • The indicators are essentially rendered useless
  • There’s no way to control the speed
  • Child lock toggle has limited use
    • Child lock is rarely toggled imo
  • Needs bug fixes

Why not submit a PR?

My main reason is: Feature divergence. Indicators and buttons are now different from their original intention.

5 Likes

Hi! Great but how to add this card to Lovelace? (not resource but just card itself)?
found it:
- type: ‘custom:fan-xiaomi’
name: myFan
entity: fan.zhi_neng_dian_feng_shan_1

Thanks for the reminder. I actually should write that in the README.

cards:
- entity: fan.fan_name
  name: Fan Name
  type: 'custom:fan-xiaomi'

Hi there. I get the following error when trying to add via Manual Card. " Cannot read property ‘setConfig’ of undefined

- entity: fan.xiaomi_smart_fan
  name: Fan Name
  type: 'custom:fan-xiaomi'

Hey, can you explain what are the steps you followed to install the plugin till the point you got the error? I can’t seem to reproduce it.

Incase you haven’t worked it out use this when adding like that

type: 'custom:fan-xiaomi'
name: Living Room Fan
entity: fan.xiaomi_smart_fan
1 Like

Does not work in latest HA 0.110.3+

Add Manual card and save but nothing displays in Lovelace.

Is this compatible with latest HACS?

I’m running latest HACs 1.0.3 and latest HA 0.110.5 and it’s working for me.

What did you add in your Lovelace config?

Tried a re-install from HACS but still not showing up. Added in Lovelace Raw editor:

    cards:
      - entity: fan.46580734bcddc296b837
        name: Office Fan
        type: 'custom:fan-xiaomi'

Also tried adding Manual card with:

  type: 'custom:fan-xiaomi'
  name: Office Fan
  entity: fan.46580734bcddc296b837

I’ve only added the manual card as such:

    cards:
      - entity: fan.windy
        name: Windy
        type: 'custom:fan-xiaomi'

Did you install Xiaomi Mi Smart Pedestal Fan Integration v0.2.0? You’ll need that custom integration installed in HACS for it to work.

Great work thanks !
Do you plan to add css configuration ?

Thanks! I’m afraid not at the moment, though you can fork the repository and edit your own css if need be.

1 Like

Having trouble making this card working for me. I have done the integration and can see the fan with my other entities, but when I install the card with HACS I cant see where to use it, and when trying to to it manually with

type: 'custom:fan-xiaomi'
name: fan
entity: fan.xiaomi_smart_fan

I get

Error: Custom element not found: fan-xiaomi

Did you install the mentioned integration? This card requires it to work.

Not working for me either on latest HA and HACS.

Tried installing fan integration through HACS and then manually from development branch. Tried various versions of the lovelace card as well. Always the same setConfig error.

my fan is model: zhimi.fan.za4

nvm got it:

when entering in lovelace UI should be used without indentation

entity: fan.smartmi_standing_fan_2s
name: Fan
type: 'custom:fan-xiaomi'
1 Like