Raw Configuration Editor - "value template" issue

Configuration Frontend
1

I am attempting to add a custom background to some of my dashboards which will display any of several jpegs, based on the jpg name held in an input text sensor.

I have seen examples using custom background in the Raw Configuration editor and then using a custom button-card to reference this.

I know that sensors can be accessed in this editor and urls then returned with those details. However, the format looks different to code I have used in yaml scripts do I have been unable to get the syntax to work. My latest attempt is below and the screen errors when parsing ‘jpg’. I need to identify if the input_text contains the text ‘jpg’. If so, I need to build the return url statement concatenating the text with the folder names. If ‘jpg’ i not found, use the default theme background.

  custom_background:
    styles:
      card:
        - background: |
            [[[
              if 'jpg' in (states['input_text.background_full_filename'].state ) {
                return 'url('/local/images/' + states['input_text.background_full_filename'].state )';
              } else {
                return 'var(--primary-background-color)';
              }
            ]]]
        - background-size: cover
        - background-position: center
        - background-repeat: no-repeat
        - height: 100vh
        - width: 100vw
        - position: fixed
        - top: 0
        - left: 0
2

Wrong, custom:button-card uses JS, “dev tools → templates” is for jinja.

3

I will try to be a bit more clear. an example of someone successfully using a custom background and button card is here:

https://community.home-assistant.io/t/dashboard-with-dynamically-background/353837/24?u=stain3565

this is nearly what i need. i just need to adapt the code that defines “background:” to reflect my test for the text “jpg” and build the url. i have used jinja for templates before and realise this code in the linked discussion is a different language. if it is js, then i guess i am simply not understanding the code i need. I have since tried an “.includes(“jpg”)” line but still not working.

i do understand that “value template” is not what this code is, I was just trying to use an equivalent template logic term to show it was not the editor yaml that was the issue for me but was the logic within the dynamic background definition.

4

I see, Dev tools cannot help to debug a JS code.
Need to learn JS basics…
Suggest to ask all button-card related questions in the main thread - there is a chance users may help you.

Try this:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_text.test_text
  - type: custom:button-card
    entity: sun.sun
    styles:
      card:
        - background: >-
            [[[
              var strState = states['input_text.test_text'].state;
              if(strState.includes('jpg'))
              {
                var strPath = '/local/images/test/' + strState;
                return 'url(' + strPath + ')';
              }
              else
                return 'var(--red-color)'
            ]]]

image

5

Thanks. That worked a treat! In my career as a programmer, I only brushed up against js a few times while using almost every other business systems language going. Harder to learn new languages at my age but I will give it a go.

1 Like