# \[ANNOUNCE\]node-red-contrib-ui-multistate-switch: v1.0.0

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047>\
**Category:** Share Your Nodes\
**Created:** [15 February 2021 21:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047 "2021-02-15T21:42:09Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [17 February 2021 19:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/21 "2021-02-17T19:46:30Z")

</div>

> [@Colin](#):
>
> Are you planning to add the optional message pass through checkbox, and the ability then to show state of input or output, as seen in the core switch node? I find that very useful, and the Show state of Input feature cannot be replicated with external nodes.

Colin,  
Can you please explain a bit more how it works? Not clear to me at the moment after a day at work ..

> [@Paul-Reed](#):
>
> Right hand image has a missing 'i'

Yes I had seen that one, but had not changed it because then the testers of this node would have errors in their flow when I change it. But yeah, better to change it now ...

---

<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:** [17 February 2021 21:29 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/22 "2021-02-17T21:29:07Z")

</div>

@hotnipi and I have now a new version on Github with following changes:

- The typo is fixed in the node id, but this means that you need to remove existing multistate switch nodes (because the old ones won't be recognized anymore)!

- Colin's bug (with the `0` payload) is fixed.

- I is now possible to specify a _ **label** _ on the config screen.

- The styling has been finetuned, a.o. to allow larger series of states:

- The styling can be changed, e.g. rounded corners. There is a section on the readme explaining how to do this.

Since it now contains the basic functionality, we have published version _ **1.0.0** _ on NPM 🍾 🥳 🥂

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

---

<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:** [17 February 2021 21:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/23 "2021-02-17T21:42:28Z")

</div>

> [@BartButenaers](#):
>
> Can you please explain a bit more how it works [Pass through and icon selection]

The node as you have it operates the way a ui-switch does with the Pass Through checkbox selected. If a message comes in it sets the visual state and the message is passed on.  
If Pass Through is _not_ selected then there is the additional dropdown selection labelled `Indicator` which can either be Show State of the Output or Show State of the Input.

With Show State of Output selected clicking the switch causes it to change state and the visual state changes. An incoming message does not change the switch and is not passed through. In fact I can't see the point of this mode as it appears to be exactly the same as Pass Through mode but with no inputs connected.

With Show State of Input selected then clicking the switch sends the message, but does not change the internal or visual state of the switch. The switch state can only be changed by passing in a message (which is not then passed on). An example of the use of this is where the switch is controlling something in the real world, which has a way of indicating back to node-red what its current state is. For example a light controlled by a Sonoff or similar device. The switch can be configured to not pass through, and to show state of the input. Then when the switch is clicked it sends the message to the Sonoff which switches on and sends it state back to node-red, where it is connected into the input of the switch, which changes state. This acts as confirmation that the device has actually changed state, as the visual indication does not change until the acknowledgement comes back. Also if the Sonoff is switched by another route such as pressing the button on it then that gets sent back to node-red so the node-red switch follow the state of the real world.

---

<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:** [17 February 2021 22:01 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/24 "2021-02-17T22:01:41Z")

</div>

Couldn't the 'rounded corners' have been a user option from within the node config?

Most ui nodes control their own appearance from the config screen, such as size, colour, background, icon, label, etc... and don't rely upon additional css templates.

Using a template node to achieve that change means further coding by users, and yet another node in the workspace, and IMO, most users will wish to use rounded corners.

Intended as constructive feedback Bart/Hotnipi 😉

---

<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:** [17 February 2021 22:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/25 "2021-02-17T22:08:00Z")

</div>

> [@Paul-Reed](#):
>
> Couldn't the 'rounded corners' have been a user option from within the node config

None of default nodes provide that option via config. And how much rounded is perfect?

---

<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:** [17 February 2021 22:20 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/26 "2021-02-17T22:20:54Z")

</div>

> [@hotNipi](#):
>
> None of default nodes provide that option via config

But they do control their own individual appearance, and allow multiple instances of those nodes to display differently in the same workspace. Using a template node sets the styling for all multistate nodes, regardless if it's wanted or not.  
IMO most users will use rounded corners, because it looks aesthetically better, but it's not configured like that by default.  
If all ui nodes relied upon template nodes for their appearance, workspaces would become cluttered and over complicated.

> [@hotNipi](#):
>
> And how much rounded is perfect?

The 15px rounding looks a good acceptable option, and would appease most users. But of course if any advanced users wanted something different, then yes, let them override the css.

---

<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:** [17 February 2021 22:30 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/27 "2021-02-17T22:30:43Z")

</div>

If I want to do this, the any predefined rounding does not help me at all.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a12f743d127a20c2c3ef3c996b8628c000131f00.png)

To get individual elements to look differently is advanced stuff anyway. Much more important is to allow them be styled with less and simple rules. The one node can't be that smart to be art proven in all terms.

If this node will allow rounded corners, and you'll need the buttons also be rounded, you still have no more choice but to go with the `ui_template` and modify some defaults.

---

<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:** [17 February 2021 22:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/28 "2021-02-17T22:46:31Z")

</div>

> [@Colin](#):
>
> when the switch is clicked it sends the message to the Sonoff which switches on and sends it state back to node-red, where it is connected into the input of the switch, which changes state. This acts as confirmation that the device has actually changed state

Hi Colin,  
Thanks for the explanation. This use case indeed makes sense.  
But I would like to have something that is a bit self-explaining, even after a hard day at work 😉  
Can't we add something like this:

- A checkbox "_pass input msg to output_", which only does what it says ...
- A dropdown to specify how the visual user interface responds to clicks/touches, with following options:
  - _No input_: does not accept click/touch events
  - _Accept but don't show input_: it accepts click/touch events (and send output msg), but doesn't show this new state
  - _Accept and show input_:it accepts click/touch events (and send output msg), and shows this new state immediately

Then you can combine those two input fields to achieve your _"Show State of Input"_ functionality.

Does this makes sense?

---

<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:** [17 February 2021 22:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/29 "2021-02-17T22:51:18Z")

</div>

> [@BartButenaers](#):
>
> _Accept but don't show input_ : it accepts click/touch events (and send output msg), but doesn't show this new state

This is as bad as it can be. If you controlling some device and the processing takes time, then how can you be sure that processing has been started? Was my click successful? Can I click again?  
The user action must always produce at least some kind of immediate feedback.

---

<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:** [17 February 2021 22:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/30 "2021-02-17T22:52:32Z")

</div>

> [@hotNipi](#):
>
> The one node can't be that smart to be art proven in all terms.

No, but maybe two options - rounded or not rounded will satisfy 95% of users.

I'll leave the discussion here, because this is just my personal opinion, but instead of using 2 nodes to achieve this, I will probably use the html version in a single node - [Feature Request - Off - Auto - On Toggle - #13 by hotNipi](https://discourse.nodered.org/t/feature-request-off-auto-on-toggle/40837/13)

---

<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:** [17 February 2021 22:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/31 "2021-02-17T22:54:19Z")

</div>

> [@hotNipi](#):
>
> Was my click successful?

So true ... No objections ...

---

<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:** [17 February 2021 22:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/32 "2021-02-17T22:56:30Z")

</div>

15px does not satisfy all the situations  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a66d06fbc5fd242c6a9a3d1e6a07767f4161b1b.png)

---

<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:** [17 February 2021 22:58 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/33 "2021-02-17T22:58:51Z")

</div>

Just an idea. Can't we have a "rounding" percentage input field? Then users can set it to 0% if they don't want rounding, or if they don't want us to apply it (e.g. when they want to do it via css on their own)?

---

<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:** [17 February 2021 22:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/34 "2021-02-17T22:59:19Z")

</div>

> [@Paul-Reed](#):
>
> I'll leave the discussion here

I know I said... but

> [@hotNipi](#):
>
> 15px does not satisfy all the situations

Is an 11 way switch going to be a popular choice?

---

<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:** [17 February 2021 23:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/35 "2021-02-17T23:05:08Z")

</div>

> [@Paul-Reed](#):
>
> Is an 11 way switch going to be a popular choice?

Most probably not. But popularity of choices should not drive the deign flaws.

> [@BartButenaers](#):
>
> Can't we have a "rounding" percentage input field?

Not much to do with percentage. It works only for perfectly square element. for rectangular stuff youll need some solid value.

---

<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:** [17 February 2021 23:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/36 "2021-02-17T23:16:08Z")

</div>

> [@hotNipi](#):
>
> Was my click successful?

Can we introduce some kind of button-clicked effect (which can be activated optionally), to indicate that somebody has clicked a div element? Then we don't need to switch immediately to the new state, but we "temporarily" show that a state has been clicked...  
E.g. like the _ripple button effect_ (see [here](https://freefrontend.com/css-button-click-effects/)), or some other fancy css effect which I'm currently still not aware of 😉

---

<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:** [18 February 2021 10:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/37 "2021-02-18T10:06:46Z")

</div>

A post was merged into an existing topic: [Feature Request - Off - Auto - On Toggle](https://discourse.nodered.org/t/feature-request-off-auto-on-toggle/40837/39)

---

<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:** [18 February 2021 09:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/38 "2021-02-18T09:54:14Z")

</div>

> [@hotNipi](#):
>
> This is as bad as it can be. If you controlling some device and the processing takes time, then how can you be sure that processing has been started? Was my click successful? Can I click again?  
> The user action must always produce at least some kind of immediate feedback.

In the mode in which this is used the current state of the process is fed back in to the input so you know whether the process has started because the switch will change. It is not appropriate for all use cases, but where it is it is just what is required.  
Here is a simple flow demonstrating the way it is used. The delay and the link nodes simulate going out the process and back in again.

---

<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:** [18 February 2021 09:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/39 "2021-02-18T09:56:15Z")

</div>

> [@BartButenaers](#):
>
> I would like to have something that is a bit self-explaining,

I am torn between whether it should use the same words as the ui\_switch node uses for the same modes of operation, or whether the wording could be improved.  
In the meantime I has posted a question relating to how the ui\_switch works as it seems a bit odd to me. [Switch node - what is point of Show State of Output option?](https://discourse.nodered.org/t/switch-node-what-is-point-of-show-state-of-output-option/41225)

---

<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:** [18 February 2021 15:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047/40 "2021-02-18T15:31:21Z")

</div>

Colin,

The tricky part about having the State fed back is the following example.

Say I have a pump... it can be ON/OFF by operator selection (let's call that manual mode)  
Or it can be On/Off by control decisions (lets' call that auto mode).

So, if I were to have Off - Auto - On options on my multi-switch node (these are very common options in automation and control for controlling devices), the status would be on/off .. even when we select a command of auto ... it' status would be on/off... I display a red/green LED for on/off status next to the 3 option toggle switch.

All of this is easy to do with a simple on/off command/status structure... It's more complicated when you are using a 3 options switch to handle a combination of command/status and mode selection.

I always find I have to be very specific about startup modes and so forth when my flows start to set these things properly... Because my equipment as a whole has many phases/modes of operation, I am exploring saving everything to retentive variables to handle a power issue while in the middle of an operation that is not a default 'startup mode'. that way when I startup.. I can recover properly and everything is indicating properly.

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047.md?page=1)

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-multistate-switch-v1-0-0/41047.md?page=3)