Skip to content

Commit

Permalink
Merge pull request #80 from RomRider/with_operator
Browse files Browse the repository at this point in the history 
Add operators to state
  • Loading branch information
@iantrich
iantrich authored Apr 13, 2019
2 parents fee5216 + 3205163 commit 09459f0
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 25 deletions.
64 changes: 46 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,21 @@ Lovelace Button card for your entities.

## Options

| Name | Type | Default | Supported options | Description
| ---- | ---- | ------- | --------- | -----------
| type | string | **Required** | `custom:button-card` | Type of the card
| entity | string | **Required** | `switch.ac` | entity_id
| 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).
| 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).
| 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.
| color_off | string | `var(--disabled-text-color)` | `rgb(28, 128, 199)` | Color of the icon/card when state is `off`.
| size | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel
| action | string | `toggle` | `toggle` \| `more_info` \| `service` | Define the type of action
| service | Object | optional | See [example section](#Examples) | Service to call and service data when action is set to `service`
| name | string | optional | `Air conditioner` | Define an optional text to show below the icon
| show_state | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set
| style | object | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card
| state | list | optional | See [state example section](#Configuration-with-states) | State to use for the color of the button. Multiple states can be defined
| Name | Type | Default | Supported options | Description |
| ---------- | ------- | ---------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| type | string | **Required** | `custom:button-card` | Type of the card |
| entity | string | **Required** | `switch.ac` | entity_id |
| 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). |
| 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). |
| 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. |
| color_off | string | `var(--disabled-text-color)` | `rgb(28, 128, 199)` | Color of the icon/card when state is `off`. |
| size | string | `40%` | `20px` | Size of the icon. Can be percentage or pixel |
| action | string | `toggle` | `toggle` \| `more_info` \| `service` | Define the type of action |
| service | Object | optional | See [example section](#Examples) | Service to call and service data when action is set to `service` |
| name | string | optional | `Air conditioner` | Define an optional text to show below the icon |
| show_state | boolean | `false` | `true` \| `false` | Show the state on the card. defaults to false if not set |
| style | object | optional | `- text-transform: none` | Define a list of css attribute and their value to apply to the card |
| state | list | optional | See [state example section](#Configuration-with-states) | State to use for the color of the button. Multiple states can be defined |

## Installaion

Expand Down Expand Up @@ -195,9 +195,9 @@ Horizontal stack with :
Vertical Stack with :
- 1x label card
- Horizontal Stack with :
- 1x Scene 1 Button
- 1x Scene 1 Button
- 1x Scene 2 Button
- 1x Scene 3 Button
- 1x Scene 3 Button
- 1x Scene 4 Button
- 1x Scene Off Button

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

![cube](examples/cube.png)


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

#### With Operator on state
The definition order matters, the first item to match will be the one selected.
```yaml
- type: "custom:button-card"
entity: sensor.temperature
show_state: true
state:
- value: 15
operator: '<='
color: blue
- value: 25
operator: '>='
color: red
- operator: 'default' # used if nothing matches
color: yellow
```

Available operators:
| Operator | `value` example | Description |
| :-------: | --------------- | ------------------------------------------------ |
| `<` | `5` | State is inferior to `value` |
| `<=` | `4` | State is inferior or equal to `value` |
| `==` | `42` | State is equal (`===` javascript) to `value` |
| `>=` | `32` | State is superior or equal to `value` |
| `>` | `12` | State is superior to `value` |
| `!=` | `normal` | State is not equal (`!==` javascript) to `value` |
| `regex` | `'^norm.*$'` | `value` regex applied to State doesn't match |
| `default` | N/A | If nothing matches, this is used |


## Credits
Expand Down
48 changes: 41 additions & 7 deletions button-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@


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

return [,r,g,b];
return [, r, g, b];
}

testConfigState(state, config) {
var retval = false;
var def = false;
if (config.state) {
retval = config.state.find(function (elt) {
if (elt.operator) {
switch (elt.operator) {
case '==':
return (state.state === elt.value)
case '<=':
return (state.state <= elt.value)
case '<':
return (state.state < elt.value)
case '>=':
return (state.state >= elt.value)
case '>':
return (state.state > elt.value)
case '!=':
return (state.state !== elt.value)
case 'regex':
return (state.state.match(elt.value))
case 'default':
def = elt;
}
} else {
return (elt.value === state.state)
}
})
if (!retval)
if (def)
return def;
}
return retval;
}

buildCssColorAttribute(state, config) {
let color = config.color;
if (state) {
let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
if(configState){
let configState = this.testConfigState(state, config);
if (configState) {
color = configState.color ? configState.color : config.color_off;
if (configState.color === 'auto') {
color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : configState.default_color;
}
}else{
} else {
if (config.color === 'auto') {
color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
}
Expand All @@ -115,7 +149,7 @@
}
return iconOff;
}
let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
let configState = this.testConfigState(state, config);
if (configState && configState.icon) {
const icon = configState.icon;
return icon;
Expand Down Expand Up @@ -183,7 +217,7 @@
// if (!config.entity) {
// throw new Error('You need to define entity');
// }
this.config = {...config};
this.config = { ...config };
this.config.color = config.color ? config.color : 'var(--primary-text-color)';
this.config.size = config.size ? config.size : '40%';
let cardStyle = '';
Expand Down

0 comments on commit 09459f0

Please sign in to comment.