Dashboard UI: How to display global context in the toolbar

[Robert Linn]

Hi,

in a ui_template node, trying to get the content of a global context displayed in the UI toolbar:

<script id="titleScript" type="text/javascript">
    $('#titleScript').parent().hide();
    var toolbar = $('.md-toolbar-tools');
    var div = $('<div/>');
    var p = $('<p/>');
    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';

    var lh = "\"" + {{global.get("lighthouse")}} + "\"";
    p.text(lh);

    toolbar.append(div);
</script>

but receiving error, that global can not be found. Also tried instead of global, the msg.payload, but same error.
Instead of {{ }}, tried {{{ }}} or ().

Any hints appreciated.

[Dave C-J]

Currently you can only get msg and it's properties, so use a previous change node to move it over.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

[Robert Linn]

Thanks for the hint.
Added a change node prior to the ui_template node with

move global.get("lighthouse")to msg.payload



In the ui_template script, changed line

var lh = "\"" + {{global.get("lighthouse")}} + "\"";


to

var lh = "\"" + {{msg.payload}} + "\"";


but receiving an error: Invalid property id.

Am Donnerstag, 18. August 2016 22:51:14 UTC+2 schrieb Dave C-J:

Currently you can only get msg and it's properties, so use a previous change node to move it over.

On 18 Aug 2016 20:49, "'Robert Linn' via Node-RED" <node...@googlegroups.com> wrote:

Hi,

in a ui_template node, trying to get the content of a global context displayed in the UI toolbar:

<script id="titleScript" type="text/javascript">
    $('#titleScript').parent().hide();
    var toolbar = $('.md-toolbar-tools');
    var div = $('<div/>');
    var p = $('<p/>');
    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';

    var lh = "\"" + {{global.get("lighthouse")}} + "\"";
    p.text(lh);

    toolbar.append(div);
</script>

but receiving error, that global can not be found. Also tried instead of global, the msg.payload, but same error.
Instead of {{ }}, tried {{{ }}} or ().

Any hints appreciated.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

[Julian Knight]

Your quotes are mixed up. you have double double quotes in 2 places.

[Robert Linn]

Tried

p.text({{msg.payload}});

but still get invalid property id.
The msg.payload has the right content as out put from the Change Node.

I am Node-RED NewBie, any examples appreciated.


[Julian Knight]

Firstly, with a slightly clearer head, I now realise what you were doing with the multiple quotes. The easier way to output a double quote in Javascript is to enclose it in single quotes instead so that you don't need to escape the double quote which I misread as you wanting to output a backslash 8-}

Secondly, I'd forgotten that you cannot use the mustache templating within the script block - it doesn't work.

However, the good news is that the msg object is actually passed to the template anyway, it is just a bit harder work to get at it.

Here is some example code that lets you see what is going on, create a template that contains this:

<h3>Testing dynamic scripts with Dashboard 2.0</h3>

{{msg.payload}}

<script>

    (function(scope) {

        console.log('Position 1');

        console.dir(scope);

        scope.$watch('msg.payload', function(data) {

            console.log('Position 2');

            console.dir(data);

        });

    })(scope);

</script>

Push some data into the template and open your browser's console with F12.

You will see on the console output "Position 1" followed by the letter "b" (I've no idea why "b"!), this is the scope object and you can see that the scope object APPEARS to contain the msg object. Not so quick! Actually, when calling the console.dir(scope); line, the msg object does NOT exist, it appears to only because of the way the browser outputs the console commands. The reason for this is understood by looking at the next part. 

What this does is to set a watch on the scope object for a sub-object "scope.msg.payload", you will note from the console output that this is actually triggered twice and only on the second time is scope.msg.payload actually defined.

I'm not entirely certain why this happens but I think it is something to do with the way that Angular works.

Anyway, the bottom line is that you can use the watch function to monitor the msg.payload. The function will be triggered whenever you update the msg. Try having two inject nodes into the same template with different payloads and you will see what I mean. Each time you trigger, you will get a new console message - but ONLY if the payload actually changes, sending the same text twice for example will only trigger the function once.

Phew! Hopefully this will be enough to get you going.

[Robert Linn]

Wow = Thanks for this comprehensive answer - good learning.
The dynamic change of content outputting in the console is working.
Will keep progress posting in finding a way to display in the toolbar.

[Dave C-J]

See also Guilherme's answer near bottom of this thread

https://groups.google.com/forum/#!searchin/node-red/toolbar%7Csort:relevance/node-red/tKJo2Ho34jA/y7YWrr8FBgAJ

not related to getting access to the data - but does put a clock in the top toolbar - so by combining the answers you should get close to what you want :-)

[Robert Linn]

SOLVED - Thanks for the great help.

This Function Node is called after the Change Node (which moves the global to msg.payload)

<script id="titleScript" type="text/javascript">
    $('#titleScript').parent().hide();
    var toolbar = $('.md-toolbar-tools');
    var div = $('<div/>');
    var p = $('<p/>');
    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';

    function displayTitle(lh) {
        p.text(lh);
    }

    toolbar.append(div);

    // Watch the payload and update the title
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            displayTitle(data);
        });
    })(scope);
</script>