NR Dashboard not appearing

Does it work if you view it from another machine, or your phone for example?
Do you see anything untoward in the Browser Console?

Not sure if this will matter but what OS and version are you running on the pi?

NAME="Raspbian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"

Hi Colin, I've been using Safari/Firtefox from my Mac to access the Dashboard server and on the Pi browser as well. I have also tried using my iPad and the result is always the same, ie; as follows:
image

Should there be any concern with some of the warnings that came up after npm install? What I showed was just the first few as the list was quite long and the npm rebuild went through OK- is that normal?

So in summary at the moment, we have:

  • Versions of: linux, Node-red, node.js and dashboard are all to required levels.
  • no errors on node red start-up
  • MQTT seems to be working fine
  • Dashboard is stubbornly un-cooperative

I tried two other "simple" dashboard examples just to see whether the flows might be a part of the issue. One example which had an http output worked fine. The other which was accessed via localhost:1880/ui misbehaved with the same problem. So, I'm thinking that common link here is the "/ui" part. How is the dashboard output generated when the flows are deployed?

I think we need to ask for help from one of the developers (@dceejay, @knolleary?) who knows how this part of node-red works. I have very occasionally seen that message transiently but it has always disappeared after a couple of seconds, if I remember correctly. It would seem that whatever mechanism is used to determine whether to show that message is failing on your system for some reason. Everything that I have seen so far has not shown anything unusual with your setup so I have no idea what the cause might be.

As to the npm errors, provided it says at the end that the node has been installed that is ok.

I thought that it might be enlightening to look at what's going on at the html level of the Dashboard tab. Does this shed some light?

[Warning] ApplicationCache is deprecated. Please use ServiceWorkers instead. (ui, line 17)
[Log] Rendered http://192.168.0.9:1880/ui/css/app.min.less successfully. (app.min.js, line 532)
[Log] CSS for http://192.168.0.9:1880/ui/css/app.min.less generated in 131ms (app.min.js, line 532)
[Log] Less has finished. CSS generated in 131ms (app.min.js, line 532)
[Warning] You are using the ngTouch module. (app.min.js, line 469)
AngularJS Material already has mobile click, tap, and swipe support...
ngTouch is not supported with AngularJS Material!
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (angular-chart.min.js.map, line 0)

I expect that is the key to understanding the problem.

One thing we have not asked, have you made any changes to settings.js?

No, not knowingly. Can we check settings?

Please export your flow and attach it to a reply Aafter reading this thread

[
    {
        "id": "926c2641.0c69d8",
        "type": "tab",
        "label": "MQTT-ESP8266 V1",
        "disabled": false,
        "info": "**NodeRed Control of NodeMCU 8266 Controller via MQTT**\n\nThis Flow is designed to do the following:\n * Use Mosquitto MQTT as the Broker on the R-Pi\n * Use the NodeMCU 8266 module as the remote input & output device\n * Implement MQTT on the 8266 device\n * Present the I/O to the NR Dashboard"
    },
    {
        "id": "86fcc90f.417cb",
        "type": "ui_switch",
        "z": "926c2641.0c69d8",
        "name": "Lamp",
        "label": "Lamp",
        "tooltip": "",
        "group": "89832c5c.b6b46",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": true,
        "decouple": "false",
        "topic": "room/lamp",
        "style": "",
        "onvalue": "on",
        "onvalueType": "str",
        "onicon": "",
        "oncolor": "",
        "offvalue": "off",
        "offvalueType": "str",
        "officon": "",
        "offcolor": "",
        "x": 204,
        "y": 166,
        "wires": [
            [
                "bacbc31b.39cb68"
            ]
        ]
    },
    {
        "id": "ba353439.685a5",
        "type": "ui_chart",
        "z": "926c2641.0c69d8",
        "name": "Temperature",
        "group": "ba9d675e.331c6",
        "order": 0,
        "width": 0,
        "height": 0,
        "label": "Temperature",
        "chartType": "line",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "step",
        "nodata": "",
        "dot": false,
        "ymin": "0",
        "ymax": "40",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "useOldStyle": false,
        "outputs": 1,
        "x": 461,
        "y": 247,
        "wires": [
            []
        ]
    },
    {
        "id": "4c6d50ef.f979e8",
        "type": "ui_gauge",
        "z": "926c2641.0c69d8",
        "name": "Humidity",
        "group": "ba9d675e.331c6",
        "order": 1,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "Humidity",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": "100",
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "x": 458,
        "y": 335,
        "wires": []
    },
    {
        "id": "e57a8acf.d420c8",
        "type": "mqtt in",
        "z": "926c2641.0c69d8",
        "name": "Temperature",
        "topic": "room/temperature",
        "qos": "2",
        "datatype": "auto",
        "broker": "f16796aa.830258",
        "x": 229,
        "y": 248,
        "wires": [
            [
                "ba353439.685a5"
            ]
        ]
    },
    {
        "id": "27a9319c.ef0586",
        "type": "mqtt in",
        "z": "926c2641.0c69d8",
        "name": "Humidity",
        "topic": "room/humidity",
        "qos": "2",
        "datatype": "auto",
        "broker": "f16796aa.830258",
        "x": 220,
        "y": 330,
        "wires": [
            [
                "4c6d50ef.f979e8"
            ]
        ]
    },
    {
        "id": "bacbc31b.39cb68",
        "type": "mqtt out",
        "z": "926c2641.0c69d8",
        "name": "Lamp",
        "topic": "room/lamp",
        "qos": "2",
        "retain": "",
        "broker": "f16796aa.830258",
        "x": 473,
        "y": 164,
        "wires": []
    },
    {
        "id": "89832c5c.b6b46",
        "type": "ui_group",
        "z": "",
        "name": "Analogue",
        "tab": "ec6074ee.e2ea58",
        "disp": true,
        "width": "2",
        "collapse": false
    },
    {
        "id": "ba9d675e.331c6",
        "type": "ui_group",
        "z": "",
        "name": "Sensor",
        "tab": "ec6074ee.e2ea58",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "f16796aa.830258",
        "type": "mqtt-broker",
        "z": "",
        "name": "",
        "broker": "localhost",
        "port": "1883",
        "clientid": "",
        "usetls": false,
        "compatmode": true,
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": ""
    },
    {
        "id": "ec6074ee.e2ea58",
        "type": "ui_tab",
        "z": "",
        "name": "Demo",
        "icon": "dashboard",
        "disabled": true,
        "hidden": false
    }
]

Doesn't the error message: "[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (angular-chart.min.js.map, line 0)" imply that perhaps the relevant file might be in the wrong folder? Can we check this?

@dceejay Interesting, I have reproduced this problem, If you import the flow above, deploy and go look at the dashboard settings in the sidebar, you will see the tab is not active
30%20AM
and nothing shows up in the dashboard.

If you add a new tab and move the groups to the new tab and deploy, then the dashboard works. (I had to press the +group on Tab 2 then move the two groups from tab 'Demo' to Tab 2 and then delete the group I added)

29%20AM
You can see in this image Tab 2 is black but the tab Demo is greyed out.

@pinode - if you do what I outline, you will see your dashboard. If you go to the dashboard tab and select the edit option on the Demo tab,
51%20AM
you can delete that tab.

I found the settings.js file and searched for "ui" with the following:

uiPort: process.env.PORT || 1880,
    // To listen on all IPv6 addresses, set uiHost to "::",
    //uiHost: "127.0.0.1",
    //ui: { path: "ui" },

I note that the path is commented out.

Hi Zenofmud, that's great - it works for me too :slight_smile: Many many thanks.

Since this problem can be replicated on your system, then what is the problem. I can live with the workaround but it would be nice to know what is causing this.

If you open that tab's properties you see this


The state says it's disabled...
so as it's the only page then the dashboard will be blank.
Re-enabling it will bring it back.

ugrh! I even looked at that and missed it :confounded:

Hi dceejay, thank you so much - brilliant. I'm a NodeRed newbie and I was pulling my hair out on this. Great to see that it wasn't some sinister bug or installation problem.
Thumbs up for the keen support provided by the rest of the group. I'm now happily building flows with gay abandon. Many thanks to all.

1 Like

Same here.

Wonder if we can get quantity discount at Specsavers :wink:

2 Likes

Sadly I fear that it is my brain that is fading not my eyes :frowning:

1 Like