Node-red-dashboard logo in header

This flow uses a script template node added an base64 coded picture in the header.

Convert your picture on https://www.base64-image.de/ an paste it in qoutes after the 'logo.src ='.

Based on flow from this forum post https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873

[{"id":"9f1e1fb.3fc78e","type":"ui_template","z":"c43b3632.a5fdb8","group":"a07824d3.1fe8b8","name":"Logo / Clock","order":10,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n    $(function () {\n        \n        //add logo\n        var div1 = $('<div/>');\n        var logo = new Image();\n\n        logo.src = 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='\n        logo.height = 45;\n        div1[0].style.margin = 'auto 10px auto auto';\n\n        div1.append(logo);\n\n        function addToToolbar() {\n            var toolbar = $('.md-toolbar-tools');\n            \n            if(!toolbar.length) return;\n            \n            toolbar.append(div1);\n        }\n        addToToolbar();\n    });\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":710,"y":60,"wires":[[]]},{"id":"a07824d3.1fe8b8","type":"ui_group","name":"Sensor","tab":"5d86edbf.ced464","order":2,"disp":true,"width":"6","collapse":false},{"id":"5d86edbf.ced464","type":"ui_tab","name":"Übersicht","icon":"dashboard","order":1}]

Flow Info

Created 4 years, 5 months ago
Rating: 3 1

Owner

Actions

Rate:

Node Types

Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • node-red-dashboard
  • toolbar
  • template
  • ui
  • dashboard
  • logo
  • picture
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option