node red v3
id like to know how you change the boring buttons in dashboard - im making an 8 channel relay switch board via usb for my overlander car ... id like to change from this ..
You've got the current Flow?
It''s not too difficult to add an icon and change the style of the buttons but only Font Awesome v4 icons are built into Node-red.
I think the ones in your post are v5 or v6 and they are not free.
an example how to style buttons
The third button is an ui-template node where the icon is included as svg (From newer font-awesome versions you could download the svg-icon). If you use that you should tweak the ripple to make it feel like the ui-buttons.
[
{
"id": "76d2f79fde403ebf",
"type": "tab",
"label": "3 designed btns",
"disabled": false,
"info": "",
"env": []
},
{
"id": "8852173575bec666",
"type": "ui_button",
"z": "76d2f79fde403ebf",
"name": "button 1",
"group": "d921e9fe7b208126",
"order": 1,
"width": "2",
"height": "2",
"passthru": false,
"label": "Assignment",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "styled-button",
"icon": "mi-assignment",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 1240,
"y": 480,
"wires": [
[]
]
},
{
"id": "ebdf05a4bb3726b4",
"type": "ui_button",
"z": "76d2f79fde403ebf",
"name": "button 2",
"group": "d921e9fe7b208126",
"order": 2,
"width": "2",
"height": "2",
"passthru": false,
"label": "Basket",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "styled-button",
"icon": "fa-shopping-basket",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 1240,
"y": 560,
"wires": [
[]
]
},
{
"id": "5aa339a9467c6a4c",
"type": "ui_template",
"z": "76d2f79fde403ebf",
"group": "c3bc11b854faa005",
"name": "",
"order": 5,
"width": 0,
"height": 0,
"format": "<style>\n .styled-button button{\n background-color: cadetblue !important;\n border-radius: 8px !important;\n }\n \n .styled-button ui-icon{\n display:block;\n }\n \n .styled-button img{\n width = 50px;\n height = 50px;\n }\n .styled-button span{\n font-size: 14px;\n }\n \n .styled-template{\n padding:0 !important;\n overflow-y:unset !important;\n vertical-align:unset !important;\n }\n \n .styled-template button{\n line-height:36px;\n }\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 1240,
"y": 400,
"wires": [
[]
]
},
{
"id": "a903d8fd0deadcf8",
"type": "ui_template",
"z": "76d2f79fde403ebf",
"group": "d921e9fe7b208126",
"name": "button 3",
"order": 3,
"width": "2",
"height": "2",
"format": "<style>\n .button-ripple{\n overflow:hidden;\n width:100%;\n height:100%;\n left:0;\n top: 0;\n position:absolute;\n display:block;\n z-index:1;\n border-radius: inhirit;\n background-clip: padding-box;\n background-color: rgba(255,255,255,0);\n transition: all 0.55s cubic-bezier(0,0,0.2,1) ;\n -webkit-transform: translateZ(1);\n }\n .button-ripple:active{\n left:50%;\n width:0%;\n background-color: rgba(255,255,255,0.1);\n transition: all 0s;\n }\n .s36{\n display:block;\n vertical-align:unset;\n width: 36px;\n height: 36px;\n filter:saturate(0.0) brightness(10.0) !important;\n }\n</style>\n<button id=\"cloudbutton\" class=\"md-raised md-button\" 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>Cloud</span>\n <div class=\"button-ripple\"></div>\n</button>\n\n<script>\n (function(scope) {\n scope.GetIconColor = function(){return \"white\"}\n scope.OnButtonClick = function(evt){\n switch(evt.currentTarget.id){\n case \"cloudbutton\":\n //alert(evt.currentTarget.id);\n scope.send({payload: \"Cloud Button clicked\"});\n break;\n default:\n //console.log(evt.currentTarget.id);\n break;\n }\n }\n scope.$watch('msg', function(msg) {\n \n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "nr-dashboard-button _md styled-button styled-template",
"x": 1240,
"y": 640,
"wires": [
[]
]
},
{
"id": "d921e9fe7b208126",
"type": "ui_group",
"name": "Buttons",
"tab": "d0d82445ef65a632",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "c3bc11b854faa005",
"type": "ui_group",
"name": "Channel 1",
"tab": "",
"order": 1,
"disp": true,
"width": "13",
"collapse": false,
"className": ""
},
{
"id": "d0d82445ef65a632",
"type": "ui_tab",
"name": "ButtonDesign",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]
the third button (ui-template-node) with circular ripple effect:
[
{
"id": "67e5a02dc04c0c98",
"type": "ui_template",
"z": "76d2f79fde403ebf",
"group": "d921e9fe7b208126",
"name": "button 3",
"order": 3,
"width": "2",
"height": "2",
"format": "<style>\n #cloudbutton{\n color:white!important;\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=\"cloudbutton\" class=\"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>Cloud</span>\n</button>\n\n<script>\n (function(scope) {\n scope.InjectRipple = function() {\n const injector = angular.element('#cloudbutton').injector();\n injector.invoke(scope.AttachCloudbuttonToRipple,null,null);\n };\n scope.AttachCloudbuttonToRipple = function($mdInkRipple){\n $mdInkRipple.attach(scope, angular.element('#cloudbutton'), { center: false });\n }\n scope.OnButtonClick = function(evt){\n switch(evt.currentTarget.id){\n case \"cloudbutton\":\n scope.send({payload: \"Cloud Button clicked\"});\n break;\n default:\n break;\n }\n }\n scope.InjectRipple();\n \n scope.$watch('msg', function(msg) {\n \n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "nr-dashboard-button _md styled-button styled-template",
"x": 500,
"y": 520,
"wires": [
[
"ef7b488547d946e5"
]
]
},
{
"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
}
]
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
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.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy