├── README.md
├── dist
└── fan-mode-button-row.js
├── hacs.json
├── images
└── fan-mode-button-row.jpg
└── info.md
/README.md:
--------------------------------------------------------------------------------
1 | # Fan Mode Button Row
2 | Provides a means to program 2 or 3 preset mode settings for fans selectable from a Lovelace button row.
3 |
4 | ## 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 preset modes) then you need to use the fan-control-entity-row.
5 |
6 | Installation:
7 |
8 | ***
9 |
10 | **NOTE:**
11 |
12 | For some reason there is a big backlog of requests to add repositories as defaulkt in HACS. Hopefully it gets resolved soon.
13 |
14 | In the meantime, you can still add this as a custom repository in HACS.
15 |
16 | 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.
17 |
18 | ***
19 |
20 | The easiest way to install this is to use the Home Assistant Community Store (HACS) in Home Assistant.
21 |
22 | Follow the instructions there for installation making sure you note the "url:" section for the resources addition.
23 |
24 |
25 | Conversely, if you don't use HACS you can install it manually by performing the following:
26 |
27 | Copy the fan-mode-button-row.js file to the appropriate folder in your Home Assistant Configuration directory (/config/www/).
28 |
29 | Place the following in your "resources" section in your lovelace configuration (updating the location to where you placed the above file):
30 |
31 | ```
32 | - url: /local/fan-mode-button-row.js
33 | type: module
34 | ```
35 |
36 | Then to use this in a card place the following in your entity card:
37 |
38 |
39 | Options:
40 |
41 | | Name | Type | Required | Default | Description |
42 | | --- | --- | --- | --- | --- |
43 | | entity | String | Yes | none | any fan entity_id |
44 | | type | String | Yes | none | custom:fan-mode-button-row |
45 | | customModes | Boolean | No | false | Set to true to use custom mode definitions |
46 | | modeOff | String | No | 'off' | Sets the mode for the 'OFF' button (see NOTE 2 below) |
47 | | modeOne | String | No | 'low' | Sets the mode for the 'Mode 1' (default 'LOW') button |
48 | | modeTwo | String | No | 'medium' | Sets the mode for the 'Mode 2' (default 'MED') button |
49 | | modeThree | String | No | 'high' | Sets the mode for the 'Mode 3' (default 'HIGH') button |
50 | | width | String | No | 30px | A custom width for the buttons |
51 | | height | String | No | 30px | A custom height for the buttons |
52 | | name | String | No | none | A custom name for the entity in the row |
53 | | customTheme | Boolean | No | false | set to true to use a custom theme |
54 | | reverseButtons | Boolean | No | false | set to true to reverse the button order |
55 | | hideOff | Boolean | No | false | Set to true to hide the Off button |
56 | | isOffColor | String | No | '#f44c09' | Sets the color of the 'OFF' button if fan is off |
57 | | isOnModeOneColor | String | No | '#43A047' | Sets the color of the 'Mode 1' (default 'LOW') button if fan is on Mode 1 |
58 | | isOnModeTwoColor | String | No | '#43A047' | Sets the color of the 'Mode 2' (default 'MED') button if fan is on Mode 2 |
59 | | isOnModeThreeColor | String | No | '#43A047' | Sets the color of the 'Mode 3' (default 'HIGH') button if fan is on Mode 3 |
60 | | buttonInactiveColor | String | No | '#759aaa' | Sets the color of the the buttons if that selection is not "active" |
61 | | customText | Boolean | No | false | Set to true to use custom text for buttons |
62 | | customOffText | String | No | 'OFF' | Sets the text of the 'OFF button |
63 | | customModeOneText | String | No | 'LOW' | Sets the text of the 'Mode 1' (default 'LOW') button |
64 | | customModeTwoText | String | No | 'MED' | Sets the text of the 'Mode 2' (default 'MED') button |
65 | | customModeThreeText | String | No | 'HIGH' | Sets the text of the "Mode 3" (default 'HIGH') button |
66 | | twoModeFan | Boolean | No | false | Set to true to hide the middle mode button ('modeTwo') for fans with only two modes |
67 | | sendStateWithMode | Boolean | No | false | Calls the turn_on service for the fan before sending the mode, used if fan does not power on automatically when mode is set |
68 |
69 |
70 | NOTES:
71 |
72 | 1. The default values for the service calls and button text are as noted above. If you need to use custom modes then you need to set the values of the mode buttons to exactly match the modes you want to control with this plug-in.
73 |
74 | 2. The "modeOff" button will ALWAYS turn the fan off no matter what the mode is set to for that button. However, if you use custom modes (customModes = 'true') the button text will change to display the mode name as set in the custom mode setting of the buttons. So, even though the "modeOff" button will only ever turn the fan off you may want to set a different mode for that button to display the desired text for the button.
75 |
76 | 3. If, however, you choose to use custom text (customText = 'true') the custom text settings for the button will override both the default names AND the custom mode names.
77 |
78 | Yes, it's a bit confusing but to summarize:
79 |
80 | - customModes = 'false' and customText = 'false' => default text as noted in the table above will be used
81 |
82 | - customModes = 'true' and customText = 'false' => text will be what is set for the mode for each button (Only true for modes changed from default above, otherwise they will display the defauilt mode text)
83 |
84 | - customText = 'true' (no matter what customModes is set to) => text will be what is set for each button by the custom text setting (Only true for text changed from default above otherwise they will display the defauilt text)
85 |
86 | That's the best I can explain it. Feel free to poke around at it and hopefully it will make more sense.
87 |
88 | The values for the colors can be any valid color string in "HEX", "RGB" or by color name.
89 |
90 | If the mode is changed via any other means (slider, service call, etc) the buttons will indicate which mode it is in.
91 |
92 | Configuration Examples:
93 |
94 | ```yaml
95 | type: entities
96 | title: Hall Fan Mode Preset Modes
97 | show_header_toggle: false
98 | entities:
99 | ## USE THIS CONFIG TO HAVE IT MATCH YOUR THEME ##
100 | - entity: fan.hall_fan
101 | type: custom:fan-mode-button-row
102 | name: Fan Not Custom Theme
103 | ## USE THIS CONFIG TO USE A DEFAULT CUSTOM THEME
104 | - entity: fan.hall_fan
105 | type: custom:fan-mode-button-row
106 | name: Fan Default Custom Theme
107 | customTheme: true
108 | ## USE THIS CONFIG TO USE A 'CUSTOMZED' CUSTOM THEME
109 | - entity: fan.hall_fan
110 | type: custom:fan-mode-button-row
111 | name: Fan Custom Custom Theme
112 | reverseButtons: true
113 | customTheme: true
114 | isOnMode1Color: 'rgb(255, 0, 0)'
115 | isOnMode2Color: '#888888'
116 | isOnMode3Color: '#222222'
117 | isOnMode4Color: 'purple'
118 | buttonInactiveColor: '#aaaaaa'
119 | ## FULL EXAMPLE CONFIGURATION
120 | - entity: fan.hall_fan
121 | type: custom:fan-mode-button-row
122 | name: Fan Custom Button Text
123 | twoModeFan: true
124 | reverseButtons: true
125 | customTheme: true
126 | isOnModeOneColor: 'rgb(255, 0, 0)'
127 | isOnModeTwoColor: '#888888'
128 | isOnModeThreeColor: '#222222'
129 | buttonInactiveColor: '#aaaaaa'
130 | isOffColor: 'purple'
131 | customModes: true
132 | modeOff: "brown"
133 | modeOne: "low"
134 | modeTwo: "medium"
135 | modeThree: "high"
136 | customText: true
137 | customOffText: 'NAY'
138 | customModeOneText: '1'
139 | customModeTwoText: 'mid'
140 | customModeThreeText: 'Fast'
141 | width: '15px'
142 | height: '15px'
143 | ```
144 |
145 | Please see my fan packages in my Home-Assistant Repo for example configurations to use the above plugin configurations.
146 |
147 | https://github.com/finity69x2/Home-Assistant/tree/master/packages
148 |
149 | Examples of the above plugion configurations:
150 |
151 | 
152 |
153 |
--------------------------------------------------------------------------------
/dist/fan-mode-button-row.js:
--------------------------------------------------------------------------------
1 | window.customCards = window.customCards || [];
2 | window.customCards.push({
3 | type: "fan-mode-button-row",
4 | name: "fan mode button row",
5 | description: "A plugin to display your fan controls in a button row.",
6 | preview: false,
7 | });
8 |
9 | const LitElement = customElements.get("ha-panel-lovelace") ? Object.getPrototypeOf(customElements.get("ha-panel-lovelace")) : Object.getPrototypeOf(customElements.get("hc-lovelace"));
10 | const html = LitElement.prototype.html;
11 | const css = LitElement.prototype.css;
12 |
13 |
14 | class CustomFanModeRow extends LitElement {
15 |
16 | constructor() {
17 | super();
18 | this._config = {
19 | customTheme: false,
20 | customSetpoints: false,
21 | reverseButtons: false,
22 | width: '30px',
23 | height: '30px',
24 | twoModeFan: false,
25 | hideOff: false,
26 | sendStateWithMode: false,
27 | allowDisablingButtons: true,
28 | customModes: false,
29 | customText: false,
30 | modeOff: "none",
31 | modeOne: "low",
32 | modeTwo: "medium",
33 | modeThree: "high",
34 | isOffColor: '#f44c09',
35 | isOnModeOneColor: '#43A047',
36 | isOnModeTwoColor: '#43A047',
37 | isOnModeThreeColor: '#43A047',
38 | buttonInactiveColor: '#759aaa',
39 | customOffText: 'OFF',
40 | customModeOneText: 'LOW',
41 | customModeTwoText: 'MED',
42 | customModeThreeText: 'HIGH',
43 | customOffText: 'OFF',
44 | customLowText: 'LOW',
45 | customMedText: 'MED',
46 | customHiText: 'HIGH',
47 | };
48 | }
49 |
50 | static get properties() {
51 | return {
52 | hass: Object,
53 | _config: Object,
54 | _stateObj: Object,
55 | _modeOff: String,
56 | _modeOne: String,
57 | _modeTwo: String,
58 | _modeThree: String,
59 | _width: String,
60 | _height: String,
61 | _leftColor: String,
62 | _midLeftColor: String,
63 | _midRightColor: String,
64 | _rightColor: String,
65 | _leftText: String,
66 | _midLeftText: String,
67 | _midRightText: String,
68 | _rightText: String,
69 | _leftName: String,
70 | _midLeftName: String,
71 | _midRightName: String,
72 | _rightName: String,
73 | _leftState: Boolean,
74 | _midLeftState: Boolean,
75 | _midRightState: Boolean,
76 | _rightState: Boolean,
77 | _hideLeft: Boolean,
78 | _hideMidLeft: Boolean,
79 | _hideMidRight: Boolean,
80 | _hideRight: Boolean,
81 | };
82 | }
83 |
84 | static get styles() {
85 | return css`
86 | :host {
87 | line-height: inherit;
88 | }
89 | .box {
90 | display: flex;
91 | flex-direction: row;
92 | }
93 | .mode {
94 | margin-left: 2px;
95 | margin-right: 2px;
96 | background-color: #759aaa;
97 | border: 1px solid lightgrey;
98 | border-radius: 4px;
99 | font-size: 10px !important;
100 | color: inherit;
101 | text-align: center;
102 | float: left !important;
103 | padding: 1px;
104 | cursor: pointer;
105 | }
106 | `;
107 | }
108 |
109 | render() {
110 | return html`
111 |
112 |