# Dashboard2 blinking Button

**URL:** <https://discourse.nodered.org/t/dashboard2-blinking-button/93576>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [29 November 2024 15:44 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576 "2024-11-29T15:44:34Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)\
**Post date:** [29 November 2024 15:44 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/1 "2024-11-29T15:44:34Z")

</div>

Hello,  
Can anyone help me?

I would like to create a button (Button Group) in the dashboard:

Start (value: false, color: green).  
Stop (value: true, color: red).  
The button should be set to Start and be green by default.  
When I press Stop, the button should flash red until the global context "Stilstand" is set to true. After that, the switch should light up red permanently and value true is send.

The same should happen in reverse order when I press Start. Only that "Stillstand" then is false.

The time to stand still or full speed varies, and cannot be controlled by time, so another flow monitors the RPM and returns the result as true and false.  
THX  
Edstobi

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 November 2024 15:51 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/2 "2024-11-29T15:51:08Z")

</div>

Easy enough to do with some front-end code. You could brute-force it using just JavaScript but a more subtle way would be to use CSS animated transitions. I don't use D2 really though so I can't help with that I'm afraid.

---

<div class="post-metadata">

**Author:** ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)\
**Post date:** [30 November 2024 21:02 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/3 "2024-11-30T21:02:56Z")

</div>

@TotallyInformation  
Hello there! Since it seems no one has a more suitable idea than you, I can tell you how I would solve it with CSS. I don't have any knowledge of that. I think that if I implement it once in the old dashboard, I can then transfer it to dashboard 2. Unless CSS works differently in the new version, which I'll find out then.

@ everyone else: have you seen a similar implementation somewhere that I might be able to adopt and modify for my purposes?

---

<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:** [30 November 2024 21:18 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/4 "2024-11-30T21:18:29Z")

</div>

Fancy. I can blink everything on world wide web. But that doesn't count cos I don't have single piece of the art you are about to create.

Share a bit and then there is at least something to work on. Otherwise it's kind of asking the code factory work for you for free.

---

<div class="post-metadata">

**Author:** ![alexander77](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@alexander77](https://discourse.nodered.org/u/alexander77)\
**Post date:** [30 November 2024 21:19 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/5 "2024-11-30T21:19:56Z")

</div>

Hi,  
i had the same problen a time ago, tried some things. I do not have a complete solution, but something to start with.

```auto
[
    {
        "id": "cdc19dcf50907703",
        "type": "ui-button",
        "z": "99366da2301717ce",
        "group": "d2ada84cc7beaf41",
        "name": "",
        "label": "btn1",
        "order": 1,
        "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": 630,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "d363987354b7c11e",
        "type": "debug",
        "z": "99366da2301717ce",
        "name": "debug 2",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 640,
        "y": 320,
        "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": 240,
        "y": 300,
        "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": 240,
        "y": 340,
        "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\") || \"blue\"; // buttonColor\nvar tc = context.get(\"tc\") || \"white\"; // textColor\nvar lb = context.get(\"lb\") || \"btn1\"; // button label\nvar bcblink = context.get(\"bcblink\") || \"yellow\"; // buttonColor in blink state\nvar tcblink = context.get(\"tcblink\") || \"blue\" // textCoor in blink state\nvar bs = context.get(\"blinkstate\") || 0; // blinkstate\nvar blinkenable = context.get(\"blinkenable\") || 0; // enables or disables blinking\n\nif (top === \"sbon\") { // slow blinking\n bs = 1;\n context.set(\"blinkstate\",bs);\n}\nelse if (top === \"sboff\") {\n bs = 0;\n context.set(\"blinkstate\",bs);\n}\nelse if (top === \"blinkenable\") {\n blinkenable = val;\n context.set (\"blinkenable\",blinkenable);\n}\nelse if (top === \"btn\") {\n bc = val;\n context.set(\"bc\",bc);\n}\nelse if (top === \"btn_blink\") {\n bcblink = val;\n context.set(\"bcblink\",bcblink);\n}\nelse if (top === \"txt\") {\n tc = val;\n context.set(\"tc\",tc);\n}\nelse if (top === \"txt_blink\") {\n tcblink = val;\n context.set(\"tcblink\",tcblink);\n}\nelse if (top === \"lab\") {\n lb = val;\n context.set(\"lb\",lb);\n}\nelse if (top === \"init\") {\n bc = \"blue\"; // button color\n tc = \"white\"; // text color\n lb = \"Button\"; // label\n bcblink = \"yellow\"; // button blink color\n tcblink = \"blue\"; // text blink color\n context.set(\"bc\",bc);\n context.set(\"tc\",tc);\n context.set(\"lb\",lb);\n context.set(\"bcblink\",bcblink);\n context.set(\"tcblink\",tcblink);\n context.set (\"blinkenable\",0);\n}\n\nif (blinkenable === 0) {\n msg1 = {\n payload: \"\",\n ui_update: {\n buttonColor: bc,\n textColor: tc,\n label: lb,\n },\n }\n}\nif (blinkenable === 1) {\n if (bs === 0) {\n msg1 = {\n payload: \"\",\n ui_update: {\n buttonColor: bc,\n textColor: tc,\n label: lb,\n },\n }\n }\n else {\n msg1 = {\n payload: \"\",\n ui_update: {\n buttonColor: bcblink,\n textColor: tcblink,\n label: lb,\n },\n }\n }\n}\nreturn msg1;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 360,
        "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": 240,
        "y": 380,
        "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": 240,
        "y": 420,
        "wires": [
            [
                "8da43418d62cac46"
            ]
        ]
    },
    {
        "id": "2f7f32273dd5d448",
        "type": "inject",
        "z": "99366da2301717ce",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": "0.5",
        "topic": "init",
        "payload": "",
        "payloadType": "str",
        "x": 230,
        "y": 260,
        "wires": [
            [
                "8da43418d62cac46"
            ]
        ]
    },
    {
        "id": "0adee22ae0d1364f",
        "type": "inject",
        "z": "99366da2301717ce",
        "name": "slow blink clock",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "0.8",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 270,
        "y": 120,
        "wires": [
            [
                "24036f7c90f3b35e"
            ]
        ]
    },
    {
        "id": "24036f7c90f3b35e",
        "type": "function",
        "z": "99366da2301717ce",
        "name": "sb msg former",
        "func": "var state = context.get(\"state\") || 0;\nif (state === 0) {\n state = 1;\n msg.topic = \"sbon\"; // slowblink on\n}\nelse {\n state = 0;\n msg.topic = \"sboff\"; // slowblink off\n}\ncontext.set(\"state\",state);\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 120,
        "wires": [
            [
                "90ebc57dcf8defb6",
                "13770ede68d700c5"
            ]
        ]
    },
    {
        "id": "90ebc57dcf8defb6",
        "type": "debug",
        "z": "99366da2301717ce",
        "name": "debug 2481",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 690,
        "y": 120,
        "wires": []
    },
    {
        "id": "a49affeb1b4f26ea",
        "type": "inject",
        "z": "99366da2301717ce",
        "name": "sb on",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "blinkenable",
        "payload": "1",
        "payloadType": "num",
        "x": 230,
        "y": 460,
        "wires": [
            [
                "8da43418d62cac46"
            ]
        ]
    },
    {
        "id": "1622e504778276e5",
        "type": "inject",
        "z": "99366da2301717ce",
        "name": "sb off",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "blinkenable",
        "payload": "0",
        "payloadType": "num",
        "x": 230,
        "y": 500,
        "wires": [
            [
                "8da43418d62cac46"
            ]
        ]
    },
    {
        "id": "13770ede68d700c5",
        "type": "link out",
        "z": "99366da2301717ce",
        "name": "tx slowblink",
        "mode": "link",
        "links": [
            "141c624a70b7b4c0"
        ],
        "x": 585,
        "y": 160,
        "wires": []
    },
    {
        "id": "141c624a70b7b4c0",
        "type": "link in",
        "z": "99366da2301717ce",
        "name": "rx slowblink",
        "links": [
            "13770ede68d700c5"
        ],
        "x": 265,
        "y": 220,
        "wires": [
            [
                "8da43418d62cac46"
            ]
        ]
    },
    {
        "id": "2d97df2ef256c7ae",
        "type": "comment",
        "z": "99366da2301717ce",
        "name": "available commands",
        "info": " **funcktion**  **context**  **payload** \ninit init --\nbutton color btn <color>\nbutton blink_color btn_blink <color>\ntext color txt <color>\ntext blink_color txt_blink <color>\nbutton label lbl <string> \nenable blinking blinkenable 1\ndisable blinking blinkenable 0\nblinkstate on sbon --\nblinkstate off sboff --\n\ncurrently only slow blinking is realized, fast \nblinking may be added.\n\ncustomize the button:\nadjust lines 46 - 50 to your needs",
        "x": 490,
        "y": 420,
        "wires": []
    },
    {
        "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": 2,
        "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"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 November 2024 22:22 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/6 "2024-11-30T22:22:42Z")

</div>

This might give you some hints. You will have to ensure that msg.ui\_update `{"class": "blink"}` and `{"class": noblink}` are fed into the button group at the appropriate times, here they are only by manual inject.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7da4b1e40611deecdf12798532ab10d449b125d8.png)

```auto
[{"id":"36b6f0cfeb95ee51","type":"ui-button-group","z":"615f240b1a2ddd25","name":"","group":"77a183e6f60a2085","order":0,"width":6,"height":1,"label":"button group","className":"","rounded":true,"useThemeColors":false,"passthru":false,"options":[{"label":"start","icon":"","value":"false","valueType":"bool","color":"#009933"},{"label":"stop","icon":"","value":"true","valueType":"bool","color":"#ff0000"}],"topic":"topic","topicType":"msg","x":290,"y":180,"wires":[[]]},{"id":"30fbe4dbde5a51e7","type":"ui-template","z":"615f240b1a2ddd25","group":"","page":"e81fa6389c042304","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":".blink .v-btn--active {\nanimation: blink-animation 1s steps(5, start) infinite;\n}\n\n@keyframes blink-animation {\nto {\n visibility: hidden;\n}\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":290,"y":240,"wires":[[]]},{"id":"91fc19f14391b66a","type":"inject","z":"615f240b1a2ddd25","name":"blink","props":[{"p":"ui_update","v":"{\"class\": \"blink\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":130,"y":160,"wires":[["36b6f0cfeb95ee51"]]},{"id":"651acd7186e7aa29","type":"inject","z":"615f240b1a2ddd25","name":"noblink","props":[{"p":"ui_update","v":"{\"class\": \"noblink\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":130,"y":200,"wires":[["36b6f0cfeb95ee51"]]},{"id":"77a183e6f60a2085","type":"ui-group","name":"Simple Data","page":"e81fa6389c042304","width":"3","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"e81fa6389c042304","type":"ui-page","name":"Demo","ui":"d45641ed6d39fea1","path":"/demo","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"2px","density":"default"}}]

```

Note: this demo seems to work for me but I admit I'm rather surprised that `noblink` works since there is no CSS for it. I expected msg.ui\_update classes to be appended not replaced.

---

<div class="post-metadata">

**Author:** ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)\
**Post date:** [30 November 2024 22:27 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/7 "2024-11-30T22:27:52Z")

</div>

> [@edstobi](#):
>

Hello, as described above, I want to make a process more visible.  
Starting the mill takes some time, during which the switch button should blink green as a sign that the start command has been accepted. It blinks until a global context signals the end of the start-up phase. Then you can work with the mill. To stop, it's the reverse process. Stop blinks until the mill comes to a standstill, then it permanently shows red.  
I don't have a photo, but the two old illuminated push buttons from the PLC used to light up/blink to indicate the state of the machine. I want to recreate this.

 ![muehle](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dda64b2f9ea5d3f07b082d2f76b478b00acb24a5.jpeg)  
 ![muehle2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b37c1237d68c8874de07f3924fd1c8dbbedae09.jpeg)

---

<div class="post-metadata">

**Author:** ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)\
**Post date:** [30 November 2024 22:31 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/8 "2024-11-30T22:31:41Z")

</div>

@alexander77  
Thank you very much for your effort. I've already managed to achieve that, but I wanted to accomplish it with a button group, as I plan to add another stage later.  
I was hoping that one could also make changes to the button group using ui\_update:

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 November 2024 22:31 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/9 "2024-11-30T22:31:45Z")

</div>

It is not clear to me if you want to do this with a switch, a button or a button group.

> [@edstobi](#):
>
> I would like to create a button (Button Group) in the dashboard:

> [@edstobi](#):
>
> the switch button should blink green

Can you please clarify?

---

<div class="post-metadata">

**Author:** ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)\
**Post date:** [30 November 2024 22:41 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/10 "2024-11-30T22:41:36Z")

</div>

@jbudd  
SUPER!! That works very well, so I can continue working. Thank you very much!

---

<div class="post-metadata">

**Author:** ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)\
**Post date:** [30 November 2024 22:45 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/11 "2024-11-30T22:45:13Z")

</div>

> [@edstobi](#):
>
> with a Button Group. Exactly as in your example

![muehle3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/02aaf52df5e7a465dd7fee10a7803b542ccd023e.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 December 2024 22:45 UTC](https://discourse.nodered.org/t/dashboard2-blinking-button/93576/12 "2024-12-14T22:45:29Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.