# 🚀 \[FlexDash\] alpha release - a dashboard for Node-RED

**URL:** <https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861>\
**Category:** Share Your Nodes\
**Tags:** flexdash\
**Created:** [1 August 2022 05:49 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861 "2022-08-01T05:49:33Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [2 August 2022 20:16 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/21 "2022-08-02T20:16:38Z")

</div>

oh.. ok.. I won't bother with it then.... just using the palette manager.. now worries... I'll pass on the testnodes... and still with your Alpha released stuff. thanks for responding!

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [5 August 2022 16:44 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/22 "2022-08-05T16:44:51Z")

</div>

Quick note that I pushed an update:

```auto
5 Aug 09:29:47 - [info] Node-RED FlexDash plugin version 0.4.71                                     
5 Aug 09:29:48 - [info] Node-RED FlexDash version 0.4.71                                            
5 Aug 09:29:48 - [info] Node-RED FD Core Widgets version 0.4.30                                     
5 Aug 09:29:49 - [info] Worldmap version 2.28.3                                                     
5 Aug 09:29:49 - [info] Dashboard version 3.1.7 started at /ui                                      
5 Aug 09:29:50 - [info] FlexDash UI version 0.4.36                                                  

```

This fixes some minor issues in various widgets.  
I'm running into an issue where the position of widgets in a grid gets lost and thus appear out of order. I'm suspecting that the root cause is the pruning of dead/deleted widgets that I have and the fact that the flow editor does not provide any event to signal when everything has been loaded. I've disabled the pruning for now 'til I figure out what to do (this shouldn't have any visible impact). If you notice spontaneous reordering on deploy LMK, best with a node-red log.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [6 August 2022 20:46 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/23 "2022-08-06T20:46:52Z")

</div>

Another tab partially converted from old to new:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/035fa35e261d027f5cd8f5bae1071fbd14e4550f.png)

Clearly the positioning of the value in the small gauges still needs some work...

The old-dashboard tab is still there, it also has heating controls, which we won't need for another bunch of months...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/50993a6d37f48297c064142b313dbed3c7e2399f.png)

I found a problem when reordering tabs, so I'll have another small fix release coming soon. I'm also getting ideas for creating a different panel that does the layout differently. Lots of stuff to experiment with... But first the NR integration needs to solidify. Overall it's working for me, but there are small issues left and right, it's alpha for a reason...

The flow with both sets of controls plumbed in (std dashboard plus flexdash) gets pretty busy & messy:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/525bb579c6d82fe9e1efe0c14dfb6c6dc48ff057.png)  
In blue the std dash nodes, in ochre the flexdash nodes...

But in some cases I can replace a pile of std dash nodes by a single flexdash node using the array feature. Here 6 of the blue nodes get replaced by the one ochre node, and the big split thing also gets shrunk:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/2540870317476eea674d67ac942dce97e0f6779f.png)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [9 August 2022 00:13 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/24 "2022-08-09T00:13:41Z")

</div>

By popular demand, from I, me, myself, and tve 😂 I added a new widget: timeline plot. It displays a horizontal bar per series with the color changing according to the value. Handy to show stuff like Air conditioning on/off over time, or fan speed low/med/high over time, etc.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06bd74d62bdcdc033347851f830b291579915197.png)

It'll be in the next release...

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [9 August 2022 00:59 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/25 "2022-08-09T00:59:23Z")

</div>

will it be 'clickable'?

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [9 August 2022 01:28 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/26 "2022-08-09T01:28:24Z")

</div>

Good question... Right now it's not. It's also not zoomable or scrollable. And doesn't have an on-hover tooltip. All these things are possible and they all compete for mouse attention 😆.  
It's easy to hack a click output in for the short term, but in the longer term I'd like to have more options, for example, to pop-up a panel of widgets that then gets populated with whatever data you want... Dunno yet how much should be server-side (i.e. Node-RED) vs. client side (i.e. FlexDash).

What is it you have in mind?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [9 August 2022 01:59 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/27 "2022-08-09T01:59:53Z")

</div>

I currently use `node-red-contrib-ui-state-trail` by @hotNipi and it is excellent for my purposes.  
I get the status of a machine running (only 2 states as of now, on and off), and i get the user to populate the reasons for downtime which gets the time from and to after clicking the trail line, and logs into the database, in the same way, i get the 'reason for downtime' when i click on a past event. it gets the from and to time from the 'click' and queries the database to get the correct row to populate.

![state-trail](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/9007344e6ce2c8f8d81b34c0debc5a2c146c168f.gif)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 August 2022 12:33 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/28 "2022-08-10T12:33:48Z")

</div>

I am getting below error, if i feed value at around a reading per second in a gauge node

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b56c9722a69804fdb4caaa7d4aa75a8b64af89a.png)

but the gauge is working  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4d844d7f773e6877751b6165491cd44f256ee28.png)

```auto
Failed to update widget prop path 'settings':
RangeError: Maximum call stack size exceeded
    at isBinary (c:\Users\OEEHo\.node-red3\node_modules\socket.io-parser\dist\is-binary.js:22:18)
    at hasBinary (c:\Users\OEEHo\.node-red3\node_modules\socket.io-parser\dist\is-binary.js:40:9)
    at hasBinary (c:\Users\OEEHo\.node-red3\node_modules\socket.io-parser\dist\is-binary.js:49:63)

```

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [10 August 2022 15:46 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/29 "2022-08-10T15:46:18Z")

</div>

Thanks for reporting! Can you please post the entire stack trace?

