Possibility to include elements in addition to cards?

[jenseo]

Is your feature request related to a problem? Please describe. I've been struggling with the following scenario:

I'm working on my floor plan, where I'm wrapping a Picture Elements card inside your config template card. This far, everything works great.

But, somewhere down the tree of image elements inside the picture elements card, I'm using the decluttering card, to be able to reuse the same config for a bunch of lights for example. This decluttering card has it's config in another file, and the decluttering card has the ability to add an image element to it.

The problem I'm facing is that I'm trying to do quite a large portion of logic with the help of your card, but since the decluttering part is in another file, it seems I've lost the scope of the config template card.

Describe the solution you'd like In a dream scenario, I would in the separate decluttering card file be able to have the following structure (edit: have tried getting the correct line breaks to work without luck, but I hope you see what I'm after. Linebreak/indendation after every colon):

decluttering-card: card: custom:config-template-card element: type: image

...but since I can't add an image element to your card, this can't be done it seems. I think this would be a good additon to your card and make it easier for people to maintain structured and maintainable code with much flexibility.

Describe alternatives you've considered I've thought about moving the javascript logic to the "main" card and inject the result as variables into the decluttering card, but that would mean I'd have to rewrite the same logic for every decluttering card and it will be quite a few (since I haven't found a way to create a global function or something in your card to be able to reuse the same logic across all decluttering card instances). This doesn't seem efficient

I've tried using Yaml/Jinja inside the decluttering card, but I'm much more used to javascript and I've spent two days not being able to extract different values needed. Probably due to some linebreak/whitespace/indentation or something similar that YAML likes to complain about. Problem is, I'm not getting any console errors whatsoever, so this option I'd like to throw in the bin for now.

Additional context I've tried being as clear as I can, but please let me know if I can provide any more information or clear things up for you!

I really like using your card and it has saved me a lot of hair I would otherwise have pulled out by now.

// Jens.

[iantrich]

Give this a shot type: custom:hui-image-element Not sure if it will work with lazy loading or not

[jenseo]

Pretty new to lovelace, so didn't even know you could do that. Nice! Didn't work for me unfortunately, but I had another idea: Would it be possible to store functions in variables or objects, something like:

variables:
  custom_function: (input) => {
    // do something with input and return a result
}    

Then calling it like this:

'${ custom_function("input") }'

What I'm after is really to not having to type things over and over again and be able to reuse logic where needed.

Not sure if what I'm writing here is already possible, but will try it tonight! :)

[jenseo]

Wohoo! Below setup worked! Might be a good thing to add to your readme perhaps?

variables:
          test_function: |
            number => {
              if (number <= 190) {
                return '#ffffff';
                }
              else {
                return 'transparent';
                }
              }

Called in a card like this:

- background-color: '${ test_function(120) }'

[iantrich]

Cool, mind submitting a PR for the docs?

[iantrich]

As for using this with elements, yeah should be able to add that easily. There is already a custom card helper for that, much like what I"m already doing for cards and rows. I'll see if I can find some time this weekend to take a peek.

[jenseo]

Of course, I'll send you a PR tonight! I think elements would be an awesome addition so I'm keeping my fingers crossed for positive findings on that matter :)

[jenseo]

Pull request created:

50

[iantrich]

Yeah I think it will be pretty straight forward. Thanks for the PR

[iantrich]

the element styling is throwing a wrench in the "pretty straight forward" statement :)

[jenseo]

Darn it! Let me know if I can take a look or something, might be good with an extra pair of eyes 👍

[iantrich]

Got it sorted out. https://github.com/iantrich/config-template-card/releases/tag/1.3.0

[jenseo]

👏👏👏 Will try it tonight! 🥳

[jenseo]

Works great! I took a look at the code and also tried some stuff out regarding the styling part. Not sure what you have tried of course and my typescript isn't that strong, but I am able to add the styling to the main card automatically using this code:

    const element = this._config.card
      ? this._helpers.createCardElement(config)
      : this._config.row
      ? this._helpers.createRowElement(config)
      : this._helpers.createHuiElement(config);

    if (!this._config.card && !this._config.row) { // Added from here, around line 110
      if (config.style) {
        Object.keys(config.style).forEach(prop => {
          this.style.setProperty(prop, config.style[prop]);
        });
      }
    }

Problem is, the style isn't applied so I'm guessing it's added too late.

If one could trigger a re-render of the card, or perhaps replace the original with a copy after that, I'm wondering if the styling would be applied perhaps?