Lovelace Fan Control Entity Row

Since My fan component is changing more away from the other components in the other threads found here:

and here:

I figured I would just start a new thread on this topic.

I now have a package that contains a set up for both an MQTT fan using the Sonoff iFan02 controller and an old dumb ceiling fan that can be controlled by a Broadlink RF controller.

Here are screenshots of the component in action:



Here is the link to the package:


It’s fairly obvious but for completeness I need to mention that you will need to modify the package to use your own details such as entity names and especially your broadlink RF codes and/or MQTT topics.

If you don’t use packages then just copy each section of the above code into it’s appropriate section (switch:, script:, fan:, etc.)

And here is a link to the code for the fan control row:

Fan Control Entity Row

Then in order to use this component in you UI…

Place the following in your “resources” section in your lovelace configuration (modifying the directory for the location that you created the component):

  - url: /local/lovelace/fan-control-entity-row.js
    type: js

Then to use this in a card place the following in your entity card:

  - type: entities
    title: Sunroom
    show_header_toggle: false
      - switch.sunroom_light
      - entity: fan.sunroom_fan
        type: custom:fan-control-entity-row
        name: Sunroom Fan    

I assume it will work in other entity-type cards but I’ve only ever tested in an entity card.

This doesn’t use the custom_updater and right now I don’t have any plans to do that unless I start trying to actively modify the component then I may consider it.

The colors can be changed but only by modifying the underlying code of the .js file. Right now there is no external configuration for it but I’m trying to figure out how I can do that. (I’m not a real programmer :wink:)


I’ve updated the component to make the theme very customizable.

You can select to have the controls match your own selected frontend theme, Or you can select a default custom theme (the one I’ve been using in all of my examples) or your can select each individual color for the buttons.

Here are the standard, default custom and custom custom themes as seen with the standard frontend (no theme):


And here are the same configurations with a dark theme set (“Slate”):


All of the updated code and instructions have been added to the github linked above.

Hi, that’s a great card thank you so much.

Have a small problem when there’s a background image, there’s no background to the card. can you tell how to fix that?


what does your lovelace config for the fan control look like?

the original thread (the one I “split off” from) that started all of this was referenced as a “card”. However I don’t use my code as a standalone card but, instead, I insert the fan component into an existing card (entities card, etc.) so a background outside the entities card isn’t an issue since the fan row takes on the background of the containing card. Which is one of the biggest reasons I switched it from being referred to as a “card” and called it an “entity control row”.

If you post your config so I have a reference on how you’re using it I might be able to play around with the code to give it a solid background.

But, tbh, it might just be the easiest for both of us to insert the fan control into an entities card and be done with it.

1 Like


I can confirm that the code as I have it in the link for the fan component code for the iFan02 is correct. I don’t use the quotes and it works for me.

When you turn on the fan with the hi/med/low buttons does the state of the fan in the dev-states page change from ‘off’ to ‘on’?

also, you should post the code for the fan the way you have it in lovelace.

How do you look at dev states? On the Tasmota console for the device (accessed through the IP address) it does go from FANSTATE 0 to FANSTATE 3 or 2 or 1. But then you can’t click the “OFF” button in HA to get it to go back to FANSTATE 0.

03:08:10 MQT: stat/sonoff_ifan02_1/FANSPEED = {“FanSpeed”:3}
03:08:10 MQT: stat/sonoff_ifan02_1/FANSPEED = {“FanSpeed”:0}

What is the longer speed state template you have hashed out?

#speed_value_template: “{% if value_json.FanSpeed == 0 -%}off{%- elif value_json.FanSpeed > 0 -%}{{ value_json.FanSpeed }}{%- endif %}”

Would that help to with to it?

it’s the <> in the bottom 2nd from left side of the left hand menu

no as long as you still have that commented out you should be fine. As a matter of fact thanks for pointing that out. I should remove it to prevent confusion. (like this…:wink:)

Found the dev states. Clicking the buttons in HA to turn the fan on low, med, or hi do NOT change the state, it is alway listed as off… hmm interesting.

SO even though the fan is receiving MQTT commands and turning on, HA is not seeing it.

Ok, we are getting somewhere.

post the config for the fan. you probably have something incorrect in the state section


  • platform: mqtt
    name: “Living Room Fan”
    command_topic: “cmnd/sonoff_ifan02_1/FanSpeed”
    speed_command_topic: “cmnd/sonoff_ifan02_1/FanSpeed”
    state_topic: “stat/sonoff_ifan02_1/RESULT”
    speed_state_topic: “stat/sonoff_ifan02_1/RESULT”
    #state_value_template: “{% if value_json.FanSpeed == 0 -%}0{%- elif value_json.FanSpeed > 0 -%}4{%- endif %}”
    state_value_template: >
    {% if value_json.FanSpeed is defined %}
    {% if value_json.FanSpeed == 0 -%}0{%- elif value_json.FanSpeed > 0 -%}4{%- endif %}
    {% else %}
    {% if == ‘off’ -%}0{%- elif == ‘on’ -%}4{%- endif %}
    {% endif %}
    speed_value_template: “{{ value_json.FanSpeed }}”
    #speed_value_template: “{% if value_json.FanSpeed == 0 -%}off{%- elif value_json.FanSpeed > 0 -%}{{ value_json.FanSpeed }}{%- endif %}”
    availability_topic: tele/sonoff_ifan02_1/LWT
    payload_off: “0”
    payload_on: “4”
    payload_low_speed: “1”
    payload_medium_speed: “2”
    payload_high_speed: “3”
    payload_available: Online
    payload_not_available: Offline
    • off
    • low
    • medium
    • high

these two things here are the problem.

in my code the state and speed topics are as you have them above.

but in your Tasmota configuration for the fan the state (& speed) topic is:

mine uses “RESULT”. Yours uses “FANSPEED”.

Is that something that you have modified in your Tasmota configuration or has that been changed in the default Tasmota iFan02 configuration?

Oh okay. Let me edit that. I have not made changes to Tasmota. Running 6.5.0(release-sonoff) and using “Sonoff iFan02 (44)” for the configuration.

yes then they must have changed the default config in the newer versions.

once we verify yours is working I’ll edit the fan package on github to make a note of that.

I also noticed for the light it uses POWER1 instead of POWER as well.

  • platform: mqtt
    name: “Living Room Fan Light”
    state_topic: “stat/sonoff_ifan02_1/POWER1”
    command_topic: “cmnd/sonoff_ifan02_1/POWER1”
    availability_topic: “tele/sonoff_ifan02_1/LWT”
    qos: 1
    payload_on: “ON”
    payload_off: “OFF”
    payload_available: “Online”
    payload_not_available: “Offline”
    retain: false

04:02:00 MQT: tele/sonoff_ifan02_1/UPTIME = {“Time”:“2019-04-27T04:02:00”,“Uptime”:“4T09:46:49”}
04:03:33 MQT: stat/sonoff_ifan02_1/POWER1 = {“POWER1”:“ON”}
04:03:33 MQT: stat/sonoff_ifan02_1/POWER1 = ON
04:03:48 MQT: stat/sonoff_ifan02_1/POWER1 = {“POWER1”:“OFF”}
04:03:48 MQT: stat/sonoff_ifan02_1/POWER1 = OFF
04:04:00 MQT: stat/sonoff_ifan02_1/FANSPEED = {“FanSpeed”:2}

Woohoo! That did it! Changed “RESULT” to “FANSPEED” and now it works. Thanks for your help.

1 Like

My light already uses “POWER1” for the state and “power1” for the command. What is the command topic of yours?

Thank you for helping me troubleshoot it so i can fix it for others in my github. :+1:

Mine is POWER1 as well. But the example on the has it as just “POWER”.

Nevermind I see it above…

They either have sure changed a lot of the default config or the people editing the docs are confusing the heck out of the information.

Luckily I don’t deal with the light portion in my entity customization. :slightly_smiling_face: