How can i use this plugin in a vertical-stack card?

[treecamp]

Checklist:

• [X] I updated to the latest version available Check
• [x] I cleared the cache of my browser Check

Release with the issue: 1.1.2

Last working release (if known): Not sure if this ever worked

Browser and Operating System: Chrome - Version 80.0.3987.116 (Official Build) (64-bit) Version 80.0.3987.116 (Official Build) (64-bit)

Description of problem: I'm trying to use this plugin in a vertical stack card. Is this possible? I have it working with a normal manual card like this:

card:
  columns: 5
  entities:
    - entity: input_boolean.gast_aanwezig
      icon: >-
        ${states['input_boolean.gast_aanwezig'].state === 'on' ?
        'mdi:account-check' : 'mdi:account-remove'}
      name: Gast
    - entity: input_boolean.nachtverlichting
      icon: >-
        ${states['input_boolean.nachtverlichting'].state === 'on' ?
        'mdi:weather-night' : 'mdi:weather-sunny'}
      name: Verlichting
    - entity: input_number.aantal_aanwezig
      icon: >-
        ${states['input_number.aantal_aanwezig'].state === '0.0' ?
        'mdi:numeric-0-circle-outline' : 
        states['input_number.aantal_aanwezig'].state === '1.0' ?
        'mdi:numeric-1-circle-outline' :
        states['input_number.aantal_aanwezig'].state === '2.0'
        ?'mdi:numeric-2-circle-outline' : 
        states['input_number.aantal_aanwezig'].state === '3.0' ?
        'mdi:numeric-3-circle-outline' :
        states['input_number.aantal_aanwezig'].state === '4.0' ?
        'mdi:numeric-4-circle-outline' : 
        states['input_number.aantal_aanwezig'].state === '5.0' ?
        'mdi:numeric-5-circle-outline' :  'mdi:account-question' }
      name: Aanwezig
    - entity: input_number.aantal_slapen
      icon: >-
        ${states['input_number.aantal_slapen'].state === '0.0' ?
        'mdi:numeric-0-circle-outline' : 
        states['input_number.aantal_slapen'].state === '1.0' ?
        'mdi:numeric-1-circle-outline' :
        states['input_number.aantal_slapen'].state === '2.0'
        ?'mdi:numeric-2-circle-outline' : 
        states['input_number.aantal_slapen'].state === '3.0' ?
        'mdi:numeric-3-circle-outline' :
        states['input_number.aantal_slapen'].state === '4.0' ?
        'mdi:numeric-4-circle-outline' : 
        states['input_number.aantal_slapen'].state === '5.0' ?
        'mdi:numeric-5-circle-outline' :  'mdi:account-question' }
      name: Slapen
    - entity: input_boolean.persoon_slaapt
      icon: >-
        ${states['input_boolean.persoon_slaapt'].state === 'on' ? 'mdi:sleep' :
        'mdi:sleep-off'}
      name: Persoon
  show_state: false
  type: 'custom:hui-glance-card'
entities:
  - input_boolean.gast_aanwezig
  - input_boolean.nachtverlichting
  - input_number.aantal_aanwezig
  - input_number.aantal_slapen
  - input_boolean.persoon_slaapt
type: 'custom:config-template-card'
variables:
  - 'states[''input_boolean.gast_aanwezig''].state'
  - 'states[''input_boolean.nachtverlichting''].state'
  - 'states[''input_number.aantal_aanwezig''].state'
  - 'states[''input_number.aantal_slapen''].state'
  - 'states[''input_boolean.persoon_slaapt''].state'

But i'd like to use it in a vertical-stack card, i've tried several ways of formatting the code, but no luck sofar. This is my code in a vertical card:

type: vertical-stack
cards:
    - type: 'custom:hui-glance-card'
      columns: 7
      entities:
        - entity: input_boolean.coen_aanwezig
          icon: >-
            ${states['input_boolean.coen_aanwezig'].state === 'on' ?
            'mdi:account-check' : 'mdi:account-remove'}
          name: Thuis
        - entity: input_number.coen_kans_aanwezig
          icon: >-
            ${states['input_number.coen_kans_aanwezig'].state === '0.0' ?
            'mdi:numeric-0-circle-outline' :
            states['input_number.coen_kans_aanwezig'].state === '1.0' ?
            'mdi:numeric-1-circle-outline' :
            states['input_number.coen_kans_aanwezig'].state === '2.0' ?
            'mdi:numeric-2-circle-outline' :
            states['input_number.coen_kans_aanwezig'].state === '3.0' ?
            'mdi:numeric-3-circle-outline' :
            states['input_number.coen_kans_aanwezig'].state === '4.0' ?
            'mdi:numeric-4-circle-outline' :
            states['input_number.coen_kans_aanwezig'].state === '5.0' ?
            'mdi:numeric-5-circle-outline' : 'mdi:map-marker-question-outline' }
          name: Kans
        - entity: sensor.coen_iphone_app_battery_level
          name: Batterij
        - entity: input_boolean.coen_slaapt
          icon: >-
            ${states['input_boolean.coen_slaapt'].state === 'on' ? 'mdi:sleep' :
            'mdi:sleep-off'}
          name: Slaapt
        - entity: device_tracker.coen_iphone_app
          icon: >-
            ${states['device_tracker.coen_iphone_app'].state === 'home' ?
            'mdi:account-check' : 'mdi:account-remove'}
          name: Assistant
        - entity: device_tracker.coen_iphone_tado
          icon: >-
            ${states['device_tracker.coen_iphone_tado'].state === 'home' ?
            'mdi:account-check' : 'mdi:account-remove'}
          name: Tado
        - entity: device_tracker.nut
          icon: >-
            ${states['device_tracker.nut'].state === 'home' ? 'mdi:account-check'
            : 'mdi:account-remove'}
          name: Nut
      show_name: false
      show_state: false
      title: Coen
      type: 'custom:config-template-card'
      entities:
        - input_boolean.coen_aanwezig
        - input_number.coen_kans_aanwezig
        - input_boolean.coen_slaapt
        - sensor.coen_iphone_app_battery_level
        - device_tracker.coen_iphone_app
        - device_tracker.coen_iphone_tado
        - device_tracker.nut
      variables:
        - 'states[''input_boolean.coen_aanwezig''].state'
        - 'states[''input_number.coen_kans_aanwezig''].state'
        - 'states[''input_boolean.coen_slaapt''].state'
        - 'states[''sensor.coen_iphone_app_battery_level''].state'
        - 'states[''device_tracker.coen_iphone_app''].state'
        - 'states[''device_tracker.coen_iphone_tado''].state'
        - 'states[''device_tracker.nut''].state'

This gives the javascript error shown below. And in HA it gives the error: "duplicated mapping key at line 51, column 7: type: 'custom:config-template-card' ^"

Which all makes sense, but i'm just not sure how to format it for the vertical stack card.

Javascript errors shown in the web inspector (if applicable):

config-template-card Error: No card defined
    at HTMLElement.setConfig (config-template-card.js:3225)
    at o (create-element-base.ts:39)
    at a (create-element-base.ts:79)
    at bn (create-card-element.ts:57)
    at HTMLElement._createCardElement (hui-stack-card.ts:77)
    at hui-stack-card.ts:39
    at Array.map (<anonymous>)
    at HTMLElement.setConfig (hui-stack-card.ts:38)
    at HTMLElement.set config [as config] (hui-card-preview.ts:60)
    at b.commit (parts.ts:420)

Additional information:

[iantrich]

Yes, it is possible. The problem is that you have the glance card and the config-template card at the same level inside the vertical stack. There's two ways you can do this.

1. Wrap everything in the config-template-card
2. Wrap just the glance card in the config-template-card

Here's how #1 should probably look

