How do I go about setting up a toggle button? I realise switches toggle, but they get difficult to tell apart when there are any more than 1 next to each other. I want to make a button that toggles between on/off states and changes colour/text/icon for each state. I have tried the following: Dashb…

[image] Darren: It seems the sort of thing that should be simple, Seems very simple to me e.g. [{"id":"8991bf63.f4d578","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"toggle_me","pt":"flow","to":"paylo…

It seems the sort of thing that should be simple, but I've only found convoluted flows or flows that don't work. For a button that toggles and shows it's toggled.

Take a look to this thread, maybe you gain some ideas from it. [image] Fancy buttons updating Dashboard Button with states. The Button Button is dummy. It has no knowledge about what the world is, but it happily takes in commands to be "red" or "blue" and can show what …

Thank you very much for solving my problem - yours works perfectly, E1cid, and is simple and easy to follow and configure. I have noticed the same bug present with other node-red toggle buttons sometimes occurs: if I switch FALSE and TRUE around on the change nodes, then the button becomes unrespon…

I noticed that perhaps the bug with the button becoming unresponsive on switching TRUE/FALSE around might be due to outdated cached CSS in the web browser for the nodered webpage - a SHIFT+Reload of the dashboard page, thus forcing a cache clear, got it working again for me. Again, many thanks to E…

I improved the flow to allow more easily configurable output payloads as well as debug control from the nodered backend: [ { "id": "2aab0a5cfbf4b93a", "type": "change", "z": "3b105ee9362f5e1f", "name": "Switch ON", "rules": [ { …

Just tried and it has some slight problems. Maybe it's only for me but you can try. If you have more than 1 tab for dashboard and if you switch the tabs and then if you come back to the tab with the button - icons and the label doesn't change any more. It still fires correct payload but the button d…

I wonder if that's that CSS refresh situation? Switching tabs changes CSS, but does not refresh page. Full reload makes it work again. Seems like an underlying node-red issue?

[image] hotNipi: And the button of course can't reflect the real world situation cos it made to drive itself. But that's may not be case if it is not requirement. Yes it can if you feed the real world value into the flow after the button see example. The issue you have highlighted seems to …

[image] E1cid: The issue you have highlighted seems to be a bug with dashboard button It can't happen if: button is driven by real world situation and ui_control node is involved to refresh button states in case of tab changes / page reload / socket connects Nothing related to CSS for sure. …

[image] hotNipi: It can't happen if: button is driven by real world situation and ui_control node is involved to refresh button states in case of tab changes / page reload / socket connects Nothing related to CSS for sure. It also can't happen when driven by itself and you use ui-control to…

Node-RED

Node-RED Forum

How to set up a toggle button?

General

hotNipi 28 July 2023 10:41 3

Take a look to this thread, maybe you gain some ideas from it.

Topic		Replies	Views
Dashboard 2 - is there a simple way to configure button so that it toggles Dashboard	13	616	24 September 2024
CSS Styling ui-button Widgets on Dashboard 2 Share Your Projects dashboard-2	18	2977	6 December 2024
Examples of Colour change button and switch FAQs	32	36785	19 November 2020
Feature Request - Off - Auto - On Toggle Dashboard	54	4072	19 February 2021
Button State node - is something similar available for Dashboard 2? Dashboard dashboard-2	32	1243	15 September 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

How to set up a toggle button?

Related topics