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

**URL:** <https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020>\
**Category:** Dashboard\
**Created:** [9 June 2020 00:24 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020 "2020-06-09T00:24:26Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![tfmeier](https://avatars.discourse-cdn.com/v4/letter/t/a9a28c/32.png) [@tfmeier](https://discourse.nodered.org/u/tfmeier)\
**Post date:** [9 June 2020 00:24 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/1 "2020-06-09T00:24:26Z")

</div>

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?

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

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [9 June 2020 10:30 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/2 "2020-06-09T10:30:31Z")

</div>

Before posting a flow, [read this thread](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) so others can import your flow (I edited your post and fixed it)

@hotNipi - could this be a cloud issue?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 10:36 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/3 "2020-06-09T10:36:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 June 2020 10:44 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/4 "2020-06-09T10:44:36Z")

</div>

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. 😐 I was wondering if it had something to do with the fact I had not sent any data to them yet.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 10:47 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/5 "2020-06-09T10:47:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 June 2020 10:55 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/6 "2020-06-09T10:55:13Z")

</div>

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.

 ![2020_06_09_13.52.18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf06fd21d0f3bf86dfc907a07d6d57cb82012ee5.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 10:56 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/7 "2020-06-09T10:56:09Z")

</div>

That's correct.

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 June 2020 10:56 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/8 "2020-06-09T10:56:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 10:58 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/9 "2020-06-09T10:58:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [9 June 2020 10:59 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/10 "2020-06-09T10:59:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tfmeier](https://avatars.discourse-cdn.com/v4/letter/t/a9a28c/32.png) [@tfmeier](https://discourse.nodered.org/u/tfmeier)\
**Post date:** [9 June 2020 14:14 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/11 "2020-06-09T14:14:28Z")

</div>

Thanks. Was wondering how to format this properly

---

<div class="post-metadata">

**Author:** ![tfmeier](https://avatars.discourse-cdn.com/v4/letter/t/a9a28c/32.png) [@tfmeier](https://discourse.nodered.org/u/tfmeier)\
**Post date:** [9 June 2020 14:33 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/12 "2020-06-09T14:33:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 14:38 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/13 "2020-06-09T14:38:48Z")

</div>

Can you try with some other custom ui node. For example [https://flows.nodered.org/node/node-red-contrib-ui-led](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 ..

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [9 June 2020 14:49 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/14 "2020-06-09T14:49:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 15:04 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/15 "2020-06-09T15:04:17Z")

</div>

Running Node\_RED locally

```auto
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`

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2020 16:28 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/16 "2020-06-09T16:28:08Z")

</div>

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.

---

<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:** [9 July 2020 16:28 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-artless-gauge-not-showing-on-dashboard/28020/17 "2020-07-09T16:28:13Z")

</div>

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