Logo in UI title bar on AWS server

#1

Hello

I am trying to implement my own personal logo and clock in the title bar of my UI dashboard. I have node-red running an AWS EC2 server on ubuntu.

I have been reading this thread Set a logo in the title bar?. The code for my template node is below.

The clock works a treat but the but the logo image does not display (see screen shot below). I suspect this is because I haven't set the correct path for the httpStatic setting in the settings.js file. The full path of the directory where my logo sits is /home/ubuntu/.node-red/logo directory

In the settings file I have:
httpStatic: '/logo'

Do I have the correct path name set?

<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

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

        logo.src = 'dashboardlogo.png'
        logo.height = 45;
        div1[0].style.margin = '10px auto';

        div1.append(logo);

        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
            toolbar.append(div2);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>
0 Likes

#2

That should be set to the directory containing the static content: /home/ubuntu/.node-red/logo

And you'll have to make sure the url used in the code is correct - you are currently just setting it to dashboardlogo.png so it will get loaded relative to the url the dashboard is on - depending on how you've set things up, that would be /ui/dashboard.logo.png. That is not the path httpStatic will be served from. You'd need to set the image url to /dashboardlogo.png - again, depending on what other path customisations you may have made.

0 Likes

#3

Thank you!

0 Likes