Node-red-contrib-ui-artless-gauge not showing on dashboard

I have installed the artless gauge to visually upgrade my dashboard but it's not working

  • Installation from palette manager without issues
  • Created a simple flow as per below
  • Deployment doesn't show any errors
  • Standard gauge displays value whereas artless gauge doesn't show up on the dashboard at all
  • Latest dashboard version installed (2.22.1)
  • Node-RED runs on IBM Cloud

Any ideas?

[{"id":"bb363c1.16af3c","type":"inject","z":"ccc529bd.28b628","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":100,"wires":[["ebf09848.0c0708"]]},{"id":"ebf09848.0c0708","type":"change","z":"ccc529bd.28b628","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"4.59","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":100,"wires":[["4f331470.fdee9c","379b4c77.d36b34","f78e796e.733dc8"]]},{"id":"4f331470.fdee9c","type":"ui_artlessgauge","z":"ccc529bd.28b628","group":"777c1571.f45bec","order":0,"width":0,"height":0,"name":"Temp","icon":"","label":"Gauge","unit":"","layout":"radial","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","colorFromTheme":true,"property":"payload","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":470,"y":100,"wires":[]},{"id":"379b4c77.d36b34","type":"debug","z":"ccc529bd.28b628","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":490,"y":140,"wires":[]},{"id":"f78e796e.733dc8","type":"ui_gauge","z":"ccc529bd.28b628","name":"","group":"777c1571.f45bec","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":180,"wires":[]},{"id":"777c1571.f45bec","type":"ui_group","z":"","name":"Default","tab":"d39722a3.30349","order":1,"disp":true,"width":"6","collapse":false},{"id":"d39722a3.30349","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Before posting a flow, read this thread so others can import your flow (I edited your post and fixed it)

@hotNipi - could this be a cloud issue?

1 Like

By looking that not-importable flow raw data I can say that everything should be ok from that side. I'd like to see if there is errors at dashboard side.
I have no experiences working with node-red with this cloud setup. So cant really say nothing more based on this information.

I actually ran across a similar issue with two of your nodes @hotNipi. I was just probing around if I'd get myself to build a dashboard and added some components. The standard components showed up but the two from you did not. I did the test only on my tablet so I wasn't able to check devtools for errors. I forgot to report about it as I decided to continue some later day.

I believe it was artless gauge and state trail that I tested but can't even remember. :neutral_face: I was wondering if it had something to do with the fact I had not sent any data to them yet.

state-trail can be configured in the way that without data there is blank display. But artless- gauge should show at least arc or line initially.

Is this how it should look like? The way this is created is by adding the component, then filling in the required new group and a new tab, all with default settings. So I had no dashboard configuration existing at the point of creation.

That's correct.

OK maybe I didn't experience any real issue then. :slight_smile:

If you connect inject node to it, and press the button, it shows full bar (as timestamp is bigger than default max 10)

That is exactly what happened, yes. Thanks for the clarifications!

1 Like

Thanks. Was wondering how to format this properly

I had a look at the log from within Node-RED (View | Event log) and it's empty. The dashboard is working with the standard gauge but when I remove that the splash screen comes up saying "Please add some UI nodes ..."

The Node-RED version installed is v1.0.6. Is this current?

Can you try with some other custom ui node. For example https://flows.nodered.org/node/node-red-contrib-ui-led.

I have dark feeling that template-based ui nodes have some trouble when it is needed to initialize the ui_base.
Tagging @dceejay to get lights on ..

And which version of a) underlying node.js and b) node-red-dashboard node ?
Adding ui-widgets was only adding fairly recently.

Running Node_RED locally

9 Jun 17:52:47 - [info] Node-RED version: v1.0.6
9 Jun 17:52:47 - [info] Node.js  version: v12.16.2
9 Jun 17:52:47 - [info] Windows_NT 10.0.18363 x64 LE
9 Jun 17:52:48 - [info] Loading palette nodes
9 Jun 17:52:49 - [info] Dashboard version 2.22.1 started at /ui
  1. clean start. (or delete all dashboard related configs)
  2. drag in artless-gauge (or ui-led or I think any of custom widgets )
  3. configure as required by adding new ui_group and new ui_tab.
  4. press "Done"
  5. Deploy

Result: nothing on dashboard
Error in dashboard console: app.min.js:593 Uncaught TypeError: Cannot read property 'themeState' of undefined
Config tab shows only ui_tab and ui_group, but not ui_base

Meanwhile the workaround:

Do not start the creation of dashboard with custom ui widget.
Place some regular widget, configure and deploy, make sure that you have widget on dashboard, and then you can start adding custom widgets. After deploy with custom widgets, you can delete regular ones if needed.

If you are already in this trouble, delete all dashboard related configs you find at config tab (used or not used). Restart node red. Start making new dashboard as described above.

1 Like