# Dashboads, backgrounds and pictures. Confused

**URL:** <https://discourse.nodered.org/t/dashboads-backgrounds-and-pictures-confused/76678>\
**Category:** Dashboard\
**Created:** [17 March 2023 22:52 UTC](https://discourse.nodered.org/t/dashboads-backgrounds-and-pictures-confused/76678 "2023-03-17T22:52:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 22:52 UTC](https://discourse.nodered.org/t/dashboads-backgrounds-and-pictures-confused/76678/1 "2023-03-17T22:52:42Z")

</div>

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](https://discourse.nodered.org/t/my-ongoing-quest-with-dashboards-and-pictures/834):
>
> 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.

 ![Screenshot from 2023-03-18 09-32-58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bbbeea823e6b2e6e286707b29a6d17459a13c4f4.jpeg)

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

 ![Screenshot from 2023-03-18 09-14-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c98786c99d4daa306114241c6a9ea99d141d400.jpeg)

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.

 ![Screenshot from 2023-03-18 09-14-02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e3cb39eb811bb37d992af2f4768e911d9e9cc144.jpeg)

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.

 ![Screenshot from 2023-03-18 09-13-24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1fdfcadbf0c6899a7fd56b95deb1451c129edaa8.png)

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.

 ![Screenshot from 2023-03-18 09-13-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9fc587415b7e006a75e9a257c609f3e989371ade.jpeg)

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.

 ![Screenshot from 2023-03-18 09-55-20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fdc7db1fc53611433e8803d916ff013cbb89afb7.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [18 March 2023 01:01 UTC](https://discourse.nodered.org/t/dashboads-backgrounds-and-pictures-confused/76678/2 "2023-03-18T01:01:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [18 March 2023 01:22 UTC](https://discourse.nodered.org/t/dashboads-backgrounds-and-pictures-confused/76678/3 "2023-03-18T01:22:56Z")

</div>

Thanks.

I've seen one problem already.

Moving on.

Machine 2, telemetry `template` node.

```auto
[{"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`

```auto
[{"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`

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 April 2023 01:23 UTC](https://discourse.nodered.org/t/dashboads-backgrounds-and-pictures-confused/76678/4 "2023-04-17T01:23:26Z")

</div>

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