📝 100% Templatable Lovelace Configurations

poudenes · February 28, 2021, 2:31pm

Sorry for my bad English but let me explain:

First tryout

type: 'custom:config-template-card'
variables:
  CRYPTO: 'states[''input_select.crypto_one'']'
entities:
  - '${CRYPTO.entity_id}'
card:
  type: 'custom:apexcharts-card'
  config_templates: bandwidth_chart
  header:
    title: '${CRYPTO.attributes[''friendly_name'']}'
  series:
    - entity: '${CRYPTO.entity_id}'
      name: Buy
      attribute: buy
    - entity: '${CRYPTO.entity_id}'
      name: Sell
      attribute: sell

Schermafbeelding 2021-02-28 om 15.29.37
This show in title part the friendly_name of the input_select entity.
The 2 graphs not showing

Second tryout

type: 'custom:config-template-card'
variables:
  CRYPTO: 'states[''input_select.crypto_one'']'
  STATE: 'states[''input_select.crypto_one''].state'
entities:
  - '${CRYPTO}'
card:
  type: 'custom:apexcharts-card'
  config_templates: bandwidth_chart
  header:
    title: '${STATE}'
  series:
    - entity: '${STATE}'
      name: Buy
      attribute: buy
    - entity: '${STATE}'
      name: Sell
      attribute: sell

