More questions on the `template` node and background pictures

Dashboard
1

Ok, I am again confused with the terms with Node-Red.

There is a Dashboard. On said Dashboard, there are Groups.
OK. I can get that.

If I want to add a background picture to my dashboard, I use a template node and put something like this:

<style>
    body {
        background-image: url("/Pictures/gauges.jpg");
        background-size: cover;
    }
</style>

And set the node to:
added to site <Head> section

This adds the picture ("/Pictures/gauges.jpg") to the backdrop.

Again: Nice.

If you want to put a picture in/on to a group on that page you would do something like:

<style>
    body {
        background-image: url("/Pictures/gauges.jpg");
        background-size: cover;
    }
   #(name){
      background-image: url("/Pictures/metal_2.jpg");
    }
</style>

And that would put a picture of metal_2.jpg in side the group of name.

Again, not rocket science.

But say you have multiple Dashboards and want different pictures on each page?

Then it gets a bit tricky.

First you have to change the template node form:
added to site <Head> section to Widget in group.
Then you can start to put different pictures on different...... pages?
(What is the correct term here?)

But that comes at a cost!

You gain a 1 x 1 node which needs to be hidden somewhere on the page.
Which kind of goes against having a pattern/picture. It will be a 1 x 1 "blank" patch.

So, what's the solution?

I don't know how to put pictures on different pages without doing that.
And I don't think that is a big ask.

(No! Please... Not CSS! ) :sob: :wink:

2

The correct term is tab as that is what they are called when you are creating your dashboard.

I have just looked at the Dashboard HTML to see if there is any CSS class or HTML id that can be used to identify which tab is currently being displayed. If there was such a thing, then you'd be able to add your CSS to the <head> as before and have it properly target each tab - in the same way you can already do with groups. Unfortunately it doesn't look like there is.

@dceejay given that each group gets an id to allow it to be targeted, it would seem helpfully consistent if there was an id or class set on an appropriate element that identified which tab was being shown. Not familiar enough with the inner workings to propose anything more specific, but is there an reason I'm missing for why we don't already have that?

@Trying_to_learn so in summary, I think you are stuck to having a ui_template on the page somewhere. Other's may have some tips or tricks for making it less obtrusive to the page.

3

Thanks Nick.

It isn't that I was wanting to be difficult.

It is what it is.

I guess the widget in a group is the only way to do different pictures on different tabs.

Ok.
Not that crucial just now, more something I noticed.

4

Have you looked at Bart's svg node. it works great

5

Interesting.

Thanks.

6

So as it happen I was in there looking at collapsing groups.... - but yes easy enough to make it do

image
image1960×76 25.2 KB

Of course that assumes no-one will set same tab name twice...

7

Could it be Tab_XYZ to reduce the chance of collision?

8

well then it could just be Tab_Home and Tab_Home .. but yes would help reduce risk with other types of thing.

In master branch for anyone to test.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.