# 🚀 \[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:** 3

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

</div>

Correct. If you upgrade, Node-RED will complain that there are a bunch of undefined nodes. You unfortunately have to delete them and re-create them. Or for the example flows it's easier to re-import the full example.

---

<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:** [20 August 2022 16:11 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/42 "2022-08-20T16:11:07Z")

</div>

I finished my A/C controls with the addition of the timeline-plot to show when the compressor is active and how fast it is running (gradient).

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

And I implemented another tab to control the rolling window shutters. For this one I had to develop a new button-bar widget. I did that outside of the FlexDash repo in its own NPM package to test writing a custom node & widget for FlexDash. A bunch of stuff got broken due to the migration to Vuetify 3 but I believe it's all fixed and back together now. Docs are not quite there yet, except for documentation of the internals so I remember the next time I have to deal with this crazy javascript linking stuff 🙄.

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

Supporting all this is a new release:

```auto
20 Aug 09:09:59 - [info] Node-RED FlexDash plugin version 0.4.88                                    
20 Aug 09:10:01 - [info] Node-RED FlexDash version 0.4.88                                           
20 Aug 09:10:01 - [info] Node-RED FD Core Widgets version 0.4.39                                    
20 Aug 09:10:02 - [info] FlexDash UI version 0.4.47                                                 

```

I also resurrected the node-red-fd-testnodes repo for the custom button-bar but 'til the docs at least minimally describe how to write a custom widget that's not ready for prime time yet...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 August 2022 08:54 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/43 "2022-08-21T08:54:24Z")

</div>

Just having an initial play with FlexDash and it looks great so far.

Is there a dropdown selector widget? I can't seem to see one. It may well just be impending blindness on my part ☹

---

<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:** [21 August 2022 14:58 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/44 "2022-08-21T14:58:43Z")

</div>

