Logo Image in Dashboard Toolbar

[awneil]

I have seen previous posts on this, but not got anything to work.

I want to put an image (a logo) in the toolbar at the top of a Node-RED Dashboard:

I have tried this:

https://flows.nodered.org/flow/9ddf29277057e4666c1923061a507aaa

But that has some problems;

1. The logo initially only appears on the Tab containing the Node;
2. Every time you visit that Tab, the logo is added again - so I end up with multiple logos;
3. The Browser 'Refersh' removes the logo(s)

I have also tried this:

Image on dashboard

But that puts the image in the tab - not the header.

It also seems to suffer from the browser refresh problem.

So how can I actually get a logo in the Dashboard Toolbar for every Tab that will survive a browser refresh?

[awneil]

@awneil

I have tried this:

Node-red-dashboard logo in header (flow) - Node-RED

also this:

Set a logo in the title bar?

Hi all, Did any of you manage to do this? If not, I have some code which could help you out. Please have a look at this flow: [{"id":"42b8d6d1.fc68e8","type":"ui_template","z":"7e61871d.8d71a8","group":"feabd600.f71b28","name":"Logo / Clock","order":0,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n\n //add logo\n var div1 = $('<div/>');\n var logo = new I…

but the forum will only allow a new user to post 2 links

[awneil]

Another one that puts the image in the dashboard body:

node-red-contrib-ui-media

This one does seem to survive a browser refresh.

But it seems to be doing some scaling of the image - and I see nothing to control that.

[Gunner]

@awneil

But it seems to be doing some scaling of the image - and I see nothing to control that.

The scaling appears to be based on choice of layout setting in the node. "Expand" seems to fit to widget size setting.

3x3, 6x6 and 12x12

[awneil]

@Gunner

"Expand" seems to fit to widget size setting.

only if the widget size is larger than the image?

even then, it seems to have enlarged the image.

[Gunner]

I can only speak for the image I used... PNG 800x800 pixels. Way larger than my smallest widgets or possibly even the entire card size.

But then this has little to do with the original issue of an image in the header. I haven't had much success there either

[Gunner]

@Gunner

I haven't had much success there either

OK, aside form getting the image properly converted to Base64

(I used Image to Base64 | Base64 Encode | Base64 Converter | Base64 and the output option data:image/png;base64)

The persistence issue is resolved with a timer (I picked out of a dashboard clock header).

Put this in your template node

<script id="titleScript" type="text/javascript">

$(function() {
    if($('.md-toolbar-tools').length != 0){
        loadLogo();
    }else setTimeout(loadLogo, 500)
});

function loadLogo(){
    
        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
        logo.height = 45;
        div1[0].style.margin = 'auto 10px auto auto';

        div1.append(logo);

        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
        }
        addToToolbar();
        
    document.clockInterval = setInterval(upTime,1000);
}

[hotNipi]

I was bored. Made another version of how to get logo to top-bar..
Script is targeted to document head so it does not take any space in layout and exists for all dashboard tabs and survives resets.

[{"id":"d365d02956b1c509","type":"ui_template","z":"c95b36a3f921c249","group":"3ad2bc4a7ed3c9a3","name":"top-bar logo","order":1,"width":0,"height":0,"format":"<style>\n    #top-bar-logo {\n    background-image: url(https://nodered.org/about/resources/media/node-red-icon-2.png);\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    height: 100%;\n    width: 100%;\n}\n</style>\n\n<script id=\"logo-script\" type=\"text/javascript\">\nfunction build(){\n    $(\"#top-bar-logo\").remove()\n    var logo = $('<div />').attr(\"id\",\"top-bar-logo\");\n    var topbar = $('.md-toolbar-tools');\n    topbar.append(logo)\n}\nfunction checkExistence(){\n    console.log($(\"#top-bar-logo\"))\n    if($(\"#top-bar-logo\").length > 0){\n        return\n    }\n    build()\n    setTimeout(checkExistence,100)\n}\n\nbuild()\nsetTimeout(checkExistence,100)\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":570,"y":600,"wires":[[]]},{"id":"3ad2bc4a7ed3c9a3","type":"ui_group","name":"Default","tab":"22c859d636852368","order":1,"disp":true,"width":"6","collapse":false},{"id":"22c859d636852368","type":"ui_tab","name":"Away","icon":"dashboard","disabled":false,"hidden":false}]

[Gunner]

@hotNipi

I was bored

As always, your boredom is our blessing

[awneil]

That's great - thanks.

How do I get it to use a local image file on the Raspberry Pi?

[hotNipi]

Many threads about using the static folder of Node-RED, just do the search

You just need to change the url for background image to point to relative path
background-image: url(/images/your-local-file-name.png);

[awneil]

@hotNipi

Many threads about using the static folder of Node-RED, just do the search

Knowing the correct search term helps.

@hotNipi

change the url for background image to point to relative path

Relative to where?

I have mylogo.png in my ~/.node-red folder, but

background-image: url(/mylogo.png);

is not giving any image in the top-bar

EDIT

This is on a Raspberry Pi

EDIT 2

So doing the search adds confusion:

node.js - Node Red Dashboard Include Images - Stack Overflow refers to setting httpAdminRoot from default false to true, but the referenced documentation at Configuration : Node-RED says that it's a URL - not a true/false flag ?

And the comments in the settings.js file say:

    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',

But I haven't moved anything - so where should the default be?

[hotNipi]

I'm afraid I'm not on position to explain the httpStatic configuration and usage. It clearly works if it is configured. And most probably the default (not configured) behavior is that no files will be served.

[awneil]

OK, so the answer on serving-up local files - "static files" - became clear from this thread:

How to enable ability to input local image files in to node red dashboard

From online forums, I've been able to gleam that I need to make changes to both the //httpAdminRoot: '/admin', and //httpStatic: '/home/node-red-static/', lines in the settings.js file. Are these the only two lines I need to edit to enable adding local files to my flows? Would simply removing their comment dashes provide me with the capability to load local files? Would anyone be able to recommend how I would change these lines so that I could load images from a local folder named "node_im…

I still can't say that I'd have got there from reading the comments in the settings.js file, though.

Thanks, everyone - it is now working

[Gunner]

You have solved it, but there are many ways of injecting a file... I have a simple fie server running on my RPi that could feed the image via it's (the RPi) IP and the server's port in a URL along with the file name.

Or, in this case, I just used a shared link from my dropbox account. This way it would work from any PC/phone/browser that can access my NR