Image in background

Nilton Cezar

unread,

Mar 13, 2017, 4:31:55 PM3/13/17

to Node-RED

Hello everyone. I would like to use an image in dashboard background. Is this possible?

Dave C-J

unread,

Mar 13, 2017, 7:19:17 PM3/13/17

to node...@googlegroups.com

Hi, sorry, once again no at this time.

Nilton Cezar

unread,

Mar 13, 2017, 7:37:58 PM3/13/17

to Node-RED

OK, thank's Dave.

Cor Bosman

unread,

Mar 13, 2017, 9:31:19 PM3/13/17

to Node-RED

I guess it depends on your definition of a background image. Something like this?

You can do that using a dashboard template node with some simple css. You put the image in a public folder in your .node-red folder and use the httpStatic option in settings.js.

<style>

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

Dave C-J

unread,

Mar 14, 2017, 1:57:15 AM3/14/17

to node...@googlegroups.com

Top tip. Thanks.

steve rickus

unread,

Mar 14, 2017, 8:20:57 AM3/14/17

to Node-RED

I've used the ui_template node to add to and/or modify the base dashboard styling, as well as for including other javascript libraries. It does mostly work, as long as your images/stylesheets/libraries are local to node-red, as Cor mentioned. But because those resources are loaded asynchronously, they may or may not show up properly in the rendered dashboard pages.

I have also noticed that the group still takes up some room on the page, even if the title is turned off and there are no visible html elements in it. Is there an option to make a group not displayed? A while back we discussed the possibility of either "Page" level and/or "Dashboard" level groups that would be rendered in the dashboard pages before the visible elements, but take up no room -- Dave, is that something that still makes sense, or does the new styling feature make this unnecessary?

Cor Bosman

unread,

Mar 14, 2017, 8:28:37 AM3/14/17

to Node-RED

Yeah ive run into the group problem as well. What would be nice is if groups had classes you could target in css. Right now it's next to impossible to target a group in css, for instance to simply display:none. Or maybe even dynamically show/hide elements based on screen width.

I think the current thinking about groups was to have a header group that could have left/center/right elements. If you could hide those elements it would be a nice way to add global js/css to each page. Although even better would be to be able to inject them in the <head> section.

steve rickus

unread,

Mar 14, 2017, 8:37:28 AM3/14/17

to Node-RED

I love the idea of using the group name somehow in the html id of that section of the rendered page. Of course, any client logic or styling selectors would have to stay in sync with those group names, but at least there would be a handle to grab onto.

When we last discussed injecting styling and library resources into the dashboard, I believe the consensus was that putting them in the <head> would be a bad idea, but I can't say why -- probably slows down the perceived page loading time.

Cor Bosman

unread,

Mar 14, 2017, 8:52:29 AM3/14/17

to Node-RED

It wouldnt be bad if you could just load a css/js page from local filesystem. The css is meant to go in the head. JS you could opt to load in the end of the page like is normally recommended.

Nilton Cezar

unread,

Mar 17, 2017, 7:27:39 AM3/17/17

to Node-RED

Perfect Bosman. The background worked perfectly. Thank you very much.

Em segunda-feira, 13 de março de 2017 17:31:55 UTC-3, Nilton Cezar escreveu:

Reply all

Reply to author

Forward