Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example custom card for Home Assistant. Created during Github Open Source Friday on Feb 19, 2021.
/*
To use in Home Assistant, configure card:
type: 'custom:example-card'
entities:
- switch.wemo_insight
- light.bed_light
- light.ceiling_lights
- light.kitchen_lights
*/
import {
LitElement,
html,
css
} from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
import "https://unpkg.com/wired-card@2.1.0/lib/wired-card.js?module";
import "https://unpkg.com/wired-toggle@2.1.0/lib/wired-toggle.js?module";
class MyExample extends LitElement {
static get properties() {
return {
hass: {},
config: {}
};
}
render() {
return html`
<wired-card elevation=2>
${this.config.entities.map(ent => {
const state = this.hass.states[ent];
if (!state) { return; }
return html`
<div>
${state.attributes.friendly_name}
<wired-toggle
.checked=${state.state === 'on'}
@change=${() => this.hass.callService(
'homeassistant', 'toggle',
{
entity_id: state.entity_id
}
)}
></wired-toggle>
</div>
`;
})}
</wired-card>
`;
}
setConfig(config) {
this.config = config;
}
static get styles() {
return css`
wired-card {
display: block;
}
div {
display: flex;
justify-content: space-between;
padding: 8px;
align-items: center;
}
`;
}
}
customElements.define("example-card", MyExample);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment