Pass a variable to lovelace custom card?

Configuration
1

I am using an integration called Spotcast together with a lovelace card called spotify-card. The configuration allows me to select a default device to cast music to:

  cards:
    - type: 'custom:spotify-card'
      device: <optional name of a device to pre-select>

I was wondering if there is some functionality in Home Assistant that allows me to enter the name of a variable under device: variable_name
This would allow me to create a helper (for example a dropdown selection).
The goal is for the selected item in the helper to be choosen as the device.

This is not a question regarding the custom integration, more a question if it is possible to use variables in Lovelace configs.

Thanks!

2

Variables may not be the right word in this context. Your question boils down to if it is possible to have some way to refer to dynamic data in a lovelace card.

Unfortunately there is no easy generic answer. Generally, you would need to create sensors to have the data you need available in the frontend. From there on it depends on the card what it allows you to do.

Some cards allow some form of templating to embed javascript. That way you can use the sensor to drive the behavior of the card. A lot of of these cards are built using button-card:

Mushroom cards also allow jinja2 templates in some places:

There are also cards that can manipulate the contents of other cards, such as auto-entities card. It can inject entity ids in other cards:

Probably neither of these will help you with the example you gave though, since it asks for a device instead of entities and it does not look like the card has support for dynamic values.

If you do not have many choices in your dropdown, the last resort would be to make several copies of the cards and show them conditionally, so you only see one of the cards at a time. Recently functionality was added to manipulate the visibility of a card within the card itself, and there is also a conditional card you can put around other cards.

3

Thanks for the great information.
I actually found someone with a similar question, but not regarding the same custom card. Maybe the decluttering-card will work for me too?

4

I have seen the card before, but never used it. But you might be right. Many contributors found great ways to extend HA. But as a result, there are many ways to skin a <put animal here> :slight_smile:

1 Like
5

Tried to read up on the decluttering-card, but could not figure out how this could be used for my purpose. Maybe thereā€™s another way?

6

Iā€™m guessing that you want something like a dropdown helper that contains a list of devices. Then when you select a device from the list you want the spotify card to ā€œchangeā€ to show that device.

One way to do this would be to create one spotify card per device and conditionally display only one based on the state of the dropdown helper. Along the lines of:

visibility:
  - condition: state
    entity: input_select.my_devices
    state: 'Kitchen'

I tried installing and using that spotify card, but when I set the device to something as per your example it doesnā€™t seem to change anything (I have spotify and spotcast). Therefore I didnā€™t test.

7

I combine cards in a vertical stack
Input_text or input_number forā€¦wellā€¦entry from dashboard
Config card templater, to allow the next card tu use templates (the input text value)
As part of config templater: the ā€˜other cardā€™

gadgetchnnel/lovelace-card-templater: Custom Lovelace card which allows Jinja2 templates to be applied to other cards (github.com)

8

I donā€™t really like that solution, there must be another way.

9

Iā€™m not sure I understand how that custom card works, tried to read up on it.

10

Example for a card where I use input number to compare tempearture and humidity between days

image

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:numberbox-card
        name: Offset 1
        border: true
        entity: input_number.offset_days
      - type: custom:numberbox-card
        name: Offset 2
        border: true
        entity: input_number.offset_days_2         
  - type: vertical-stack
    cards:
      - type: custom:card-templater
        card:
          type: custom:apexcharts-card
          graph_span: 24h
          span:
            end: day
          header:
            show: true
            title: Compare INSIDE temp sensors
            show_states: true
            colorize_states: true
          now:
            show: true
          apex_config:
            legend:
              show: false
          series:
            - entity: sensor.indoor_temperature
              curve: smooth
              color: red
              offset_template: '-{{ states(''input_number.offset_days'') }}d'
              type: line
              opacity: 1
              name: Keuken
              extend_to: false
              stroke_width: 1
              show:
                extremas: true
            - entity: sensor.indoor_temperature
              curve: smooth
              offset_template: '-{{ states(''input_number.offset_days_2'') }}d'
              color: orange
              type: line
              name: Keuken
              extend_to: false
              opacity: 0.6
              stroke_width: 1
              show:
                in_header: before_now
            - entity: sensor.sensor_gang_temperature
              curve: smooth
              offset_template: '-{{ states(''input_number.offset_days'') }}d'
              color: blue
              type: line
              extend_to: false
              opacity: 1
              name: Gang
              stroke_width: 1
              show:
                extremas: true
            - entity: sensor.sensor_gang_temperature
              curve: smooth
              offset_template: '-{{ states(''input_number.offset_days_2'') }}d'
              color: lightblue
              type: line
              name: Gang
              opacity: 0.6
              stroke_width: 1
              show:
                in_header: before_now
        entities:
          - entity: input_number.offset_days_2
          - entity: input_number.offset_days
11

the input number is fed into the next card using card templater

12

Would this be the correct way to do it:

type: 'custom:card-templater'
card:
    type: 'custom:spotify-card'
        device_template: {{ states('input_select.source') }}

From what I understand you rename the device to device_template to be able to use lovelace-card-templater?

13

Seems the right direction but check the quotes, it is a bit fiddly ā€¦ and you need to add the entities at the end of the card-templater

14

Like this:

type: 'custom:card-templater'
card:
    type: 'custom:spotify-card'
        device_template: {{ states("input_select.source") }}
entities:
  - input_select.source
15 
type: custom:card-templater
card:
    type: custom:spotify-card
        device_template: {{ states("input_select.source") }}
entities:
  - entity: input_select.source

I of course donot know what is in the input_select and if that is the correct format for device

edit: stillā€¦ quotes on the templateā€¦look at mine

16

and looking at the spotify card descriptionā€¦ device needs to be aligned with type
It needs to be well formatted end-2-endā€¦this might work (I donot have spotify nor the card

type: custom:card-templater
card:
    type: custom:spotify-card
    device_template: '{{ states(''input_select.source'') }}'
entities:
  - entity: input_select.source