diff --git a/.eslintrc.yml b/.eslintrc.yml
new file mode 100644
index 0000000..e5d1282
--- /dev/null
+++ b/.eslintrc.yml
@@ -0,0 +1,5 @@
+extends: airbnb-base
+rules:
+ import/no-unresolved: off
+ no-undef: off
+ class-methods-use-this: off
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/README.md b/README.md
index fc3f33d..40bdcde 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,12 @@
Lovelace Button card for your entities.
-
+
## Features
- works with any toggleable entity
- - 2 actions on tap `toggle` and `more_info` (more to come)
+ - 3 actions on tap `toggle`, `more_info` and `service`
- state display (optional)
- custom color for `on` and `off` state (optional)
- custom size (optional)
@@ -19,6 +19,8 @@ Lovelace Button card for your entities.
- `icon` : apply color settings to the icon only
- `card` : apply color settings to the card only
- automatic font color if color_type is set to `card`
+ - blank card (for organization)
+ - support for [custom_updater](https://github.com/custom-components/custom_updater)
## Options
@@ -27,11 +29,12 @@ Lovelace Button card for your entities.
| type | string | **Required** | `custom:button-card` | Type of the card
| entity | string | **Required** | `switch.ac` | entity_id
| icon | string | optional | `mdi:air-conditioner` | Icon to display in place of the state
-| color_type | string | `icon` | `icon` \| `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.
+| color_type | string | `icon` | `icon` \| `card` \| `blank-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.
| 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` | Define the type of action
+| 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
@@ -49,12 +52,24 @@ resources:
```
4. Write configuration for the card in your `ui-lovelace.yaml`
+----
+
+To configure custom_updater with button-card
+
+```
+custom_updater:
+ card_urls:
+ - https://raw.githubusercontent.com/kuuji/button-card/0.0.2/tracker.json
+```
+
## Examples
+More examples in [here](./examples)
+
Show a button for the air conditioner (blue when on):
-
+
```yaml
- type: "custom:button-card"
@@ -66,7 +81,7 @@ Show a button for the air conditioner (blue when on):
Show an ON/OFF button for the home_lights group:
-
+
```yaml
- type: "custom:button-card"
@@ -77,9 +92,9 @@ Show an ON/OFF button for the home_lights group:
----------------
-Light entity with custom icon and "more info" pop-in:6
+Light entity with custom icon and "more info" pop-in:
-
+
```yaml
- type: "custom:button-card"
@@ -90,47 +105,12 @@ Light entity with custom icon and "more info" pop-in:6
```
--------------------------
-
-Light card with text:
-
-
-
-```yaml
-- type: "custom:button-card"
- entity: light.living_room_lights
- icon: mdi:sofa
- color: auto
- name: Living room
-```
-
-
-
-------------
-Light card with text and custom style:
-
-
-
-```yaml
-- type: "custom:button-card"
- entity: light._
- icon: mdi:home
- color: auto
- action: more_info
- name: Home
- style:
- - text-transform: none
- - color: rgb(28, 128, 199)
- - font-weight: bold
-```
-
-
------
Light card with card color type, name, and automatic color:
-
+
```yaml
- type: "custom:button-card"
@@ -146,59 +126,52 @@ Light card with card color type, name, and automatic color:
- font-weight: bold
```
----------------
+------------
-Home + all rooms in an horizontal stack
+Horizontal stack with :
+ - 2x blank cards
+ - 1x volume up button with service call
+ - 1x volume down button with service call
+ - 2x blank cards
-
+
```yaml
- type: horizontal-stack
cards:
- type: "custom:button-card"
- entity: light.living_room_lights
- icon: mdi:sofa
- color: auto
- action: more_info
- default_color: rgb(255, 233, 155)
+ color_type: blank-card
+ - type: "custom:button-card"
+ color_type: blank-card
+ - type: "custom:button-card"
color_type: card
- name: Living room
- style:
- - font-size: 12px
- - font-weight: bold
+ color: rgb(223, 255, 97)
+ icon: mdi:volume-plus
+ action: service
+ service:
+ domain: media_player
+ action: volume_up
+ data:
+ entity_id: media_player.livimg_room_speaker
- type: "custom:button-card"
- entity: light.harry
- color: auto
- icon: mdi:ceiling-light
- action: more_info
- name: Ceiling
- style:
- - font-size: 12px
- - font-weight: bold
+ color_type: card
+ color: rgb(223, 255, 97)
+ icon: mdi:volume-minus
+ action: service
+ service:
+ domain: media_player
+ action: volume_down
+ data:
+ entity_id: media_player.livimg_room_speaker
- type: "custom:button-card"
- entity: light.ron
- color: auto
- icon: mdi:lamp
- action: more_info
- name: TV
- style:
- - font-size: 12px
- - font-weight: bold
+ color_type: blank-card
- type: "custom:button-card"
- entity: light.snape
- icon: mdi:floor-lamp
- color: auto
- action: more_info
- name: Floor
- style:
- - font-size: 12px
- - font-weight: bold
+ color_type: blank-card
```
-
## Credits
- [ciotlosm](https://github.com/ciotlosm) for the readme template and the awesome examples
\ No newline at end of file
diff --git a/button-card.js b/button-card.js
index 412444d..ff1c529 100644
--- a/button-card.js
+++ b/button-card.js
@@ -1,57 +1,68 @@
import {
- LitElement, html
+ LitElement, html,
} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
class ButtonCard extends LitElement {
-
static get properties() {
return {
hass: Object,
- config: Object
- }
+ config: Object,
+ };
}
_render({ hass, config }) {
const state = hass.states[config.entity];
switch (config.color_type) {
- case "card":
- return this.card_colored_html(state, config);
- break;
- case "icon":
+ case 'blank-card':
+ return this.blankCardColoredHtml(state, config);
+ case 'card':
+ return this.cardColoredHtml(state, config);
+ case 'icon':
default:
- return this.icon_colored_html(state, config);
- break;
+ return this.iconColoredHtml(state, config);
}
}
- get_font_color_based_on_background_color(background_color) {
- background_color = background_color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
- let fontColor = ""; // don't override by default
- if (background_color) {
- // Counting the perceptive luminance - human eye favors green color...
- const luminance = (0.299 * background_color[1] + 0.587 * background_color[2] + 0.114 * background_color[3]) / 255;
+ getFontColorBasedOnBackgroundColor(backgroundColor) {
+ const parsedBackgroundColor = backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+ let fontColor = ''; // don't override by default
+ if (parsedBackgroundColor) {
+ // Counting the perceptive luminance - human eye favors green color...
+ const luminance = (0.299 * parsedBackgroundColor[1] + 0.587 * parsedBackgroundColor[2] + 0.114 * parsedBackgroundColor[3]) / 255;
if (luminance > 0.5) {
- fontColor = "rgb(62, 62, 62)"; // bright colors - black font
+ fontColor = 'rgb(62, 62, 62)'; // bright colors - black font
} else {
- fontColor = "rgb(234, 234, 234)"// dark colors - white font
+ fontColor = 'rgb(234, 234, 234)';// dark colors - white font
}
}
return fontColor;
}
- build_css_color_attribute(state, config) {
- let color_on = config.color;
- if (config.color == "auto") {
- color_on = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
+ buildCssColorAttribute(state, config) {
+ let colorOn = config.color;
+ if (state) {
+ if (config.color === 'auto') {
+ colorOn = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
+ }
+ const color = state.state === 'on' ? colorOn : config.color_off;
+ return color;
}
- let color = state.state === 'on' ? color_on : config.color_off;
- return color;
+ return colorOn;
}
- card_colored_html(state, config) {
- const color = this.build_css_color_attribute(state, config);
- const fontColor = this.get_font_color_based_on_background_color(color);
+ blankCardColoredHtml(state, config) {
+ const color = this.buildCssColorAttribute(state, config);
+ const fontColor = this.getFontColorBasedOnBackgroundColor(color);
+ return html`
+
+
+ `;
+ }
+
+ cardColoredHtml(state, config) {
+ const color = this.buildCssColorAttribute(state, config);
+ const fontColor = this.getFontColorBasedOnBackgroundColor(color);
return html`