Dashboard with dynamically background

Configuration Frontend
, ,
1

Hi all!

I am trying to change the background of my dashboard, randomly, once at 30 minutes.
In dashboard RAW configuration, I made this

...
views:
  - title: Bedroom
    background: >-
      center / cover no-repeat
      url("/local/backgrounds/{{states('sensor.day_time_weather_custom')}}_{{states('variable.random')}}.jpg")
      fixed
...

The value of this {{states(‘sensor.day_time_weather_custom’)}}_{{states(‘variable.random’)}} is evening_clouds_5.jpg. If I add manually the name of the file, it will work, but I want to change these values in order to change the background dynamically.
Anyone knows what I am doing wrong? How can I use templates in raw dashboard configuration?

Thank you in advance

2

You would need to use something like this:

It’s JavaScript, not Jinja.

1 Like
3

Perhaps using this component:

4

Yes… this is what I am using, but I wanted without other components :slight_smile:

5

Core Lovelace does not support templates (except in the markdown card content). You need to use custom cards if you want to use templates.

Also I would be wary of using that Animated Background card.

Sadly the developer passed away recently so it is no longer being supported and may break with an update in future, unless someone else makes a fork of the repository and takes on supporting it.

6

The only way I found to do this is by using card_mod and using a panel type view where you put the top most element (layout card or a stack or whatever) in a mod_card, remove borders/shadows and then you can use card mod css to do whatever you want with the background.

I have to say I only use this to display current playing media art as background, “below” that I use animated_backgrounds. Because the one displays over the other, I can have the media background as entirely seperate logic compared to the time-of-day/weather backgrounds.

7

o thats interesting, was looking for that just today!

could you help me out here please, how to go about adding the mod card on this panel?

title: Plattegrond
path: plattegrond
icon: mdi:floor-plan
# background: center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed

# type: custom:vertical-layout
panel: true
cards:

  - type: vertical-stack
    cards:

      - 
      - 
      etc

I have darker and lighter themes, so would like to switch to a

 background: center / cover no-repeat url('/local/images/areas/plattegrond_inversed.png') fixed

theme in my darker themes

on regular cards I use config-template-card for that with a

- title: Map
  icon: mdi:map
  type: panel
  cards:

    - type: custom:config-template-card
      entities:
        - input_select.theme
      variables:
        theme: states['input_select.theme'].state
      card:
        type: custom:auto-entities
        filter:
          include:
            - domain: person
        card:
          type: map
          hours_to_show: 48
          dark_mode: ${(/ight|Dark|Matrix/).test(theme)}

on the card config… with a view, I wouldn’t n=know how to proceed.

or, are you saying, in panel mode, we only need to set the background on the vertical-stack?

update

Bingo! You’ve made my day, thank you so very much!

title: Plattegrond
path: plattegrond
icon: mdi:floor-plan
# background: center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed

# type: custom:vertical-layout
panel: true
cards:

  - type: custom:mod-card
    style: |
      ha-card {
        background:
          {{ "center / cover no-repeat url('/local/images/areas/plattegrond_inversed.png') fixed"
              if states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True)
              else
              "center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed" }};
      }
    card:
      type: vertical-stack
      cards:

works beautifully indeed!

Of course, its still not the same as setting a regular views background, but this comes close, and since I would be using it on only a couple of views, that indeed benefit from panel mode, I am not complaining :wink:

btw, this is a neater template for that:

{% set dark = states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True)%}
{% set extension = '_inversed' if dark else '' %}
{{"center / cover no-repeat url('/local/images/areas/plattegrond"~extension~".png') fixed" }}
8

I’ve been googling and asking in the forums to do the same.
Another option is I guess to have a py script running that either updates your mushroom,yaml file OR you can instead rename the file that the theme points too on a regular basis. Not sure how to run py scripts like that though, I guess has to be done at the OS level as a chron or something.

9

This is the only solution till now… Which is an outdated addon

Maybe you can try this fork

1 Like
10

thank you! i’ll take a look

11

I’ve been working on this for a while, read lots of posts and tried ChatGPT, I’m trying to make a background change based on a variable. I found this thread while trying to figure out what I have done wrong.