type: 'custom:config-template-card'
entities:
  - input_boolean.coen_aanwezig
  - input_number.coen_kans_aanwezig
  - input_boolean.coen_slaapt
  - sensor.coen_iphone_app_battery_level
  - device_tracker.coen_iphone_app
  - device_tracker.coen_iphone_tado
  - device_tracker.nut
variables:
  - 'states[''input_boolean.coen_aanwezig''].state'
  - 'states[''input_number.coen_kans_aanwezig''].state'
  - 'states[''input_boolean.coen_slaapt''].state'
  - 'states[''sensor.coen_iphone_app_battery_level''].state'
  - 'states[''device_tracker.coen_iphone_app''].state'
  - 'states[''device_tracker.coen_iphone_tado''].state'
  - 'states[''device_tracker.nut''].state'
card:
  type: custom:hui-vertical-stack-card
  cards:
      - type: glance
        columns: 7
        entities:
          - entity: input_boolean.coen_aanwezig
            icon: >-
              ${states['input_boolean.coen_aanwezig'].state === 'on' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Thuis
          - entity: input_number.coen_kans_aanwezig
            icon: >-
              ${states['input_number.coen_kans_aanwezig'].state === '0.0' ?
              'mdi:numeric-0-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '1.0' ?
              'mdi:numeric-1-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '2.0' ?
              'mdi:numeric-2-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '3.0' ?
              'mdi:numeric-3-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '4.0' ?
              'mdi:numeric-4-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '5.0' ?
              'mdi:numeric-5-circle-outline' : 'mdi:map-marker-question-outline' }
            name: Kans
          - entity: sensor.coen_iphone_app_battery_level
            name: Batterij
          - entity: input_boolean.coen_slaapt
            icon: >-
              ${states['input_boolean.coen_slaapt'].state === 'on' ? 'mdi:sleep' :
              'mdi:sleep-off'}
            name: Slaapt
          - entity: device_tracker.coen_iphone_app
            icon: >-
              ${states['device_tracker.coen_iphone_app'].state === 'home' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Assistant
          - entity: device_tracker.coen_iphone_tado
            icon: >-
              ${states['device_tracker.coen_iphone_tado'].state === 'home' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Tado
          - entity: device_tracker.nut
            icon: >-
              ${states['device_tracker.nut'].state === 'home' ? 'mdi:account-check'
              : 'mdi:account-remove'}
            name: Nut
        show_name: false
        show_state: false
        title: Coen

[iantrich]

Yes, it is possible. The problem is that you have the glance card and the config-template card at the same level inside the vertical stack. There's two ways you can do this.

1. Wrap everything in the config-template-card
2. Wrap just the glance card in the config-template-card

Here's how #1 should probably look

type: 'custom:config-template-card'
entities:
  - input_boolean.coen_aanwezig
  - input_number.coen_kans_aanwezig
  - input_boolean.coen_slaapt
  - sensor.coen_iphone_app_battery_level
  - device_tracker.coen_iphone_app
  - device_tracker.coen_iphone_tado
  - device_tracker.nut
variables:
  - 'states[''input_boolean.coen_aanwezig''].state'
  - 'states[''input_number.coen_kans_aanwezig''].state'
  - 'states[''input_boolean.coen_slaapt''].state'
  - 'states[''sensor.coen_iphone_app_battery_level''].state'
  - 'states[''device_tracker.coen_iphone_app''].state'
  - 'states[''device_tracker.coen_iphone_tado''].state'
  - 'states[''device_tracker.nut''].state'
card:
  type: custom:hui-vertical-stack-card
  cards:
      - type: glance
        columns: 7
        entities:
          - entity: input_boolean.coen_aanwezig
            icon: >-
              ${states['input_boolean.coen_aanwezig'].state === 'on' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Thuis
          - entity: input_number.coen_kans_aanwezig
            icon: >-
              ${states['input_number.coen_kans_aanwezig'].state === '0.0' ?
              'mdi:numeric-0-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '1.0' ?
              'mdi:numeric-1-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '2.0' ?
              'mdi:numeric-2-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '3.0' ?
              'mdi:numeric-3-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '4.0' ?
              'mdi:numeric-4-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '5.0' ?
              'mdi:numeric-5-circle-outline' : 'mdi:map-marker-question-outline' }
            name: Kans
          - entity: sensor.coen_iphone_app_battery_level
            name: Batterij
          - entity: input_boolean.coen_slaapt
            icon: >-
              ${states['input_boolean.coen_slaapt'].state === 'on' ? 'mdi:sleep' :
              'mdi:sleep-off'}
            name: Slaapt
          - entity: device_tracker.coen_iphone_app
            icon: >-
              ${states['device_tracker.coen_iphone_app'].state === 'home' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Assistant
          - entity: device_tracker.coen_iphone_tado
            icon: >-
              ${states['device_tracker.coen_iphone_tado'].state === 'home' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Tado
          - entity: device_tracker.nut
            icon: >-
              ${states['device_tracker.nut'].state === 'home' ? 'mdi:account-check'
              : 'mdi:account-remove'}
            name: Nut
        show_name: false
        show_state: false
        title: Coen

[iantrich]

Yes, it is possible. The problem is that you have the glance card and the config-template card at the same level inside the vertical stack. There's two ways you can do this.

1. Wrap everything in the config-template-card
2. Wrap just the glance card in the config-template-card

Here's how #1 should probably look

type: 'custom:config-template-card'
entities:
  - input_boolean.coen_aanwezig
  - input_number.coen_kans_aanwezig
  - input_boolean.coen_slaapt
  - sensor.coen_iphone_app_battery_level
  - device_tracker.coen_iphone_app
  - device_tracker.coen_iphone_tado
  - device_tracker.nut
variables:
  - 'states[''input_boolean.coen_aanwezig''].state'
  - 'states[''input_number.coen_kans_aanwezig''].state'
  - 'states[''input_boolean.coen_slaapt''].state'
  - 'states[''sensor.coen_iphone_app_battery_level''].state'
  - 'states[''device_tracker.coen_iphone_app''].state'
  - 'states[''device_tracker.coen_iphone_tado''].state'
  - 'states[''device_tracker.nut''].state'
card:
  type: custom:hui-vertical-stack-card
  cards:
      - type: glance
        columns: 7
        entities:
          - entity: input_boolean.coen_aanwezig
            icon: >-
              ${states['input_boolean.coen_aanwezig'].state === 'on' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Thuis
          - entity: input_number.coen_kans_aanwezig
            icon: >-
              ${states['input_number.coen_kans_aanwezig'].state === '0.0' ?
              'mdi:numeric-0-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '1.0' ?
              'mdi:numeric-1-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '2.0' ?
              'mdi:numeric-2-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '3.0' ?
              'mdi:numeric-3-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '4.0' ?
              'mdi:numeric-4-circle-outline' :
              states['input_number.coen_kans_aanwezig'].state === '5.0' ?
              'mdi:numeric-5-circle-outline' : 'mdi:map-marker-question-outline' }
            name: Kans
          - entity: sensor.coen_iphone_app_battery_level
            name: Batterij
          - entity: input_boolean.coen_slaapt
            icon: >-
              ${states['input_boolean.coen_slaapt'].state === 'on' ? 'mdi:sleep' :
              'mdi:sleep-off'}
            name: Slaapt
          - entity: device_tracker.coen_iphone_app
            icon: >-
              ${states['device_tracker.coen_iphone_app'].state === 'home' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Assistant
          - entity: device_tracker.coen_iphone_tado
            icon: >-
              ${states['device_tracker.coen_iphone_tado'].state === 'home' ?
              'mdi:account-check' : 'mdi:account-remove'}
            name: Tado
          - entity: device_tracker.nut
            icon: >-
              ${states['device_tracker.nut'].state === 'home' ? 'mdi:account-check'
              : 'mdi:account-remove'}
            name: Nut
        show_name: false
        show_state: false
        title: Coen

[treecamp]

Ah like that! Cheers, got it working :)