Config Template Card Card
📝 Templatable Configuration Card
This card is for Lovelace on Home Assistant that allows you to use pretty much any valid Javascript on the hass object in your configuration
Minimum Home Assistant Version
Home Assistant version 0.110.0 or higher is required as of release 1.2.0 of config-template-card
Support
Hey dude! Help me out for a couple of 🍻 or a ☕!
Installation
resources:
- url: /local/config-template-card.js
type: moduleOptions
| Name | Type | Requirement | Description |
|---|---|---|---|
| type | string | Required | custom:config-template-card |
| entities | list | Required | List of entity strings that should be watched for updates. Templates can be used here |
| variables | list | Optional | List of variables, which can be templates, that can be used in your config and indexed using vars or by name |
| card | object | Optional | Card configuration. (A card, row, or element configuaration must be provided) |
| row | object | Optional | Row configuration. (A card, row, or element configuaration must be provided) |
| element | object | Optional | Element configuration. (A card, row, or element configuaration must be provided) |
| style | object | Optional | Style configuration. (Required if you use an element) |
Available variables for templating
| Variable | Description |
|---|---|
this.hass |
The hass object |
states |
The states object |
user |
The user object |
vars |
Defined by variables configuration and accessible in your templates to help clean them up. If variables in the configuration is a yaml list, then vars is an array starting at the 0th index as your firstly defined variable. If variables is an object in the configuration, then vars is a string-indexed map and you can also access the variables by name without using vars at all. |
type: 'custom:config-template-card'
variables:
LIGHT_STATE: states['light.bed_light'].state
GARAGE_STATE: states['cover.garage_door'].state
entities:
- light.bed_light
- cover.garage_door
- alarm_control_panel.alarm
- climate.ecobee
card:
type: "${LIGHT_STATE === 'on' ? 'glance' : 'entities'}"
entities:
- entity: alarm_control_panel.alarm
name: "${GARAGE_STATE === 'open' && states['alarm_control_panel.alarm'].state === 'armed_home' ? 'Close the garage!' : ''}"
- entity: binary_sensor.basement_floor_wet
- entity: climate.ecobee
name: "${states['climate.ecobee'].attributes.current_temperature > 22 ? 'Cozy' : 'Too Hot/Cold'}"
- entity: cover.garage_door
- entity: "${LIGHT_STATE === 'on' ? 'light.bed_light' : 'climate.ecobee'}"
icon: "${GARAGE_STATE === 'open' ? 'mdi:hotel' : '' }"Templated entities example
type: 'custom:config-template-card'
variables:
- states['sensor.light'].state
entities:
- '${vars[0]}'
card:
type: light
entity: '${vars[0]}'
name: "${states[vars[0]].state === 'on' ? 'Light On' : 'Light Off'}"Picture-elements card example
type: picture-elements
image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
- type: 'custom:config-template-card'
variables:
- states['light.bed_light'].state
entities:
- light.bed_light
element:
type: icon
icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
style:
top: 47%
left: 75%**Note how the style object is on the config-template-card itself and not within the element configuration.
Entities card example
type: entities
entities:
- type: 'custom:config-template-card'
variables:
- states['light.bed_light'].state
entities:
- light.bed_light
row:
type: section
label: "${vars[0] === 'on' ? 'Light On' : 'Light Off'}"
- entity: light.bed_light
```
## Defining global functions in variables
If you find yourself having to rewrite the same logic in multiple locations, you can define global methods inside Config Template Card's variables, which can be called anywhere within the scope of the card:
```yaml
type: 'custom:config-template-card'
variables:
setTempMessage: |
temp => {
if (temp <= 19) {
return 'Quick, get a blanket!';
}
else if (temp >= 20 && temp <= 22) {
return 'Cozy!';
}
return 'It's getting hot in here...';
}
currentTemp: states['climate.ecobee'].attributes.current_temperature
entities:
- climate.ecobee
card:
type: entities
entities:
- entity: climate.ecobee
name: '${ setTempMessage(currentTemp) }'Note: All templates must be enclosed by ${}
Developers
Fork and then clone the repo to your local machine. From the cloned directory run
npm install && npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent