Dashboads, backgrounds and pictures. Confused

[Trying_to_learn]

Although I have touched on this before: it was a LONG TIME AGO and NR has since changed a lot in how things are done - I believe.

The story:
I have a few machines.
They share similar pages and I would like each page to have its own Background picture that is different between pages.
On each page are groups of things that I also want to have backgrounds to.
Again: NOT ALL THE SAME.

Attempt in words:
screen 1: picture 1
screen 2: picture 2
screen 3: picture 3
(and so on)

On the screens there are groups and I want them to be filled in also.
Beats plain backgrounds.

(This is my VERY OLD thread)

My ongoing quest with dashboards and pictures

Ok, I have got the "background picture" part working - see attached. But now my question is how to put a picture on the OTHER part - again: see attached. I know it will be a dumb question but not knowing the terms for what is what - well "background" is easy enough but..... I have seen great dashboards to which I can only aspire at this time, but would like to understand how to make, but when I asked, I didn't get a reply. (Sulk - kidding) And "displays" like 7 segment displays and the o…

So to now:
Some machines do it. Some don't.
The ones that do allow it fail in other ways that the machines that don't do the background picture do allow.
Yes, that is confusing. Imagine how confusing it is to me.

Now, all machines have the required pictures/backgrounds in their respective:
.node-red/public/Pictures directory.

Here's my attempt to now SHOW you the problem/s.

Sorry one of the pictures wasn't the best, so I added a second attempt which better shows how the background PICTURE changes between pages on one machine and NOT on the other.

Indexes:
BLUE BOXES show machine (top of screen)
RED TEXT (and arrows) point to things.

Machine 1
(second picture) Better view of background picture.

Machine 1
(first picture) Not good with background picture.

Machine 1
Second screen.
Note the DIFFERENT background picture.
This is good.
And also notice the patterns are also there to make the GUI groups a bit nicer to look at.

Machine 2
See how the patterns are there.
But the background picture is wrong - in that the node that set it is the same as it is in machine 1's config but the wrong picture is shown.

Machine 2
Second screen.
The patterns are missing and the background picture is the SAME as the first screen.
Yet the node I used is showing a different picture.
NEITHER of them are for the picture shown.
That is for ANOTHER screen.

So I am confused beyond my skill to understand what is going on and how to control it.

If I do per Machine 1 on Machine 2 it doesn't work.
BOTH machines:
RasPi.
NR 3.0.2
Dashboards are (now) different. Just updated one of them - not sure why.
But the problem existed before the update.

I don't exactly know which nodes to upload, so I won't just dump them here now.

I have template nodes (the blue ones) on EACH tab (screen) to configure THAT page.
But they have me confused too.
But for now I'll shut up and hope you can take what I have just said in and let you think about which nodes I need up upload.

Ok, in an attempt to keep things the same.

This is the SAME screen on Machine 2 - EVENTS.
I won't edit the picture as I am sure you can see the problems.

[smcgann99]

So compare the template nodes, to see what is different between the working and not working.

If they are exactly the same then check that the pictures that are referenced in the template actually exist in the location specified.

And then check that the pictures are actually the same image not just the same file name.

[Trying_to_learn]

Thanks.

I've seen one problem already.

Moving on.

Machine 2, telemetry template node.

[{"id":"ad973dc.67310c","type":"ui_template","z":"c636aa5a.cc34","group":"ccfdf225.95c52","name":"Picture telemetry","order":16,"width":"0","height":"0","format":"<style>\n    .centerStackedIcon {\n        vertical-align: middle;\n        width: 100% !important;\n    }\n\n    .greenText {\n        color: #00ff00;\n    }\n\n    .redText {\n        color: #ff0000;\n    }\n\n    .blackText {\n        color: #000000;\n    }\n\n\n    .nr-dashboard-cardtitle {\n        text-align: center;\n    }\n\n    body {\n    background-image: url(\"/Pictures/gauges.jpg\");\n    background-size: cover;\n    }\n    #Telemetry_Daytime mode{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_WiFi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_Cat-5{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_WAP{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_Load monitor{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_MusicPi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_BedPi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_PiFace{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_EyeSpyPi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_CameraPi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_PortaPi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_TelePi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_BeefPi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_TimePi{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_EXIT{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_DaytimeMode{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n    #Telemetry_LoadMonitor{\n    background-image: url(\"/Pictures/metal_7.jpg\");\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","className":"","x":1060,"y":20,"wires":[[]]},{"id":"ccfdf225.95c52","type":"ui_group","name":"DaytimeMode","tab":"1c792414.600e94","order":1,"disp":false,"width":"3","collapse":false,"className":""},{"id":"1c792414.600e94","type":"ui_tab","name":"Telemetry","icon":"track_changes","order":2,"disabled":false,"hidden":false}]

The events node is set to machine health, so there's a problem.

And there is no such node for the local readings tab.

Machine 1 telemetry

[{"id":"2bfa59ce.40417e","type":"ui_template","z":"9b7e7466.a4b698","group":"b91547a3.789ea","name":"Background picture","order":9,"width":0,"height":0,"format":"<style>\n    .nr-dashboard-cardtitle {\n        text-align:center;\n    }\n    body {\n        background-image: url(\"/Pictures/gauges.jpg\");\n        background-size: cover;\n    }\n    #Telemetry_TelePi {\n        background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n\n    #Telemetry_Weather {\n        background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n\n    #Telemetry_Events {\n        background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n\n    #Telemetry_Alarms {\n        background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":350,"y":40,"wires":[[]],"info":"    #Telemetry_TelePi {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_Weather {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_Events {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_WAP status {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_Alarms {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_Show time {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_Load monitor {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_TimePi remote {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Telemetry_Alarm control {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n"},{"id":"b91547a3.789ea","type":"ui_group","z":"9b7e7466.a4b698","name":"TelePi","tab":"3245f51f.065aba","order":1,"disp":true,"width":"7","collapse":false},{"id":"3245f51f.065aba","type":"ui_tab","name":"Telemetry","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

machine 2 events

[{"id":"cd1481c4.40c82","type":"ui_template","z":"f4651491.221e58","group":"36f756ac.c76382","name":"Picture Events","order":8,"width":"0","height":"0","format":"<style>\n    body {\n        background-image: url(\"/Pictures/metal_3.jpg\");\n        background-repeat: repeat;\n    }\n    #Events_Uplink {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_WAP {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_SOM {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_IFF {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_MQTT {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_Health {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_Tasmota {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_Power_Requests {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n    #Events_EXIT {\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":100,"y":40,"wires":[[]]},{"id":"36f756ac.c76382","type":"ui_group","name":"SOM","tab":"1a0ae545.bbf803","order":7,"disp":true,"width":"6","collapse":true},{"id":"1a0ae545.bbf803","type":"ui_tab","name":"Events","icon":"list","order":3,"disabled":false,"hidden":false}]

Now, I also just remembered this quirk which has been explained but it still isn't clear what is going on.
As there are problems with which pages it works on.
I just need time to get my head around those ones.
Something to do with spaces in group names and tab names.