So the error message says that you have a `msg.settings`, which is not a prop on the widget node. It looks like I'm not doing the right thing in that I pass the data through anyway. In your case it probably is a circular data structure, or something like that and [socket.io](http://socket.io) croaks. I should silently skip anything in `msg` that is not a prop on the widget...

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [10 August 2022 16:24 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/30 "2022-08-10T16:24:38Z")

</div>

I pushed a new release that should fix the call stack size exceeded problem, if I understand its cause correctly:

```auto
10 Aug 09:22:54 - [info] Node-RED FlexDash plugin version 0.4.78
10 Aug 09:22:56 - [info] Node-RED FlexDash version 0.4.78
10 Aug 09:22:56 - [info] Node-RED FD Core Widgets version 0.4.34
10 Aug 09:22:58 - [info] FlexDash UI version 0.4.40

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [11 August 2022 01:31 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/31 "2022-08-11T01:31:43Z")

</div>

Oh!. when you mentioned `msg.settings` i remembered i had similar issue with `ui-led` node and after i deleted `msg.settings` before passing on the payload to the node, it had got fixed.

> [@UI\_LED (0.4.11) giving error "RangeError: Maximum call stack size exceeded" \[SOLVED\]](https://discourse.nodered.org/t/ui-led-0-4-11-giving-error-rangeerror-maximum-call-stack-size-exceeded-solved/55121):
>
> UI\_LED (0.4.11) version giving error "RangeError: Maximum call stack size exceeded" my input rate is 1 message per 10 second, alternating true and false i now temporarily put a button node to show green and red color with change node providing msg.backgroundcolor and is working OK. What is wrong with the LED settings ? [led]

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2bd7c70b20c191aee74179ef78fb696873a1516.png)

and now, after i deleted `msg.settings` before passing it on to `gauge` node, its working fine. no error messages.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/cecbdf227e298e0a904edfe1f5cb2bfad8e0315f.png)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [11 August 2022 01:43 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/32 "2022-08-11T01:43:25Z")

</div>

Cool! I did fix node-red-flexdash so it does the right thing, which is to ignore msg.xxx stuff that it doesn't need, so you shouldn't need to delete msg.settings with the latest version.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [11 August 2022 02:31 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/33 "2022-08-11T02:31:27Z")

</div>

I will update and check.  
I am loving the _widget array_ feature, i wanted to have 20 gauges in a row, and it was possible with just one gauge node on the editor. Excellent feature.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [11 August 2022 04:53 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/34 "2022-08-11T04:53:30Z")

</div>

> [@smanjunath211](#):
>
> I am loving the _widget array_ feature

To celebrate the positive feedback 😂 I decided to write the docs page for array widgets:  
[https://flexdash.github.io/docs/using-flexdash/array-widgets/](https://flexdash.github.io/docs/using-flexdash/array-widgets/)

Someday I'll have to sit down and figure out how to implement array panels...

---

<div class="post-metadata">

**Author:** ![MyRandomThoughts](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/myrandomthoughts/32/41085_2.png) [@MyRandomThoughts](https://discourse.nodered.org/u/MyRandomThoughts)\
**Post date:** [11 August 2022 22:35 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/35 "2022-08-11T22:35:05Z")

</div>

Bit of a bug (I think).

- Click the cog top-right
- Toggle dark mode (it changes correctly)
- Refresh page.
- It changes back to light mode.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [12 August 2022 00:45 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/36 "2022-08-12T00:45:25Z")

</div>

Thanks for trying it out!

Yes, you are correct that the theme is not remembered. The reason is that there currently are no cookies, no notion of session or user. The default can be configured in index.html, which is not easily accessible or modifiable with node-red. I'm currently using a URL like `http://localhost:1880/flexdash?theme=dark` to get the dark theme by default and the browser history (or a bookmark) remembers it for me.

Fixing this opens up the whole session, authentication, user, preferences, etc can of worms... FlexDash supports some simple auth but the Node-RED integration doesn't right now. It's not something I can focus on at the moment, but I can provide pointers for how to attack it (I have auth for FD in another project).

---

<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:** [13 August 2022 05:05 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/37 "2022-08-13T05:05:52Z")

</div>

That looks really nice.

I would offer to have a go myself, but just now I am somewhat...... _unworkable_ and it is not fun.

Though old (relatively for the thread) you have changed the name of one of your nodes and informed everyone (here) that since the update, all your example flows will NOT work.  
And fair enough.

Just a suggestion:  
With the new build (people who have downloaded this set of nodes) uninstall them and then install the new release with rewritten demo flows, then all things should be ok again.

This way the base line is following the release.  
(But, I guess most people would have worked that out for themselves.)

But, yes, this looks great.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [13 August 2022 05:31 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/38 "2022-08-13T05:31:14Z")

</div>

> [@Trying\_to\_learn](#):
>
> Though old (relatively for the thread) you have changed the name of one of your nodes and informed everyone (here) that since the update, all your example flows will NOT work.  
> And fair enough.

I'm sorry, which node did I change and which example flows no longer work?

---

<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:** [13 August 2022 05:51 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/39 "2022-08-13T05:51:12Z")

</div>

Post 14.

# The next update will break all flows! ⚠ ⚠ ⚠

---

<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:** [13 August 2022 06:09 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/40 "2022-08-13T06:09:35Z")

</div>

So (not exactly to you) if everyone who downloaded your new nodes, deletes them and installs the new version: All should be good with the workings.

[Previous page](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861.md?page=1)

[Next page](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861.md?page=3)