Button in TopBar

Dashboard
1

Hi,

I have already added a logo, text and date and time to TopBar. Now I want to implement a button that keeps me going back to my home screen. How could I best implement this and how can I read out the current status of the button in the TobBar to pass it to the ui_control?

Thanks,

Tobi

2

Does anyone know how this works?

3

The template info sidebar shows how to add a button. Combine this with how you already add to the topbar..

4

I´m able to implement a button with this code:

> 
>    var div3 = $('<div/>');
>         var button = document.createElement("BUTTON");
>         var b = document.createTextNode("Home")
>         button.appendChild(b);
>         //button.ng-click="send({payload:'1'})";
>         div3.append(button);

but the ng-click option doesn´t work

button_inTopBar

5

TYou may need to use CSS to set it's z-index higher so it is not covered by another element. Use a browsers code inspector to look at that element and then add z-index: 99 and see if you can click it.

if you don't know about z-index then take a look at https://www.w3schools.com/cssref/pr_pos_z-index.asp

6

ok I'll take a look at it, more important right now is how I can send a payload with the button

7

What is your current flow?

8

Tobi

3h

I´m able to implement a button with this code:

> 
   var div3 = $('<div/>');
        var button = document.createElement("BUTTON");
        var b = document.createTextNode("Home")
        button.appendChild(b);
        //button.ng-click="send({payload:'1'})";
        div3.append(button);

but the ng-click option doesn´t work

button_inTopBar

I want to send a payload with this button in the topbar.

This is my code in the ui_template :

  <script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;
/*
        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '/wieland_logo.jpeg'
        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 Text
        var div4 = $('<div/>');
        var t = document.createTextNode("TRAINING"); // hier den Title eingeben
        
        div4.append(t)
        div4[0].style.margin = '10px auto';
        div4[0].style.size = '10';
      
        
        
        
        // add button
        var div3 = $('<div/>');
        var button = document.createElement("BUTTON");
        var b = document.createTextNode("Home")
        button.appendChild(b);
        //div3.position: fixed;
        //div3.right: 150px;
        //button.ng-click="send({payload:'1'})";
        div3.append(button);
        
        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div4);
            //toolbar.append(div1);
            toolbar.append(div3);
            toolbar.append(div2)
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>
9

I still have not managed to send a payload from the button :see_no_evil:, which I can then process further

Any tips on how this could work

10

your ng-click is still commented out...

1 Like
11

i know, but if i embed it, i will not see anything in TopBar

Unbenannt

This is the view after embed ng-click

12

Well, if you use button.ng-click="send({payload:'1'})"; then it won't work as - can't be a part of a name, it's translated as button.ng minus click="send({payload:'1'})"; and it does not make sense.

To add onClick dynamically use this code:
button.addEventListener('click', function() {alert(1);/*send({payload:'1'})*/});
however, send() function is not available to me for some reason even when trying to save the reference in the template scope like:

var sendFn = send;
button.addEventListener('click', function() {sendFn({payload:'1'})});

I get ReferenceError: send is not defined (the same with node.send -> node is not defined).

13

Thanks for the tip.

Now a pop-up window will open, but I can not handle this information anymore. Would you have an idea for that?

14

At the top of your function you need to reference the scope

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

then at the bottom - pass it in..

        addToToolbarTimer = setInterval(addToToolbar, 250);
})(scope);

Then somewhere inside you function just before the add button

        function send(m) { scope.send(m); }
    
    // add button
15

Just simplified your example a bit. As mentioned, you need to reference the scope

<script id="buttonScript" type="text/javascript">
var theScope = scope;

// add button
var div = $('<div/>');
var button = document.createElement("BUTTON");
var b = document.createTextNode("Home")
button.appendChild(b);
button.addEventListener("click", doIt);
div.append(button);

//add to toolbar when it's available
var addToToolbarTimer;

function addToToolbar() {
    var toolbar = $('.md-toolbar-tools');
    if(!toolbar.length) return;
    toolbar.append(div);
    clearInterval(addToToolbarTimer);
}

addToToolbarTimer = setInterval(addToToolbar, 250);

