📝 100% Templatable Lovelace Configurations

Thank you for sharing the final solution, then people who are interested in a similar functionality may use it and probably make it better.

1 Like

I’d be interested in a screenshot of the result, would you mind posting one?

this is from trailers

Nice, thanks! I went a different route, using upcoming-media-card and modifying it heavily. Your approach is much more flexible with positioning.

Before we get completely off-topic, may I ask what the name and fanart attributes are used for? Don’t see them in your poster layout.

well i am still researching how to make the on click action to play the movie. just busy with something else. but if you look in to it let me know :slight_smile:

If you’re using Plex, there’s a specific card that does this https://community.home-assistant.io/t/custom-component-card-plex-meets-home-assistant/304349

I had it for a while but them realized that I don’t really use the click-to-play functionality, so I removed it again.

i did the same thing for plex, now i change to kodi and trying it.

Im having trouble with adding the config-template-card

Ive managed to get the section working but Im trying to add it so that both the grid cards use the same config-template-card or is this not possible.

Here is a section of the code, it seams that its because the config-template-card only supports card and not cards.

kiosk_mode:
  non_admin_settings:
    kiosk: true
views:
  - title: Temp
    path: temperatures
    layout:
      width: 962
      height: 601
    icon: ''
    badges: []
    type: custom:grid-layout
    cards:
      - type: grid
        cards:
          - type: custom:config-template-card
            variables:
              apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
              apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
            entities:
              - input_number.graph_min_temp
              - input_number.graph_max_temp
            card:
              - type: custom:apexcharts-card
                graph_span: 16h
                hours_12: true
                span:
                  start: day
                  offset: +6h
                header:
                  show: true
                  title: Lounge
                  show_states: true
                  colorize_states: true
                experimental:
                  color_threshold: true
                series:
                  - name: ' '
                    stroke_width: 2
                    show:
                      header_color_threshold: true
                    color_threshold:
                      - value: 15
                        color: blue
                      - value: 19
                        color: green
                      - value: 20
                        color: yellow
                      - value: 24
                        color: red
                    fill_raw: last
                    curve: smooth
                    extend_to: false
                    entity: sensor.l_temperature
                apex_config:
                  tooltip:
                    enabled: false
                  legend:
                    show: false
                  yaxis:
                    min: ${apex_min_temp}
                    max: ${apex_max_temp}
                    forceNiceScale: true
                now:
                  show: true
              - type: custom:apexcharts-card
                graph_span: 16h
                hours_12: true
                span:
                  start: day
                  offset: +6h
                header:
                  show: true
                  title: Dining room temperature
                  show_states: true
                  colorize_states: true
                experimental:
                  color_threshold: true
                series:
                  - name: ' '
                    stroke_width: 2
                    show:
                      header_color_threshold: true
                    color_threshold:
                      - value: 15
                        color: blue
                      - value: 19
                        color: green
                      - value: 20
                        color: yellow
                      - value: 24
                        color: red
                    fill_raw: last
                    curve: smooth
                    extend_to: false
                    entity: sensor.dining_room_temperature
                apex_config:
                  tooltip:
                    enabled: false
                  legend:
                    show: false
                  yaxis:
                    min: ${apex_min_temp}
                    max: ${apex_max_temp}
                    forceNiceScale: true
                now:
                  show: true
              - type: custom:apexcharts-card
                graph_span: 16h
                hours_12: true
                span:
                  start: day
                  offset: +6h
                header:
                  show: true
                  title: Garden room temperature
                  show_states: true
                  colorize_states: true
                experimental:
                  color_threshold: true
                series:
                  - name: ' '
                    stroke_width: 2
                    show:
                      header_color_threshold: true
                    color_threshold:
                      - value: 15
                        color: blue
                      - value: 19
                        color: green
                      - value: 20
                        color: yellow
                      - value: 24
                        color: red
                    fill_raw: last
                    curve: smooth
                    extend_to: false
                    entity: sensor.garden_room_temperature
                apex_config:
                  tooltip:
                    enabled: false
                  legend:
                    show: false
                  yaxis:
                    min: ${apex_min_temp}
                    max: ${apex_max_temp}
                    forceNiceScale: true
                now:
                  show: true
              - type: custom:apexcharts-card
                graph_span: 16h
                hours_12: true
                span:
                  start: day
                  offset: +6h
                header:
                  show: true
                  title: Understairs temperature
                  show_states: true
                  colorize_states: true
                experimental:
                  color_threshold: true
                series:
                  - name: ' '
                    stroke_width: 2
                    show:
                      header_color_threshold: true
                    color_threshold:
                      - value: 15
                        color: blue
                      - value: 19
                        color: green
                      - value: 20
                        color: yellow
                      - value: 24
                        color: red
                    fill_raw: last
                    curve: smooth
                    extend_to: false
                    entity: sensor.understairs_temperature
                apex_config:
                  tooltip:
                    enabled: false
                  legend:
                    show: false
                  yaxis:
                    min: ${apex_min_temp}
                    max: ${apex_max_temp}
                    forceNiceScale: true
                now:
                  show: true
            columns: 4
            square: false
      - type: grid
        cards:
          - type: custom:apexcharts-card
            graph_span: 16h
            hours_12: true
            span:
              start: day
              offset: +6h
            header:
              show: true
              title: Bathroom temperature
              show_states: true
              colorize_states: true
            experimental:
              color_threshold: true
            series:
              - name: ' '
                stroke_width: 2
                show:
                  header_color_threshold: true
                color_threshold:
                  - value: 15
                    color: blue
                  - value: 19
                    color: green
                  - value: 20
                    color: yellow
                  - value: 24
                    color: red
                fill_raw: last
                curve: smooth
                extend_to: false
                entity: sensor.bathroom_temperature
            apex_config:
              tooltip:
                enabled: false
              legend:
                show: false
              yaxis:
                min: 15
                max: 22
                forceNiceScale: true
            now:
              show: true
          - type: custom:apexcharts-card
            graph_span: 16h
            hours_12: true
            span:
              start: day
              offset: +6h
            header:
              show: true
              title: Bedroom temperature
              show_states: true
              colorize_states: true
            experimental:
              color_threshold: true
            series:
              - name: ' '
                stroke_width: 2
                show:
                  header_color_threshold: true
                color_threshold:
                  - value: 15
                    color: blue
                  - value: 19
                    color: green
                  - value: 20
                    color: yellow
                  - value: 24
                    color: red
                fill_raw: last
                curve: smooth
                extend_to: false
                entity: sensor.bedroom_temperature
            apex_config:
              tooltip:
                enabled: false
              legend:
                show: false
              yaxis:
                min: 15
                max: 22
                forceNiceScale: true
            now:
              show: true
          - type: custom:apexcharts-card
            graph_span: 16h
            hours_12: true
            span:
              start: day
              offset: +6h
            header:
              show: true
              title: Office temperature
              show_states: true
              colorize_states: true
            experimental:
              color_threshold: true
            series:
              - name: ' '
                stroke_width: 2
                show:
                  header_color_threshold: true
                color_threshold:
                  - value: 15
                    color: blue
                  - value: 19
                    color: green
                  - value: 20
                    color: yellow
                  - value: 24
                    color: red
                fill_raw: last
                curve: smooth
                extend_to: false
                entity: sensor.office_temperature
            apex_config:
              tooltip:
                enabled: false
              legend:
                show: false
              yaxis:
                min: 15
                max: 22
                forceNiceScale: true
            now:
              show: true
          - type: custom:apexcharts-card
            graph_span: 16h
            hours_12: true
            span:
              start: day
              offset: +6h
            header:
              show: true
              title: Outside temperature
              show_states: true
              colorize_states: true
            experimental:
              color_threshold: true
            series:
              - name: ' '
                stroke_width: 2
                show:
                  header_color_threshold: true
                color_threshold:
                  - value: 10
                    color: blue
                  - value: 15
                    color: green
                  - value: 20
                    color: yellow
                  - value: 24
                    color: red
                fill_raw: last
                curve: smooth
                extend_to: false
                entity: sensor.live_outside_temp
            apex_config:
              tooltip:
                enabled: false
              legend:
                show: false
              yaxis:
                min: 0
                max: 22
                forceNiceScale: true
            now:
              show: true
        columns: 4
        square: false

