Background image. New problem/question

[Trying_to_learn]

(I know I've been down this road before, but. . . .)

Ok, I thought I had it nutted out, but it isn't working.

Are spaces allowed in the name of the tab?

The reason I ask is that one RPI has tabs with spaces in the tab (group?) names and the background pattern/picture works.

This one group on this page isn't playing by the same rules.

Example:

Good working on another machine.

Picture 1:

Picture 2:
(The problem child.)

If I change the name of the group to EVENT_messages (Note the _) the picture is there.

Ok. Any thoughts?

(ok, the picture with the _ in the name to show I am not telling porkies.)

NR 0.20.5
Dashboard 2.15.4

(ooops)

Ok, I see the slight difference.

I am mixing group names with tab names.

Anyway, the question stands: Can I have spaces in the names as shown here?

[dceejay]

Yes

[Trying_to_learn]

Thanks. So thoughts on what is going on why it isn't playing the game here?

[dceejay]

I'm guessing you're setting something transparent but using the wrong name.

[Trying_to_learn]

Na. I don't understand what you mean.

Sorry. (Working on it ITMT though.)

It is clearly (no pun intended) doing the right thing if I name it with the _.

All I do is change the _ to a space, edit the node setting the background image and deploy.

This is the code in the node:

[{"id":"86256a5e.39abf8","type":"ui_template","z":"bda04762.5a2918","group":"226ab9cd.d5189e","name":"Picture Machine health","order":7,"width":"1","height":"1","format":"<style>\n    body {\n        background-image: url(\"/Pictures/metal_6.jpg\");\n        background-repeat: repeat;\n    }\n    #Events_UPLINK {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_SOM {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_WAP {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_IFF {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_EVENT_messages {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1700,"y":120,"wires":[[]]},{"id":"226ab9cd.d5189e","type":"ui_group","z":"","name":"UPLINK","tab":"870f8bb5.bac21","order":4,"disp":true,"width":"6","collapse":false},{"id":"870f8bb5.bac21","type":"ui_tab","z":"","name":"Events","icon":"format_list_bulleted","order":16,"disabled":false,"hidden":false}]

[Trying_to_learn]

Didn't mean to seem like I deserted this thread.

I am still not getting it all.

As it is cosmetic, I shall put it down the queue of things needing done.

[bakman2]

Where is the rest of your code: where you actually set the text ?

[Trying_to_learn]

This node sets the text:

[{"id":"7e1e71f3.c4542","type":"ui_template","z":"4e551e33.3cfb7","group":"226ab9cd.d5189e","name":"Picture Machine health","order":8,"width":"1","height":"1","format":"<style>\n    body {\n        background-image: url(\"/Pictures/metal_6.jpg\");\n        background-repeat: repeat;\n    }\n    #Events_UPLINK {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_Modem {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_SOM {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_WAP {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_IFF {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_EVENT_messages {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1970,"y":90,"wires":[[]]},{"id":"226ab9cd.d5189e","type":"ui_group","z":"","name":"UPLINK","tab":"870f8bb5.bac21","order":4,"disp":true,"width":"6","collapse":false},{"id":"870f8bb5.bac21","type":"ui_tab","z":"","name":"Events","icon":"format_list_bulleted","order":16,"disabled":false,"hidden":false}]

I don't know what else to post, sorry.

I know you asked:

@bakman2

Where is the rest of your code

But how much of the "rest" do you want?

[bakman2]

It only sets css to the head ?

[Trying_to_learn]

Yeah, if you say.

I did it that way to get the results I wanted.

metal_6.jpg is the bigger background.
metal_7.jpg is the finer background.

In the node I posted:

    }
    #Events_UPLINK {
    background-image: url("/Pictures/metal_7.jpg");
    }

That sets the background (metal_7) in the UPLINK section.

If I rename it to UP LINK and do all the relevant editing, it fails.

[bakman2]

I am missing where you are actually setting "EVENT messages"

[Trying_to_learn]

Oh. That is a whole other flow.
All messages to UPLINK SOM WAP IFF and EVENT_messages are created on big flows.
They work.

This is an example of what the dashboard looks like when I have a name with a space in it:
Modem Uplink being the one.
(depricated) - well I haven't bothered editing the node to put the background in/on it.

This is the node code now:

[{"id":"7e1e71f3.c4542","type":"ui_template","z":"4e551e33.3cfb7","group":"226ab9cd.d5189e","name":"Picture Machine health","order":8,"width":"1","height":"1","format":"<style>\n    body {\n        background-image: url(\"/Pictures/metal_6.jpg\");\n        background-repeat: repeat;\n    }\n    #Events_UPLINK {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_Modem Uplink {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_SOM {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_WAP {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_IFF {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Events_EVENT_messages {\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1970,"y":90,"wires":[[]]},{"id":"226ab9cd.d5189e","type":"ui_group","z":"","name":"Modem Uplink","tab":"870f8bb5.bac21","order":4,"disp":true,"width":"6","collapse":false},{"id":"870f8bb5.bac21","type":"ui_tab","z":"","name":"Events","icon":"format_list_bulleted","order":16,"disabled":false,"hidden":false}]

This is a better picture showing the area. Note the arrows to where the missing pattern is,

[knolleary]

I'm away from my laptop so I cannot check, but this sounds like the group DOM element's id attribute is being set from the group's name without any sanitising of invalid characters for an id attribute - ie the space.

If that's the case it is a bug in dashboard and not something you can fix in your flow. The workaround is not using spaces in the names.

[Trying_to_learn]

(I got bored)

I renamed the "group" to Modem_Uplink and edited the node text to suite.

This is what I get.
The pattern is shown.

NR 0.20.5
Dashboard 2.15.4