How does the receivinig work. Awesome UI, but when you press ‘MED’ what exactly happens… I am very new with this and i want to use RF transmitter to send a signal to my RF box in my fan
should be in a www folder in your root home assistant folder (where your configuration.yaml is located).
It is changing the fan speed to medium - if you can setup your RF fan and establish the low/med/high then it should work as expected.
1 Like
The custom ui html files are in <config_dir>/www/custom_ui/
thanks for the correction!
Thanks to both of you, I was trying to use a config ui in the wrong folder. I just needed to add the www. Thanks
Hey @andrey - My latest updates seemed to have broken it and my ability/availability to debug quickly is limited. If you or anyone else wants to take what I’ve got and submit to main repo, please feel free.
hi kyrlew, this configuration is only possible with a transmitter that transmitt 4 different signals?
i am using a broadlink rm pro that is seen as a switch, can i use your ui with the broadlink?
is it possible to link a command from a switch to the “low, med high” button?
thanks for your work.
It was something similar that I was looking for.
What fan do you use for this project?
Thank you.
I am using a GE Fan Switch with SmartThings - so HA is setup using the MQTT Fan Component.
1 Like
Thank you.
@kylerw - Thanks for your custom fan UI, I plan to use this for all my fans. Do you know how to make the fan icon light up when the fan is set to low, med, or high (i.e. running)?
Hmm. Not sure. I can take a look but no promises since I’m a novice.
It also needs an update to take advantage if the newer features from @andrey like contextual friendly names. Was hoping we could get it pulled into custom_ui natively but roadmap and lack of a fan for @andrey means he has no intention.
If there is other interest from anyone willing to help lend their skills, maybe a GitHub repo makes the most sense.
1 Like
2 Likes
I found out how to do this. Right now it is not setup to color the fan icon but if you make a custom ‘state-info’ and ‘state-badge’ file with a few minor tweaks and point the custom-fan to it, it works ok.
Have a working example?
This is what worked for me. There was an oddity with line spacing I didn’t work out so keep in mind that you may need to tweak to your liking.
Three files to create/modify and stick into your custom_ui folder. Each change is very minor and noted below.
state-info-custom.xml - import badge-custom, use badge-custom.
<link rel="import" href="state-badge-custom.html">
<dom-module id="state-info-custom">
<template>
<style>
:host {
@apply(--paper-font-body1);
min-width: 150px;
white-space: nowrap;
}
state-badge {
float: left;
}
.info {
margin-left: 56px;
}
.name {
@apply(--paper-font-common-nowrap);
color: var(--primary-text-color);
line-height: 40px;
}
.name[in-dialog], :host([secondary-line]) .name {
line-height: 20px;
}
.time-ago, ::slotted(*) {
@apply(--paper-font-common-nowrap);
color: var(--secondary-text-color);
}
</style>
<div>
<state-badge-custom state-obj='[[stateObj]]'></state-badge-custom>
<div class='info'>
<div class='name' in-dialog$='[[inDialog]]'>[[computeStateName(stateObj)]]</div>
<template is='dom-if' if='[[inDialog]]'>
<div class='time-ago'>
<ha-relative-time datetime='[[stateObj.last_changed]]'></ha-relative-time>
</div>
</template>
<template is='dom-if' if='[[!inDialog]]'>
<slot>
</template>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-info-custom',
properties: {
detailed: {
type: Boolean,
value: false,
},
stateObj: {
type: Object,
},
inDialog: {
type: Boolean,
},
},
computeStateName: function (stateObj) {
return window.hassUtil.computeStateName(stateObj);
}
});
</script>state-bade-custom.html - add fan “on” state as one that changes color.
<dom-module id='state-badge-custom'>
<template>
<style>
:host {
position: relative;
display: inline-block;
width: 40px;
color: #44739E;
border-radius: 50%;
height: 40px;
text-align: center;
background-size: cover;
line-height: 40px;
}
ha-state-icon {
transition: color .3s ease-in-out;
}
/* Color the icon if light or sun is on */
ha-state-icon[data-domain=light][data-state=on],
ha-state-icon[data-domain=switch][data-state=on],
ha-state-icon[data-domain=binary_sensor][data-state=on],
ha-state-icon[data-domain=fan][data-state=on],
ha-state-icon[data-domain=sun][data-state=above_horizon] {
color: #FDD835;
}
/* Color the icon if unavailable */
ha-state-icon[data-state=unavailable] {
color: var(--disabled-text-color);
}
</style>
<ha-state-icon
id='icon'
state-obj='[[stateObj]]'
data-domain$='[[computeDomain(stateObj)]]'
data-state$='[[stateObj.state]]'
></ha-state-icon>
</template>
</dom-module>
<script>
Polymer({
is: 'state-badge-custom',
properties: {
stateObj: {
type: Object,
observer: 'updateIconColor',
},
},
computeDomain: function (stateObj) {
return window.hassUtil.computeDomain(stateObj);
},
/**
* Called when an attribute changes that influences the color of the icon.
*/
updateIconColor: function (newVal) {
// hide icon if we have entity picture
if (newVal.attributes.entity_picture) {
this.style.backgroundImage = 'url(' + newVal.attributes.entity_picture + ')';
this.$.icon.style.display = 'none';
return;
}
this.style.backgroundImage = '';
this.$.icon.style.display = 'inline';
// for domain light, set color of icon to light color if available and it is
// not very white (sum rgb colors < 730)
if (window.hassUtil.computeDomain(newVal) === 'light' &&
newVal.state === 'on' &&
newVal.attributes.rgb_color &&
newVal.attributes.rgb_color.reduce(function (cur, tot) { return cur + tot; }, 0) < 730) {
this.$.icon.style.color = 'rgb(' + newVal.attributes.rgb_color.join(',') + ')';
} else {
this.$.icon.style.color = null;
}
},
});
</script>edited custom_fan - import state-info-custom, use state-info-custom.
<link rel="import" href="state-card-with-speed.html">
<link rel="import" href="state-info-custom.html">
<dom-module id="state-card-custom_fan">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
</style>
<div id='container' class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<state-card-with-speed hidden$="[[entityObj.isOnOffOnly]]" hass="[[hass]]" state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-card-with-speed>
<div class='horizontal layout'>
<ha-entity-toggle state-obj='[[stateObj]]' hass='[[hass]]' in-dialog='[[inDialog]]'></ha-entity-toggle>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom_fan',
properties: {
hass: {
type: Object,
},
inDialog: {
type: Boolean,
value: false,
},
stateObj: {
type: Object,
},
entityObj: {
type: Object,
computed: 'computeEntityObj(hass, stateObj)',
},
},
computeEntityObj: function (hass, stateObj) {
var entity = new window.FanEntity(hass, stateObj);
return entity;
},
});
</script>
1 Like
Hi Kyle,
Seen this post and hoping you can point me in the right direction. Basically want to do build off your example:
Using Appdaemon in the background to control hardware.
Have followed the instructions for:
Running the latest HA .48.1 on a RP3 pasted the example show in the above link,no log errors reported but no sliders or buttons are visible.
Wondering if you could provide a simple configuration.yaml and any other associated files that reside in the www/custom_ui/ directory.
Any help appreciated.
Thanks,
Rob.