Thanks for giving it a spin!  
There is no dropdown selector widget at this point 😢  
Do you want to write one or prefer me to throw something together?  
If the latter, post the `help` & `props` (i.e. something like [flexdash/push-button.vue at main · flexdash/flexdash · GitHub](https://github.com/flexdash/flexdash/blob/main/src/widgets/push-button.vue#L19-L30)) and I'll fill out the rest.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 August 2022 15:27 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/45 "2022-08-21T15:27:42Z")

</div>

I don't think my skill level is up to writing one. I will see if I can come up with a spec.

It might be a few days though, I sense real life is about to make demands ☹

---

<div class="post-metadata">

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

</div>

Nice work so far! 👍  
One suggestion, please start using some kind of i18n right away. When I started translating the original Dashboard to German I had to put a lot of extra work into extracting existing English text into translation files, so that translation was even possible.

Here is the example I looked at: [flexdash/push-button.vue at 4e1fec8804c511d3e97e077e529b113c6c9dcb58 · flexdash/flexdash · GitHub](https://github.com/flexdash/flexdash/blob/4e1fec8804c511d3e97e077e529b113c6c9dcb58/src/widgets/push-button.vue#L27)

I think it's only a small extra effort for new code, but it's a lot of work to do it afterwards for a whole project.

---

<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:** [21 August 2022 15:59 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/47 "2022-08-21T15:59:17Z")

</div>

> [@fellinga](#):
>
> Nice work so far! 👍

Thanks for giving it a spin!

> [@fellinga](#):
>
> One suggestion, please start using some kind of i18n right away.

I thought about it but don't have any experience with i18n and wasn't really excited by what I saw, it really obscures the source code. I'm OK doing it if someone comes up with a decent framework, but right now the number of FlexDash users is \<10, and the list of things for me to fix is ... endless.

---

<div class="post-metadata">

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

</div>

> [@tve](#):
>
> it really obscures the source code

That's what I thought too in my first i18n projects, but it's really not that bad. It actually even shortens the amount of text sometimes.

Flexdash should be able to access the RED object at anytime, right? Calling the RED underscore function should be all that needs to be done...

This is how I access it in my Dashboard nodes:

> <https://github.com/fellinga/node-red-contrib-ui-time-scheduler/blob/51acce56cc0c93ccb8eec7c1110e4a5b376dc9a7/time-scheduler.js#L273>

> <https://github.com/fellinga/node-red-contrib-ui-time-scheduler/blob/51acce56cc0c93ccb8eec7c1110e4a5b376dc9a7/time-scheduler.html#L31>

More information: [Internationalisation : Node-RED](https://nodered.org/docs/creating-nodes/i18n)

---

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

</div>

> [@fellinga](#):
>
> Flexdash should be able to access the RED object at anytime, right?

Not really... FlexDash is a project independent of Node-RED. The dashboard is used in other projects too and I definitely want to keep it that way. The i18n would have to fit into Vue (which has i18n support).

The main help text and the names of props as well as their tips comes from the `vue` files, which have nothing to do with Node-RED. What you see in the NR flow editor is auto-generated from the vue files. It would, however, be pretty easy to extract all the help text, prop names, and tips into a file that could be translated and from which the translations could be taken to replace the english text at run-time. That would probably also be the best way to do the translations 'cause you then see the whole picture of what you're translating.

That would leave placeholders for input fields to translate and error messages plus misc other text fragments.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [21 August 2022 21:51 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/50 "2022-08-21T21:51:50Z")

</div>

Is the toggle working OK in your latest, or have I missed a config?

![toggle](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b05cf0b387bbe045889a3b06c602a05dd79e8128.gif)

Also, (and I know I'm going to regret asking... but) what is a 'prop'??

**[EDIT] -** Oh 'properties'... I'm more familiar with the term 'config', which is used generally in node-RED.

---

<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:** [21 August 2022 22:11 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/51 "2022-08-21T22:11:58Z")

</div>

It should be working... But not as you expect... When you click it it outputs a message but doesn't change on its own. You need to feed it the new value in explicitly.

It's something I've always struggled with the std dashboard and I decided to try something else. On the std dash you toggle something and it shows as toggled but you don't know whether anything actually happened. So I decided that the author of the flow should figure out when/how to let the user know that the input was processed. The simplest is to use a junction node to feed the output back to the input. I'm open to discussion...

WRT props... It's from Vue, where each component has "props", short for "properties" as you surmised. I wasn't sure what Node-RED calls these things. I know it's "config" in the code, as you point out, but I looked in the docs and [Nodes : Node-RED](https://nodered.org/docs/user-guide/editor/workspace/nodes) has a whole section about "editing node properties" and if you look at the UI in the flow editor the tab is called "Properties".

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [21 August 2022 22:34 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/52 "2022-08-21T22:34:41Z")

</div>

If I set the on/off values from 'string' to boolean, it does not trigger a deploy, and reopening the config (props) reverts back to 'string'  
 ![onoff](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/6/364ca5f3c1add7e2b805e8758fd414df6855e09e.jpeg)

---

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

</div>

Hmmm, looks like I still have another round of battling typedInput ahead of me... I'm still misunderstanding something about how it works. Thanks for pointing it out!

* * *

On the topic of "What have you done today?" ... I implemented a color picker in Node-RED for the over 200 material design colors that are in the palette...

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

Now released, but I'm sure I'll get to fix issues with it, I'm not used to all this jQuery stuff to build UIs...

```auto
21 Aug 15:50:32 - [info] Node-RED FlexDash plugin version 0.4.90                                    
21 Aug 15:50:34 - [info] Node-RED FlexDash version 0.4.90                                           
21 Aug 15:50:34 - [info] Node-RED FD Core Widgets version 0.4.39                                    
21 Aug 15:50:34 - [info] FlexDash UI version 0.4.48                                                                      

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [21 August 2022 23:02 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/54 "2022-08-21T23:02:08Z")

</div>

> [@tve](#):
>
> "What have you done today?"

Not a question that I have considered!  
I've never known anyone develop a project so quickly as you have done over the past few weeks 👍

---

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

</div>

> [@Paul-Reed](#):
>
> If I set the on/off values from 'string' to boolean, it does not trigger a deploy, and reopening the config (props) reverts back

I believe I fixed the typedInput madness 🙄, i.e. this should work correctly now. Requires updating node-red-flexdash _and_ node-red-fd-corewidgets.

```auto
21 Aug 21:48:04 - [info] Node-RED FlexDash plugin version 0.4.91
21 Aug 21:48:06 - [info] Node-RED FlexDash version 0.4.91 
21 Aug 21:48:06 - [info] Node-RED FD Core Widgets version 0.4.40 
21 Aug 21:48:11 - [info] FlexDash UI version 0.4.48  

```

> [@Paul-Reed](#):
>
> Not a question that I have considered!

Sorry, what I wrote was just a rhetorical question, had nothing to do with what you wrote before, but I see how I was ambiguous.

---

<div class="post-metadata">

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

</div>

> [@tve](#):
>
> When you click it it outputs a message but doesn't change on its own. You need to feed it the new value in explicitly

I can completely understand your design decision. You can see that for the [node-red-contrib-ui-multistate-switct](https://github.com/bartbutenaers/node-red-contrib-ui-multistate-switch#user-input) node, that we allow the user to choose which behaviour he wants. At the beginnen we had implemented it indeed like the standard switch: i.e. immediately visually switch. But then somebody asked us that he wanted to do it like you do: that the switch is not visually switched, until the machine is really switched on. However due to the _ **roundtrip** _ to the Node-RED server, then to the machine (e.g. via mqtt) and all the way back to the dashboard, it might take some time before you see the switch visually changing. Such unresponsive behaviour is quite confusing for users. Therefore my CSS hero @hotNipi introduced that _ **visual ripple effect** _, to show at least that the dashboard has processed your click event...

Personally - if possible of course - I would let the user choose on the config screen how he wants the switch to behave....

> [@tve](#):
>
> On the topic of "What have you done today?" ... I implemented a color picker in Node-RED for the over 200 material design colors that are in the palette...

It looks like you have made a custom typedinput for colors? If so, don't hesistate to contribute that to the core... Such a typedinput would be very useful. Colors are being used in iot all over the place. I use it in a lot of my nodes, but it is very inconvenient that there is no typedinput for it. Because now I have a mix of typedinputs and normal html inputs 🙁

---

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

</div>

> [@BartButenaers](#):
>
> Therefore my CSS hero @hotNipi introduced that _ **visual ripple effect** _, to show at least that the dashboard has processed your click event...

Yeah, that seems like the right thing to do. I'm using the vuetify toggle, have to look whether it supports some ripple.

> [@BartButenaers](#):
>
> It looks like you have made a custom typedinput for colors?

It's not actually a typedInput. It's simply a class that constructs a color picker. The result is a string with the color name, not the hex value (although hex values work fine with FlexDash color props). It's also pretty specific to the material design color palette and how it's represented in Vuetify. Soooo, the code is available at [node-red-flexdash/plugin/resources at main · flexdash/node-red-flexdash · GitHub](https://github.com/flexdash/node-red-flexdash/tree/main/plugin/resources) and if you're putting together a node for FlexDash with custom node code then it should be easy to use. Beyond that... 😉

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 August 2022 05:55 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/58 "2022-08-22T05:55:51Z")

</div>

> [@tve](#):
>
> have to look whether it supports some ripple.

Ah vuetify [has](https://vuetifyjs.com/en/directives/ripple/) such stuff all out-of-the-box. Didn't know that. How convenient is that for developers...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 August 2022 08:40 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/59 "2022-08-22T08:40:00Z")

</div>

> [@tve](#):
>
> When you click it it outputs a message but doesn't change on its own. You need to feed it the new value in explicitly.  
> It's something I've always struggled with the std dashboard and I decided to try something else

For the record, that behaviour (which I think is the optimum one) can be achieved in the standard dashboard Switch node by _not_ selecting Pass Message Through, and selecting Switch Icon shows state of Input.

I think there may still be a small bug in the flexdash toggle. If the output is fed into a debug node, with no feedback back to the input, then I believe that when clicked it should send a message with the new state each time it is clicked. So if it is currently off it should send the on message each time it is clicked. In fact it seems to send it only every second time it is clicked.

One thing I really miss from the standard dashboard nodes is the ability to specify the topic in nodes that have an output. I use MQTT to interface between the dashboard and the IO/logic flows so the output of dashboard nodes almost always goes direct to an MQTT node. I find with flexdash that I almost always need to follow the node with a Change node to set the topic. Was this feature something that was intentionally not included in fd? I wonder whether that decision would be worth re-visiting.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [22 August 2022 09:08 UTC](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/60 "2022-08-22T09:08:15Z")

</div>

👍 for adding topic

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

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