Fan Percent Button Row

Provides a means to program 2 or 3 preset speed percentage settings for fans selectable from a Lovelace button row.

NOTE: You must be on Home Assistant V2021.3.X or higher to use this plug-in. However, if your fan integration hasn't been updated to the new control method (if it doesn't actually use percentages for speeds but still uses a speed list) then you need to use the fan-control-entity-row.

Installation:

---

NOTE:

For some reason there is a big backlog of requests to add repositories as defaulkt in HACS. Hopefully it gets resolved soon.

In the meantime, you can still add this as a custom repository in HACS.

Open HACS. Click on one of the sub-headings (integration, frontend, etc) then click the three dots in the top right of the HACS page and copy the URL for the main repo in there at the bottom. Select plugin as the type. It should show up in HACS to be able to be installed at that point.

---

The easiest way to install this is to use the Home Assistant Community Store (HACS) in Home Assistant.

Follow the instructions there for installation making sure you note the "url:" section for the resources addition.

Conversely, if you don't use HACS you can install it manually by performing the following:

Copy the fan-percent-button-row.js file to the appropriate folder in your Home Assistant Configuration directory (/config/www/).

Place the following in your "resources" section in your lovelace configuration (updating the location to where you placed the above file):

  - url: /local/fan-percent-button-row.js
    type: module

Then to use this in a card place the following in your entity card:

Options:

Name	Type	Required	Default	Description
entity	String	Yes	none	any fan entity_id
type	String	Yes	none	custom:fan-percent-button-row
name	String	No	none	A custom name for the entity in the row
customTheme	Boolean	No	false	set to true to use a custom theme
customSetpoints	Boolean	No	false	set to true to use custom speed percent setpoints
reverseButtons	Boolean	No	false	set to true to reverse the button order
isTwoSpeedFan	Boolean	No	false	Set to true to hide the middle percent button
hideOff	Boolean	No	false	Set to true to hide the Off button
sendStateWithSpeed	Boolean	No	false	Used only for certain firmware that requires the State command be sent with the Speed command
allowDisablingButtons	Boolean	No	true	Set to false to prevent buttons being disabled
width	String	No	30px	A custom width for the buttons
height	String	No	30px	A custom height for the buttons
isOffColor	String	No	'#f44c09'	Sets the color of the 'Off' button if fan is off
isOnLowColor	String	No	'#43A047'	Sets the color of the 'Low' button if fan is on low percent speed
isOnMedColor	String	No	'#43A047'	Sets the color of the 'Med' button if fan is on medium percent speed
isOnHiColor	String	No	'#43A047'	Sets the color of the 'Hi' button if fan is on high percent speed
buttonInactiveColor	String	No	'#759aaa'	Sets the color of the the buttons if that selection is not "active"
lowPercentage	Integer	No	33	Sets the speed percentage level for the "Low" button (min 10)
medPercentage	Integer	No	66	Sets the speed percentage level for the "Med" button
hiPercentage	Integer	No	99	Sets the speed level for the "High" button (max 100)
customOffText	String	No	'OFF'	Sets the text of the "off" button
customLowText	String	No	'LOW'	Sets the text of the "low" speed button
customMedText	String	No	'MED'	Sets the text of the "medium" speed button
customHiText	String	No	'HIGH'	Sets the text of the "High" speed button

The values for the colors can be any valid color string in "HEX", "RGB" or by color name.

If the speed percantage is changed via any other means (slider, service call, etc) the buttons will indicate which range the speed percentage is in based on the setpoint settings in the config.

Configuration Examples:

  cards:
    - type: entities
      title: Hall Fan Presets
      show_header_toggle: false
      entities:
      ## USE THIS CONFIG TO HAVE IT MATCH YOUR THEME ##
        - entity: fan.hall_fan
          type: custom:fan-percent-button-row
          name: Fan Not Custom Theme
          customTheme: false
      ## USE THIS CONFIG TO USE A DEFAULT CUSTOM THEME
        - entity: fan.hall_fan
          type: custom:fan-percent-button-row
          name: Fan Default Custom Theme
          customTheme: true
          customSetpoints: true
          lowPercentage: 30
          medPercentage: 60
          hiPercentage: 90
      ## USE THIS CONFIG TO USE A 'CUSTOMZED' CUSTOM THEME
        - entity: fan.hall_fan
          type: custom:fan-percent-button-row
          name: Fan Custom Custom Theme
          reverseButtons: true
          customTheme: true
          isOnLowColor: 'rgb(255, 0, 0)'
          isOnMedColor: '#888888'
          isOnHiColor: '#222222'
          buttonInactiveColor: '#aaaaaa'
          isOffColor: 'purple'
      ## USE THIS CONFIG TO SET CUSTOM BUTTON TEXT (NOT REQUIRED TO SET "customTheme: true" TO USE THESE )
        - entity: fan.hall_fan
          type: custom:fan-percent-button-row
          name: Fan Custom Button Text
          customHiText: me
          customLowText: do
          customMedText: re
          customOffText: not
          width: '15px'
          height: '15px'
          

This is with the default Lovelace frontend theme set:

This is with the "Slate" frontend theme set:

This is how this plugin looks with the plugin fully themed: