Yea your right, looks like i will have to learn a little more on how custom ui did it. I am not really in the need for it so not sure how quickly i will be able to get it in there.
have you tried using mine as a secondary ui under custom ui?
Haven’t tried but just thinking
Yeah, I tried the state_card_custom_ui_secondary but no luck.
I’ve installed your state-card-custom-fanspeed and most of it seems to be working.
The only thing I can’t get to work is when I click on the “off” button that the display actually shows the “off” button highlighted. The fan does actually turn off and the icon for the fan goes from yellow (on) to blue (off) but the buttons stay at whatever the last fan speed was before I clicked on the “off” button.
Fan running on ‘high’:
Fan ‘off’:
I’ve tried working out the code to see where the failure might be but I just don’t understand it enough to figure it out.
And in case it helps here is the fan code:
- platform: mqtt
name: "Master Bedroom Fan Sonoff"
state_topic: "stat/sonoff_MBR_fan/RESULT"
speed_state_topic: "stat/sonoff_MBR_fan/RESULT"
state_value_template: "{% if value_json.FanSpeed == 0 -%}0{%- elif value_json.FanSpeed > 0 -%}4{%- endif %}"
speed_value_template: "{{ value_json.FanSpeed }}"
availability_topic: tele/sonoff_MBR_fan/LWT
payload_available: Online
payload_not_available: Offline
speed_command_topic: "cmnd/sonoff_MBR_fan/FanSpeed"
payload_low_speed: "1"
payload_medium_speed: "2"
payload_high_speed: "3"
command_topic: "cmnd/sonoff_MBR_fan/FanSpeed"
payload_off: "0"
payload_on: "4"
speeds:
- "off"
- low
- medium
- highI had the same issue but then I turned the on/off to a toggle switch by making the following edit:
<paper-button-group> <!--<paper-button style="[[btnOffstyle]]" on-click='handleOffTap'>Off</paper-button>--> <paper-button style="[[btnLowstyle]]" on-click='handleLowTap'>Lo</paper-button> <paper-button style="[[btnMedstyle]]" on-click='handleMedTap'>Med</paper-button> <paper-button style="[[btnHighstyle]]" on-click='handleHighTap'>Hi</paper-button> </paper-button-group> <ha-entity-toggle state-obj='[[stateObj]]' hass='[[hass]]' in-dialog='[[inDialog]]'></ha-entity-toggle>
Thanks for that. It’s an improvement but I wish there was a way to not have the button for the last speed stay on after you click the off button.
It’s a little confusing what the actual state is unless you really look at at it & think about it.
No problem, I figure that out as well. Change newVal.attributes.speed to newVal.state in this condition block (about line 68):
> stateObjChanged: function (newVal) {
> if (newVal) {
> if (newVal.state == 'off') {
I made this edit as well, much better to recognize state of the fan. Great idea!
I finally got a chance to try your last code change and it worked to fix the speed status display.
Then I reverted your first change you posted above back to the original and after that it works exactly the way I wanted it to work.
Now it shows four ‘boxes’ (instead of three boxes & a toggle) and when I click on the ‘off’ box it clears the other speed displays and the ‘off’ speed box is turned on.
thank you!
Hello,
I am new to Home Assistant, Hassio, and yaml in general.
I have managed to get your custom Fan controller working on the frontend, for the most part.
I did JonMayers fix to get the fan state working, but it only shows off and high, no matter the state.
The buttons work, and control fan speed, but the state is not shown on the buttons properly.
If it is on low, it shows high, if it is on med, it shows high, if it is on high, it shows high, and if it is off, it shows off.
Here is my state-card-custom-fanspeed.html
<dom-module id="state-card-custom-fanspeed">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 30px;
height: 30px;
margin: 2px;
background-color:#f3f3f3;
border: 1px solid lightgrey;
font-size: 10px !important;
float: right !important;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button style="[[btnOffstyle]]" on-click='handleOffTap'>Off</paper-button>
<paper-button style="[[btnLowstyle]]" on-click='handleLowTap'>Low</paper-button>
<paper-button style="[[btnMedstyle]]" on-click='handleMedTap'>Med</paper-button>
<paper-button style="[[btnHighstyle]]" on-click='handleHighTap'>High</paper-button>
</paper-button-group>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom-fanspeed',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
statusValue: {
type: String,
value: 'Unset',
},
btnOffstyle: {
type: String,
value: '',
},
btnHighstyle: {
type: String,
value: '',
},
btnMedstyle: {
type: String,
value: '',
},
btnLowstyle: {
type: String,
value: '',
},
},
stateObjChanged: function (newVal) {
if (newVal) {
if (newVal.state == 'off') {
this.statusValue = 'off';
this.btnOffstyle = 'background-color: #42d9f4;';
this.btnLowstyle = '';
this.btnMedstyle = '';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'gray'});
} else if (newVal.attributes.speed == 'low') {
this.statusValue = 'low';
this.btnOffstyle = '';
this.btnLowstyle = 'background-color: #42d9f4;';
this.btnMedstyle = '';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'blue'});
} else if (newVal.attributes.speed == 'medium') {
this.statusValue = 'medium';
this.btnOffstyle = '';
this.btnLowstyle = '';
this.btnMedstyle = 'background-color: #42d9f4;';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'yellow'});
} else if (newVal.attributes.speed == 'high') {
this.statusValue = 'high';
this.btnOffstyle = '';
this.btnLowstyle = '';
this.btnMedstyle = '';
this.btnHighstyle = 'background-color: #42d9f4;';
this.updateStyles({'--status-text-color': 'red'});
}
}
},
handleHighTap: function (ev) {
this.setSpeed(ev, 'high');
},
handleMedTap: function (ev) {
this.setSpeed(ev, 'medium');
},
handleLowTap: function (ev) {
this.setSpeed(ev, 'low');
},
handleOffTap: function (ev) {
this.setSpeed(ev, 'off');
},
setSpeed: function (ev, setspeed ) {
if( setspeed == 'off' ){
//this.updateStyles({'--status-text-color': '#F44336'});
//this.updateStyles({'--state-label-badge': '#F44336'});
var serviceData = {entity_id: this.stateObj.entity_id};
this.hass.callService('fan', 'turn_off', serviceData);
} else {
if (this.stateObj.state != 'on'){
var serviceData = {entity_id: this.stateObj.entity_id, speed: setspeed };
this.hass.callService('fan', 'turn_on', serviceData );
}else{
var serviceData = {entity_id: this.stateObj.entity_id, speed: setspeed };
this.hass.callService('fan', 'set_speed', serviceData );
}
}
ev.stopPropagation();
},
});
</script>and here is my configuration. yaml section pertaining to device
fan:
- platform: mqtt
name: "Katies Ceiling Fan"
state_topic: "stat/ifan02_1/RESULT"
speed_state_topic: "stat/ifan02_1/RESULT"
state_value_template: >
{% if value_json.FanSpeed is defined %}
{% if value_json.FanSpeed == 0 -%}0{%- elif value_json.FanSpeed > 0 -%}2{%- endif %}
{% else %}
{% if states.fan.katies_ceiling_fan.state == 'off' -%}0{%- elif states.fan.katies_ceiling_fan.state == 'on' -%}2{%- endif %}
{% endif %}
speed_value_template: "{{ value_json.FanSpeed }}"
availability_topic: tele/ifan02_1/LWT
payload_available: Online
payload_not_available: Offline
speed_command_topic: "cmnd/ifan02_1/FanSpeed"
payload_low_speed: "1"
payload_medium_speed: "2"
payload_high_speed: "3"
command_topic: "cmnd/ifan02_1/FanSpeed"
payload_off: "0"
payload_on: "2"
qos: 1
retain: false
speeds:
- low
- medium
- high
light:
- platform: mqtt
name: "Katies Ceiling Fan Light"
command_topic: "cmnd/ifan02_1/power1"
state_topic: "stat/ifan02_1/POWER1"
availability_topic: tele/ifan02_1/LWT
payload_available: Online
payload_not_available: Offline
qos: 1
payload_off: "OFF"
payload_on: "ON"
retain: falsePerhaps I’ve got conflicting instructions in the two places? I am stumbling my way through this, and learning something new every day.
Here is my working iFan02 code:
- platform: mqtt
name: "Master Bedroom Fan"
command_topic: "cmnd/sonoff_MBR_fan/FanSpeed"
speed_command_topic: "cmnd/sonoff_MBR_fan/FanSpeed"
state_topic: "stat/sonoff_MBR_fan/RESULT"
speed_state_topic: "stat/sonoff_MBR_fan/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 states.fan.master_bedroom_fan.state == 'off' -%}0{%- elif states.fan.master_bedroom_fan.state == '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_MBR_fan/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
speeds:
- off
- low
- medium
- high
I haven’t looked at all of the custom-ui code you posted so I’m assuming you copied the latest code and then only made the two latest changes talked about between myself & @jonmayer just above this post?
I have this working on my HASSIO system, but I can’t get the buttons to change colors as I’d prefer. I’m using the html code that undertoe posted in post 3 with the addition added by jonmayer in post 14.
No matter what state the fan is in the “off” is highlighted and no other button. While the fan is on low, medium, or high, the “off” button remains highlighted and no other button changes state. I’d prefer to have the button highlight for the state the fan is in. Can this be done?
My Configuration.yaml has:
customize_glob:
fan.*:
custom_ui_state_card: state-card-custom-fanspeed
customizer:
custom_ui: local
frontend:
extra_html_url:
- /local/custom_ui/state-card-custom-fanspeed.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-fanspeed.html
fan:
- platform: mqtt
name: "Master Bedroom Fan"
command_topic: "cmnd/BedRoomFan/FanSpeed"
speed_command_topic: "cmnd/BedRoomFan/FanSpeed"
state_topic: "stat/BedRoomFan/RESULT"
speed_state_topic: "stat/BedRoomFan/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 states.fan.master_bedroom_fan.state == 'off' -%}0{%- elif states.fan.master_bedroom_fan.state == '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/BedRoomFan/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
speeds:
- low
- medium
- highIt looks like yours is pretty close to mine but…
Read down a couple of posts past #14 for the discussion about what I ultimately did to the code.
And look at the post right above this and add a speed of “- off”.
Once that’s done i think it should work. At least mine does.
Thanks for the reply. Sorry for my delay, my wife and I had a new daughter on Monday so I’ve been a little busy! 
I added the -off to my config
fan:
- platform: mqtt
name: "Master Bedroom Fan"
command_topic: "cmnd/BedRoomFan/FanSpeed"
speed_command_topic: "cmnd/BedRoomFan/FanSpeed"
state_topic: "stat/BedRoomFan/RESULT"
speed_state_topic: "stat/BedRoomFan/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 states.fan.master_bedroom_fan.state == 'off' -%}0{%- elif states.fan.master_bedroom_fan.state == '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/BedRoomFan/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
speeds:
- off
- low
- medium
- high
And made the newVal.state change to state-card-custom-fanspeed.html
stateObjChanged: function (newVal) {
if (newVal) {
if (newVal.state == 'off') {
this.statusValue = 'off';
this.btnOffstyle = 'background-color: #42d9f4;';
this.btnLowstyle = '';
this.btnMedstyle = '';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'gray'});
} else if (newVal.state == 'low') {
this.statusValue = 'low';
this.btnOffstyle = '';
this.btnLowstyle = 'background-color: #42d9f4;';
this.btnMedstyle = '';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'blue'});
} else if (newVal.state == 'medium') {
this.statusValue = 'medium';
this.btnOffstyle = '';
this.btnLowstyle = '';
this.btnMedstyle = 'background-color: #42d9f4;';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'yellow'});
} else if (newVal.state == 'high') {
this.statusValue = 'high';
this.btnOffstyle = '';
this.btnLowstyle = '';
this.btnMedstyle = '';
this.btnHighstyle = 'background-color: #42d9f4;';
this.updateStyles({'--status-text-color': 'red'});
I also removed the “ha-entity-toggle state-obj…” code from the HTML file that was posted in posted 14. Removing this line removed my toggle buttom, so now I just have buttons for the 3 speeds plus an off button. But the states/colors of the buttons still don’t change when I change the fan speed.
Any chance this is an issue with MQTT not reporting the fan mode/speed?
Before you read on look at the EDIT toward the end for what the real problem might be… if not then come back to the top…
You can run an MQTT sniffer on your network to check to make sure that the messages are being sent.
Just in case it’s something in your code, here is my complete working html code:
<dom-module id="state-card-custom-fanspeed">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 30px;
height: 30px;
margin: 2px;
background-color:#f3f3f3;
border: 1px solid lightgrey;
font-size: 10px !important;
float: right !important;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button style="[[btnOffstyle]]" on-click='handleOffTap'>Off</paper-button>
<paper-button style="[[btnLowstyle]]" on-click='handleLowTap'>Low</paper-button>
<paper-button style="[[btnMedstyle]]" on-click='handleMedTap'>Med</paper-button>
<paper-button style="[[btnHighstyle]]" on-click='handleHighTap'>High</paper-button>
</paper-button-group>
<!--<ha-entity-toggle state-obj='[[stateObj]]' hass='[[hass]]' in-dialog='[[inDialog]]'></ha-entity-toggle>-->
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom-fanspeed',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
statusValue: {
type: String,
value: 'Unset',
},
btnOffstyle: {
type: String,
value: '',
},
btnHighstyle: {
type: String,
value: '',
},
btnMedstyle: {
type: String,
value: '',
},
btnLowstyle: {
type: String,
value: '',
},
},
stateObjChanged: function (newVal) {
if (newVal) {
if (newVal.state == 'off') {
this.statusValue = 'off';
this.btnOffstyle = 'background-color: #42d9f4;';
this.btnLowstyle = '';
this.btnMedstyle = '';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'gray'});
} else if (newVal.attributes.speed == 'low') {
this.statusValue = 'low';
this.btnOffstyle = '';
this.btnLowstyle = 'background-color: #42d9f4;';
this.btnMedstyle = '';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'blue'});
} else if (newVal.attributes.speed == 'medium') {
this.statusValue = 'medium';
this.btnOffstyle = '';
this.btnLowstyle = '';
this.btnMedstyle = 'background-color: #42d9f4;';
this.btnHighstyle = '';
this.updateStyles({'--status-text-color': 'yellow'});
} else if (newVal.attributes.speed == 'high') {
this.statusValue = 'high';
this.btnOffstyle = '';
this.btnLowstyle = '';
this.btnMedstyle = '';
this.btnHighstyle = 'background-color: #42d9f4;';
this.updateStyles({'--status-text-color': 'red'});
}
}
},
handleHighTap: function (ev) {
this.setSpeed(ev, 'high');
},
handleMedTap: function (ev) {
this.setSpeed(ev, 'medium');
},
handleLowTap: function (ev) {
this.setSpeed(ev, 'low');
},
handleOffTap: function (ev) {
this.setSpeed(ev, 'off');
},
setSpeed: function (ev, setspeed ) {
if( setspeed == 'off' ){
var serviceData = {entity_id: this.stateObj.entity_id};
this.hass.callService('fan', 'turn_off', serviceData);
} else {
if (this.stateObj.state != 'on'){
var serviceData = {entity_id: this.stateObj.entity_id, speed: setspeed };
this.hass.callService('fan', 'turn_on', serviceData );
}else{
var serviceData = {entity_id: this.stateObj.entity_id, speed: setspeed };
this.hass.callService('fan', 'set_speed', serviceData );
}
}
ev.stopPropagation();
},
});
</script>
Try copying this code into your “state_card_custom_fanspeed.html” file (make a backup of your existing file first!) and see if it works.
And just to be sure it’s not something that’s missing from your yaml copy mine over exactly as I posted above and replace with your details.
EDIT----
And after I just typed all of this out I went back and reviewed your yaml code and noticed that it looks like you didn’t replace my “state_value_template:” section details with your own:
state_value_template: >
{% if value_json.FanSpeed is defined %}
{% if value_json.FanSpeed == 0 -%}0{%- elif value_json.FanSpeed > 0 -%}4{%- endif %}
{% else %}
{% if states.fan.**master_bedroom_fan**.state == 'off' -%}0{%- elif states.fan**.master_bedroom_fan**.state == 'on' -%}4{%- endif %}
{% endif %}
Look at the entity_id for the fan denoted by the ** in the ‘else’ section (there are two of them). Make sure that is actually the entity_id of your fan.
I’m not deleting all of the above in case it can still help you or someone else.
Thanks finity! It must have been something in the html. Copying your html into my file solved it.
My fan entity_id is fan.master_bedroom_fan, so the code in yaml was correct. But that was just by coincidence that I used the same entity_id as you. I wouldn’t have seen that section to replace the entity_id.
Thanks!
I cannot seem to get the custom ui to work correctly. I don’t get the 4 buttons. I can change the states, so that is working.
time_zone: America/New_York
# Customization file
customize: !include customize.yaml
customize_glob:
fan.*:
custom_ui_state_card: state-card-custom-fanspeed
http:
api_password: !secret http_password
# Show links to resources in log and frontend
# introduction:
customizer:
custom_ui: local
# Enables the frontend
frontend:
I have also tried the frontend code, but that does not work either. I read not to do both. I refresh CTRL- F5 and have cleared the cache each time I make a change.
fan:
- platform: mqtt
name: "Sonos_Fan_1"
command_topic: "cmnd/sonoff_fan1/FanSpeed"
speed_command_topic: "cmnd/sonoff_fan1/FanSpeed"
state_topic: "stat/sonoff_fan1/RESULT"
speed_state_topic: "stat/sonoff_fan1/RESULT"
state_value_template: >
{% if value_json.FanSpeed is defined %}
{% if value_json.FanSpeed == 0 -%}0{%- elif value_json.FanSpeed > 0 -%}4{%- endif %}
{% else %}
{% if states.fan.Sonos_Fan_1.state == 'off' -%}0{%- elif states.fan.Sonos_Fan_1.state == 'on' -%}4{%- endif %}
{% endif %}
speed_value_template: "{{ value_json.FanSpeed }}"
availability_topic: tele/sonoff_fan1/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
speeds:
- off
- low
- medium
- high
light:
- platform: mqtt
name: "Ceiling Light 1"
command_topic: "cmnd/sonoff_fan1/power1"
state_topic: "stat/sonoff_fan1/POWER1"
availability_topic: tele/sonoff_fan1/LWT
payload_available: Online
payload_not_available: Offline
qos: 1
payload_off: "OFF"
payload_on: "ON"
retain: false
I have copied the state-card-custom-fanspeed.html and have it in \www\custom_ui\
Any ideas? Thanks
Did you put the proper code into your configuration.yaml file under the “frontend:” section?
If so then try copying my html code from post #23 above into your file. It has a couple of modifications in it.
Also doing a Shift - Refresh (forced reload) is needed to reload the base HTML - CSS
I am learning…therefore, I make mistakes. My state-card-custom-fanspeed.html file had a space in front of the file name. I am not sure how, or why this happened, but I found a link to it that had the %20 in front of the file name. Removed that, and all is well. I appreciate your help, and for others, watch your space bar 
Hello
You have done great work. And thankx for that. I make this work in the hassio. And now i have a question. Is it posible do implement this buttons in to lovelance too.
By