0.0.2

fix examples readme markdown

add new example to table of contents

changelog + readme tweak

fix fucked up yaml

add capture in changelog

.eslintrc.yml

@@ -0,0 +1,5 @@
+extends: airbnb-base
+rules:
+  import/no-unresolved: off
+  no-undef: off
+  class-methods-use-this: off

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -2,12 +2,12 @@
 
 Lovelace Button card for your entities. 
 
-![all](all.gif)
+![all](examples/all.gif)
 
 ## 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):
 
-![ac](ac.png)
+![ac](examples/ac.png)
 
 ```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:
 
-![no-icon](no_icon.png)
+![no-icon](examples/no_icon.png)
 
 ```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:
 
-![sofa](sofa.png)
+![sofa](examples/sofa.png)
 
 ```yaml
 - type: "custom:button-card"
@@ -90,47 +105,12 @@ Light entity with custom icon and "more info" pop-in:6
 ```
 
 
--------------------------
-
-Light card with text:
-
-![text](text.png)
-
-```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:
-
-![home-custom](home-custom.png)
-
-```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:
 
-![color](color.gif)
+![color](examples/color.gif)
 
 ```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
 
-![all-home](all-home.png)
+![volume](examples/volume.png)
 
 
 ```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

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`
+    <ha-card style="color: ${fontColor}; background-color: ${color}; ${config.card_style}" on-tap="${ev => this._toggle(state, config)}">
+    </ha-card>
+    `;
+  }
+
+  cardColoredHtml(state, config) {
+    const color = this.buildCssColorAttribute(state, config);
+    const fontColor = this.getFontColorBasedOnBackgroundColor(color);
     return html`
     <style>
     ha-icon {  
@@ -76,8 +87,8 @@ class ButtonCard extends LitElement {
     `;
   }
 
