Not getting "pictures" on dashboard

[Trying_to_learn]

I've read this:
Reply #2.

This is what I have in the node:

Ok, not the right picture, but it isn't working.

This is to prove the picture exists:

And this is an extract from the settings.js file:

    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',
    httpStatic: '/home/me/.node-red/public',

    // The maximum size of HTTP request that will be accepted by the runtime api.
    // Default: 5mb

And this is the dashboard

So what am I missing?

[Steve-Mcl]

Press F12 and look around Dev tools - you will possibly see a 404 error

Try using Pictures/metal_7.jpg and other variations.

Try typing into URL bar of browser the full URL http://IP:1880/Pictures/metal_7.jpg etc see if you can pin it down

[Trying_to_learn]

I'm guessing this means a lot, but I don't know how to parse it.
(I changed the name to metal_2 and it still doesn't work.)

[knolleary]

First, as Steve said, test to see if you can load the image at all by opening the url http://...:1880/Pictures/metal_7.jpg. If that works, then you have got httpStatic properly configured.

The screenshot you've just shared shows the CSS is badly formed. You can see it has crossed out the line with your background-image statement.

The problem is with the CSS you have in the template node. You have got the #TV_Remote_control mode {nested inside body - which is not valid css.

Without knowing the structure of your page, its hard to say what you should change that to. As a guess, move the #TV_Remote_control block outside of the body block:

<style>
#TV_Remote_control mode {
    background-image: ....
}
body {
    ....
}
</style>

[Trying_to_learn]

Sorry. I forgot to do the first part.

But, it works.

(See)

The code in the node is this:

<style>
    body {
        #TV_Remote_control mode{
        background-image: url("/Pictures/metal_2.jpg");
        background-repeat: repeat;

    }
}
 </style>

You say:

@knolleary

The problem is with the CSS you have in the template node. You have got the #TV_Remote_control mode { nested inside body - which is not valid css.

But that is against this:

<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

Which is what I read.

I can only know what I read.

Before I read the reply, the code works on another machine only as is.

It gives a background pattern/picture to the page.

So....... I'm stuck.

[knolleary]

@Trying_to_learn

Before I read the reply, the code works on another machine only as is.

Does it really? Exactly like you have it? I find that curious because it is invalid css.

@Trying_to_learn

So....... I'm stuck.

Well, as you say, you can only know what you read. I made a suggestion for something to try - have you?

[Trying_to_learn]

Nick, here is what I have on another machine.

It is a single template node. No input, no output.

metal_4 is the background "image".

Where did I get confused?
May 2018:

Hi @mammoet

If you have set httpStatic to /home/pi/image then any file you have in that directory can be accessed from http://localhost:1880/

For example, if your background image is /home/pi/image/my-image.png then you should be able to access that as http://localhost:1880/my-image.png

Following the example on the mailing list you’ve linked to, you can insert the following into a ui_template node within your dashboard:

<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

Yes, NR has moved on since then. The machine I showed you the screen shots is running NR 1.0.3 RasPi.

[knolleary]

You said you had exactly the same thing working on a different machine. You've now shared a screenshot showing different content to what you are trying to use.

Here is what you shared from the current machine that is not working:

Here is what you just shared from the machine that is working:

They are different.

In the working template, the background-* rules are inside the body selector.

In the not-working template, the background-* rules are inside a selector #TV_Remote_control mode which is invalidly nested inside body.

I'll ask one more time - have you tried what I have suggested? The screenshots you have shared only confirm what I said was the issue and that you need to fix the CSS.

[Trying_to_learn]

sorry sorry sorry.

I got "trapped" with the

    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
    #Events_Uplink {
    background-image: url("/Pictures/metal_2.jpg");
    }
}

#events_uplink part which is a layer further in/down.

Now I see it, I deleted the two lines and it is working.

Just think how anxious I am to try and rebuild the 2 years of flows I have lost.
(yeah: my problem.)

Thanks.

I seem to have a problem seeing the structures. Maybe because I am not used to them.

[Trying_to_learn]

Just to share:

This is now what my "dashboard" looks like:

[Colin]

@Trying_to_learn

Just think how anxious I am to try and rebuild the 2 years of flows I have lost.

Have you got any other systems without up to date backups?
If so what tasks have you got at the top of your priority list?

[Trying_to_learn]

Well, luckily no. As fas as software that is.

And I have a couple of 5TB drives which have backups of stuff.

The other machines back them selves up (manually) when I press a button.
I do need to copy the back ups from the SD card to the next (higher) level of backing up.