Clickable logo image in css

Dashboard
1

Hi,
I am setting logo for my UI dashboard using this code.

<style>
     .md-toolbar-tools{
         background-image: url("/logo.png");
         background-repeat:no-repeat;
         background-position:right top;
         background-size: 90px 39px;
    }
    .md-toolbar-tools h1{
        text-align: right;
        /*width: 250px;*/
    }
</style>

How to make that clickable, say make it send payload "true" when clicked ?

Thanks,

2

You could do it with JavaScript in a ui template node.

Using JQuery to attach a click event is $(".selector").on("click", function() {...})
where .selector is the thing you want clickable and ... is the code to run.

The ui_template node has built in help on how to send from dashboard to node-red. But to point you in the right direction, you call scope.send( { payload: "some value" } );

Here are some Search Terms to help you find additional help on the forum

  • jquery on click
  • scope.send
3

Thank you. I am new to this, so please bear with me.

This is what I tried:

<style>
     .md-toolbar-tools{
         background-image: url("/logo.png");
         background-repeat:no-repeat;
         background-position:right top;
         background-size: 90px 39px;
    }
    .md-toolbar-tools h1{
        text-align: right;
        /*width: 250px;*/
    }
</style>

<!--<a class="md-toolbar-tools" ng-click="send({payload: 'true'})"></a>
-->

<script> 
$(".md-toolbar-tools").on("click", function() {scope.send( { payload: "true" } )});
/*$ (scope.send( { payload: "true" });*/
</script>

Click works with:
<a class="md-toolbar-tools" ng-click="send({payload: 'true'})"></a>
but only when the ui_template is inside a Group, not when added to the <head> section. Adding it to a group misplaces it from its top right corner.

I tried some combinations inside <script> as above but couldn't get it to work.

Thanks

4

scope is not avaiable in head template.

You can add a normal template then hide it...

<script>
(function(scope) {
    const _scope = scope;
    $(".md-toolbar-tools").on("click", function() {
        _scope.send( { payload: "true" } )
    });

    //hide this card. NOTE: a960b1e5.8aec is the Node id as seen in the INFO panel on the sidebar
    $('[node-id="a960b1e5.8aec"]').hide(); 
  });
})(scope);
</script>