Logic improvment? about lovelace-animated-background

[Villhellm]

I want to keep the configuration in one place, but I'll experiment with letting users set options in the view itself (I just think it's going to get a little messy).

Until then you can use !include file.yaml statements with a view configuration so you don't have to repeat yourself.

[SeLLeRoNe]

Thanks but I am not sure that would work.
My understanding is that the animated_background part would need to be in ui-lovelace, I got it I can put it outside but if I load the "animated_background" directly inside a view wouldn't that break things?

[Villhellm]

Okay I made the groups additions and put it in the branch group-test if you would like to try it out

[SeLLeRoNe]

I'll give it a shot tomorrow, thanks! :)

[Villhellm]

Gonna close this for now, but open any bug reports if the feature gives you any issues

[SeLLeRoNe]

I actually got a question, what the configuration should look like to use this? :)

Thanks

[Villhellm]

The README on that branch is also updated, groups is toward the bottom

[Villhellm]

I updated it again to make the flow a little easier to read through

[SeLLeRoNe]

Sorry, I should have checked that :D

[SeLLeRoNe]

Ok, it's working and I see some things that might need fine tuning.

If I create a group called weather on one dashboard, somehow I can use it on different view that is not part of that dashboard.
This is not big deal, actually it might be an improvment to have all the config in one place (ui-lovelace.yaml or an included file), so I would live it as it is.

If I don't specify animated_background in the view, none is loaded, that should load the default one maybe?
If yes, the animated_background set to false should be the bit that disables. (in which case a check for group called "false" should be in place.
If no, the default_url shouldn't be configured when "groups" are? It seems to be ignored anyway

Also, during some of my tests I saw this in the logs:
hacsfiles/lovelace-animated-background/animated-background.js:208:34 Uncaught TypeError: Cannot read property 'enabled' of null

And, finally, I tried to use incldue for files,but it doesn't seems to be working, this is the config:
animated_background: !include lovelace/animated_backgrounds/default.yaml

>cat lovelace/animated_backgrounds/default.yaml
---
groups:
  - name: weather
    config:
      included_devices:
        - windows
      entity: "weather.dark_sky"
      state_url:
        'sunny': /local/animated_backgrounds/sunny.html
        'partlycloudy': /local/animated_backgrounds/cloudy.html
        'cloudy': /local/animated_backgrounds/cloudy.html
        'mostlycloudy': /local/animated_backgrounds/mostlycloudy.html
        'clear-night': /local/animated_backgrounds/night.html
        'fog': /local/animated_backgrounds/fog.html

Sorry for the amount of things.. I am trying to test different aspects

[Villhellm]

I'm having trouble recreating any of the problems you've described.
Groups should not be usable between dashboards as the lovelace config that gets loaded is dahsboard-specific. I can't get a group defined on ui-lovelace.yaml to load on a different dashboard.

default_url should be loaded if nothing is defined in the view. It has been in all my tests, so I'm not sure how to recreate that one. I'll add an option to disable on a view though.

Are you sure you reloaded lovelace after adding the include statement? If I have the exact same thing on mine and it works as expected.

[Villhellm]

Oh the one log error is because I missed a null check, that one I just fixed

[SeLLeRoNe]

Let me retest everything :)
I'll get back to you.
Thanks for your time ^^

[SeLLeRoNe]

Ok... I think I know what's the issue.. the quarantine!
I just look out of the window.. and it's raining...
There is no "rainy" background to be loaded and also my test one was based on sunny....

Adding a "rainy" test ahahahaha
Can I blame COVID19 please? :D

[Villhellm]

Lol I will allow it. I actually have a rainy background I could add, I'll do that now on this branch if you want to add it to your background html files.

I did add the option to set animated_background: none if you want to disable it for a single view. It's setup so that "none" could be overwritten if the user chooses to define it in groups.

[SeLLeRoNe]

So I think that I was doing something wrong beside the "rainy" weather...
I wasn't setting default one, thefore my config was:

animated_background: !include lovelace/animated_backgrounds/test.yaml

Now I changed it to this:

animated_background:
  default_url: /hacsfiles/lovelace-animated-background/background-animations/sunny.html
  groups: !include lovelace/animated_backgrounds/test.yaml

Testing.
Let me know when you upload the rainy one so that I can place it in my custom folder, thanks!

[SeLLeRoNe]

I have the feeling that the include is not working.. even on my test view (were I do have animated backgrounds but not the weather ones), I am seeing the default sunny one while the weather is "rainy" and I have

'rainy': /local/animated_backgrounds/test.html"

[Villhellm]

make sure you're reloading lovelace when you make those changes.
This is my configuration that's working

ui-lovelace.yaml

animated_background: !include lovelace/animated_background.yaml

lovelace/animated_background.yaml

default_url: /hacsfiles/lovelace-animated-background/background-animations/night.html
included_users:
  - will
excluded_devices:
  - android
groups:
  - name: weather
    config:
      entity: "weather.home"
      state_url:
          'sunny': /hacsfiles/lovelace-animated-background/background-animations/sunny.html
          'partlycloudy': /hacsfiles/lovelace-animated-background/background-animations/cloudy.html
          'cloudy': /hacsfiles/lovelace-animated-background/background-animations/cloudy.html
          'mostlycloudy': /hacsfiles/lovelace-animated-background/background-animations/mostlycloudy.html
          'clear-night': /hacsfiles/lovelace-animated-background/background-animations/night.html
          'fog': /hacsfiles/lovelace-animated-background/background-animations/fog.html
          'rainy': /hacsfiles/lovelace-animated-background/background-animations/rainy.html