-  icon_colored_html(state, config) {
-    const color = this.build_css_color_attribute(state, config);
+  iconColoredHtml(state, config) {
+    const color = this.buildCssColorAttribute(state, config);
     return html`
     <style>
     ha-icon {  
@@ -103,25 +114,25 @@ class ButtonCard extends LitElement {
   }
 
   setConfig(config) {
-    if (!config.entity) {
-      throw new Error('You need to define entity');
-    }
+    // if (!config.entity) {
+    //   throw new Error('You need to define entity');
+    // }
     this.config = config;
-    this.config.color = config.color ? config.color : "var(--primary-text-color)";
-    this.config.size = config.size ? config.size : "40%";
-    let card_style = '';
+    this.config.color = config.color ? config.color : 'var(--primary-text-color)';
+    this.config.size = config.size ? config.size : '40%';
+    let cardStyle = '';
     if (config.style) {
-      config.style.forEach(cssObject => {
-        const attribute = Object.keys(cssObject)[0]
-        const value = cssObject[attribute]
-        card_style += `${attribute}: ${value};\n`
-      })
+      config.style.forEach((cssObject) => {
+        const attribute = Object.keys(cssObject)[0];
+        const value = cssObject[attribute];
+        cardStyle += `${attribute}: ${value};\n`;
+      });
     }
-    this.config.color_type = config.color_type ? config.color_type : "icon";
-    this.config.color_off = config.color_off ? config.color_off : "var(--disabled-text-color)";
-    this.config.default_color = config.default_color ? config.default_color : "var(--primary-text-color)";
-    this.config.card_style = card_style;
-    this.config.name = config.name ? config.name : "";
+    this.config.color_type = config.color_type ? config.color_type : 'icon';
+    this.config.color_off = config.color_off ? config.color_off : 'var(--disabled-text-color)';
+    this.config.default_color = config.default_color ? config.default_color : 'var(--primary-text-color)';
+    this.config.card_style = cardStyle;
+    this.config.name = config.name ? config.name : '';
   }
 
   // The height of your card. Home Assistant uses this to automatically
@@ -134,30 +145,32 @@ class ButtonCard extends LitElement {
     switch (config.action) {
       case 'toggle':
         this.hass.callService('homeassistant', 'toggle', {
-          entity_id: state.entity_id
+          entity_id: state.entity_id,
         });
         break;
-      case 'more_info':
+      case 'more_info': {
         const node = this.shadowRoot;
-        let options = {};
+        const options = {};
         const detail = { entityId: state.entity_id };
         const event = new Event('hass-more-info', {
           bubbles: options.bubbles === undefined ? true : options.bubbles,
           cancelable: Boolean(options.cancelable),
-          composed: options.composed === undefined ? true : options.composed
+          composed: options.composed === undefined ? true : options.composed,
         });
         event.detail = detail;
         node.dispatchEvent(event);
         return event;
+      }
+      case 'service':
+        this.hass.callService(config.service.domain, config.service.action, config.service.data);
         break;
       default:
         this.hass.callService('homeassistant', 'toggle', {
-          entity_id: state.entity_id
+          entity_id: state.entity_id,
         });
         break;
     }
-
   }
 }
 
-customElements.define('button-card', ButtonCard);
+customElements.define('button-card', ButtonCard);

changelog.md

@@ -1,3 +1,21 @@
+## 0.0.2
+Custom service, blank card and custom_updater support
+
+### New features :
+
+ - New action type `service`
+ - Service + data configuration
+ - Blank-card
+ - Support for custom_updater
+
+![volume](examples/volume.png)
+
+### Other
+
+  - Refactoring
+  - Linting
+
+
 ## 0.0.1
 Initial release that supports versioning
 

examples/README.md

@@ -0,0 +1,214 @@
+# Examples
+
+## Table of Contents
+1. [Simple icon button](#simple-icon-button)
+1. [On/Off button](#onoff-button)
+1. [Light icon button with more_info](#light-icon-button-with-more_info)
+1. [Light icon button with text](#light-icon-button-with-text)
+1. [Light icon button with custom style](#light-icon-button-with-custom-style)
+1. [Light icon card button](#light-icon-card-button)
+1. [Stack of light buttons](#stack-of-light-buttons)
+1. [Volume up buttons with service call and blank cards](#volume-up-buttons-with-service-call-and-blank-cards)
+
+### Simple icon button
+
+Show a button for the air conditioner (blue when on):
+
+![ac](ac.png)
+
+```yaml
+- type: "custom:button-card"
+  entity: switch.ac
+  icon: mdi:air-conditioner
+  color: rgb(28, 128, 199)
+```
+---------
+
+### On/Off button
+
+Show an On/Off button for the home_lights group:
+
+![no-icon](no_icon.png)
+
+```yaml
+- type: "custom:button-card"
+  entity: group.home_lights
+  show_state: true
+```
+
+
+----------------
+
+
+### Light icon button with more_info
+
+Light entity with custom icon and "more info" pop-in:
+
+![sofa](sofa.png)
+
+```yaml
+- type: "custom:button-card"
+  entity: light.living_room_lights
+  icon: mdi:sofa
+  color: auto
+  action: more_info
+```
+
+
+-------------------------
+
+### Light icon button with text
+
+Light card with text:
+
+![text](text.png)
+
+```yaml
+- type: "custom:button-card"
+  entity: light.living_room_lights
+  icon: mdi:sofa
+  color: auto
+  name: Living room
+```
+
+
+
+-------------
+
+### Light icon button with custom style
+
+Light card with text and custom style:
+
+![home-custom](home-custom.png)
+
+```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 icon card button
+
+-----
+
+Light card with card color type, name, and automatic color:
+
+![color](color.gif)
+
+```yaml
+- type: "custom:button-card"
+  entity: light._
+  icon: mdi:home
+  color: auto
+  color_type: card
+  default_color: rgb(255, 233, 155)
+  action: more_info
+  name: Home
+  style:
+    - font-size: 12px
+    - font-weight: bold
+```
+
+---------------
+
+### Stack of light buttons
+
+Home + all rooms in an horizontal stack
+
+![all-home](all-home.png)
+
+
+```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: card
+      name: Living room
+      style:
+        - font-size: 12px
+        - font-weight: bold
+    - 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
+    - type: "custom:button-card"
+      entity: light.ron
+      color: auto
+      icon: mdi:lamp
+      action: more_info
+      name: TV
+      style:
+        - font-size: 12px
+        - font-weight: bold
+    - 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
+```
+
+------
+
+### Volume up buttons with service call and blank cards
+
+Horizontal stack with :
+  - 2x blank cards
+  - 1x volume up button with service call
+  - 1x volume down button with service call
+  - 2x blank cards
+
+![volume](volume.png)
+
+```yaml
+- type: horizontal-stack
+  cards:
+    - type: "custom:button-card"
+      color_type: blank-card
+    - type: "custom:button-card"
+      color_type: blank-card
+    - type: "custom:button-card"
+      color_type: card
+      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"
+      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"
+      color_type: blank-card
+    - type: "custom:button-card"
+      color_type: blank-card
+```

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "button-card",
+  "version": "0.0.2",
+  "description": "Button card for lovelace",
+  "main": "button-card.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kuuji/button-card.git"
+  },
+  "keywords": [
+    "lovelace"
+  ],
+  "author": "kuuji",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kuuji/button-card/issues"
+  },
+  "homepage": "https://github.com/kuuji/button-card#readme",
+  "devDependencies": {
+    "eslint": "^5.5.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.14.0"
+  }
+}

tracker.json

@@ -0,0 +1,9 @@
+{
+    "button-card": {
+      "updated_at": "2018-09-03",
+      "version": "0.0.2",
+      "remote_location": "https://raw.githubusercontent.com/kuuji/button-card/master/button-card.js",
+      "visit_repo": "https://github.com/kuuji/button-card",
+      "changelog": "https://github.com/kuuji/button-card/releases/latest"
+    }
+}