button-card.js

import {
  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,
      held: Boolean,
      cancel: Boolean,
      timer: Number,
      xStart: Number,
      yStart: Number
    };
  }

  _render({ hass, config }) {
    const state = hass.states[config.entity];
    switch (config.color_type) {
      case 'blank-card':
        return this.blankCardColoredHtml(state, config);
      case 'label-card':
        return this.labelCardColoredHtml(state, config);
      case 'card':
        return this.cardColoredHtml(state, config);
      case 'icon':
      default:
        return this.iconColoredHtml(state, config);
    }
  }


  getFontColorBasedOnBackgroundColor(backgroundColor) {
    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) {
      // 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
      } else {
        fontColor = 'rgb(234, 234, 234)';// dark colors - white font
      }
    }
    return fontColor;
  }

  hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return [,r,g,b];
  }


  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){
        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{
        if (config.color === 'auto') {
          color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
        }
        color = state.state === 'on' ? color : config.color_off;
      }
    }
    return color;
  }

  buildIcon(state, config) {
    let iconOff = config.icon;
    if (config.icon == 'attribute') {
      if (state) {
        const icon = state.attributes.icon;
        return icon;
      }
      return iconOff;
    }
    return iconOff;
  }

  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-down="${ev => this._down(ev, state, config)}" on-up="${ev => this._up(ev, state, config)}">
    </ha-card>
    `;
  }

  labelCardColoredHtml(state, config) {
    const color = this.buildCssColorAttribute(state, config);
    const fontColor = this.getFontColorBasedOnBackgroundColor(color);
    return html`
    <style>
    ha-icon {  
      display: flex;
      margin: auto;
    }
    paper-button {
      display: flex;
      margin: auto;
      text-align: center;
    }
    </style>
    <ha-card style="color: ${fontColor};">
      <paper-button noink style="background-color: ${color}; ${config.card_style}">
      <div>
        ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
        ${config.name ? html`<span>${config.name}</span>` : ''}
       </div>
      </paper-button>
    </ha-card>
    `;
  }

  cardColoredHtml(state, config) {
    const color = this.buildCssColorAttribute(state, config);
    const fontColor = this.getFontColorBasedOnBackgroundColor(color);
    return html`
    <style>
    ha-icon {
      display: flex;
      margin: auto;
    }
    paper-button {
      display: flex;
      margin: auto;
      text-align: center;
    }
    </style>
    <ha-card style="color: ${fontColor};" on-down="${ev => this._down(ev, state, config)}" on-up="${ev => this._up(ev, state, config)}">
      <paper-button style="background-color: ${color}; ${config.card_style}">
      <div>
        ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
        ${config.name ? html`<span>${config.name}</span>` : ''}
        ${config.show_state ? html`<span>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</span>` : ''}
       </div>
      </paper-button>
    </ha-card>
    `;
  }

  iconColoredHtml(state, config) {
    const color = this.buildCssColorAttribute(state, config);
    const icon = this.buildIcon(state, config);
    return html`
    <style>
    ha-icon {
      display: flex;
      margin: auto;
    }
    paper-button {
      display: flex;
      margin: auto;
      text-align: center;
    }
    </style>
    <ha-card on-down="${ev => this._down(ev, state, config)}" on-up="${ev => this._up(ev, state, config)}">
      <paper-button style="${config.card_style}" >
      <div>
        ${config.icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
        ${config.name ? html`<div class="longPress">${config.name}</div>` : ''}
        ${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
      </div>
      </paper-button>
    </ha-card>
    `;
  }

  setConfig(config) {
    // 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.state = config.state;
    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];
        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 = cardStyle;
    this.config.name = config.name ? config.name : '';
  }

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;
  }

  _down(event) {
    this.cancel = false;
    this.held = false;
    this.xStart = event.detail.x;
    this.yStart = event.detail.y;
    this.timer = window.setTimeout(() => {
        this.held = true;
      }, 500);
  }

  _up(event, state, config) {
    // on all up events clear the timer
    this.timer = undefined;
    // check if the start x and y positions are within 100px of the original (did user drag finger away, if so no hold)
    if (Math.abs(this.xStart - event.detail.x) > 100) {
      this.held = false;
      this.cancel = true;
    } else if (Math.abs(this.yStart - event.detail.y) > 100) {
      this.held = false;
      this.cancel = true;
    }

    if (this.cancel === false) {
      this._action(state, config);
    }
  }

  _action(state, config) {
    var actionType;
    if (this.held === false) {
      actionType = config.action
    } else {
      actionType = config.long_press_action
    }

    switch (actionType) {
      case 'more-info': //added since this is the defualt for Lovelace, if user uses it this makes it ok
      case 'more_info': {
        const node = this.shadowRoot;
        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,
        });
        event.detail = detail;
        node.dispatchEvent(event);
        return event;
      }
      case 'service': {
        this.hass.callService(config.service.domain, config.service.action, config.service.data);
        break; 
      }
      case 'toggle':
      default: {
        this.hass.callService('homeassistant', 'toggle', {
          entity_id: state.entity_id,
        });
        break;
      }
    }
  }
}

customElements.define('button-card', ButtonCard);