Dashboard top bar Logo clickable?

Dashboard
1

Hello to all,
Like many I use the template that allows to have a logo + the current time in the header bar of the dashboard.
Do you think it is possible to make the logo clickable?
As in many websites, when we click on it, it brings us back to the main page. It would be a plus and it would avoid me to add a "home" button on each page or even in the header if I can.

Capture d'écran Deepin_zone de sélection _20210905101202
Capture d'écran Deepin_zone de sélection _20210905101202810×59 12.5 KB

Thank you in advance for your ideas or solutions. Have a nice Sunday :high_brightness:

2

If your ui-template is a head template, you have limited options. You could wrap the icon in an anchor <a> and set the href to your home page. This will cause a full reload.

If your ui-template is a content item, then you can use scope.send to send a message back to node-red that then triggers a ui-control node to change to home page.

Read the built in help for ui-template and ui-control nodes for how to do this.

2 Likes
3

Hey Steve,
thank you for the 2 tracks to follow.
I am in the 1st case "head template". I totally understand the idea of adding an HTML
<a> element with its href attribute.
Something like this <a href="https://example.com">Website</a> . it suits me perfectly.
However my scripting skills suck. Could you please tell me how to add these attributes to this script?
I did read and re-read the help but I am not skilled enough to implement this in the script.

The 2nd track, I find it less relevant in my case. On the other hand very interesting in other situations.
I tried it with this subject and this one
I attach the actual script below

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

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

        logo.src = '/logo-onduleur.png'
        logo.height = 50;
        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>
4

This script below that comes from this conversation allows me to send a payload when the "Home" button is clicked.
But I have to insert it in each flow, which is less practical but possible indeed
image

<!DOCTYPE html>
<html>
<script>
    var theScope = scope;
    var abc = 'maison';
    
    var nodes = document.createElement('BUTTON');
    nodes.addEventListener('click', sendPayload);
    nodes.innerHTML = 'Home';
    var titleBar = document.getElementById("nr-dashboard-toolbar");
    titleBar.appendChild(nodes);
    
    function sendPayload(){
        theScope.send({payload:abc});
    }
</script>
</html>
5

See commented parts below.


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

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

        logo.src = 'https://cdn.pixabay.com/photo/2015/11/06/13/29/union-jack-1027898_960_720.jpg'
        logo.height = 50;
        div1[0].style.margin = '10px auto';

        var a = $("<a/>"); //create an anchor / hyperlink
        a.attr("href", "/ui"); //set HREF to dashboard homepage
        a.append(logo); //add logo to anchor
        div1.append(a); //add anchor to div1

        //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>
2 Likes
6

Whowwhh, it's works like that :star_struck:

This is a big step for the usability of my site's navigation.
Many thanks Steve.

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.