Dashboard with dynamically background

[tbrasser (Thomas Brasser)]

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.

[Mariusthvdb (Marius)]

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

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" }}

[ncd]

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.

[PickOne]

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

Lovelace: Animated Background based on entity state

https://i.imgur.com/0AHjzeF.jpg(image larger than 3072KB) After using this card for a while, I decided it was a bit too hacky for my taste and it made formatting a card layout a nightmare. I took the concept and merged it with ideas from compact-custom-header to make their lovechild that you see here today. This module allows you to update your lovelace background with animated backgrounds based on an entity’s state. If you don’t want to update based on an entity’s sta…

Maybe you can try this fork

GitHub - TRusselo/lovelace-animated-background: Animated backgrounds for...

[ncd]

thank you! i’ll take a look

[waank1]

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 %}

[LiQuid_cOOled]

as mentioned earlier in this thread

@tom_l

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

Please review this thread

Card-mod - Super-charge your themes!

A while ago, I created card-mod, a custom card* that lets you change various css options for other lovelace cards. Much more skilled people than I have used that to create beautiful and awesome things. Today, I’ve added theme support to card-mod. Your ordinary theme file can now be used to Give cards a flashing border Make that border only flash when a certain entity is in a certain state Make fan icons spin when they are on Change the border color of the badges at the top of the screen dep…

[PickOne]

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

[LiQuid_cOOled]

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 %};

[PickOne]

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

Sorry, I always had video background, in my head

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

[Mariusthvdb (Marius)]

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

[waank1]

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.

[waank1]

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

[LiQuid_cOOled]

@LiQuid_cOOled

{% 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 %};

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

Switching to that theme here

These two need to match

Card-mod is required for this method.

[ChequeM8]

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.

[Mariusthvdb (Marius)]

Ive found this to work, in my card-mod-themes:

  card-mod-view: |
    vertical-layout {
      {% set weeralarm = states['sensor.weer_alarm'].attributes.icon_color
        if is_state('binary_sensor.meteoalarm_brabant','on') %}
      background: {{weeralarm}};
    }
    hui-sections-view {
      {% set weeralarm = states['sensor.weer_alarm'].attributes.icon_color
        if is_state('binary_sensor.meteoalarm_brabant','on') %}
      background: {{weeralarm}};
    }

be ware though that while the vertical-layout colors the complete background, and goes beyond the last card, just as the window stretches, the hui-sections-view ends at the last section, which, if the required vertical space for that section is less than the window, looks really ugly…

Maybe there is another way of doing it, not sure yet, Sections is still experimental after all… We can add some empty grids in that section to make it use more background, but ofc that is plain silly

[Captain_Harlock]

Hi,
I tried in a “section” type view but it didn’t work.
I currently use the ‘frontend’ mode to edit lovelace and I would like to change the background of only one specific tab (of type ‘section’) based on the entity sun.sun.
Could you please detail how you applied it?
Thanks

[Mariusthvdb (Marius)]

dont think it can be any more detailed.

If you use themes you can use card-mod-theming to set things system wide on particular elements, in this case a type of view.

check the instructions in the card-mod repo on the subject.

I take it with

@Captain_Harlock

use the ‘frontend’ mode to edit lovelace

you mean the UI editor opposed to Yaml mode? tbh, I dont use that a lot, and it really is a pain to have to copy all of that code in the editor…

I haven tried to set a mod on a single Sections view in Yaml mode yet, so cant say how to do that.

I did notice that the colorization was different than on a regular view, as those regular vies are colored all the way done to the view window, even if that is taller than the actual view. WIth sections, the colored background stops at the bottom of the section, and if the window of the view is taller (like on desktop) the rest gets the regular theme setting color.

Which I found really ugly, so I stopped using it altogether for now

[waank1]

Well I finally got this to work using the code below. I can change the background based on a variable. Thanks to all who gave their advice and opinions. I only have one problem now. I am not able to edit the code using the conventional ‘Edit’ on this page (clicking the pencil in the upper right corner). The only way I can edit is with the Raw Configuration Editor.

Just wanted to post what I had in case someone else stumbles on this while researching the same topic.

button_card_templates:
  custom_background:
    styles:
      card:
        - background: |
            [[[
              if (states['input_select.background_selector'].state === 'Day') {
                return 'url("/local/CHC.jpeg")';
              } else if (states['input_select.background_selector'].state === 'Night') {
                return 'url("/local/Wrigley_Winter.jpg")';
              } 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
views:
  - title: Home
    panel: true
    cards:
      - type: custom:button-card
        template: custom_background
        styles:
          card:
            - overflow: auto
            - padding: 16px
        custom_fields:
          content:
            card:
              type: vertical-stack
              cards:
                - type: custom:teamtracker-card
                  entity: sensor.cubbies
                  visibility:
                    - condition: state
                      entity: sensor.cubbies
                      state: NOT_FOUND
                - type: entity
                  entity: sensor.spring_training
                  name: Days until Spring Training
                  icon: mdi:baseball
                - type: entity
                  entity: sensor.opening_day
                  name: Days until Opening Day
                  icon: mdi:baseball-outline
    type: panel
    icon: ''

[ncd]

I wanted to do this ages ago and gave up doing it fully dynamically.
Instead, I now have about 100 images per season + some special holidays. I manually created (well with a script) themes for each associated with the file.
I also have a naming convention to name the themes.
Then I have a input select helper which gets populated based on that naming convention with all the possible themes. I have a separate automation that looks at the date and based on that picks a random one. It changes them at 5AM and at 2:30PM. I find that changing them more often than that gets jarring to the fam a bit so 2 a day seems to be the sweet spot.

It’s definitely a horrible kludge but it works really well and I only had to set it up once about a year ago and never touch it again. It’s been working flawlessly and without any need to tinker with it.

Oh I also have a dark theme based on an iOS dark theme I found online so in the evening every clients gets set to the dark theme.