One error I see in your configuration is where you have:
fan.hall_fan:
icon: mdi:fan
custom_ui_state_card: custom_fan
That last line should be:
custom_ui_state_card: state-card-custom_fan
…because it should match the name of the html file you have in the custom_ui folder.
thanks ill have a look when home
Sort of working Will update when it is
Hi!!
I just a newbie on making my room with HA and I really happy with all your help 
The Fan is the first one I connected to HA and remote it via boardlink.
I took 2 week to custom this Fan UI as @kylerw share in this topic and finally it work… However, when I click on Low/Med/High and I got the error
Unable to find service fan/set_speed 1:25 PM core.py (WARNING)
I know I miss something… please anyone help me with this
Thanks for your help
hey buddy, is there a way to ‘intercept’ the speeds, and have them turn on a switch. not great on the code side.
i have fan power running through a z-wave in wall microcontroller
and the fan speeds i used this RF Ceiling Fan Remote Hack
so on off is one switch, and the speeds translate to turning on a different switch for each speed.
thanks in advance
I don’t think it would be a problem to update to support that setup - I’ve since stopped using this so I’m not sure I’m the best person to help. Sorry!
no worries, appreciate the response
very handy bit of code, thanks 
if i wanted to do the same for locks, i thought i could just look at states.lock
could I simply change all occurances of this:
{%-for state in states.binary_sensor
if(state.attributes.device_class=="motion" and state.state=="on")-%}
to this:
{%-for state in states.lock
if(state.state=="unlocked")-%}i thought it wasnt working, i had something else wrong…so this works for locks - VERY nicely (well with 2 doors unlocked, may run out of room with 3) - Thanks again for the code @jamesdawson3
- platform: template
sensors:
locks_summary:
value_template: >
{%-for state in states.lock
if(state.state=="unlocked")-%}
{%-if loop.last-%}
{%-if loop.index > 0-%}
{%-for state in states.lock if(state.state =="unlocked")-%}
{{state.name}}{%-if not loop.last -%}{%-if(loop.index+1==loop.length)%} & {%else%}, {%endif-%}{%-else%} Door Unlocked{%endif-%}
{%-endfor-%}
{%-endif-%}
{%-endif-%}
{%-else-%}
All Locked
{%-endfor-%}
icon_template: >
{%-for state in states.lock
if(state.state=="unlocked")-%}
{%-if loop.last-%}
{%-if loop.index > 0-%}
mdi:lock-open
{%-endif-%}
{%-endif-%}
{%-else-%}
mdi:lock
{%-endfor-%}Mind saying what you’re using in place of this? I’m looking to create something similar to what you did and am wondering if you found a “better” way
I’m using CustomUI but only to display the speed. I use Google Home to control the speed should I need to change it, generally. I can still open the detail modal for the Fan and adjust it there as well.
OK, thanks. I’m pretty new to HA and still trying to digest all the different options. I’ve got a slightly different requirement. I’m planning on using a Sonoff 4CH Pro w/ Tasmota firmware to control a shop air filtration system (AFS). I’m wiring the Sonoff directly into the motor so I need to development scripts/automation/scenes? to set/unset the different channels based on what speed I want.
I have an Amazon Echo in the shop which I tried to use with a shop vacuum but when the vacuum is on Echo can’t hear the commands so voice control isn’t really a viable option for me unfortunately. The AFS might be a different case though since generally you turn it on for a set amount of time so part of my script might be to default to turn off after a fixed amount of time and then voice control might be an option.
So many choices…
So I’m still trying to digest all of this and have made a little progress. I have an input_select with the 3 speeds plus OFF and selecting one of the options calls an automation (automation.afs_medium_speed). Now I need to edit Kyle’s code to work with my configuration.
I have the 3 files that Kyle started with (fan-model.html, state-card-with-speed.html, and state-card-custom_fan.html). Am I getting close to what I want by making these changes?
fan-model.html -->
change:
computeEntityObj: function (hass, stateObj) { return new window.FanEntity(hass, stateObj); },
to:
computeEntityObj: function (hass, stateObj) { return new window.input_select.Entity(hass, stateObj); },
state-card-with-speed.html -->
change:
onMedTap: function (ev) { this.entityObj.setSpeed('medium', ev); },
to:
???
state-card-custom_fan.html – No changes required?
Great work!!!
Can you share this custom card?
Awesome.Can you please share the code?
Yesterday I updated to the latest Home Assistant to 0.65.6 and noticed that the on, off buttons that I created start to pop-up the detail page whenever it is clicked. This does not happened prior to the update because “ev.stopPropagation();” is used as advised.
How do I now stop that pop-up from appearing? For example if I press Storeroom Light “ON”, the detail page will appear. I will need to close it in order to go back to the main.
>>>Same issue here. Did you find a fix?
Hi @travis
Can you share the celling fan template…
I looking this for a while and I really love this
@CloudHoang the state-card-custom html I used for the 3 buttons.
<dom-module id="state-card-custom_fan1">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 29px;
height: 30px;
background-color:#f3f3f3
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button on-tap="btnlow">L</svg></paper-button>
<paper-button on-tap="btnmed">M</svg></paper-button>
<paper-button on-tap="btnhigh">H</svg></paper-button>
</paper-button-group>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom_fan1',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
btnlow: function (ev) {
this.setVol('fan_speed_low', ev);
},
btnmed: function (ev) {
this.setVol('fan_speed_med', ev);
},
btnhigh: function (ev) {
this.setVol('fan_speed_high', ev);
},
setVol(vol,ev) {
var serviceData = {entity_id:('scene.'+vol)};
this.hass.callService('scene', 'turn_on', serviceData);
ev.stopPropagation();
},
});
</script>