FlexDash Button Bar (or multistate switch)

@domenicquirl provided long feedback looking for something like the multi-state button in FlexDash. Even though I directed him to the FlexDash Alpha thread that thread is getting darn long, so I'm replying in a new thread. (Apologies for the switcharoo, Domenic.)

We have parts of the UI that interact with remote hardware via various forms of network communication. This means that there are two distinct values behind any device value:

  • the actual current state of some device value
  • the current state that a device value is supposed to have according to the user, i.e. what the user wants to set the value to

and there are three things you need to display in the UI:

  • the actual value
  • the intended value
  • a UI element to change the intended value

Sometimes these values influence one another, so e.g. a command that you send will change both the on-device command, but will also affect the state of the device somehow, which you also need to display. A different flow that we have has a dashboard that solves this by showing individual UI elements for all these things. So there is a separate UI node for the actual command, the sent command, the state, and a button to change the command. This was perceived as unwieldy and confusing by users and it was requested to find a different solution for the current project.

I believe the button bar can accommodate this, but I haven't looked at the multistate switch (I need to). Here's an example from my shutter controls:

These controls have 3 button bars. The top blue bar lets you select a shutter (highlighted in purple) and each button has a "chip" or "pill" that shows the current state of the shutter. Having selected a shutter, you can press a position button in the second bar or an adjustment button in the third. These two button bars are stateless, you just see a ripple when pressing a button.

Now here's the help text and the props:

Display a bar of buttons with any combination of icons, labels and second lines.
Pressing a button sends a message with either the index of the button in the bar (0-based) or
the `value` of the button.
The buttons are configured using the `button` prop, which must be an array of objects with
the following properties (all are optional):

  • `icon`: icon name with 'mdi-' prefix, names can be found at https://materialdesignicons.com
  • `label`: button label,
  • `line2`: second line of text,
  • `line2_color`: color of second line, shows as a "pill",
  • `value`: value to send when button is clicked,
  • `disabled`: whether button is disabled,
  • 'selected_color': color of button when selected,

Buttons can be shown as selected by setting the `value` prop to the index of the selected button
or by passing in an array of booleans, one for each button.

  props: {
    value: { default: null, tip: "index or value of selected button or array of bool per button" },
    buttons: { default: [{label:"button 1"}],
      tip: "array of buttons with icon, label, value, color, selected_color, line2, line2_color, disabled" },
    variant: { type: String, default: 'default', tip: "values: 'default', 'flex'" },
    stretch: { type: Boolean, default: false, tip: "stretch buttons horizontally to fill widget" },

One thing to remember with FlexDash is that every prop can be changed dynamically using msg.<prop_name>. You mentioned having a toggle that has different colors for on vs. off: in principle you can do that by setting not just the value but also the color when you send it a message, except that the toggle is color-less when off, so this is a poor example.

So I believe you can achieve what you're looking for by labeling the buttons with the intended value, displaying the current value in the 2nd line or pill, and the user can change things by pressing the button with the new intended value.

The button bar is currently in my testnodes repo because I have two variants implemented, one using the Vuetify ButtonBar component and one using individual Buttons. I'm not sure providing both variants in a good idea 'cause it makes everyone go 'huh?' and having to choose.

I don't want to rain on your parade, but wouldn't a range slider capture all the states shown in your example ? (does not take away from button use case ofcourse).

I must admit that I use my ui-multistate-switch node myself also quite a lot.

One of the things I like about it - apart from the fact that it supports multiple states (like e.g. On/Off/Manual) - is that it looks visually like one single widget, not as an horizontal array of separate buttons. This vue switch looks a bit like it, but not sure if that is of any help for you...

BTW Although Flexdash is not an official core Node-RED product, it would be nice if there would be a "flexdash" category on Discourse, like already mentioned by someone else...


Yup, that's a good point. I hate sliders as does my wife, they are too fiddly and take too much time and effort to adjust. With the buttons, if I want 70% it's two quick taps (select shutter, hit 70%) almost without looking. With a slider I have to drag and it doesn't end up in the right spot, then correct, etc. On a touch device there's also the whole mess of having the thumb obscure the value while dragging.

Haha, I should have guessed that you're the guilty! :joy:

I believe you get to port the multistate switch to FlexDash :wink:. The 'default' button bar variant looks like one widget, though:


I used the 'flex' variant for the shutters. The flex one can wrap to multiple lines, the default one can't. The corners and spacing of the flex one could be tweaked to provide the seamless look too, just have to decide what to do when they wrap...

I really need to get the "build your own widget" stuff going so everyone can tweak the widgets to their specific liking :laughing:


Sorry, moderators do not have the necessary access to create categories, it needs to be an admin... (i.e. Dave or Nick)


The admins should deliberate over what they'd like to see :laughing:
There's a dashboard category, which I've been told is for the std dashboard only.
There's a node-red-contrib-uibuilder tag, which leaves UI builder posts in multiple categories.
If the Node-RED project's goal is to embrace multiple dashboard solutions (as has been stated) then opening up the dashboard category and providing tags seems like a simple option.

Edit: I just checked and in one's profile notifications settings one can "watch" all posts in a specific category or with a specific tag, so from that point of view both solutions are equivalent.

1 Like

I've just added the tag 'flexdash' to this topic. Does that help?

Means that you can save the link Topics tagged flexdash to access all flexdash tagged topics (provided they are tagged :wink:)