From 8ac16fae35d1ad585ed606653e08693d8e52122a Mon Sep 17 00:00:00 2001
From: Alexandre Garcia <tidhilm@gmail.com>
Date: Sun, 26 Aug 2018 11:52:54 -0400
Subject: [PATCH] First commit

---
 LICENSE         |   9 ++++++
 README.md       |  44 ++++++++++++++++++++++++++
 button-card.js  |  80 ++++++++++++++++++++++++++++++++++++++++++++++++
 icon_button.png | Bin 0 -> 4754 bytes
 no_icon.png     | Bin 0 -> 984 bytes
 5 files changed, 133 insertions(+)
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 button-card.js
 create mode 100644 icon_button.png
 create mode 100644 no_icon.png

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..68ee7f2
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,9 @@
+
+The MIT License (MIT)
+Copyright (c) 2018, Alexandre Garcia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..64c309c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,44 @@
+# Button card
+
+Button card is a simple button card to toggle your entities. 
+
+The card toggles on click/tap.
+
+![icon-button-card](icon_button.png)
+![no-icon-button-card](no_icon.png)
+
+## Options
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `custom:button-card`
+| entity | string | **Required** | `switch.ac`
+| icon | string | optional | Icon to display in place of the state e.g. `mdi:air-conditioner`
+| color | string | `var(--primary-text-color)` | Color of the icon when state is `on`. Can be any html color e.g. `rgb(28, 128, 199)`
+| size | string | `40%` | Size of the icon. Can be percentage or pixel
+
+
+
+## Examples
+
+Import the card in `ui-lovelace.yaml` 
+```yaml
+title: Home
+resources:
+  - url: /local/button-card.js
+    type: module
+```
+
+Show a button for the air conditioner (blue when on):
+```yaml
+- type: "custom:button-card"
+  entity: switch.ac
+  icon: mdi:air-conditioner
+  color: rgb(28, 128, 199)
+```
+
+Show an ON/OFF button for the home lights:
+```yaml
+- type: "custom:button-card"
+  entity: group.home_lights
+```
diff --git a/button-card.js b/button-card.js
new file mode 100644
index 0000000..c443002
--- /dev/null
+++ b/button-card.js
@@ -0,0 +1,80 @@
+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,
+    }
+  }
+
+  _render({ hass, config }) {
+    let state = hass.states[config.entity];
+    if (config.icon){
+      return this.icon(state,config);
+    }
+    return this.no_icon(state);
+  }
+
+
+  no_icon(state) {
+    return html`
+    <style>
+    paper-button {
+      display: block;
+      margin: auto;
+      text-align: center;
+    }
+    </style>
+    <ha-card>
+      <paper-button on-tap="${ev => this._toggle(state)}">
+       ${state.state}
+      </paper-button>
+    </ha-card>
+    `;
+  }
+
+  icon(state,config) {
+    return html`
+    <style>
+    ha-icon {
+      width: ${config.size ? config.size : "40%" };
+      height: ${config.size ? config.size : "40%" };
+      display: block;
+      margin: auto;
+      color: ${state.state === 'on' ? (config.color ? config.color : "var(--primary-text-color)") : "var(--disabled-text-color)"};
+    }
+    </style>
+    
+    <ha-card>
+      <paper-button state="${state.state}" on-tap="${ev => this._toggle(state)}">
+       <ha-icon icon="${config.icon}"></ha-icon>
+      </paper-button>
+    </ha-card>
+    `;
+  }
+
+  setConfig(config) {
+    if (!config.entity) {
+      throw new Error('You need to define entity');
+    }
+    this.config = config;
+  }
+
+  // The height of your card. Home Assistant uses this to automatically
+  // distribute all cards over the available columns.
+  getCardSize() {
+    return 3;
+  }
+
+  _toggle(state) {
+    this.hass.callService('homeassistant', 'toggle', {
+      entity_id: state.entity_id
+    });
+  }
+}
+
+customElements.define('button-card', ButtonCard);
\ No newline at end of file
diff --git a/icon_button.png b/icon_button.png
new file mode 100644
index 0000000000000000000000000000000000000000..7547760e7a25f432ebe6fd64061c7ce34eada869
GIT binary patch
literal 4754
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

literal 0
HcmV?d00001

diff --git a/no_icon.png b/no_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b9a5cb029f4da901d64aa5559fc3ca3fdae612a
GIT binary patch
literal 984
zcmV;}11J26P)<h;3K|Lk000e1NJLTq004Uc001ut1^@s6!`QW+00004b3#c}2nYxW
zd<bNS0000PbVXQnQ*UN;cVTj60B3G*ZDlQUV{&C>ZgXgFbngSdJ^%m%YDq*vRCt{2
zoL@*&Q5?s==ibTYn%nxfrmG0-DWj+iBr2q*Ow)QSOM;-6ii#pC5Q_d0LKyWBBorhF
zmOg}UWq*9gf-J+tUb4s3W@WbP*0y_ku-)C;v?sk6&-s1c&hP#Xe8-2gbJ#A2MIvDi
zLJAb80}%E>vL(W09&io-^sO!q42)$*hHTD(ygV23y&kBl>O?YP21%#Wn9$-#CR2uR
z1<0;w5-kp@sv_U(0l@$IHTG<7G!WvD^*QO+IG}M(d$ov|z0zr1B1pDGkZg%C?b%Mo
zAZ81*S6bN;L9!)+WJ?6emI#t95hPn8RKMSM9+*6$d%gJ%$C(*?J|F7#AHczbhfuw9
z7mABl;`87q#IzUyAP@+m>CRm!ii&}Oe#_i*=jyS1`3m&)y>}w|j5DFd!59N$OuUut
za=CE!Og##Vig2gtHg4W(gsLj2uRjmJ-*4%y+);&4DCAI5`w>oddHFUhSTG+A4cE}y
z`wsp6AJBN?Iy7wpRh8A2-rv6ysNGxVP*VF5PIl>rjp*)viFka%sOh?nuCC`;zoFF9
z+t&UN>(;Hunl)?fj_C-($qt9Z_%ie*r#?J9gvE;%Ls7CHd2sL(UUWUjzS=sdsw-!X
zXb30U<H<)X_A93z(_&B*1#Y+7Qg3Z-f!`lM#r6ujB07d}vg7eM=FRiv)V*FWIOj+t
z5|;Y-_&D0yAE2gYH-f?WcExlA;baew452Vwm{SjhmLM99Lf7@2XPupoF*5QMd-v4Z
z5z#S(ll``*2W4fO;C6eA8e<GwHg84G+c#6r(RCg7oA05lY!jA7mf026c7&7t^w|^q
z{5ghGCr@M5suGlxtj3AsClLq)(b4f}+Ib&84&c@6ZWI(0*qGK{gp-|2CUNEJMMOuV
zICA(HjvhG<0JwDd0>;LE{C93kOEVIQxE(Pafkh%=&N+v!b1YmW_5npkMx)=MD1!c6
zN=y&QmI#t95hPn8NVY_fY>6P*5<#*h!jNsgj)4#dvsYT#5<#*h!Xi7BN;{Q<m<9gz
zX_2kPG!iZdsZ<(TOtaKXZ`m;<lSzCV{SIB%>5i2-3}Xz6qCiy@FqU1<uFS*98+F*<
zhRm3ln=s>VO~x{QO)EQ7m~0@?a~-qK46dmfh`G;HF8=`gi|)h2&*Am}0000<MNUMn
GLSTX>&(4GZ

literal 0
HcmV?d00001