Skip to content

Commit 09459f0

Browse files
iantrichiantrich
authored
Merge pull request #80 from RomRider/with_operator
Add operators to state
2 parents fee5216 + 3205163 commit 09459f0

File tree

2 files changed

+87
-25
lines changed

2 files changed

+87
-25
lines changed

‎README.md

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,21 @@ Lovelace Button card for your entities.
3535

3636
## Options
3737

38-
| Name | Type | Default | Supported options | Description
39-
| ---- | ---- | ------- | --------- | -----------
40-
| type | string | **Required** | `custom:button-card` | Type of the card
41-
| entity | string | **Required** | `switch.ac` | entity_id
42-
| icon | string | optional | `mdi:air-conditioner` \| `attribute` | Icon to display in place of the state. Will be overriden by the icon defined defined in a state (if present). If you use keywork `attribute` it will fetch the icon configured on the entity (overrides all icons defined).
43-
| color_type | string | `icon` | `icon` \| `card` \| `blank-card` \| `label-card` | Color either the background of the card or the icon inside the card. Setting this to `card` enable automatic `font` and `icon` color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options `blank-card` and `label-card` can be used for organisation (see examples).
44-
| color | string | `var(--primary-text-color)` | `auto` \| `rgb(28, 128, 199)` | Color of the icon/card when state is `on`. `auto` sets the color based on the color of a light.
45-
| color_off | string | `var(--disabled-text-color)` | `rgb(28, 128, 199)` | Color of the icon/card when state is `off`.
46-
| size | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel
47-
| action | string | `toggle` | `toggle` \| `more_info` \| `service` | Define the type of action
48-
| service | Object | optional | See [example section](#Examples) | Service to call and service data when action is set to `service`
49-
| name | string | optional | `Air conditioner` | Define an optional text to show below the icon
50-
| show_state | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set
51-
| style | object | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card
52-
| state | list | optional | See [state example section](#Configuration-with-states) | State to use for the color of the button. Multiple states can be defined
38+
| Name | Type | Default | Supported options | Description |
39+
| ---------- | ------- | ---------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
40+
| type | string | **Required** | `custom:button-card` | Type of the card |
41+
| entity | string | **Required** | `switch.ac` | entity_id |
42+
| icon | string | optional | `mdi:air-conditioner` \| `attribute` | Icon to display in place of the state. Will be overriden by the icon defined defined in a state (if present). If you use keywork `attribute` it will fetch the icon configured on the entity (overrides all icons defined). |
43+
| color_type | string | `icon` | `icon` \| `card` \| `blank-card` \| `label-card` | Color either the background of the card or the icon inside the card. Setting this to `card` enable automatic `font` and `icon` color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options `blank-card` and `label-card` can be used for organisation (see examples). |
44+
| color | string | `var(--primary-text-color)` | `auto` \| `rgb(28, 128, 199)` | Color of the icon/card when state is `on`. `auto` sets the color based on the color of a light. |
45+
| color_off | string | `var(--disabled-text-color)` | `rgb(28, 128, 199)` | Color of the icon/card when state is `off`. |
46+
| size | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
47+
| action | string | `toggle` | `toggle` \| `more_info` \| `service` | Define the type of action |
48+
| service | Object | optional | See [example section](#Examples) | Service to call and service data when action is set to `service` |
49+
| name | string | optional | `Air conditioner` | Define an optional text to show below the icon |
50+
| show_state | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set |
51+
| style | object | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card |
52+
| state | list | optional | See [state example section](#Configuration-with-states) | State to use for the color of the button. Multiple states can be defined |
5353

5454
## Installaion
5555

@@ -195,9 +195,9 @@ Horizontal stack with :
195195
Vertical Stack with :
196196
- 1x label card
197197
- Horizontal Stack with :
198-
- 1x Scene 1 Button
198+
- 1x Scene 1 Button
199199
- 1x Scene 2 Button
200-
- 1x Scene 3 Button
200+
- 1x Scene 3 Button
201201
- 1x Scene 4 Button
202202
- 1x Scene Off Button
203203

@@ -246,7 +246,7 @@ Input select card with select next service and custom color and icon for states.
246246

247247
![cube](examples/cube.png)
248248

249-
249+
#### Default behavior
250250
```yaml
251251
- type: "custom:button-card"
252252
entity: input_select.cube_mode
@@ -263,6 +263,34 @@ Input select card with select next service and custom color and icon for states.
263263
color: rgb(189, 255, 5)
264264
```
265265

266+
#### With Operator on state
267+
The definition order matters, the first item to match will be the one selected.
268+
```yaml
269+
- type: "custom:button-card"
270+
entity: sensor.temperature
271+
show_state: true
272+
state:
273+
- value: 15
274+
operator: '<='
275+
color: blue
276+
- value: 25
277+
operator: '>='
278+
color: red
279+
- operator: 'default' # used if nothing matches
280+
color: yellow
281+
```
282+
283+
Available operators:
284+
| Operator | `value` example | Description |
285+
| :-------: | --------------- | ------------------------------------------------ |
286+
| `<` | `5` | State is inferior to `value` |
287+
| `<=` | `4` | State is inferior or equal to `value` |
288+
| `==` | `42` | State is equal (`===` javascript) to `value` |
289+
| `>=` | `32` | State is superior or equal to `value` |
290+
| `>` | `12` | State is superior to `value` |
291+
| `!=` | `normal` | State is not equal (`!==` javascript) to `value` |
292+
| `regex` | `'^norm.*$'` | `value` regex applied to State doesn't match |
293+
| `default` | N/A | If nothing matches, this is used |
266294

267295

268296
## Credits

‎button-card.js

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262

6363

6464
getFontColorBasedOnBackgroundColor(backgroundColor) {
65-
const parsedRgbColor= backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
65+
const parsedRgbColor = backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
6666
const parsedBackgroundColor = parsedRgbColor ? parsedRgbColor : this.hexToRgb(backgroundColor.substring(1));
6767
let fontColor = ''; // don't override by default
6868
if (parsedBackgroundColor) {
@@ -83,20 +83,54 @@
8383
var g = (bigint >> 8) & 255;
8484
var b = bigint & 255;
8585

86-
return [,r,g,b];
86+
return [, r, g, b];
8787
}
8888

89+
testConfigState(state, config) {
90+
var retval = false;
91+
var def = false;
92+
if (config.state) {
93+
retval = config.state.find(function (elt) {
94+
if (elt.operator) {
95+
switch (elt.operator) {
96+
case '==':
97+
return (state.state === elt.value)
98+
case '<=':
99+
return (state.state <= elt.value)
100+
case '<':
101+
return (state.state < elt.value)
102+
case '>=':
103+
return (state.state >= elt.value)
104+
case '>':
105+
return (state.state > elt.value)
106+
case '!=':
107+
return (state.state !== elt.value)
108+
case 'regex':
109+
return (state.state.match(elt.value))
110+
case 'default':
111+
def = elt;
112+
}
113+
} else {
114+
return (elt.value === state.state)
115+
}
116+
})
117+
if (!retval)
118+
if (def)
119+
return def;
120+
}
121+
return retval;
122+
}
89123

90124
buildCssColorAttribute(state, config) {
91125
let color = config.color;
92126
if (state) {
93-
let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
94-
if(configState){
127+
let configState = this.testConfigState(state, config);
128+
if (configState) {
95129
color = configState.color ? configState.color : config.color_off;
96130
if (configState.color === 'auto') {
97131
color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : configState.default_color;
98132
}
99-
}else{
133+
} else {
100134
if (config.color === 'auto') {
101135
color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
102136
}
@@ -115,7 +149,7 @@
115149
}
116150
return iconOff;
117151
}
118-
let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
152+
let configState = this.testConfigState(state, config);
119153
if (configState && configState.icon) {
120154
const icon = configState.icon;
121155
return icon;
@@ -183,7 +217,7 @@
183217
// if (!config.entity) {
184218
// throw new Error('You need to define entity');
185219
// }
186-
this.config = {...config};
220+
this.config = { ...config };
187221
this.config.color = config.color ? config.color : 'var(--primary-text-color)';
188222
this.config.size = config.size ? config.size : '40%';
189223
let cardStyle = '';

0 commit comments

Comments
 (0)