[SeLLeRoNe]

Testing it again (thanks for the config)

[Villhellm]

Oh and rainy.html is on this branch now

[SeLLeRoNe]

Side note, if I don't define a default_url and the view doesn't have any group loading, would the card not load?

[SeLLeRoNe]

Also, the include_user/device isn't available inside the group?

[Villhellm]

Yes to both questions.

If default_url/entity are not defined and there is no group on the view it should register as no configuration available.

And user/device exceptions are global currently.

[SeLLeRoNe]

Ok, I do believe the user/device would be nice to have it per group.
Beside that, I am seeing a lot of this:

animated-background.js:337 Uncaught TypeError: Cannot read property 'entity' of null
    at renderBackgroundHTML (animated-background.js:337)
    at Object.set hass [as hass] (animated-background.js:90)
    at HTMLElement.value (hass-base-mixin.ts:15)
    at run (animated-background.js:87)
    at animated-background.js:407

And I can't seem to have the group working without a default_url..
If I set the default_url that's what I see, so basically the group to me is no longer working now

[Villhellm]

Hmm, I'm not sure how you're getting that error, but I added a check for null config on the enabled function. Lets see if you still get any errors now

[Villhellm]

Do you mean a default_url in the group or in the root configuration?

[Villhellm]

Okay hang on, I see it. Looking for a fix now

[Villhellm]

I think I found it. I forgot to add groups and views to one of the 4 things required for a valid configuration. Updated now

[SeLLeRoNe]

Mumble mumble.. I am facing something still quite odd.
I got it configured in 2 dashboard:
Default one (ui-lovelace.yaml) with config:

animated_background: !include lovelace/animated_backgrounds/default.yaml

cat lovelace/animated_backgrounds/default.yaml
---
included_devices:
  - windows
groups:
  - name: weather
    config:
      entity: "weather.dark_sky"
      state_url:
        'sunny': /local/animated_backgrounds/sunny.html
        'partlycloudy': /local/animated_backgrounds/cloudy.html
        'cloudy': /local/animated_backgrounds/cloudy.html
        'mostlycloudy': /local/animated_backgrounds/mostlycloudy.html
        'rainy': /local/animated_backgrounds/rainy.html
        'clear-night': /local/animated_backgrounds/night.html
        'fog': /local/animated_backgrounds/fog.html

And a test one. config:

animated_background: !include lovelace/animated_backgrounds/test.yaml

cat lovelace/animated_backgrounds/test.yaml
---
included_users:
  - Andrea Iannucci
included_devices:
  - windows
groups:
  - name: test
    config:
      entity: "weather.dark_sky"
      state_url:
        'partlycloudy': /local/animated_backgrounds/test.html

The weather is partlycloudy.

On the main view I have:
animated_background: weather

While on the test view Ihave:
animated_background: test

For some reason, I cannot see any background on the main dashboard (no error in console nor log), but I do see it in the test one...

Also, on the test one there are 3 views and I noticed this behaviour:
If I open the view with the background, it loads and it is kept across all views (it shouldn't)
If I start from a different view (still in the test dashboard), I don't have the background and it only appears when I go on the only view that has it loaded.

[Villhellm]

On your main dashboard does it say that the entity state has been found in the console?

And what do you mean it is "kept across all views"? It doesn't display the theme background on those views?

[SeLLeRoNe]

No, it keeps the animated background across all views

[SeLLeRoNe]

On the main dashboard it says:

Animated Background: Starting
animated-background.js:124 Animated Background: Current environment is not enabled in Lovelace configuration```

[Villhellm]

Doh, I had a false somewhere that should have been a true. I'm sorry, updated.

[Villhellm]

To the other issue, can you post the full dashboard configuration?

[SeLLeRoNe]

Sure, here it is:

---
# This is actually just a bootstrap for my Lovelace configuration.
# It loads all resources for Lovelace dynamically from subfolders
# inside the `lovelace/resources` directory.
#
# Views are actually include one by one, this to guarentee the order of
# the tabs of the view in the UI.
#
title: Test
preload_cards:
  - markdown
preload_rows:
  - divider
custom_header:
  compact_mode: true
  footer_mode: false
  hide_header: false
  header_text: '{{ time }}' # See templates section for more on this.
  hide_config: true
  hide_raw: true
  hide_unused: true
  hide_help: true
  # Add the below to theme the header
  background: var(--app-header-background-color)
  elements_color: var(--app-header-text-color)
  active_tab_color: var(--state-icon-active-color)
  tab_indicator_color: var(--state-icon-active-color)
animated_background: !include lovelace/animated_backgrounds/test.yaml
decluttering_templates: !include_dir_merge_named lovelace/templates/
views:
  - !include lovelace/views/test.yaml
  - !include lovelace/views/test_map.yaml
  - !include lovelace/views/surveillance.yaml

Testing the latest version now.

[Villhellm]

I'm thinking I might add a debug mode that will output some useful information in the console for testing.

[Villhellm]

Debug mode added. If you enable it we should get a better idea of what's happening with those views that aren't supposed to be enabled

[Villhellm]

I merged everything into the master branch and did a prerelease with the groups changes. If you have any more problems lets open a new issue so I can track it a little easier.

[SeLLeRoNe]

Ok, I have enabled debug and I'll open a new issue to track down those two things