Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Config Template Card Card

πŸ“ Templatable Configuration Card

GitHub Release License hacs_badge

Project Maintenance GitHub Activity

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

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 β˜•!

coffee

Installation

Use HACS or follow this guide

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

Options

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.

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.

Examples

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
      - sensor.light_icon_color
    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
      style:
        '--paper-item-icon-color': '${ states[''sensor.light_icon_color''].state }'
    style:
      top: 47%
      left: 75%

The style object on the element configuration is applied to the element itself, the style object on the config-template-card is applied to the surrounding card, both can contain templated values. For example, in order to place the card properly, the top and left attributes must always be configured on the config-template-card.

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:

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 ${}

Troubleshooting

Developers

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

npm install && npm run build