Dashboard UI shows blank screen

Dashboard
1

hw: pi3b+
nr version: 0.20.5: Maintenance Release

I have a few instances of nr on different pis. on one pi I have a tab for ui and is all good:

Screenshot_2019-12-11 Node-RED Dashboard
Screenshot_2019-12-11 Node-RED Dashboard1260Ă—599 38.9 KB

On another pi, which I just use for general flow development mucking around, all seems fine. However on this pi when I try to add a UI dashboard, I just get a blank screen:

Annotation 2019-12-11 111659
Annotation 2019-12-11 1116591864Ă—939 43.7 KB

I just try a simple setup with one button:

db1
db11864Ă—805 153 KB

db2
db21059Ă—817 75.5 KB

db3
db31798Ă—697 101 KB

It is so basic, but it just return a blank screen with no errors when i access: http://192.168.20.16:1880/ui.
Is there a basic switch or setup I have missed?

Thanks

2

What version of NR and node are you running on this machine? What version of OS?
what happens if you add an inject connected to a graph node? Anything show up?

3

One troubleshooting step could be as follows.

Add a ui_control node, between an inject node and a debug node.

a-02

The inject node should send this JSON as its payload:

{
    "group": {
        "show": [
            "Home_button1"
        ],
        "focus": true
    }
}

This helps as you will be able to see in the debug side bar if there is communication between the frontend and the runtime (via websockets).

a-01

It helps also in the (rare) case you played with the ui_control to hide the group and forgot to unhide it later one. Look like (for my surprise ) that once you hide a group this configuration will persist even if you restart Node-RED.

Testing flow (change to fit your tab and group names).

[{"id":"4e559a4e.177484","type":"ui_ui_control","z":"c2aecaef.a6fa38","name":"","events":"all","x":380,"y":280,"wires":[["ee840d72.cad9d"]]},{"id":"ee840d72.cad9d","type":"debug","z":"c2aecaef.a6fa38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":510,"y":280,"wires":[]},{"id":"1d1d5e17.dcc332","type":"inject","z":"c2aecaef.a6fa38","name":"","topic":"","payload":"{\"group\":{\"show\":[\"T1_G1\"],\"focus\":true}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":280,"wires":[["4e559a4e.177484"]]}]

Another trial could be add another dashboard widget (ui_text for instance) configured with another tab / group and check if it shows up.

4

@Andrei, thanks for your suggestion, I added the inject node with the json payload; the ui control and debug node as per your advice, when I activate the inject node it says "injected successfully" but there is no output on the debug node. Does that tell you something?

Versions:
Dash node: 2.19.2
NR version: 0.20.5: Maintenance Release
Hardware: pi3b+

5

Is there a reason you are still using NR V020.5? the latest release is 1.0.3.
Is your other Pi on the same releases?

1 Like
6

Although websocket communication issues can impact the dashboard I don´t think this can cause the issue you are facing. Having a look on similar issues in the forum I have seen a case where the impacted user has another dashboard installed (node-red-contrib-mdashboard). Perhaps this is your case too ? Other things to consider: upgrading Node-RED; testing with another browser (by the way, which browser you use in your envirionment ?)

7

I been using the version for sometime, for my purpose everything seems to work and stable, I just cant understand why dashboard is serving a blank page in this particular instance. I ve also tried disabling all tabs apart from the dash tab, still the same

8

You don't by any chance, have more than one dashboard node installed do you?

9

I am using firefox, and also tried chrome both on win10 mc. The thing is it works with the same browser on my other pi instance, the difference is one mc most of my flows are for home automation, on this pi dash works. Thw othe mc have all sorts of flows, this is the mc that dash shows blank page.
Conceivable one of the flows may be serving something on the same port? However I hve tried disabling all tabs apart from the das tab.

10

I did a search for dash and it seems to be only 1 dashboard installed,however I have all sorts of other nodes installed (some I cant remember what I use it for, as you do) is it conceivable that some other nodes are interacting with the dashnode?

dash
dash927Ă—508 14.6 KB

While reinstalling and up grading may magically fix the problem, but this leaves a puzzle unexplain and it is always satisfying to get to the root cause.

11

Perhaps... but before going that troublehsooting path (which could be a long road) it would be good to check if there is any error reported in the initialization log.

I would recommend reading this thread, better if you do it backwards (so you can quickly understand the solution).

12

I forgot to suggest that you check the version of node.js used in the troubled pi.

1 Like
13

node version 10.15.3

14

Ok, so you have two Pi's and on one it works and the other it doesn't. For each Pi please fill in the missing info:

Doesn't Work on
raspbian version:
node-red version: 0.20.5
Node.js version: 10.15.3
dashboard version: 2.19.2

Works on
raspbian version:
node-red version:
Node.js version
dashboard version:

15

Hi Zenofmud,
Appreciate your patience, and rightly I should have summarized the basic info in the first place. (in fact it may really useful to have a locked post titled "read this first before posting problem" (also include code sharing backs ticks, which we see so often) to provide a standard basic information template.

This is the low down:

  1. Doesn't Work on pi which I use for mucking around and experimenting with numerous flows and nodes

Raspbian version: PRETTY_NAME="Raspbian GNU/Linux 9 (stretch)"
NAME="Raspbian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
Node-red version: 0.20.5
Node.js version: 10.15.3
Dashboard version: 2.19.2

  1. Works on pi that I use for home automation control and environmental data display on dashboard. This is very stable and works well so I have not done updates.

Raspbian version: PRETTY_NAME="Raspbian GNU/Linux 9 (stretch)"
NAME="Raspbian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
Node-red version: v19.4
Node.js version: v8.11.1
Dashboard version: 2.14.0

Thanks,

16

since you use it to experiment, why not upgrade it? just run the script Running on Raspberry Pi : Node-RED

17

ok now I have upgraded:
The pi is now:
Raspbian version: 9 (stretch)"
Node-red version: 1.0.3
Node.js version: 10.15.3
Dashboard version: 2.19.2

Still the same! The http://192.168.20.16:1880/ui/ simply display a blank page with no tab headers or anything:

The page source listing (Firefox):

Welcome to the Node-RED Dashboard

Please add some UI nodes to your flow and redeploy.

Inspect element Firefox (console):
You are using the ngTouch module. AngularJS Material already has mobile click, tap, and swipe support... ngTouch is not supported with AngularJS Material! app.min.js:148:303

TypeError: "io is not a function"

connect http://192.168.20.16:1880/ui/js/app.min.js:594

http://192.168.20.16:1880/ui/js/app.min.js:593

invoke http://192.168.20.16:1880/ui/js/app.min.js:66

get http://192.168.20.16:1880/ui/js/app.min.js:118

p http://192.168.20.16:1880/ui/js/app.min.js:92

g http://192.168.20.16:1880/ui/js/app.min.js:85

da http://192.168.20.16:1880/ui/js/app.min.js:85

c http://192.168.20.16:1880/ui/js/app.min.js:43

$eval http://192.168.20.16:1880/ui/js/app.min.js:175

$apply http://192.168.20.16:1880/ui/js/app.min.js:175

c http://192.168.20.16:1880/ui/js/app.min.js:43

invoke http://192.168.20.16:1880/ui/js/app.min.js:66

c http://192.168.20.16:1880/ui/js/app.min.js:43

Uc http://192.168.20.16:1880/ui/js/app.min.js:43

Ae http://192.168.20.16:1880/ui/js/app.min.js:42

http://192.168.20.16:1880/ui/js/app.min.js:369

e http://192.168.20.16:1880/ui/js/app.min.js:20

t http://192.168.20.16:1880/ui/js/app.min.js:20

app.min.js:148:303

e http://192.168.20.16:1880/ui/js/app.min.js:148

get http://192.168.20.16:1880/ui/js/app.min.js:120

$apply http://192.168.20.16:1880/ui/js/app.min.js:176

c http://192.168.20.16:1880/ui/js/app.min.js:43

invoke http://192.168.20.16:1880/ui/js/app.min.js:66

c http://192.168.20.16:1880/ui/js/app.min.js:43

Uc http://192.168.20.16:1880/ui/js/app.min.js:43

Ae http://192.168.20.16:1880/ui/js/app.min.js:42

http://192.168.20.16:1880/ui/js/app.min.js:369

e http://192.168.20.16:1880/ui/js/app.min.js:20

t http://192.168.20.16:1880/ui/js/app.min.js:20

Rendered http://192.168.20.16:1880/ui/css/app.min.less successfully. app.min.js:532:12831

CSS for http://192.168.20.16:1880/ui/css/app.min.less generated in 399ms app.min.js:532:12831

Less has finished. CSS generated in 399ms app.min.js:532:12831

Source map error: Error: request failed with status 404 Resource URL: http://192.168.20.16:1880/ui/js/app.min.js Source Map URL: angular-chart.min.js.map

3

The flow is just a button:

[{"id":"35fd9fe1.7ecaf8","type":"tab","label":"dash","disabled":false,"info":""},{"id":"7bee0dd2.30b66c","type":"ui_button","z":"35fd9fe1.7ecaf8","name":"","group":"8b893255.b525e","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":320,"y":100,"wires":[[]]},{"id":"8b893255.b525e","type":"ui_group","z":"","name":"Group 1","tab":"860d34d5.56664","order":1,"disp":true,"width":"6","collapse":false},{"id":"860d34d5.56664","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

What else to try?

18

Please try this flow

[{"id":"519a1a4e.3d96ec","type":"ui_button","z":"98a9005f.98de38","name":"","group":"d890ff97.ac0ba8","order":0,"width":0,"height":0,"passthru":true,"label":"{{msg.topic}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":450,"y":120,"wires":[["892952da.8ad578"]]},{"id":"79d3d6f9.4f2fb","type":"inject","z":"98a9005f.98de38","name":"","topic":"does this show","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":120,"wires":[["519a1a4e.3d96ec"]]},{"id":"892952da.8ad578","type":"debug","z":"98a9005f.98de38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":640,"y":120,"wires":[]},{"id":"d890ff97.ac0ba8","type":"ui_group","z":"","name":"button","tab":"d1877d8e.5b703","order":1,"disp":true,"width":"6","collapse":false},{"id":"d1877d8e.5b703","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

it's an 'inject' with msg.topic set, to a button with If msg arrives on input, emulate a button click: checked connected to a debug.

What happens if you press the inject (debug should show a timestamp) and is there anything on the dashboard?

Also, selecting the Dashboard icon in the sidebar, what do you in the Site and Themes tabs?have in the

19

@zenofmud, thanks for suggestion, results,

  1. Time stamp is shown when i click timestamp:

    Annotation 2019-12-13 090217thmtimestamp
    Annotation 2019-12-13 090217thmtimestamp1663Ă—664 130 KB

  2. Layout

    Annotation 2019-12-13 090217
    Annotation 2019-12-13 0902171588Ă—675 108 KB

  3. Theme

    Annotation 2019-12-13 090217thm
    Annotation 2019-12-13 090217thm1621Ă—604 92.9 KB

  4. UI screen: Just a blank screen, no errors

Annotation 2019-12-13 090217blkscr
Annotation 2019-12-13 090217blkscr1888Ă—706 45.1 KB

Everything seems to be working, looks like a ui page is served but just blank! This is really intriguing It must be something I have done somewhere.

Thanks

20

What do see on the Site tab?

And can you drag the test test above the Home tab and deploy