I have the .png files in the local folder and I have gotten an entity to change following the variable. I’m just not understanding how to do this as a dashboard background.
Any help would be greatly appreciated. This is what I have so far.

views:
  - title: Test View
    background: |
      {% if state_attr('sensor.cubbies', 'opponent_abbr') == 'BOS' %}
        /center / cover no-repeat fixed url("/local/IMG_BOS.png")
      {% elif state_attr('sensor.cubbies', 'opponent_abbr') == 'STL' %}
        /center / cover no-repeat fixed url("/local/IMG_STL.png")
      {% else %}
       /center / cover no-repeat fixed url("/local/IMG_CHC.png")
      {% endif %}
12

as mentioned earlier in this thread

Please review this thread

13

Take a look at the " TRusselo/lovelace-animated-background", it’s done through JavaScript.

14

You can also execute card background changes via Themes and card_mod, but he is looking for lovelace backgrounds. That mod is out dated as you mentioned.

  card-mod-card: |
    ha-card {
        background: 
          {% if state_attr('sensor.cubbies', 'opponent_abbr') == 'BOS' %}
          center / cover no-repeat fixed url("/local/IMG_BOS.png")
          {% elif state_attr('sensor.cubbies', 'opponent_abbr') == 'STL' %}
          center / cover no-repeat fixed url("/local/IMG_STL.png")
          {% else %}
          center / cover no-repeat fixed url("/local/IMG_CHC.png")
          {% endif %};
15

As image background, yes, but not as video background.

Sorry, I always had video background, in my head :smiley:

edit: I am still using that mod… It is working, but yes, outdated…

edit2: I tried a similar solution for changing background of a dashboard, dynamically , but it is not updating if you don’t refresh the page, thats why javascript will be the king for this. I tried to examine that addon, but it is over my programming skills of javascript, in order to create a personal addon

16

you can set a theme to your view:

title: Buienradar
path: buienradar
theme: weather-background
type: custom:horizontal-layout

and using card-mod, theme that:

weather-background:
  card-mod-theme: weather-background
  card-mod-view: &cam_background
     |
        horizontal-layout {
          {% if is_state('input_boolean.weer_view_background','on') %}
            background: repeat url({{state_attr('camera.buienradar','entity_picture')}});
          {% endif %}
        }

nevermind the yaml anchor (it’s used in another view below that)

you can use this on other layouts too:

  card-mod-view: |
    vertical-layout {
      {% set seizoen = states('sensor.season_astronomical') %}
      background: repeat url('/local/season/{{seizoen}}_2.png');

or

    vertical-layout {
      background:
        {% set dark =
          states('input_select.theme') is search('ight|Dark|Matrix',ignorecase=True)%}
        {% set extension = '_dark' if dark else '' %}
        {{"center/cover no-repeat url('/local/wallpapers/map"~extension~".png') fixed"}};
    }

you name it :wink:

1 Like
17

Thanks for all the inputs! I am still working on it, Marius, I am going to check out the card-mod-theme and view today.

18

PickOne
Your original post is how I found this thread, did you ever get yours to work the way you wanted?

19

I should have been more clear with my post. Marius 's explanation was spot on and will generate what you need. I was curious if you created Themes before?

They can be as simple as creating a file in the themes folder.

Example:
  modes:
    dark:
      sidebar-background-color: '#090e3b'

    light:
      sidebar-background-color: '#99eeff'

  card-mod-view: |
    horizontal-layout {
          {% set state = state_attr('sensor.cubbies', 'opponent_abbr') %}
          {% if state == 'BOS' %} background: center / cover no-repeat fixed url("/local/IMG_BOS.png")
          {% elif state == 'STL' %} background: center / cover no-repeat fixed url("/local/IMG_STL.png")
          {% else %} background: center / cover no-repeat fixed url("/local/IMG_CHC.png")
          {% endif %}          
  card-mod-theme: Example

image
image1292×454 25.8 KB

Switching to that theme here

image
image1002×172 5.3 KB

These two need to match

image

image
image926×836 19.6 KB

Card-mod is required for this method.

chrome-capture-2024-4-28

20

Thanks for this. I can’t seem to get it to work with the Sections Layout.
I’ve tried:

sections-layout {
sections {

etc.
Have you any idea if it will work or how to make it work.

Thanks.

1 Like