# Button State node - is something similar available for Dashboard 2?
**URL:** https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [13 September 2024 08:57 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933 "2024-09-13T08:57:32Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [13 September 2024 08:57 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/1 "2024-09-13T08:57:32Z")
Hi all,
I love to use the buttonstate node.
Now reworking some older projects this question came up: Is there a similar node available for the dashboard2?
Kind regards
Alexander
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [13 September 2024 09:12 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/2 "2024-09-13T09:12:31Z")
> [@alexander77](#):
>
> I love to use the buttonstate node.
What have you installed that provides this node, I do not recognise the name.
---
### Author:  [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [13 September 2024 09:17 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/3 "2024-09-13T09:17:14Z")
> **[node-red-contrib-ui-button\_state](https://flows.nodered.org/node/node-red-contrib-ui-button_state)**
>
> Node-RED UI widget that allows selection of a state with a group of buttons
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [13 September 2024 14:35 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/4 "2024-09-13T14:35:33Z")
I think the Button Group may do something like what you want, though exactly what the node you linked to does is not clear to me.
---
### Author:  [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [13 September 2024 14:57 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/5 "2024-09-13T14:57:02Z")
The idea behind this is the following:
a button can indicate what action is done when pressing like on or off
it can also display an error state, which means, on or off are not available
it can also display 'change in progress' indicating, that a motor is spinning up but not yet on full speed or such things.
The color of a button indicates a feedback.
I've seen a question about a toggle function here on the forum. I loaded the code example. I think, this can be expandet to my need, allows even more options for a button.
But i'm still open for hints!
---
### Author:  [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [13 September 2024 19:16 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/6 "2024-09-13T19:16:01Z")
I agree, and I think any update to original Dashboard should provide a greater level of functionality.
I think a good button node should be powerful but simple. To achieve this it would have modes:
- Simple on-off switch (default mode)
- Simple on-off momentary button
- Multi-state switch
The simple on-off switch shows its state visually, with a sliding circle where left = off (and the colour is grey) and right = on (and the colour is highlighted e.g. green). It should also be possible to configure to replace the sliding circle (the switch visualisation) with a simple icon for on (with colour setting) and a simple icon for off (with colour setting).
Dashboard 2.0 does this. Although I have some criticisms because there's no validation on the icon field. This means if you make a mistake, it will default to a switch and you will have no understanding of why the icon isn't working.
However Dashboard 2.0 could very easily implement a multi-state switch by simply allowing you to create any number of your own states, and assigning icons and colours to those states.
As well, Dashboard 2.0 could provide the option for "text" by each icon in this case. Then it can handle multiple error states.
I don't know why this hasn't been considered but it would definitely be a great improvement.
When I build systems I tend to support multiple states. For example I have a water valve controller built from an Arduino. It has multiple local buttons for each water valve, and each one has an LED indicator in the button. When you press the button, it toggles the state of the water supply. But each toggle takes a certain amount of time to open or close the valve. So the LED shows the state of the valve normally, but also when you press the button, the LED flashes for 3 seconds to indicate that the valve is opening or closing, this provides feedback to the user so he knows the button press was correctly registered. This is really important when controlling certain devices which could be sensitive to change such as water supply for a whole building!
Personally I wish that the original Dashboard had been developed more actively to start to introduce multi-state buttons, button groups, etc. and so I'm glad to see Dashboard 2.0, although I have found the button node in Dashboard 2.0 is not perfect, the spacing is not logical on UI, and it lacks more advanced features like I've discussed above.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 September 2024 19:50 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/7 "2024-09-13T19:50:44Z")
Button has four states. Normal, Hover, Down and Disabled. That's it.
To combine the button (event trigger) with the physical state of some kind of equipment there's noting special for button to have. It stands on logic you create or have and as every HTML element, the button can be presented with different colors and shapes and icons and.... the sky is limit.
How button does look like (represents different state of something) is matter of CSS. And that CSS can be applied and changed as you need. That all is built into dashboard 1 and 2. A lot of examples can be found how to do it.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [13 September 2024 20:16 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/8 "2024-09-13T20:16:50Z")
> [@hazymat](#):
>
> When you press the button, it toggles the state of the water supply. But each toggle takes a certain amount of time to open or close the valve. So the LED shows the state of the valve normally, but also when you press the button, the LED flashes for 3 seconds to indicate that the valve is opening or closing, this provides feedback to the user so he knows the button press was correctly registered. This is really important when controlling certain devices which could be sensitive to change such as water supply for a whole building!
This is an interesting concept and not one I'd considered. I'm quite interested because I'm thinking about button and switch designs at the moment.
A button component that has a built-in option for a temporary intermediate step which is either time-based as in your example or event driven, eg. after a click, it stays in the intermediate state until some external event moves it to the final state.
I suppose you would need to allow for a similar warm-down transition as well?
Such a button could be visualised either as a traditional button or as a "switch" I think. With the switch visualisation being a horizontal or vertical pill shape as you describe.
Are there other features you would want in such a button?
And note that I would keep this distinct as a button and not a multi-way switch which is something quite different. I think that would need a different definition.
I've just been building a web component that duplicates browser console log output to the web page. But an enhanced button might be an interesting next component to work on.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 September 2024 20:37 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/9 "2024-09-13T20:37:08Z")
> [@TotallyInformation](#):
>
> built-in option for a temporary intermediate step which is either time-based as in your example or event driven
Using time based intermediate states with physical equipment may end with dead people. Really. You don't know how and where it will be used and even if you make red and bold warning, it is not enough. Buttons which represent physical state should never do anything else but being clickable when allowed and show the provided state. And for safety they also should be immedialtely disabled when clicked and wait for activation with new incoming state.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [13 September 2024 20:41 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/10 "2024-09-13T20:41:26Z")
Good points. Though not all physical systems will actually have an electronic feedback. Such as the pump startup mentioned earlier. So there are valid times to use such a feature. It could also apply in a non-physical setup too where you might want a visible delay for some timing reason.
So the option should be available on the component.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 September 2024 20:44 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/11 "2024-09-13T20:44:29Z")
If that somebody has safe system where to use such things, let them create what they want, but such things shold be avoided to become standards.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [13 September 2024 21:11 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/12 "2024-09-13T21:11:32Z")
I did something similar when I had my flexdash dashboard, where the button status only changed when feedback had been received from the device.
It worked consistently well, but I now need to re-create in DB2.
> [@sparkler FlexDash alpha release - round 2](https://discourse.nodered.org/t/flexdash-alpha-release-round-2/67783/24):
>
> I'm developing some logic for controlling garden lighting, which so far is working OK. The buttons toggle their state, and the button colour changes only occur when feedback from the hardware confirms it's actually changed it's state (that's why there is a slight delay). The only downside is that the buttons are not the same width because of their wordcount. Anyone any ideas how to create buttons of the same width. Also... noticed that the panel which contains the buttons reacts to mouseover,…
---
### Author:  [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [13 September 2024 21:39 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/13 "2024-09-13T21:39:54Z")
I do a lot of Crestron / Extron programming. These are systems in the Audio/Video world, controllers and touchpanels that offer a gui to operate the system.
The most required functions are: (standard options, available on all systems)
- text and text-color
- button color
- icon
- states - which is a combination of the above
very helpful but not very often used function
- visibility
Lets assume a security center, one can route a video stream to the main display. There might be situations, where a change of the routing must be inhibited. In these cases i use the visibility option, the button disappears. When the situation allows new routings, the button will reappear.
Feedbacks:
The visual implementation is the states-option.
Timed feedbacks: a mess. Let's assume the runtime of blinds. Shure, one can take a stopwatch and use the time he measured. But will that time be correct after 2 years, will it be the same in summer and in winter?
And what happens after a power outage? Will a timed feedback be adequate?
In almost all cases i use a true feedback or no feedback.
If an action triggert by pressing a button happens within one or two seconds, no special feedback is required.
Lets assume you turn on a video-projector. Not a new one with a laser-lightsource, but one with a bulb. It takes about 30 seconds to reach full brightness. And after turning it off, you need to wait 2 to 3 minutes before you can turn it on again. These situations need a correct feedback like warming or cooling. Usually you need to parse the feedback from the projector.
A special goodie is a transparency option. Lets assume you have some transport buttons inserted in a video. After 10 seconds or so you want them to disappear. Just turning them off is flintstone manner, fading them out is state of the art.
---
### Author:  [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [13 September 2024 21:49 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/14 "2024-09-13T21:49:18Z")
FYI, completely agree with everyone that timed states are a bad idea as a general rule.
My example was for a hardware valve controller and the flashing LED (for 2 seconds) was only for aesthetic / fun purposes and to act as a reminder to the user that it’s not instant. And also as additional button feedback. In actual fact it is possible to interrupt closing the valve during its closing process, and the valve just starts opening again.
There are times when timers are useful as button states, but agree not for control of physical devices. The only scenario they are acceptable should be … for timer displays! (Eg flash for two seconds to tell the user that two seconds have elapsed.)
By the way, to @hotNipi re my post above. I was really referring to switch nodes, with sliding on-off switches. Not buttons. I think other people use the word “button” in a very HTML/CSS way. For me a button is anything you press. But in NodeRed I know there is a difference between button and switch. Sorry I didn’t make it clear I was referring to button.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 September 2024 22:03 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/15 "2024-09-13T22:03:51Z")
Vuetfy provides pretty fancy way to make safe button , if anybody interested
```auto
[{"id":"2e8dd42000976284","type":"ui-template","z":"fcc7b2a2fdda30d4","group":"0c6ef72c4538c515","page":"","ui":"","name":"button waits input to activate after click","order":1,"width":0,"height":0,"head":"","format":"\n \n GARDEN LIGHTS\n \n\n\n\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":310,"y":260,"wires":[["7c9d5f81fe1c2292"]]},{"id":"7c9d5f81fe1c2292","type":"trigger","z":"fcc7b2a2fdda30d4","name":"pretending that switching takes time","op1":"","op2":"true","op1type":"nul","op2type":"bool","duration":"2","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":720,"y":260,"wires":[["2e8dd42000976284"]]},{"id":"c0d265098e4ad9cb","type":"comment","z":"fcc7b2a2fdda30d4","name":"actual implementation should never loop back this way","info":"","x":540,"y":320,"wires":[]},{"id":"0c6ef72c4538c515","type":"ui-group","name":"Group Name","page":"4be3167f72364b22","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"4be3167f72364b22","type":"ui-page","name":"test-page","ui":"f6017d9b9437205e","path":"/test-page","icon":"home","layout":"grid","theme":"fbca0ce017dca174","order":1,"className":"","visible":"true","disabled":"false"},{"id":"f6017d9b9437205e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"fbca0ce017dca174","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
```
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [13 September 2024 23:25 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/16 "2024-09-13T23:25:35Z")
> [@alexander77](#):
>
> A special goodie is a transparency option. Lets assume you have some transport buttons inserted in a video. After 10 seconds or so you want them to disappear. Just turning them off is flintstone manner, fading them out is state of the art.
That's just CSS. Transparency/visibility is standard, nothing really special need for that.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [14 September 2024 07:39 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/17 "2024-09-14T07:39:29Z")
> [@TotallyInformation](#):
>
> A button component that has a built-in option for a temporary intermediate step which is either time-based as in your example or event driven, eg. after a click, it stays in the intermediate state until some external event moves it to the final state.
The current ui-switch does go some way down this road with the 'Show State of Input` mode, which is available when Passthrough is disabled. In this mode clicking the switch sends the message and shows a waiting icon, waiting for a message to be received telling it what to show.
---
### Author:  [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [14 September 2024 09:21 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/18 "2024-09-14T09:21:56Z")
This could be a first step
```auto
[
{
"id": "cdc19dcf50907703",
"type": "ui-button",
"z": "99366da2301717ce",
"group": "d2ada84cc7beaf41",
"name": "",
"label": "btn1",
"order": 5,
"width": "1",
"height": "1",
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"buttonColor": "green",
"textColor": "white",
"iconColor": "",
"x": 910,
"y": 380,
"wires": [
[
"6dc00fa6b87a959c"
]
]
},
{
"id": "d363987354b7c11e",
"type": "debug",
"z": "99366da2301717ce",
"name": "debug 2",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 880,
"y": 340,
"wires": []
},
{
"id": "4b007b52ceaa2b7d",
"type": "inject",
"z": "99366da2301717ce",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "btn",
"payload": "grey",
"payloadType": "str",
"x": 480,
"y": 320,
"wires": [
[
"8da43418d62cac46"
]
]
},
{
"id": "cc30c8ae72af2e01",
"type": "inject",
"z": "99366da2301717ce",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "btn",
"payload": "green",
"payloadType": "str",
"x": 480,
"y": 360,
"wires": [
[
"8da43418d62cac46"
]
]
},
{
"id": "8da43418d62cac46",
"type": "function",
"z": "99366da2301717ce",
"name": "btn setup",
"func": "var top = msg.topic;\nvar val = msg.payload;\nvar msg1 = {};\nvar ui_update = {};\nvar bc = context.get(\"bc\") || \"grey\";\nvar tc = context.get(\"tc\") || \"white\";\nvar lb = context.get(\"lb\") || \"btn1\";\n\nif (top === \"btn\") bc = val;\nif (top === \"txt\") tc = val;\nif (top === \"lab\") lb = val;\n\ncontext.set(\"bc\",bc);\ncontext.set(\"tc\",tc);\ncontext.set(\"lb\",lb);\n\nmsg1 = {\n payload: \"\",\n ui_update: {\n buttonColor: bc,\n textColor: tc,\n label: lb,\n },\n}\n\nreturn msg1;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 700,
"y": 380,
"wires": [
[
"cdc19dcf50907703",
"d363987354b7c11e"
]
]
},
{
"id": "e66a5e736d15ab21",
"type": "inject",
"z": "99366da2301717ce",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "lab",
"payload": "Btn1",
"payloadType": "str",
"x": 480,
"y": 400,
"wires": [
[
"8da43418d62cac46"
]
]
},
{
"id": "7b00ba7e3a4fa7f4",
"type": "inject",
"z": "99366da2301717ce",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "lab",
"payload": "Btn2",
"payloadType": "str",
"x": 480,
"y": 440,
"wires": [
[
"8da43418d62cac46"
]
]
},
{
"id": "d2ada84cc7beaf41",
"type": "ui-group",
"name": "g1",
"page": "a753d3c3ec5c9991",
"width": "6",
"height": "1",
"order": -1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "a753d3c3ec5c9991",
"type": "ui-page",
"name": "p1",
"ui": "fdd5060deaa38d04",
"path": "/page1",
"icon": "home",
"layout": "grid",
"theme": "ea314d4cabcf2177",
"order": -1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "fdd5060deaa38d04",
"type": "ui-base",
"name": "UI Name",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "default",
"titleBarStyle": "default"
},
{
"id": "ea314d4cabcf2177",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
}
]
```
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 September 2024 11:13 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/19 "2024-09-14T11:13:02Z")
> [@hazymat](#):
>
> I don't know why this hasn't been considered
We've not had anyone requesting it. Given that you are. [Feature Requests](https://github.com/FlowFuse/node-red-dashboard/issues/new/choose) are most appreciated.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [14 September 2024 14:42 UTC](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933/20 "2024-09-14T14:42:28Z")
> [@Colin](#):
>
> > [@TotallyInformation](#):
> >
> > A button component that has a built-in option for a temporary intermediate step which is either time-based as in your example or event driven, eg. after a click, it stays in the intermediate state until some external event moves it to the final state.
>
> The current ui-switch does go some way down this road with the 'Show State of Input` mode, which is available when Passthrough is disabled. In this mode clicking the switch sends the message and shows a waiting icon, waiting for a message to be received telling it what to show.
I've not had a lot of time today but I have knocked up a proof-of-concept `multi-way-swich` web component if anyone is interested. Just let me know, I'll share in a different thread.
Doesn't look very pretty at the moment but I've a list of improvements to do when I get time.
This shows 3 switches, each using a different mode: button, slider, knob.
[Next page](https://discourse.nodered.org/t/button-state-node-is-something-similar-available-for-dashboard-2/90933.md?page=2)