DB2: Dynamic background Image to body

Dashboard
21

Steps to reproduce:

1 Drag in the ui_template
2 Write or copy/paste the content into
3 Forget to change the template type to "CSS (All Pages)"
4 Deploy
5 Change the template type to "CSS (All Pages)"
6 Deploy

Result - you can not use this template anymore for CSS (group and page properties are not removed)

1 Like
22

Sorry ... did not work :frowning: still no background

I did above steps 3 times including Clear-Cache and test with Edge and Chrome browser .. I even used a different TAB and widget-name

image
image881×1034 14.9 KB

23

Sorry if I made things worse.

Described steps will lead to the issue.

To make it working
1 Drag in the ui_template (and give it a name)
2 Change the template type to "CSS (All Pages)"
3 Write or copy/paste the content into
4 Deploy

1 Like
24

yes .. this worked :wink:

No I need to get it working dynamically :rofl:

Thx a lot for your great help

25

Meaning that you want to change the background by ... (sending msg or by some event happening on dashboard or ..)

26

Dynamically

The CSS

:root{ 
   /* relative url means that this image is served from your static folder. */ 
   /* it works with absolute urls same as well but image loading takes time and all that stuff ...*/      
    --page-background: url(/images/bg-1.jpg);
}

.v-main {
    background-image: var(--page-background); 
    background-size: cover;
}

Drag in another ui_template and set the type:

image

Content will be this:

<script>
    export default {                    
        watch: {
            msg: function () {
                if (this.msg.payload != undefined) {                                                       
                    document.documentElement.style.setProperty("--page-background", "url("+this.msg.payload+")");
                }
            }
        }    
    }
</script>

The payload for that template will be an url of the image:

If from your static folder

image
image713×333 9.25 KB

Or with absolute url

image
image844×327 10.3 KB

27

could you open an issue if you haven't already please Endel?

28

Will do right now.

29

Strange, tried to replicate and not being able to do so...

NR: 4.0.1
Dashboard: 1.12.2

30

Is it not possible without any javascript in the template?

Any code with this. goes straight into my "I don't understand this" bin.

31

Think of this as being a reference to the ui-template node. We automatically bind msg to the template, so you can access it with this.msg

Just overriding the CSS is possible, link from docs is above. If you want msg.payload, or some other factor to override the background, then you need to write some JS in order to override the document/body's background-image property (also the case in D1)

32

Can see the problem:

I don't account for the CSS use cases here to clear the unnecessary group and page variables.

33

Issue created

34

It was easy done in D1 .. just a ui-template and below code

<style>

body {
  background-image: url({{msg.session.art}});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

</style>
35

I have never tried this, and somehow, wasn't even aware of it, however the Vue docs do state that this is possible with v-bind:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

In Vue's template you may have seen example using :attr="" which is actually shorthand for v-bind:attr=""

So, in the url case, I think we'd want something like:

background-image: v-bind('"url(" + msg.payload?.art + ")"')

or, if you prefer Javascript's string literals syntax:

background-image: v-bind('`url(${msg.payload?.art})`)

Note, I'm away at the moment, so working via phone and can't test this.

36

Yeah, thats almost what I posted in my 1st post here .. but this works only within the widget-backgroud ... I could not work for it on the page background. Thats why I tried with your static background-example

37

Just having a play with this again, it's not something I'm able to get working either. I've opened Support for "v-bind" in <style> · Issue #1065 · FlowFuse/node-red-dashboard · GitHub to make sure we don't lose track of it

38

Can't you do this the native way instead of using Vue? Really not that hard to change a style or a class programmatically using the native JavaScript API's.

39

Yep, you can, but the request was no JavaScript

40

Sorry to be awkward, but the original request absolutely included both CSS and JavaScript. :slight_smile:

So doing this with plain HTML/CSS and JS is pretty simple, no?