Button in TopBar


#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...


#11

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

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>


#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


#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}]