# Simple button / circle / square with value & colour change on dashboard

**URL:** <https://discourse.nodered.org/t/simple-button-circle-square-with-value-colour-change-on-dashboard/69699>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [27 October 2022 23:02 UTC](https://discourse.nodered.org/t/simple-button-circle-square-with-value-colour-change-on-dashboard/69699 "2022-10-27T23:02:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![antsals](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@antsals](https://discourse.nodered.org/u/antsals)\
**Post date:** [27 October 2022 23:02 UTC](https://discourse.nodered.org/t/simple-button-circle-square-with-value-colour-change-on-dashboard/69699/1 "2022-10-27T23:02:21Z")

</div>

I know this is going to be super simple but after some help. I want to create a button / circle that has a payload value in eg temperatures and based on some greater than, less than rules I want to change its colour. Abit like the LED node, but I want the value on the button. May want the button to hyperlink to a url when pressed. Not bothered on exact shape.for now...more the function.

Anykne come across some good example?

Cheers,  
Ant

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [28 October 2022 07:33 UTC](https://discourse.nodered.org/t/simple-button-circle-square-with-value-colour-change-on-dashboard/69699/2 "2022-10-28T07:33:52Z")

</div>

Perhaps someone can give you some super simple example. Here would be my solution which is a bit more complicated:

```auto
[
    {
        "id": "0ad0e4652ed2c5a9",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "67e5a02dc04c0c98",
        "type": "ui_template",
        "z": "0ad0e4652ed2c5a9",
        "group": "d921e9fe7b208126",
        "name": "button 3",
        "order": 3,
        "width": "2",
        "height": "4",
        "format": "<style>\n .custom-button{\n color:white!important;\n }\n\n .red{\n background-color:red!important;\n }\n\n .green{\n background-color:green!important;\n }\n\n .s36{\n display:block;\n vertical-align:unset;\n width: 36px;\n height: 36px;\n filter:saturate(0.0) brightness(3.0) !important;\n }\n \n .s36 md-icon{\n \n }\n</style>\n<button id=\"quadbutton\" class=\"{{quadcolor}} custom-button md-raised md-button md-ink-ripple\" type=\"button\" ng-click=\"OnButtonClick($event)\" aria-label=\"cloudbutton\">\n <md-icon class=\"s36\" md-svg-src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 616 512\"><path d=\"M148.6 304c8.2 68.5 67.4 115.5 146 111.3 51.2 43.3 136.8 45.8 186.4-5.6 69.2 1.1 118.5-44.6 131.5-99.5 14.8-62.5-18.2-132.5-92.1-155.1-33-88.1-131.4-101.5-186.5-85-57.3 17.3-84.3 53.2-99.3 109.7-7.8 2.7-26.5 8.9-45 24.1 11.7 0 15.2 8.9 15.2 19.5v20.4c0 10.7-8.7 19.5-19.5 19.5h-20.2c-10.7 0-19.5-6-19.5-16.7V240H98.8C95 240 88 244.3 88 251.9v40.4c0 6.4 5.3 11.8 11.7 11.8h48.9zm227.4 8c-10.7 46.3 21.7 72.4 55.3 86.8C324.1 432.6 259.7 348 296 288c-33.2 21.6-33.7 71.2-29.2 92.9-17.9-12.4-53.8-32.4-57.4-79.8-3-39.9 21.5-75.7 57-93.9C297 191.4 369.9 198.7 400 248c-14.1-48-53.8-70.1-101.8-74.8 30.9-30.7 64.4-50.3 114.2-43.7 69.8 9.3 133.2 82.8 67.7 150.5 35-16.3 48.7-54.4 47.5-76.9l10.5 19.6c11.8 22 15.2 47.6 9.4 72-9.2 39-40.6 68.8-79.7 76.5-32.1 6.3-83.1-5.1-91.8-59.2zM128 208H88.2c-8.9 0-16.2-7.3-16.2-16.2v-39.6c0-8.9 7.3-16.2 16.2-16.2H128c8.9 0 16.2 7.3 16.2 16.2v39.6c0 8.9-7.3 16.2-16.2 16.2zM10.1 168C4.5 168 0 163.5 0 157.9v-27.8c0-5.6 4.5-10.1 10.1-10.1h27.7c5.5 0 10.1 4.5 10.1 10.1v27.8c0 5.6-4.5 10.1-10.1 10.1H10.1zM168 142.7v-21.4c0-5.1 4.2-9.3 9.3-9.3h21.4c5.1 0 9.3 4.2 9.3 9.3v21.4c0 5.1-4.2 9.3-9.3 9.3h-21.4c-5.1 0-9.3-4.2-9.3-9.3zM56 235.5v25c0 6.3-5.1 11.5-11.4 11.5H19.4C13.1 272 8 266.8 8 260.5v-25c0-6.3 5.1-11.5 11.4-11.5h25.1c6.4 0 11.5 5.2 11.5 11.5z\"/></svg>'>\n </md-icon>\n <span>{{quadLabel}}</span>\n</button>\n<button id=\"circlebutton\" class=\"{{circlecolor}} custom-button md-fab md-raised md-button md-ink-ripple\" type=\"button\" ng-click=\"OnButtonClick($event)\" aria-label=\"cloudbutton\">\n <md-icon class=\"s36\" md-svg-src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 616 512\"><path d=\"M148.6 304c8.2 68.5 67.4 115.5 146 111.3 51.2 43.3 136.8 45.8 186.4-5.6 69.2 1.1 118.5-44.6 131.5-99.5 14.8-62.5-18.2-132.5-92.1-155.1-33-88.1-131.4-101.5-186.5-85-57.3 17.3-84.3 53.2-99.3 109.7-7.8 2.7-26.5 8.9-45 24.1 11.7 0 15.2 8.9 15.2 19.5v20.4c0 10.7-8.7 19.5-19.5 19.5h-20.2c-10.7 0-19.5-6-19.5-16.7V240H98.8C95 240 88 244.3 88 251.9v40.4c0 6.4 5.3 11.8 11.7 11.8h48.9zm227.4 8c-10.7 46.3 21.7 72.4 55.3 86.8C324.1 432.6 259.7 348 296 288c-33.2 21.6-33.7 71.2-29.2 92.9-17.9-12.4-53.8-32.4-57.4-79.8-3-39.9 21.5-75.7 57-93.9C297 191.4 369.9 198.7 400 248c-14.1-48-53.8-70.1-101.8-74.8 30.9-30.7 64.4-50.3 114.2-43.7 69.8 9.3 133.2 82.8 67.7 150.5 35-16.3 48.7-54.4 47.5-76.9l10.5 19.6c11.8 22 15.2 47.6 9.4 72-9.2 39-40.6 68.8-79.7 76.5-32.1 6.3-83.1-5.1-91.8-59.2zM128 208H88.2c-8.9 0-16.2-7.3-16.2-16.2v-39.6c0-8.9 7.3-16.2 16.2-16.2H128c8.9 0 16.2 7.3 16.2 16.2v39.6c0 8.9-7.3 16.2-16.2 16.2zM10.1 168C4.5 168 0 163.5 0 157.9v-27.8c0-5.6 4.5-10.1 10.1-10.1h27.7c5.5 0 10.1 4.5 10.1 10.1v27.8c0 5.6-4.5 10.1-10.1 10.1H10.1zM168 142.7v-21.4c0-5.1 4.2-9.3 9.3-9.3h21.4c5.1 0 9.3 4.2 9.3 9.3v21.4c0 5.1-4.2 9.3-9.3 9.3h-21.4c-5.1 0-9.3-4.2-9.3-9.3zM56 235.5v25c0 6.3-5.1 11.5-11.4 11.5H19.4C13.1 272 8 266.8 8 260.5v-25c0-6.3 5.1-11.5 11.4-11.5h25.1c6.4 0 11.5 5.2 11.5 11.5z\"/></svg>'>\n </md-icon>\n <span>{{circleLabel}}</span>\n</button>\n\n<script>\n (function(scope) {\n scope.quadcolor = \"red\";\n scope.circlecolor = \"green\";\n scope.circleLabel = \"none\";\n scope.quadLabel = \"none\";\n scope.InjectRipple = function() {\n const circleinjector = angular.element('#circlebutton').injector();\n const quadinjector = angular.element('#quadbutton').injector();\n circleinjector.invoke(scope.AttachCirclebuttonToRipple,null,null);\n quadinjector.invoke(scope.AttachQuadbuttonToRipple,null,null);\n };\n scope.AttachCirclebuttonToRipple = function($mdInkRipple){\n $mdInkRipple.attach(scope, angular.element('#circlebutton'), { center: false });\n }\n scope.AttachQuadbuttonToRipple = function($mdInkRipple){\n $mdInkRipple.attach(scope, angular.element('#quadbutton'), { center: false });\n }\n scope.OnButtonClick = function(evt){\n switch(evt.currentTarget.id){\n case \"circlebutton\":\n if(scope.circlecolor == 'green'){\n scope.circlecolor = 'red';\n }else{\n scope.circlecolor = 'green';\n }\n scope.send({payload: \"Circle Button clicked\"});\n break;\n case \"quadbutton\":\n if(scope.quadcolor == 'green'){\n scope.quadcolor = 'red';\n }else{\n scope.quadcolor = 'green';\n }\n scope.send({payload: \"Quad Button clicked\"});\n break;\n default:\n break;\n }\n }\n scope.InjectRipple();\n \n //handle arriving messages\n scope.$watch('msg', function(msg) {\n if(msg !== undefined && msg !== null){\n try{\n switch(msg.topic) {\n case \"circlevalue\":\n scope.$applyAsync(function(){\n scope.circleLabel = msg.payload;\n });\n break;\n \n case \"quadvalue\":\n scope.$applyAsync(function(){\n scope.quadLabel = msg.payload;\n });\n break;\n\n default:\n break;\n }\n }catch(err){\n console.error(err);\n }\n }\n });\n })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "nr-dashboard-button _md styled-button styled-template",
        "x": 840,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "a9efe2984828caf7",
        "type": "inject",
        "z": "0ad0e4652ed2c5a9",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "3",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 290,
        "y": 380,
        "wires": [
            [
                "7bde84b82e94f5ef"
            ]
        ]
    },
    {
        "id": "7bde84b82e94f5ef",
        "type": "function",
        "z": "0ad0e4652ed2c5a9",
        "name": "function 1",
        "func": "const obj1 = {topic: 'circlevalue', payload:new Date().getSeconds()};\nconst obj2 = { topic: 'quadvalue', payload: new Date().getSeconds()};\n\nreturn [[obj1, obj2]];",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 540,
        "y": 380,
        "wires": [
            [
                "67e5a02dc04c0c98"
            ]
        ]
    },
    {
        "id": "d921e9fe7b208126",
        "type": "ui_group",
        "name": "Buttons",
        "tab": "d0d82445ef65a632",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "d0d82445ef65a632",
        "type": "ui_tab",
        "name": "ButtonDesign",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

```

---

<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:** [27 November 2022 07:34 UTC](https://discourse.nodered.org/t/simple-button-circle-square-with-value-colour-change-on-dashboard/69699/3 "2022-11-27T07:34:30Z")

</div>

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