Dashboard2 blinking Button

General
1

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

2

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.

3

@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?

4

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.

5

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

[
    {
        "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"
        }
    }
]
6

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
image481Ă—187 10.9 KB

[{"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.

1 Like
7

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
muehle211Ă—119 3.87 KB

muehle2
muehle2656Ă—657 34.1 KB

8

@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:

9

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

Can you please clarify?

1 Like
10

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

11

muehle3

12

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