Multiple background images within one single skin?

Third party integrations HADashboard
1

Hello, community

I am building a dashboard with appdaemon for my home automation system and now I reached my limits.
A few facts up front:

  • hardware = raspberry pi3
  • OS = hass.io
  • 4 floors, different rooms as .dash files

For my HA dashboard I am using .dash and .yaml files everything is linked and working (main.dash - floor 1, 2, 3, 4 and each floor breaks up into the single rooms)

The only thing missing which I try to accomplish is having a unique background image for the main dash, the same background image for floor 1, 2, 3, and 4 and again a unique background image for the single rooms.

A big thanks goes to “renetode” who guided me towards the right direction.

I searched around and figured I need a javascript which adds the function to change the background image for each dashboard.
I wanna be honest, I don’t have a d… glue how to write that. I can tune and tweak code but I am not able to write code.

Is anybody out here who has a similar problem or an idea how to realize this?

I found some example code pieces but don’t know if they’re the right ones and where to put them.
using Jquery

any help is highly appreciated

1 Like
2

first you need to create a custom skin. (how to is in the docs)
in the custom skin there are 2 files:
dashboard.css and variables.yaml
in the variables.yaml you need to find this section

#
# Custom head includes - should be a YAML List, e.g.:
#
#head_includes:
#  - some include
#  - some other include
#
# Text will be included verbatim in the head section of the doc, use for styles,
# javascript or 3rd party css etc. etc.
#
# It is your responsibility to ensure the HTML is correct
#

here you can put a piece of code like you found to change the background on every reload.
when you get that far and have that working you can adapt the code to change the background based on the dashboard name.

2 Likes
3

Thank you,
I will give it a try.

4

Hello, community

This issue has been resolved.

All credits for this code go to ReneTode who came around with it.

Thank you very much for your help!

Here is the solution for " having a different background image with each single dashboard "

#  - "function changeImg()   {"
#  - "var htmlurl = window.location.pathname;"
#  - "htmlparts = htmlurl.split('/');"
#  - "var filename = htmlparts[htmlparts.length - 1];"
#  - "var Image = '/custom_css/my_skin/img/' + filename + '.jpg'"
#  - "document.body.style.backgroundImage = 'url(' + Image + ')';"
#  - "}"
#  - "window.onload=changeImg;"
#  - "</script>"

This code needs to be placed under " head_includes: " in your variables.yaml file.
You just need to make sure that dashboard name and image name are the same like ( main.dash = main.jpg ).
Also, you need to adjust the line : “var Image = ‘/custom_css/blur_light/img/’ + filename + ‘.jpg’” to your file system. For example (’/custom_css/other_skin/img/’) or (’/custom_css/day_light/img/’).

1 Like
5

you did some work too, i just helped you :wink:

here is a little tweak for the code

  - "<script type='text/javascript'>"
  - "function changeImg()   {"
  - "var htmlurl = window.location.pathname;"
  - "htmlparts = htmlurl.split('/');"
  - "var filename = htmlparts[htmlparts.length - 1];"
  - "var vars = {};"
  - "var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });"
  - "var skin = vars['skin']"
  - "var Image = '/custom_css/' + skin + '/img/' + filename + '.jpg'"
  - "document.body.style.backgroundImage = 'url(' + Image + ')';"
  - "}"
  - "window.onload=changeImg;"
  - "</script>"

this also finds the skinname.
so the code can be copy pasted into any skin and will work without changing anything.
all it needs is an img directoty in the skin dir with the images.

1 Like
6

Thanks a ton you both - @ReneTode and @ino.

This worked perfectly and I am totally new to html and css code and tags. Spent a few hours trying to edit individual dash filed and adding background-image tags directly, but was having no luck and then found this and this worked like a charm. Thanks for providing the solution @ino and for editing the code to make it universally applicable @ReneTode.