@kylerw, I sent a link to this thread to @balloob and he blessed the concept, so it would be great if you could make a PR agains the main repo with this UI.
@kylerw, With regards to your query on responsiveness , i don’t see any issues with the buttons here:
Here goes the code - i’ve put everything into one file.
state-card-custom_light.html
<dom-module id="state-card-custom_light">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 30px;
height: 20px;
margin: 10px 2px 10px 2px;
padding: 0 0 0 0;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button style="background-color:#74e7ff" on-tap="btntap1"></paper-button>
<paper-button style="background-color:#74ffc2" on-tap="btntap2"></paper-button>
<paper-button style="background-color:#ffd574" on-tap="btntap3"></paper-button>
<paper-button style="background-color:#eaeae1" on-tap="btntap4"></paper-button>
</paper-button-group>
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom_light',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
btntap1: function (ev) {
this.setColor(116, 231, 255, 200, ev);
},
btntap2: function (ev) {
this.setColor(116, 255, 194, 200, ev);
},
btntap3: function (ev) {
this.setColor(255, 213, 116, 200, ev);
},
btntap4: function (ev) {
this.setColor(255, 225, 255, 255, ev);
},
setColor(r,g,b,br,ev) {
var serviceData = {entity_id: this.stateObj.entity_id, rgb_color: [r, g, b], brightness: br, transition: 1} || {};
this.hass.callService('light', 'turn_on', serviceData);
ev.stopPropagation();
},
});
</script>
configuration.yaml
homeassistant:
customize:
light.entrance:
custom_ui_state_card: custom_light
light.bedroom:
custom_ui_state_card: custom_light
5 Likes
By responsive I meant adjustments with the UI. In certain states, the buttons push the toggle off the card. Are you seeing that here?
Not really, it has been stable with my usage so far.
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