Hi,
I searched and found a 4 button fan (OFF/LOW/MED/HIGH). I tried to extend it into OFF and 6 button fan.
it looks working but when I press on button ‘1’ (lowest active) it still shows as button ‘2’. any ideas how to solve it ?
Thanks in advance,
code is here:
window.customCards = window.customCards || [];
window.customCards.push({
type: "fan-percent-button-row-6",
name: "fan percent button row-6",
description: "A plugin to display your fan controls in a 6 button row.",
preview: false,
});
class CustomFanPercentRow6 extends Polymer.Element {
static get template() {
return Polymer.html`
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: inherit;
}
.percentage {
margin-left: 2px;
margin-right: 2px;
background-color: #759aaa;
border: 1px solid lightgrey;
border-radius: 4px;
font-size: 10px !important;
color: inherit;
text-align: center;
float: right !important;
padding: 1px;
cursor: pointer;
}
</style>
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
<div class='horizontal justified layout' on-click="stopPropagation">
<button
class='percentage'
style='[[_0_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_0_Name]]"
on-click='setPercentage'
disabled='[[_0_State]]'>[[_0_Text]]</button>
<button
class='percentage'
style='[[_1_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_1_Name]]"
on-click='setPercentage'
disabled='[[_1_State]]'>[[_1_Text]]</button>
<button
class='percentage'
style='[[_2_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_2_Name]]"
on-click='setPercentage'
disabled='[[_2_State]]'>[[_2_Text]]</button>
<button
class='percentage'
style='[[_3_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_3_Name]]"
on-click='setPercentage'
disabled='[[_3_State]]'>[[_3_Text]]</button>
<button
class='percentage'
style='[[_4_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_4_Name]]"
on-click='setPercentage'
disabled='[[_4_State]]'>[[_4_Text]]</button>
<button
class='percentage'
style='[[_5_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_5_Name]]"
on-click='setPercentage'
disabled='[[_5_State]]'>[[_5_Text]]</button>
<button
class='percentage'
style='[[_6_Color]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
toggles name="[[_6_Name]]"
on-click='setPercentage'
disabled='[[_6_State]]'>[[_6_Text]]</button>
</div>
</hui-generic-entity-row>
`;
}
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged'
},
_config: Object,
_stateObj: Object,
_0SP: Number,
_1SP: Number,
_2SP: Number,
_3SP: Number,
_4SP: Number,
_5SP: Number,
_6SP: Number,
_width: String,
_height: String,
_0_Color: String,
_1_Color: String,
_2_Color: String,
_3_Color: String,
_4_Color: String,
_5_Color: String,
_6_Color: String,
_0_Text: String,
_1_Text: String,
_2_Text: String,
_3_Text: String,
_4_Text: String,
_5_Text: String,
_6_Text: String,
_0_Name: String,
_1_Name: String,
_2_Name: String,
_3_Name: String,
_4_Name: String,
_5_Name: String,
_6_Name: String,
_0_State: Boolean,
_1_State: Boolean,
_2_State: Boolean,
_3_State: Boolean,
_4_State: Boolean,
_5_State: Boolean,
_6_State: Boolean,
}
}
setConfig(config)
{
this._config = config;
this._config = {
customTheme: false,
reverseButtons: true,
_0Percentage: 0,
_1Percentage: 17,
_2Percentage: 33,
_3Percentage: 50,
_4Percentage: 66,
_5Percentage: 83,
_6Percentage: 100,
width: '30px',
height: '30px',
isOffColor: 'blue',
isOn1Color: 'purple',
isOn2Color: 'purple',
isOn3Color: 'purple',
isOn4Color: 'purple',
isOn5Color: 'purple',
isOn6Color: 'purple',
buttonInactiveColor: 'black',
custom0Text: 'OFF',
custom1Text: '1',
custom2Text: '2',
custom3Text: '3',
custom4Text: '4',
custom5Text: '5',
custom6Text: '6',
...config
};
}
hassChanged(hass)
{
const config = this._config;
const stateObj = hass.states[config.entity];
const custTheme = config.customTheme;
const revButtons = config.reverseButtons;
const buttonWidth = config.width;
const buttonHeight = config.height;
const OffClr = config.isOffColor;
const On1Clr = config.isOn1Color;
const On2Clr = config.isOn2Color;
const On3Clr = config.isOn3Color;
const On4Clr = config.isOn4Color;
const On5Clr = config.isOn5Color;
const On6Clr = config.isOn6Color;
const buttonOffClr = config.buttonInactiveColor;
const _0Setpoint = config._0Percentage;
const _1Setpoint = config._1Percentage;
const _2Setpoint = config._2Percentage;
const _3Setpoint = config._3Percentage;
const _4Setpoint = config._4Percentage;
const _5Setpoint = config._5Percentage;
const _6Setpoint = config._6Percentage;
const cust0Txt = config.custom0Text;
const cust1Txt = config.custom1Text;
const cust2Txt = config.custom2Text;
const cust3Txt = config.custom3Text;
const cust4Txt = config.custom4Text;
const cust5Txt = config.custom5Text;
const cust6Txt = config.custom6Text;
let _0_Setpoint;
let _1_Setpoint;
let _2_Setpoint;
let _3_Setpoint;
let _4_Setpoint;
let _5_Setpoint;
let _6_Setpoint;
let _0_state;
let _1_state;
let _2_state;
let _3_state;
let _4_state;
let _5_state;
let _6_state;
_0_Setpoint = parseInt(_0Setpoint);
_1_Setpoint = parseInt(_1Setpoint);
_2_Setpoint = parseInt(_2Setpoint);
_3_Setpoint = parseInt(_3Setpoint);
_4_Setpoint = parseInt(_4Setpoint);
_5_Setpoint = parseInt(_5Setpoint);
_6_Setpoint = parseInt(_6Setpoint);
if (stateObj && stateObj.attributes)
{
if (stateObj.state == 'on' && stateObj.attributes.percentage >= 9 && stateObj.attributes.percentage <= 25)
{
_1_state = 'on';
}
else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 26 && stateObj.attributes.percentage <= 41)
{
_2_state = 'on';
}
else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 42 && stateObj.attributes.percentage <= 58)
{
_3_state = 'on';
}
else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 59 && stateObj.attributes.percentage <= 74)
{
_4_state = 'on';
}
else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 75 && stateObj.attributes.percentage <= 91)
{
_5_state = 'on';
}
else if (stateObj.state == 'on' && stateObj.attributes.percentage >= 92 && stateObj.attributes.percentage <= 100)
{
_6_state = 'on';
}
else
{
_0_state = 'on';
}
}
let _0_color;
let _1_color;
let _2_color;
let _3_color;
let _4_color;
let _5_color;
let _6_color;
if (custTheme)
{
if (_1_state == 'on')
{
_1_color = 'background-color:' + On1Clr;
}
else
{
_1_color = 'background-color:' + buttonOffClr;
}
if (_2_state == 'on')
{
_2_color = 'background-color:' + On2Clr;
}
else
{
_2_color = 'background-color:' + buttonOffClr;
}
if (_3_state == 'on')
{
_3_color = 'background-color:' + On3Clr;
}
else
{
_3_color = 'background-color:' + buttonOffClr;
}
if (_4_state == 'on')
{
_4_color = 'background-color:' + On4Clr;
}
else
{
_4_color = 'background-color:' + buttonOffClr;
}
if (_5_state == 'on')
{
_5_color = 'background-color:' + On5Clr;
}
else
{
_5_color = 'background-color:' + buttonOffClr;
}
if (_6_state == 'on')
{
_6_color = 'background-color:' + On6Clr;
}
else
{
_6_color = 'background-color:' + buttonOffClr;
}
if (_0_state == 'on')
{
_0_color = 'background-color:' + OffClr;
}
else
{
_0_color = 'background-color:' + buttonOffClr;
}
}
else
{
if (_1_state == 'on')
{
_1_color = 'background-color: var(--switch-checked-color)';
}
else
{
_1_color = 'background-color: var(--switch-unchecked-color)';
}
if (_2_state == 'on')
{
_2_color = 'background-color: var(--switch-checked-color)';
}
else
{
_2_color = 'background-color: var(--switch-unchecked-color)';
}
if (_3_state == 'on')
{
_3_color = 'background-color: var(--switch-checked-color)';
}
else
{
_3_color = 'background-color: var(--switch-unchecked-color)';
}
if (_4_state == 'on')
{
_4_color = 'background-color: var(--switch-checked-color)';
}
else
{
_4_color = 'background-color: var(--switch-unchecked-color)';
}
if (_5_state == 'on')
{
_5_color = 'background-color: var(--switch-checked-color)';
}
else
{
_5_color = 'background-color: var(--switch-unchecked-color)';
}
if (_6_state == 'on')
{
_6_color = 'background-color: var(--switch-checked-color)';
}
else
{
_6_color = 'background-color: var(--switch-unchecked-color)';
}
if (_0_state == 'on')
{
_0_color = 'background-color: var(--switch-checked-color)';
}
else
{
_0_color = 'background-color: var(--switch-unchecked-color)';
}
}
let _0text = cust0Txt;
let _1text = cust1Txt;
let _2text = cust2Txt;
let _3text = cust3Txt;
let _4text = cust4Txt;
let _5text = cust5Txt;
let _6text = cust6Txt;
let buttonwidth = buttonWidth;
let buttonheight = buttonHeight;
let _0_name = '0'
let _1_name = '1'
let _2_name = '2'
let _3_name = '3'
let _4_name = '4'
let _5_name = '5'
let _6_name = '6'
if (revButtons)
{
this.setProperties({
_stateObj: stateObj,
_0_State: _0_state == 'on',
_1_State: _1_state === 'on',
_2_State: _2_state === 'on',
_3_State: _3_state === 'on',
_4_State: _4_state === 'on',
_5_State: _5_state === 'on',
_6_State: _6_state === 'on',
_width: buttonwidth,
_height: buttonheight,
_0_Color: _0_color,
_1_Color: _1_color,
_2_Color: _2_color,
_3_Color: _3_color,
_4_Color: _4_color,
_5_Color: _5_color,
_6_Color: _6_color,
_0SP: _0_Setpoint,
_1SP: _1_Setpoint,
_2SP: _2_Setpoint,
_3SP: _3_Setpoint,
_4SP: _4_Setpoint,
_5SP: _5_Setpoint,
_6SP: _6_Setpoint,
_0_Text: _0text,
_1_Text: _1text,
_2_Text: _2text,
_3_Text: _3text,
_4_Text: _4text,
_5_Text: _5text,
_6_Text: _6text,
_0_Name: _0_name,
_1_Name: _1_name,
_2_Name: _2_name,
_3_Name: _3_name,
_4_Name: _4_name,
_5_Name: _5_name,
_6_Name: _6_name,
});
}
else
{
this.setProperties({
_stateObj: stateObj,
_0_State: _6_state == 'on',
_1_State: _5_state == 'on',
_2_State: _4_state == 'on',
_3_State: _3_state == 'on',
_4_State: _2_state === 'on',
_5_State: _1_state === 'on',
_6_State: _0_state === 'on',
_width: buttonwidth,
_height: buttonheight,
_0_Color: _6_color,
_1_Color: _5_color,
_2_Color: _4_color,
_3_Color: _3_color,
_4_Color: _2_color,
_5_Color: _1_color,
_6_Color: _0_color,
_0SP: _0_Setpoint,
_1SP: _1_Setpoint,
_2SP: _2_Setpoint,
_3SP: _3_Setpoint,
_4SP: _4_Setpoint,
_5SP: _5_Setpoint,
_6SP: _6_Setpoint,
_0_Text: _6text,
_1_Text: _5text,
_2_Text: _4text,
_3_Text: _3text,
_4_Text: _2text,
_5_Text: _1text,
_6_Text: _0text,
_0_Name: _6_name,
_1_Name: _5_name,
_2_Name: _4_name,
_3_Name: _3_name,
_4_Name: _2_name,
_5_Name: _1_name,
_6_Name: _0_name,
});
}
}
stopPropagation(e)
{
e.stopPropagation();
}
setPercentage(e)
{
const level = e.currentTarget.getAttribute('name');
const param = {entity_id: this._config.entity};
if( level == '0' )
{
this.hass.callService('fan', 'turn_off', param);
param.percentage = this._0SP;
this.hass.callService('fan', 'set_percentage', param);
}
else if (level == '1')
{
param.percentage = this._1SP;
this.hass.callService('fan', 'set_percentage', param);
}
else if (level == '2')
{
param.percentage = this._2SP;
this.hass.callService('fan', 'set_percentage', param);
}
else if (level == '3')
{
param.percentage = this._3SP;
this.hass.callService('fan', 'set_percentage', param);
}
else if (level == '4')
{
param.percentage = this._4SP;
this.hass.callService('fan', 'set_percentage', param);
}
else if (level == '5')
{
param.percentage = this._5SP;
this.hass.callService('fan', 'set_percentage', param);
}
else if (level == '6')
{
param.percentage = this._6SP;
this.hass.callService('fan', 'set_percentage', param);
}
}
}
customElements.define('fan-percent-button-row-6', CustomFanPercentRow6);
