Skip to content
πŸ“ Templatable Lovelace Configurations
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist dist for first render fix Apr 29, 2019
src Fix error during the first render Apr 29, 2019
.eslintrc.yaml "Functional" Mar 12, 2019
.gitignore dist for first render fix Apr 29, 2019
.nvmrc Initial commit Mar 11, 2019
LICENSE πŸŽ‰ We're in business Mar 13, 2019
README.md Update README.md Apr 19, 2019
package.json dist for first render fix Apr 29, 2019
rollup.config.js πŸš€ Introducing variables Mar 20, 2019
tsconfig.json Initial commit Mar 11, 2019
yarn.lock dist for first render fix Apr 29, 2019

README.md

Config Template Card Card

πŸ“ Templatable Configuration Card

GitHub Release GitHub Activity custom_updater License

Project Maintenance BuyMeCoffee

Discord Community Forum

Twitter Github

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

Options

Name Type Requirement Description
type string Required custom:config-template-card
card object Required Card object
entities list Optional List of entity strings that should be watched for updates
variables list Optional List of variables, which can be templates, that can be used in your config and indexed using vars

Installation

Step 1

Save config-template-card to <config directory>/www/config-template-card.js on your Home Assistant instanse.

Example:

wget https://raw.githubusercontent.com/custom-cards/config-template-card/master/dist/config-template-card.js
mv config-template-card.js /config/www/

Step 2

Link config-template-card inside your ui-lovelace.yaml or Raw Editor in the UI Editor

resources:
  - url: /local/config-template-card.js
    type: module

Step 3

Add a custom element in your ui-lovelace.yaml or in the UI Editor as a Manual Card

Available variables for tempalting

this.hass - The hass object

states - The states object

user - The user object

vars - Defined by variables configuration and accessible in your templates starting at the 0th index as your firstly defined variable to help clean up your templates

type: 'custom:config-template-card'
variables:
  - states['light.bed_light'].state
  - states['cover.garage_door'].state
entities:
  - light.bed_light
  - cover.garage_door
  - alarm_control_panel.ha_alarm
  - climate.ecobee
card:
  type: "${vars[0] === 'on' ? 'custom:hui-glance-card' : 'custom:hui-entities-card'}"
  entities:
    - entity: alarm_control_panel.ha_alarm
      name: "${vars[1] === 'open' && states['alarm_control_panel.ha_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: "${vars[0] === 'on' ? 'light.bed_light' : 'climate.ecobee'}"
      icon: "${vars[1] === 'open' ? 'mdi:hotel' : '' }"

Note: All templates must be enclosed by ${} and card type must custom even for core. e.g. custom:hui-shopping-list-card

Troubleshooting

Developers

Fork and then clone the repo to your local machine. From the cloned directory run

npm install && npm run build

You can’t perform that action at this time.