I know the last section for the - type: grid is not aligned yet but this is how far I got after spending hours on working out the code and couldn’t find the answer.

Would be grateful for any advice.

You posted 365 line of a code; if you really need a help - suggest you to simplify the issue to as short as possible…

Sorry I should have explained better:

The code creates 8 Apexcharts on a tablet in landscape with 4 alone the top and 4 underneath, all displaying the temperature in different rooms.

The code works fine but I would like to be able to change the Y axis min and max numbers in each chart using two input_number helpers with the use of the config-templet-card to change the setting instead of changing each entry in all 8 charts i.e.:

Previous settings:

yaxis:
  min: 15
  max: 22

What I would like:

yaxis:
  min: ${apex_min_temp}
  max: ${apex_max_temp}

I’ve managed to get config-template-card to work on one chart:

type: custom:config-template-card
variables:
  apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
  apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
entities:
  - input_number.graph_min_temp
  - input_number.graph_max_temp
card:
  type: custom:apexcharts-card
  graph_span: 16h
  hours_12: true
  span:
    start: day
    offset: +6h
  header:
    show: true
    title: Lounge
    show_states: true
    colorize_states: true
  experimental:
    color_threshold: true
  series:
    - name: ' '
      stroke_width: 2
      show:
        header_color_threshold: true
      color_threshold:
        - value: 15
          color: blue
        - value: 19
          color: green
        - value: 20
          color: yellow
        - value: 24
          color: red
      fill_raw: last
      curve: smooth
      extend_to: false
      entity: sensor.l_temperature
  apex_config:
    tooltip:
      enabled: false
    legend:
      show: false
    yaxis:
      min: ${apex_min_temp}
      max: ${apex_max_temp}
      forceNiceScale: true
  now:
    show: true

But my problem comes in where to place the config_template_card code in my layout to work with all 8 cards.

The structure I have is:

views:
  - title:
    path:
    ......etc....
    type: custom:grid-layout
    cards:
      - type: grid
        cards:
          - type: custom:apexcharts-card
            title: Lounge
            apex_config:
                yaxis:
                  min: ${apex_min_temp}
                  max: ${apex_max_temp}
            ......etc....
            # repeated 3 more times across the tablet on 1st row
        columns: 4
        square: false
      - type: grid
        cards:
          - type: custom:apexcharts-card
            title: Bedroom
            apex_config:
                yaxis:
                  min: ${apex_min_temp}
                  max: ${apex_max_temp}
            ......etc....
            # repeated 3 more times across the tablet on 2nd row
        columns: 4
        square: false

Hope this explains it.
The problem I think is because the config-template-card only supports card and not cards but I don’t know whether there is a work around as the documents mention about ‘Defining global functions in variables’ and ‘Dashboard wide variables’ but I wasn’t sure how to set that up hence now asking for help.

Using CTC for graphs is not a good idea.
Let me show an example.

type: ctc
entities:
  - sensor.some_sensor
  - input_number.number
card:
  type: history-graph
  hours_to_show: >-
    ${ states['input_number.number'].state }
  entities:
    - sensor.some_sensor

Here “hours_to_show” may be changed dynamically.
The card is working properly - but it blinks every time the sensor changes (not to mention a fact that “history-graph” becomes not “streamlined” as w/o CTC).

Now imagine this stack:

type: ctc
entities:
  - sensor.some_sensor_1
  - sensor.some_sensor_2
  - input_number.number
card:
  type: vertical-stack
  cards:
    - type: history-graph
      hours_to_show: >-
        ${ states['input_number.number'].state }
      entities:
        - sensor.some_sensor_1
    - type: history-graph
      hours_to_show: >-
        ${ states['input_number.number'].state }
      entities:
        - sensor.some_sensor_2

Here BOTH graphs will be redrawn if ANY sensor changes (i.e. blinking more frequently).
(do not bother that I am not using variables here, not related to the “blinking” issue)

Now closer to your particular case.

  1. You have not defined sensors in the “entities” section of CTC. Means - graphs will not be updated automatically on these sensors’ change. But if you would define - then see what was written above about blinking.
  2. If you still want to have MIN & MAX values defined dynamically - consider using 8 CTC for each graph (ofc each sensor must be defined inside “entities”). Do not bother about repeated “variables” section - this may be reduced either by using yaml anchors (if you use yaml mode for a dashboard) OR by using global CTC variables.

Check this (untested):

title: My dashboard
config_template_card_vars:
  HOURS_TO_SHOW: states['input_number.number'].state
....
views:
  - ...
    cards:
      - type: grid or whatever
        cards:
          - type: ctc
            entities:
              - sensor.some_sensor_1
              - input_number.number
            card:
              type: history-graph
              hours_to_show: >-
                ${ HOURS_TO_SHOW }
              entities:
                - sensor.some_sensor_1
          - type: ctc
            entities:
              - sensor.some_sensor_2
              - input_number.number
            card:
              type: history-graph
              hours_to_show: >-
                ${ HOURS_TO_SHOW }
              entities:
                - sensor.some_sensor_2

Thank you for your help, the variables will only be changed 4 times a year on each season really just to make the graphs more readable.

After your help I was looking to set up the Dashboard wide variables, This is how far I’ve got but its not working

  - title: Test1
    path: test1
    config_template_card_vars:
      apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
      apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - input_number.graph_min_temp
          - input_number.graph_max_temp
        card:
          type: custom:apexcharts-card
          graph_span: 16h
          hours_12: true
          span:
            start: day
            offset: +6h
          header:
            show: true
            title: Lounge
            show_states: true
            colorize_states: true
          experimental:
            color_threshold: true
          series:
            - name: ' '
              stroke_width: 2
              show:
                header_color_threshold: true
              color_threshold:
                - value: 15
                  color: blue
                - value: 19
                  color: green
                - value: 20
                  color: yellow
                - value: 24
                  color: red
              fill_raw: last
              curve: smooth
              extend_to: false
              entity: sensor.l_temperature
          apex_config:
            tooltip:
              enabled: false
            legend:
              show: false
            yaxis:
              min: ${apex_min_temp}
              max: ${apex_max_temp}
              forceNiceScale: true
          now:
            show: true

I’ve also tried placing the variables before views as in the doc’s but still not working:

config_template_card_vars:
    apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
    apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
views:
  - title: Test1
    path: test1
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - input_number.graph_min_temp
          - input_number.graph_max_temp
        card:
          type: custom:apexcharts-card
          graph_span: 16h
          hours_12: true
          span:
            start: day
            offset: +6h
          header:
            show: true
            title: Lounge
            show_states: true
            colorize_states: true
          experimental:
            color_threshold: true
          series:
            - name: ' '
              stroke_width: 2
              show:
                header_color_threshold: true
              color_threshold:
                - value: 15
                  color: blue
                - value: 19
                  color: green
                - value: 20
                  color: yellow
                - value: 24
                  color: red
              fill_raw: last
              curve: smooth
              extend_to: false
              entity: sensor.l_temperature
          apex_config:
            tooltip:
              enabled: false
            legend:
              show: false
            yaxis:
              min: ${apex_min_temp}
              max: ${apex_max_temp}
              forceNiceScale: true
          now:
            show: true

Whereas this works fine:

  - title: test
    path: test
    subview: false
    badges: []
    cards:
      - type: custom:config-template-card
        variables:
          apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
          apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
        entities:
          - input_number.graph_min_temp
          - input_number.graph_max_temp
        card:
          type: custom:apexcharts-card
          graph_span: 16h
          hours_12: true
          span:
            start: day
            offset: +6h
          header:
            show: true
            title: Lounge
            show_states: true
            colorize_states: true
          experimental:
            color_threshold: true
          series:
            - name: ' '
              stroke_width: 2
              show:
                header_color_threshold: true
              color_threshold:
                - value: 15
                  color: blue
                - value: 19
                  color: green
                - value: 20
                  color: yellow
                - value: 24
                  color: red
              fill_raw: last
              curve: smooth
              extend_to: false
              entity: sensor.l_temperature
          apex_config:
            tooltip:
              enabled: false
            legend:
              show: false
            yaxis:
              min: ${apex_min_temp}
              max: ${apex_max_temp}
              forceNiceScale: true
          now:
            show: true

Cracked it after reading the docs again after so many times it clicked.
Though I had but still not working.

config_template_card_vars:
  - parseFloat(states["input_number.graph_min_temp"].state)
  - parseFloat(states["input_number.graph_max_temp"].state)
views:
  - title: Test1
    path: test1
    config_template_card_vars:
      apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
      apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - input_number.graph_min_temp
          - input_number.graph_max_temp
        card:
          type: custom:apexcharts-card
          ...........
          apex_config:
            yaxis:
              min: ${vars[0]}
              max: ${vars[1]}

Thanks again.

I checked my code, it is correct.

Here this is meaningless:

config_template_card_vars:
  - parseFloat(states["input_number.graph_min_temp"].state)
  - parseFloat(states["input_number.graph_max_temp"].state)
views:
  - title: Test1
    path: test1
    config_template_card_vars:
      apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
      apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          ...

because you need to declare variables ONCE on a “dashboard level”.
And on a “dashboard level” you are using “vars[…]” notation (list), on a wrong “view level” - “name” notation (dict) - and then calling these vars by names…

Also, I see no need in using parseFloat here since you are not doing any math.

Sorry this is a result of copying and passing bits of code into the forum and not checking before posting.

In my running code I hadn’t tried to declare them twice, it was either way I’d been testing and getting nowhere.

I have to use parseFloat as the values for min and max need to be returned as numbers, they won’t except strings.

Ill have another look to see if I can work it out.

OK, come back with a feedback.
The code I posted earlier MUST work.

As for parseFloat - these values ARE strings:

option_1: abc
option_2: 123

and they are converted internally properly.
Check my example for “hours_to_show”.

OK thanks.
This is from the docs from Apexcharts

I couldn’t get this working on one apexchart until I looked up how to convert from string to number in the CTC docs and that corrected it. If I change min and max to a fixed number and put that in inverted commas it doesn’t work.

Surely you should not put number in commas.
And commas are not added here too:

      hours_to_show: >-
        ${ states['input_number.number'].state }

Finally got this working as is:

title: home
views:
  - title: Temp
    path: temperatures
    # ....
    type: custom:grid-layout
    cards:
      - type: custom:config-template-card
        variables:
          apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
          apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
        entities:
          - input_number.graph_min_temp
          - input_number.graph_max_temp
        card:
          type: grid
          cards:
            - type: custom:apexcharts-card
              # ....
              apex_config:
                yaxis:
                  min: ${apex_min_temp}
                  max: ${apex_max_temp}
            - type: custom:apexcharts-card
              ....... repeated 3 more times
          columns: 4
          square: false
      - type: custom:config-template-card
        variables:
          apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
          apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
        entities:
          - input_number.graph_min_temp
          - input_number.graph_max_temp
        card:
          type: grid
          cards:
            - type: custom:apexcharts-card
              # ....
              apex_config:
                yaxis:
                  min: ${apex_min_temp}
                  max: ${apex_max_temp}
            - type: custom:apexcharts-card
              ....... repeated 3 more times
          columns: 4
          square: false

Tried without parseFloat and it wouldn’t work, min and max need an integer.

I also tried creating ‘Dashboard wide variables’ but could not get it to work, I searched and couldn’t find anywhere anyone else has used config_template_card_vars: in their code.

This guy has some examples on his blog of “config_template_card_vars” [CARD] Config Template Card to boost your dashboards in Home Assistant FR – ArminasTV (domoplus.eu)