In node-red dashboard I want to add a custom icon(from a api), but the node-red uses font-awesome icons by default. Is there any way we can change the icon which I will fetch from a http endpoint.
Not today. What sort of thing did you have in mind ?
I have a sensor geo data API which has geo location of each sensor and icon url associated with it. So, instead of font-awesome I want to use those icons from the url while plotting on world map.
do you have an example ? (link ?)
As I cannot able to provide that link. Consider like this https://png.icons8.com/search/2266EE which I got from some site.
what size are your icons ?
size may be around 30x30
Hi - Have added this ability to latest worldmap... if msg.payload.icon starts with http it loads it as an icon.
[{"id":"6d9f0b97.42deb4","type":"function","z":"82738787.0e0338","name":"add icon","func":"msg.payload = {\n name: \"Bird1\",\n label: \"Some big bird\",\n lat: 51.05,\n lon: -1.35,\n icon: \"https://img.icons8.com/windows/32/000000/bird.png\"\n};\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":1180,"wires":[["1a14b1e5.5bc58e"]]},{"id":"22fd5822.7bdd98","type":"inject","z":"82738787.0e0338","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":1180,"wires":[["6d9f0b97.42deb4"]]}]
Hi,
I'm new to NodeRed and so far so good!
I'm getting a ! icon, can any of you help me with this? I'd also like to load a custom icon from an url.
[{"id":"f55da76e.5a6c88","type":"function","z":"2acb9a7d.71bff6","name":"icon","func":"msg.icon = \"https://img.icons8.com/pastel-glyph/2x/search--v1.png\"\nreturn msg;\n","outputs":1,"noerr":0,"x":850,"y":720,"wires":[["fef6a771.61c728"]]},{"id":"fef6a771.61c728","type":"ui_button","z":"2acb9a7d.71bff6","name":"button","group":"c61569a3.3bc958","order":2,"width":"2","height":"2","passthru":false,"label":"button","tooltip":"","color":"{{msg.color}}","bgcolor":"{{msg.background}}","icon":"{{msg.icon}}","payload":"true","payloadType":"bool","topic":"","x":970,"y":720,"wires":[[]]},{"id":"c61569a3.3bc958","type":"ui_group","z":"","name":"Button","tab":"8dc941b1.d8153","order":5,"disp":true,"width":"6","collapse":false},{"id":"8dc941b1.d8153","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Thanks,
Patrick
You can't - as per the info you can select from
Okay, thanks!
Is there any other way to load custom icons? I've seen the documentation to load a custom icon, you need to place them in the corresponding node (in this case node red dashboard) in the icons directory, but I couldn't load them in. Any tips?
There will be tips I hope for loading in the svg file in but funny enough I just working on a little research on how to have theme-able inline svg icons. (work in progress)
[{"id":"f81cc2ec.7174f","type":"ui_ui_control","z":"22d1ccc6.eaad84","name":"","events":"all","x":200,"y":240,"wires":[["db727f18.14ce8","f8851d43.5cb22","4820992c.c7f6f8"]]},{"id":"db727f18.14ce8","type":"function","z":"22d1ccc6.eaad84","name":"stop","func":"var obj = {\n path:'M20.34,1.9A17.63,17.63,0,1,0,38,19.52,17.63,17.63,0,0,0,20.34,1.9ZM32.62,19.52A12.25,12.25,0,0,1,30.7,26.1L13.77,9.16A12.27,12.27,0,0,1,32.62,19.52Zm-24.55,0A12.18,12.18,0,0,1,10,13L26.91,29.88A12.25,12.25,0,0,1,8.07,19.52Z',\n box:'0 0 40 40',\n classlist:['uiIcon','uiIconStop']\n}\n\nobj.height = '30px'\n\nmsg.payload = obj\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":200,"wires":[["825dd542.e49498"]]},{"id":"825dd542.e49498","type":"ui_template","z":"22d1ccc6.eaad84","group":"504f2105.80c0a","name":"","order":1,"width":1,"height":1,"format":"<div class=\"btn\" style='width:40px; height:40px;' id=\"{{'my_'+$id}}\"></div>\n<script>\n(function(scope) {\n setTimeout(function() {\n scope.init();\n },100);\n \n scope.init = function () {\n if(scope.svg){\n $(\"#my_\"+scope.$id).html(scope.svg);\n }\n }\n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!scope.svg){\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n svg.setAttribute('height',msg.payload.height)\n svg.setAttribute('viewBox', msg.payload.box)\n msg.payload.classlist.forEach(cl => svg.classList.add(cl))\n var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n path.setAttribute('d',msg.payload.path)\n svg.appendChild(path)\n $(\"#my_\"+scope.$id).html(svg);\n scope.svg = svg\n }\n if(scope.svg && msg.payload == \"disable\"){\n $(\"#my_\"+scope.$id).addClass('disabled') \n }\n if(scope.svg && msg.payload == \"enable\"){\n $(\"#my_\"+scope.$id).removeClass('disabled')\n }\n }\n })\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":200,"wires":[[]]},{"id":"f8851d43.5cb22","type":"function","z":"22d1ccc6.eaad84","name":"close","func":"var obj = {\n path:'M24.57,20.72,35.13,10.16A2.93,2.93,0,1,0,31,6L20.42,16.58,9.86,6a2.93,2.93,0,0,0-4.14,4.14L16.28,20.72,5.72,31.28a3,3,0,0,0,0,4.15,2.95,2.95,0,0,0,4.14,0L20.42,24.86,31,35.43a2.95,2.95,0,0,0,4.14,0,3,3,0,0,0,0-4.15Z',\n box:'0 0 40 40',\n classlist:['uiIcon']\n}\n\nobj.height = '30px'\n\nmsg.payload = obj\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":240,"wires":[["26ade0b9.c37df"]]},{"id":"26ade0b9.c37df","type":"ui_template","z":"22d1ccc6.eaad84","group":"504f2105.80c0a","name":"","order":2,"width":1,"height":1,"format":"<div class=\"btn\" style='width:40px; height:40px;' id=\"{{'my_'+$id}}\"></div>\n<script>\n(function(scope) {\n setTimeout(function() {\n scope.init();\n },100);\n \n scope.init = function () {\n if(scope.svg){\n $(\"#my_\"+scope.$id).html(scope.svg);\n }\n }\n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!scope.svg){\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n svg.setAttribute('height',msg.payload.height)\n svg.setAttribute('viewBox', msg.payload.box)\n msg.payload.classlist.forEach(cl => svg.classList.add(cl))\n var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n path.setAttribute('d',msg.payload.path)\n svg.appendChild(path)\n $(\"#my_\"+scope.$id).html(svg);\n scope.svg = svg\n }\n if(scope.svg && msg.payload == \"disable\"){\n $(\"#my_\"+scope.$id).addClass('disabled') \n }\n if(scope.svg && msg.payload == \"enable\"){\n $(\"#my_\"+scope.$id).removeClass('disabled')\n }\n }\n })\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":240,"wires":[[]]},{"id":"4820992c.c7f6f8","type":"function","z":"22d1ccc6.eaad84","name":"magnifier-stipes","func":"var obj = {\n path:'M230.39,255.512c-5.879-5.881-13.548-8.875-21.256-9c29.804-44.402,25.106-105.25-14.105-144.465 c-44.557-44.555-117.054-44.555-161.61,0c-44.558,44.557-44.558,117.059,0,161.613c39.212,39.213,100.059,43.908,144.463,14.105 c0.124,7.705,3.117,15.377,8.998,21.256l79.443,79.445c12.017,12.016,31.495,12.016,43.512,0c12.018-12.018,12.018-31.494,0-43.512 L230.39,255.512z M170.165,238.797c-30.845,30.848-81.039,30.848-111.884,0c-30.848-30.848-30.848-81.037,0-111.887 c30.845-30.846,81.039-30.846,111.884,0C201.013,157.76,201.013,207.949,170.165,238.797z M225.549,112.678h39.852c4.603,0,9.014-1.826,12.266-5.08l30.385-30.383h104.603c9.58,0,17.347-7.766,17.347-17.348 c0-9.578-7.767-17.346-17.347-17.346H300.866c-4.603,0-9.015,1.826-12.267,5.082l-30.384,30.381h-64.435 c4.724,3.6,9.244,7.529,13.515,11.799C214.335,96.826,220.417,104.52,225.549,112.678z M412.654,204.422h-70.152L315.68,189c-2.631-1.512-5.612-2.309-8.646-2.309h-61.325 c-0.329,11.684-2.198,23.355-5.652,34.691h62.345l26.822,15.424c2.633,1.512,5.614,2.309,8.647,2.309h74.783 c9.58,0,17.347-7.768,17.347-17.348C430,212.188,422.234,204.422,412.654,204.422z M411.883,130.797H235.07c4.773,11.121,7.955,22.805,9.537,34.691h167.276c9.579,0,17.346-7.766,17.346-17.346 C429.229,138.563,421.462,130.797,411.883,130.797z',\n box:'0 0 430 430',\n classlist:['uiIcon']\n}\n\nobj.height = '30px'\n\nmsg.payload = obj\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":280,"wires":[["862e33d1.c0cbf"]]},{"id":"862e33d1.c0cbf","type":"ui_template","z":"22d1ccc6.eaad84","group":"504f2105.80c0a","name":"","order":3,"width":1,"height":1,"format":"<div class=\"btn\" style='width:40px; height:40px;' id=\"{{'my_'+$id}}\"></div>\n<script>\n(function(scope) {\n setTimeout(function() {\n scope.init();\n },100);\n \n scope.init = function () {\n if(scope.svg){\n $(\"#my_\"+scope.$id).html(scope.svg);\n }\n }\n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!scope.svg){\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n svg.setAttribute('height',msg.payload.height)\n svg.setAttribute('viewBox', msg.payload.box)\n msg.payload.classlist.forEach(cl => svg.classList.add(cl))\n var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n path.setAttribute('d',msg.payload.path)\n svg.appendChild(path)\n $(\"#my_\"+scope.$id).html(svg);\n scope.svg = svg\n }\n if(scope.svg && msg.payload == \"disable\"){\n $(\"#my_\"+scope.$id).addClass('disabled') \n }\n if(scope.svg && msg.payload == \"enable\"){\n $(\"#my_\"+scope.$id).removeClass('disabled')\n }\n }\n })\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":280,"wires":[[]]},{"id":"4198b95.2a73048","type":"ui_button","z":"22d1ccc6.eaad84","name":"","group":"504f2105.80c0a","order":8,"width":3,"height":1,"passthru":false,"label":"blue","tooltip":"","color":"","bgcolor":"","icon":"","payload":"blue","payloadType":"str","topic":"","x":390,"y":340,"wires":[["846ae494.327008"]]},{"id":"c9a86497.759328","type":"ui_button","z":"22d1ccc6.eaad84","name":"","group":"504f2105.80c0a","order":7,"width":3,"height":1,"passthru":false,"label":"grey","tooltip":"","color":"","bgcolor":"","icon":"","payload":"grey","payloadType":"str","topic":"","x":390,"y":380,"wires":[["846ae494.327008"]]},{"id":"846ae494.327008","type":"ui_template","z":"22d1ccc6.eaad84","group":"504f2105.80c0a","name":"change theme","order":10,"width":6,"height":"0","format":"<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n var root = document.documentElement;\n root.style.setProperty('--iconColorNormal', msg.payload == \"blue\" ? '#0099ff' : '#cccab3');\n root.style.setProperty('--iconColorHover', msg.payload == \"blue\" ? '#4db8ff' : '#f0f0f0');\n root.style.setProperty('--iconColorDisabled', msg.payload == \"blue\" ? '#6e7781' : '#606052');\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":560,"y":360,"wires":[[]]},{"id":"a7ccbbd4.746d68","type":"ui_template","z":"22d1ccc6.eaad84","group":"504f2105.80c0a","name":"style","order":9,"width":0,"height":0,"format":"<style id=\"dash-override\">\n :root{\n --iconColorNormal:#cccab3;\n --iconColorHover:#f0f0f0;\n --iconColorActive:var(--iconColorNormal);\n --iconColorDisabled:#606052;\n }\n \n .nr-dashboard-theme .nr-dashboard-template path {\n fill:unset\n }\n \n .btn{\n cursor:pointer;\n margin:auto;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color:rgba(77, 77, 76, 0.2);\n }\n .uiIcon{\n fill:var(--iconColorNormal);\n }\n .uiIconStop{\n fill:#e73535\n }\n .btn:hover > .uiIcon{\n fill:var(--iconColorHover)\n }\n .btn:active > .uiIcon{\n fill:var(--iconColorActive)\n }\n .btn:hover > .uiIconStop{\n fill:#ea4848\n }\n .btn:active > .uiIconStop{\n fill:#e73535\n }\n .disabled {\n cursor:auto;\n pointer-events: none;\n }\n .disabled > .uiIcon {\n fill:var(--iconColorDisabled)\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":590,"y":140,"wires":[[]]},{"id":"5ae006f3.31b088","type":"ui_button","z":"22d1ccc6.eaad84","name":"","group":"504f2105.80c0a","order":6,"width":3,"height":1,"passthru":false,"label":"disable","tooltip":"","color":"","bgcolor":"","icon":"","payload":"disable","payloadType":"str","topic":"","x":400,"y":120,"wires":[["825dd542.e49498","26ade0b9.c37df","862e33d1.c0cbf"]]},{"id":"2798bfb6.415f6","type":"ui_button","z":"22d1ccc6.eaad84","name":"","group":"504f2105.80c0a","order":5,"width":3,"height":1,"passthru":false,"label":"enable","tooltip":"","color":"","bgcolor":"","icon":"","payload":"enable","payloadType":"str","topic":"","x":410,"y":80,"wires":[["825dd542.e49498","26ade0b9.c37df","862e33d1.c0cbf"]]},{"id":"504f2105.80c0a","type":"ui_group","z":"","name":"Icons","tab":"7f4001e8.116b9","order":1,"disp":true,"width":"6","collapse":false},{"id":"7f4001e8.116b9","type":"ui_tab","z":"","name":"ICONS","icon":"dashboard","disabled":false,"hidden":false}]
Ah thanks, I'll check it out.
