Issue with creating 6 button fan - '1' button is not working

Tags: #<Tag:0x00007fc413cec370>

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);

I found the issue why “1” is not “working” when pressing on it.

_1Percentage: 16, apparenly 17 is already is next speed. actually 16.66666 :slight_smile: