Help with dynamic template card and input select

Jamie_Pryer · August 18, 2020, 6:41pm

Home Assistant 0.114.2

Hey all,
need some help with how to get the values and use it within a “vars” (array?)
using this https://github.com/iantrich/config-template-card via HACS

Background:
i have 10 rooms, however, i dont want to create new cards for each of these rooms - im looking to have something a bit more lean, where you can pick a room and then the room you pick, will populate the data into the card, for use.

Eg. if i select “living room” from a drop down, then the graph would show the values for the living room data. Then if you pick “kitchen” the graph would then update again.

Ive been playing with the config-template-card, however im not sure how to get my value to pass in, from my input select?

input select:
  room_temp_display:
    name: Display Room Temp Info
    options:
      - Office
      - Living
      - Kitchen
    initial: Office

so if i pick “office” it would use the value “sensor.average_temp_jamie_office”

card:
  entities:
    - '${vars[0] === ''Office'' ? ''sensor.average_temp_jamie_office''': 'vars[0] === ''Living'' ? ''sensor.average_temp_living_room'' }'
  type: 'custom:mini-graph-card'
entities:
  - input_select.room_temp_display
type: 'custom:config-template-card'
variables:
  - 'states[''input_select.room_temp_display''].state'

here we can see the state of the card, jsut on its own (as a working graph example)

entities:
  - sensor.average_temp_jamie_office
type: 'custom:mini-graph-card'

what the inputselect data looks like

Jamie_Pryer · January 21, 2021, 11:57am

bump to see if anyone else does this somehow

Jamie_Pryer · January 21, 2021, 12:21pm

thanks to help here:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
    show_header_toggle: false
  - type: entities
    entities:
      - entity: input_select.room_temp_display
        name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.room_temp_display''].state'
    entities:
      - input_select.hours_to_show
      - input_select.room_temp_display
    card:
      type: 'custom:mini-graph-card'
      entities:
        - entity: '${vars[1]}'
          name: '${vars[1]}'
      hours_to_show: '${vars[0]}'
      points_per_hour: 1
      line_width: 3
      show:
        points: hover
        labels: true
        average: true
        extrema: true
      color_thresholds:
        - color: '#121df3'
          value: 11
        - color: '#c0ac2b'
          value: 17
        - color: '#c0392b'
          value: 25

petro · January 21, 2021, 12:28pm

You’re syntax in the template is wrong. If you plan to have multiple options, then you should use if, else if statements or a map. Right now, you have nested shorthand if statements that are syntactically incorrect. Also, you need a fallback, something that will be presented when office or living is not selected.

entities:
  - >
    ${ if (vars[0] === 'Office') return 'sensor.average_temp_jamie_office';
       else if (vars[0] === 'Living') return 'sensor.average_temp_living_room';
       else return 'NEED ENTITY ID HERE FOR FALLBACK'; }

petro · January 21, 2021, 12:29pm

Or you could do what you did too, you responded while I was writing up your issue.

Jamie_Pryer · January 21, 2021, 12:31pm

thanks!

next challange is how to get the input slect to be a friendly name, eg.

“jamie office” = ‘sensor.average_temp_jamie_office’

petro · January 21, 2021, 12:32pm

Well, you’d need the template that I wrote up for that. Either use a map or if else if statements.

petro · January 21, 2021, 12:34pm

Or use an automation with another input_select that sets the entity_id input select. That might be easier if you don’t know JS.

Jamie_Pryer · January 21, 2021, 12:35pm

which template sorry?

petro · January 21, 2021, 12:37pm

this template

Jamie_Pryer · January 21, 2021, 12:47pm

sorry, gotcha

tried that and doesnt display anything?

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
    show_header_toggle: false
  - type: entities
    entities:
      - entity: input_select.room_temp_display2
        name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.room_temp_display2''].state'
    entities:
      - input_select.hours_to_show
      - >
        $ { if (vars[1] === 'Jamie Office') return 'sensor.average_temp_jamie_office';
           else if (vars[1] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard';
         else if (vars[1] === 'Bar') return 'sensor.average_temp_bar';
         else if (vars[1] === 'Bathroom') return 'sensor.average_temp_bathroom';
           else return 'sensor.average_temp_jamie_office'; }
    card:
      type: 'custom:mini-graph-card'
      entities:
        - entity: '${vars[1]}'
          name: '${vars[1]}'
      hours_to_show: '${vars[0]}'
      points_per_hour: 1
      line_width: 3
      show:
        points: hover
        labels: true
        average: true
        extrema: true
      color_thresholds:
        - color: '#121df3'
          value: 11
        - color: '#c0ac2b'
          value: 17
        - color: '#c0392b'
          value: 25

  room_temp_display2:
    name: Display Room Temp Info
    options:
      - Jamie Office
      - Airing Cupboard
      - Bar
      - Bathroom
    initial: Jamie Office
    
  hours_to_show:
      name: Hours to Show
      options:
        - 6
        - 12
        - 24
        - 48
        - 120
        - 168
      initial: 120

petro · January 21, 2021, 12:49pm

the template needs to go in the card, not in the config-template-card entities section.

The entities section for the config-template-card should only contain your input_selects.

Jamie_Pryer · January 21, 2021, 12:56pm

sorry, still not getting it

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
    show_header_toggle: false
  - type: entities
      entities:
        - ${ if (vars[0] === 'Jamie Office') return 'sensor.average_temp_jamie_office';
           else if (vars[0] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard';
         else if (vars[0] === 'Bar') return 'sensor.average_temp_bar';
         else if (vars[0] === 'Bathroom') return 'sensor.average_temp_bathroom';
           else return 'sensor.average_temp_jamie_office'; }
      name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.room_temp_display''].state'
    entities:
      - input_select.hours_to_show
      - input_select.room_temp_display
    card:
      type: 'custom:mini-graph-card'
      entities:
        - entity: '${vars[1]}'
          name: '${vars[1]}'
      hours_to_show: '${vars[0]}'
      points_per_hour: 1
      line_width: 3
      show:
        points: hover
        labels: true
        average: true
        extrema: true
      color_thresholds:
        - color: '#121df3'
          value: 11
        - color: '#c0ac2b'
          value: 17
        - color: '#c0392b'
          value: 25

petro · January 21, 2021, 1:01pm

Dude, I drew an arrow to the area… Look at the picture. You’re still putting it in the wrong spot.

Jamie_Pryer · January 21, 2021, 1:03pm

petro:

- >
    ${ if (vars[0] === 'Office') return 'sensor.average_temp_jamie_office';
       else if (vars[0] === 'Living') return 'sensor.average_temp_living_room';
       else return 'NEED ENTITY ID HERE FOR FALLBACK'; }

sorry,
with you now
added to the right area but nothing shows up.

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
    show_header_toggle: false
  - type: entities
    entities:
      - entity: input_select.room_temp_display2
        name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.room_temp_display2''].state'
    entities:
      - input_select.hours_to_show
      - input_select.room_temp_display2
    card:
      type: 'custom:mini-graph-card'
      entities:
        - >
          $ { if (vars[1] === 'Jamie Office') return 'sensor.average_temp_jamie_office';
             else if (vars[1] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard';
           else if (vars[1] === 'Bar') return 'sensor.average_temp_bar';
           else if (vars[1] === 'Bathroom') return 'sensor.average_temp_bathroom';
             else return 'sensor.average_temp_jamie_office'; }
      hours_to_show: '${vars[0]}'
      points_per_hour: 1
      line_width: 3
      show:
        points: hover
        labels: true
        average: true
        extrema: true
      color_thresholds:
        - color: '#121df3'
          value: 11
        - color: '#c0ac2b'
          value: 17
        - color: '#c0392b'
          value: 25

petro · January 21, 2021, 1:04pm

remove the space between the $ {

Also, you may need to clear your cache and refresh the page.

Jamie_Pryer · January 21, 2021, 1:14pm

sorry again, im playing around with it but doesnt load up any graph still.

is it something to do with the fact im not loading the state value in?

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
    show_header_toggle: false
  - type: entities
    entities:
      - entity: input_select.room_temp_display2
        name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.room_temp_display2''].state'
    entities:
      - input_select.hours_to_show
      - input_select.room_temp_display2
    card:
      type: 'custom:mini-graph-card'
      entities:
        - >
          ${ if (vars[1] === 'Jamie Office') return
          'sensor.average_temp_jamie_office';
           else if (vars[1] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard';
           else if (vars[1] === 'Bar') return 'sensor.average_temp_bar';
           else if (vars[1] === 'Bathroom') return 'sensor.average_temp_bathroom';
           else return 'sensor.average_temp_jamie_office' ;}
      hours_to_show: '${vars[0]}'
      points_per_hour: 1
      line_width: 3
      show:
        points: hover
        labels: true
        average: true
        extrema: true
      color_thresholds:
        - color: '#121df3'
          value: 11
        - color: '#c0ac2b'
          value: 17
        - color: '#c0392b'
          value: 25

petro · January 21, 2021, 1:16pm

that has to be 1 line

Jamie_Pryer · January 21, 2021, 1:21pm

Hey,
i keep trying that, saving, refresh cache and it always goes onto another line when i edit it again?

im using this:

type: 'custom:config-template-card'
variables:
  - 'states[''input_select.hours_to_show''].state'
  - 'states[''input_select.room_temp_display2''].state'
entities:
  - input_select.hours_to_show
  - input_select.room_temp_display2
card:
  type: 'custom:mini-graph-card'
  entities:
    - >
      ${if (vars[1] === 'Jamie Office') return 'sensor.average_temp_jamie_office';
        else if (vars[1] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard';
        else if (vars[1] === 'Bar') return 'sensor.average_temp_bar';
        else if (vars[1] === 'Bathroom') return 'sensor.average_temp_bathroom';
        else return 'sensor.average_temp_jamie_office' ;}
  hours_to_show: '${vars[0]}'
  points_per_hour: 1
  line_width: 3
  show:
    points: hover
    labels: true
    average: true
    extrema: true
  color_thresholds:
    - color: '#121df3'
      value: 11
    - color: '#c0ac2b'
      value: 17
    - color: '#c0392b'
      value: 25

then i edit and its this:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
    show_header_toggle: false
  - type: entities
    entities:
      - entity: input_select.room_temp_display2
        name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.room_temp_display2''].state'
    entities:
      - input_select.hours_to_show
      - input_select.room_temp_display2
    card:
      type: 'custom:mini-graph-card'
      entities:
        - >
          ${if (vars[1] === 'Jamie Office') return
          'sensor.average_temp_jamie_office';
            else if (vars[1] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard';
            else if (vars[1] === 'Bar') return 'sensor.average_temp_bar';
            else if (vars[1] === 'Bathroom') return 'sensor.average_temp_bathroom';
            else return 'sensor.average_temp_jamie_office' ;}
      hours_to_show: '${vars[0]}'
      points_per_hour: 1
      line_width: 3
      show:
        points: hover
        labels: true
        average: true
        extrema: true
      color_thresholds:
        - color: '#121df3'
          value: 11
        - color: '#c0ac2b'
          value: 17
        - color: '#c0392b'
          value: 25

petro · January 21, 2021, 1:24pm

Then you can’t use the GUI to edit this card. That syntax is wrong and will continuously cause problems. You can attempt to 1 line it.

        - "${if (vars[1] === 'Jamie Office') return 'sensor.average_temp_jamie_office'; else if (vars[1] === 'Airing Cupboard') return 'sensor.average_temp_airing_cupboard'; else if (vars[1] === 'Bar') return 'sensor.average_temp_bar'; else if (vars[1] === 'Bathroom') return 'sensor.average_temp_bathroom'; else return 'sensor.average_temp_jamie_office';}"