function doIt() {
    theScope.send("1");
}

</script>
1 Like
16

maybe I'm too stupid but if I change the code I will not see anything in the TopBar:

<script id="clockScript1" type="text/javascript">
    var theScope = scope;
    var clockInterval;
    $(function () {
        if (clockInterval) return;
/*
        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '/wieland_logo.jpeg'
        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 Text
        var div4 = $('<div/>');
        var t = document.createTextNode("TRAINING"); // hier den Title eingeben
        div4.append(t)
        div4[0].style.margin = '40px auto';
        div4[0].style.size = '40';
      
        // add button
        var div3 = $('<div/>');
        var button = document.createElement("BUTTON");
        var b = document.createTextNode("Home")
        button.appendChild(b);
        button.addEventListener("click", doIT);
        div3.append(button);
        
        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div4);
            //toolbar.append(div1);
            toolbar.append(div3);
            toolbar.append(div2)
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
   
        function doIT(){
            theScope.send("change");
        }
    });
    
</script>

and thats the result in Dahboard

Unbenannt
Unbenannt.PNG1600Ă—55 487 Bytes

17

Your code works just perfect for me (using Chrome if that matters)
Did you refresh the browser after you deployed it?

18

maybe thats the problem, I´m working with firefox or microsoft edge.

Yes I did a refresh

19

Normally I w ork with a macbook, just tried it with Safari it works fine
Also with Edge from a win10 box, works fine

20

This is the flow

PS I made a small change to allow you to send the value as parameter instead of hard-coded (maybe not needed)

[{"id":"c340cad4.302a18","type":"ui_template","z":"d01d2553.fd9838","group":"cac67f0e.f01fa","name":"","order":0,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n    var param = 'lets change';\n    var theScope = scope;\n    var clockInterval;\n    $(function () {\n        if (clockInterval) return;\n/*\n        //add logo\n        var div1 = $('<div/>');\n        var logo = new Image();\n\n        logo.src = '/wieland_logo.jpeg'\n        logo.height = 45;\n        div1[0].style.margin = '10px auto';\n\n        div1.append(logo);\n*/\n        //add clock\n        var div2 = $('<div/>');\n        var p = $('<p/>');\n\n        div2.append(p);\n        div2[0].style.margin = '5px';\n        \n\n        function displayTime() {\n            p.text(new Date().toLocaleString());\n        }\n        \n        clockInterval = setInterval(displayTime, 1000);\n\n        // add Text\n        var div4 = $('<div/>');\n        var t = document.createTextNode(\"TRAINING\"); // hier den Title eingeben\n        div4.append(t)\n        div4[0].style.margin = '40px auto';\n        div4[0].style.size = '40';\n      \n        // add button\n        var div3 = $('<div/>');\n        var button = document.createElement(\"BUTTON\");\n        var b = document.createTextNode(\"Home\")\n        button.appendChild(b);\n        button.addEventListener(\"click\", doIT.bind(null, param));\n        div3.append(button);\n        \n        //add to toolbar when it's available\n        var addToToolbarTimer;\n        \n        function addToToolbar() {\n            var toolbar = $('.md-toolbar-tools');\n            \n            if(!toolbar.length) return;\n            \n            toolbar.append(div4);\n            //toolbar.append(div1);\n            toolbar.append(div3);\n            toolbar.append(div2)\n            clearInterval(addToToolbarTimer);\n        }\n        addToToolbarTimer = setInterval(addToToolbar, 100);\n   \n        function doIT(m){\n            theScope.send(m);\n        }\n    });\n    \n</script>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":490,"y":1270,"wires":[["db91e661.418798"]]},{"id":"db91e661.418798","type":"debug","z":"d01d2553.fd9838","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":660,"y":1270,"wires":[]},{"id":"cac67f0e.f01fa","type":"ui_group","z":"","name":"Button Top","tab":"95753136.fcd6d","disp":true,"width":"6","collapse":false},{"id":"95753136.fcd6d","type":"ui_tab","z":"","name":"Button tab","icon":"dashboard","order":1}]