This load the graphs correct. But title part show the value of of the input_select (value is entity_id that is used fo the graphs.

Schermafbeelding 2021-02-28 om 14.26.39

Ildar_Gabdullin · February 28, 2021, 2:36pm

OK, I will try to simulate your case on my setup, may be will help you a bit later.

poudenes · February 28, 2021, 2:36pm

thank you… in meanwhile I go try as well…

Ildar_Gabdullin · February 28, 2021, 2:59pm

Yes, that was my fault, sorry.

I managed to simulate your case.
The input_select:

input_select:
  test_sensors_for_graph:
    name: "Test: sensors for graph"
    options:
      - sensor.cleargrass_1_co2
      - sensor.cleargrass_1_tvoc

The card:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.test_sensors_for_graph
        name: Select data
  - type: 'custom:config-template-card'
    variables:
      CRYPTO: 'states[''input_select.test_sensors_for_graph'']'
    entities:
      - '${CRYPTO.state}'
      - '${CRYPTO.entity_id}'
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - entity: '${CRYPTO.state}'
        - type: history-graph
          entities:
            - entity: '${CRYPTO.state}'
          hours_to_show: 6
          refresh_interval: 0

And with apexcharts-card:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.test_sensors_for_graph
        name: Select data
  - type: 'custom:config-template-card'
    variables:
      CRYPTO: 'states[''input_select.test_sensors_for_graph'']'
    entities:
      - '${CRYPTO.state}'
      - '${CRYPTO.entity_id}'
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - entity: '${CRYPTO.state}'
        - type: 'custom:apexcharts-card'
          header:
            show: true
            title: '${states[CRYPTO.state].attributes[''friendly_name'']}'
          series:
            - entity: '${CRYPTO.state}'

poudenes · February 28, 2021, 3:22pm

type: 'custom:config-template-card'
variables:
  CRYPTO: 'states[''input_select.crypto_one'']'
entities:
  - '${CRYPTO.state}'
  - '${CRYPTO.entity_id}'
card:
  type: 'custom:apexcharts-card'
  config_templates: bandwidth_chart
  header:
    title: '${states[CRYPTO.state].attributes[''friendly_name'']}'
  series:
    - entity: '${CRYPTO.state}'
      name: Buy
      attribute: buy
    - entity: '${CRYPTO.state}'
      name: Sell
      attribute: sell

This is how it look like now. @Ildar_Gabdullin You’re my hero!!!

poudenes · February 28, 2021, 3:30pm

title: '${states[CRYPTO.state].attributes[''friendly_name'']}'

[/quote]

output:

BNB

One little cosmetic thing. How to change this to:

Crypto: BNB

without change the friendly_names of all cryto’s
So just add the “text” Crypto in front of the ${states… part

Ildar_Gabdullin · February 28, 2021, 3:33pm

Try this:

title: '${"HELLO_WORLD: " + states[CRYPTO.state].attributes[''friendly_name'']}'

poudenes · March 1, 2021, 10:57am

type: 'custom:config-template-card'
variables:
  CRYPTO: 'states[''input_select.crypto_one'']'
entities:
  - '${CRYPTO.entity_id}'
  - '${CRYPTO.state}'
card:
  type: 'custom:apexcharts-card'
  config_templates: bandwidth_chart
  header:
    title: '${"Crypto: " + states[''input_select.crypto_one''].state}'
  series:
    - entity: '${"sensor.eur_" + states[''input_select.crypto_one''].state}'
      name: Buy
      attribute: buy
    - entity: '${"sensor.eur_" + states[''input_select.crypto_one''].state}'
      name: Sell
      attribute: sell

Updated the code.
input_select now have

- ada
- bnb
- dot
etc
etc

This give me more options to get a nice title and combine them as entities with adding some text in front so it will become a sensor:

sensor.eur_ada
sensor.eur_bnb
etc 
etc

Ildar_Gabdullin · March 1, 2021, 11:38am

But you missed this:

entities:
  - '${CRYPTO.state}'

Without it the config-template-card will not be auto updated with new sensor’s data.

poudenes · March 1, 2021, 12:09pm

It is added… will update the code in post

pex81 · March 30, 2021, 6:44am

Hi, can anyone help me with this template?
thanks


- type: custom:config-template-card
  variables: >
    [[[
      if (window.location.pathname.split('lovelace-mobile/')[1] == 'home')
        return "header_notification";
      else 
        return "header_bottom";
    ]]]
  entities:
    - input_boolean.dummy1
  card:
    type: custom:decluttering-card
    template: ${vars[0]}

Ildar_Gabdullin · March 30, 2021, 7:23am

wrong syntax, where did you take this example?

pex81 · March 30, 2021, 7:31am

nowhere, I was trying.
How can I solve it, can you give me an example.

Ildar_Gabdullin · March 30, 2021, 7:39am

Have a look at this:

type: 'custom:config-template-card'
variables:
  SUN: 'states[''sun.sun'']'
entities:
  - '${SUN.entity_id}'
card:
  type: entities
  entities:
    - entity: '${SUN.entity_id}'
    - entity: sun.sun
      name: '${SUN.state}'

This small example uses templates for:

choosing an entity to display;
displaying a state of the entity.

Now you can try to correct your code using this example.

pex81 · March 30, 2021, 10:00am

Thanks, but my problem is to recall a decluttering-card template based on the path

Ildar_Gabdullin · March 30, 2021, 10:23am

Try using TWO symbols "'"

split(''lovelace-mobile/'')

Mariusthvdb · March 30, 2021, 12:30pm

if this is still the yaml you are working with, it seems you didn’t declare / name the variable, hence you cant call it in the config?

from the docs:

type: 'custom:config-template-card'
variables:
  LIGHT_STATE: states['light.bed_light'].state
  GARAGE_STATE: states['cover.garage_door'].state

and in Ildar’s example:

type: 'custom:config-template-card'
variables:
  SUN: 'states[''sun.sun'']'

btw prevent the quoting issues by using the multiline yaml notation:

type: custom:config-template-card
variables:
  SUN: >
   states['sun.sun']

arifroni · March 31, 2021, 7:12pm

how can I use the variable as an integer instead of a string? In the picture marked in red, max needs an integer.

Also when I do an arithmetic operation on a variable, how can I reduce the decimal points after the dot? For example, in the following picture, I want 9428K only.

Ildar_Gabdullin · March 31, 2021, 8:10pm

To convert string to int, use parseFloat(string value).

arifroni · March 31, 2021, 11:06pm

great! thanks. this leads me to the second answer as well.

parseFloat(string value).toFixed(0)