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.
it’s going to be the default in the near future.
