node-red-dashboard - change tab within the flow

[Guilherme Francescon Cittolin]

Hi,

I'd like to be able to change the current tab from the flow, with a message. I've tried to inject some javascript using the template node, trying to access and control the angular app. It worked somehow, but it was way too complicated, and managing the lifecycle of the injected code was not easy at all.

I've been thinking on a new node, that would send events to the browser, and the angular app would directly handle it, changing the current page. Actually, very very similar to what the toast node does. I've implemented it in a branch to test the idea, and it works well.

What do you think about something like it in the dashboard?

[Matt Evans]

Just a quick +1 from me. 

I'm currently strapping together an interface that needs you to pick from a template in one tab and then tweak it on the next.

This functionality would be handy.

Not to mention you could tie this to an external input like a button and be able to use the dashboard without a touch screen.

Matt.

[Guilherme Francescon Cittolin]

Exactly what I'm doing right now, except my external input comes from a PLC :)

[Dave C-J]

Interesting idea.

which then begs the question - should this just be a tab select node - or is there a place for a more general ui-control node that can potentially do other things like this. (I have no idea what else but just want to think of the wider possibilities before we rush into adding lots of nodes)

PS in the html you say it uses msg.topic to select the tab - then in the code uses msg.payload.target...

[Guilherme Francescon Cittolin]

I like the idea of a ui-control node. Other possibilities could include changing theme on the fly, changing the tab title (in my setup, I currently use the template node to inject js code to display a clock on the top right corner), and so on.

I may say, actually, I've been thinking a lot on how could node-red-dashboard itself be "modularized". I can imagine, lots of people would like to have something the dashboard doesn't have, and making it able to be expansible by installing other npm modules would be awesome. One could have installed just the ui components needed, making it lighter and simpler.

If the package.json exported the ui.js, we'd already have some modularity, as we could call the ui.add from other modules. But then we'd probably need a way to pass in the templates... well, maybe a topic for another thread here in the group :)

P.S. Thanks Dave for pointing it out, just corrected to msg.payload :)

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/tKJo2Ho34jA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@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.

--

Guilherme Francescon Cittolin - 史古意
--
永遠臺灣

[Dave C-J]

Hi,

yes exactly. And certainly we would like to see the dashboard (or some version of it) be able to be installed in a modular fashion, so that everyone can add widgets in the same way they can add nodes today.

[Librae]

Hey,

I may be one of the "lots of people" Guilherme mentioned :)

Would you mind share your implementation for:

​​

in my setup, I currently use the template node to inject js code to display a clock on the top right corner

​Before dashboard become modular fashion, I'd like to get things done with template node as you do, while I am still learning how to do it, so your sharing will do great help​

 

​to me, thank you in advance!

By the way, 

I don't know how to add js code in ui_template, however I guess there may be

​a solution already​

.

C

an

​we

 use template node to inject stuffs into ui_template, in order to

​implement more complicated logic, while keeping the contents 

consistent

​with ​

other ui_* nodes

​ in ​

Angular Material style?

​ If so, is there any example?​

​Thanks,

Librae​

​

On Thu, Aug 4, 2016 at 3:19 AM, Dave C-J <dce...@gmail.com> wrote:

Hi,

yes exactly. And certainly we would like to see the dashboard (or some version of it) be able to be installed in a modular fashion, so that everyone can add widgets in the same way they can add nodes today.

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

[Dave C-J]

To use the "normal" template node before sending to the ui-template node - you need to set the ui-template to accept html as html (and not as a raw string) - hopefully this will also allow javascript - though I've not tested that yet...  to do this set the ui-template to be

    <div ng-bind-html="msg.payload"></div>  

(or something containing that...)

We will make this the default example in the template for next release to make everyone's life easier as this is the pattern we want.

[Librae]

Thank you Dave, it works magically when I inject html with ng-bind-html directive set.

While according to my test, it doesn't seem to accept javascript in this way.
I tried:
1. inject javascript only
2. inject html with javascript embedded

Then I put some basic html with js code together, just in the ui_template, like:

<md-button onclick="update()">
</md-button>
    update
<p id="demo">
    JavaScript
</p>
<script>
    function update()
    {
        x = document.getElementById("demo");

        x.innerHTML = "text updated";

    }
</script>

In this way javascript can function well, then I can deploy some logic within it.

So next, how can I access the input msg.payload, as well as the context data(e.g. context.flow.get()), in such ui_template javascript code?

Thanks,

Librae

--

[Nicholas O'Leary]

Youll need to attach any values you want to use in the template to the msg object you pass to it - you cannot access context properties directly from that node.

Nick

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@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.

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

[Dave C-J]

inside the ui_template you should be able to - for example inside your code...

   x.innerHTML = "{{msg.payload}}";

but as Nick points out... only for properties of msg. You will need to use a change node to move context properties to the msg.

[Librae]

Thank you Nick, understand, it's clear.

Dave, I tried below, but it actually shows the string "{{msg.payload}}" directly, instead of the payload content.

x.innerHTML = "{{msg.payload}}";

Yes, I think I got your point, it looks great if this way is working.

We can enclose all the Node RED context data into {{msg.payload}} and then process it in above javascript to achieve different objectives.

 

However, according the the doc of this node, it works in Angular directives like: 

<md-button ng-click="send({payload: msg.payload})">

    Click

</md-button>

So I guess it make sense that {{msg.payload}} cannot work in normal <script>...</script>, is that true?

Or did I miss anything?

--

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.

[Guilherme Francescon Cittolin]

This is the node I use to display a clock:

[{"id":"d24bb056.c49e3","type":"ui_template","z":"c8797805.76d148","group":"b0fa8789.2a1018","name":"Clock","order":7,"width":"15","height":"1","format":"<script id=\"clockScript\" type=\"text/javascript\">\n    var clockInterval;\n\n    $(function () {\n        $('#clockScript').parent().hide();\n        \n        if(clockInterval) return;\n        \n        var toolbar = $('.md-toolbar-tools');\n        var div = $('<div/>');\n        var p = $('<p/>');\n        \n        div.append(p);\n        div[0].style.margin = '5px 5px 5px auto';\n        \n        function displayTime() {\n            p.text(new Date().toLocaleString()); \n        }\n        \n        toolbar.append(div);\n        \n        clockInterval = setInterval(displayTime, 1000);\n    });\n</script>","storeOutMessages":false,"fwdInMessages":true,"x":830,"y":340,"wires":[[]]}]

Note that this is the time/clock from the browser, not from the running node-red instance. Hope it helps :)

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

[Librae]

It's great, Guilherme! Thank you :)

I'd like to look a bit more into it to see if I can tinker with it for some other functions.

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

[Steve Heistand]

Having looked over this thread Im still at a loss as to how its possible
even in an overly complicated way to programmatically change the flow
that is being currently shown in the browser.
any help/pointers would be appreciated.

thanks

s

[Dave C-J]

this is a bit of an old thread... so.. 

When you say flow shown in the browser - do you mean flow... or do you mean dashboard page (tab) ? (which is what this thread was about). 

[Nicholas O'Leary]

Hi Steve,

you should find the 'ui_control' node in your palette. This is a node that allows you to programatically control the dashboard - currently, the only thing it allows you to control is which tab is being displayed - exactly what you want.

All you do is pass the name of the tab you wish to be displayed into a ui_control node.

[{"id":"202f797c.021d56","type":"inject","z":"36c569f1.6c7ba6","name":"","topic":"","payload":"home","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":320,"wires":[["43ea2bff.6fe6e4"]]},{"id":"43ea2bff.6fe6e4","type":"ui_ui_control","z":"36c569f1.6c7ba6","name":"ui control","x":300,"y":360,"wires":[[]]},{"id":"23f7d29a.d72bce","type":"inject","z":"36c569f1.6c7ba6","name":"","topic":"","payload":"away","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":400,"wires":[["43ea2bff.6fe6e4"]]}]

Regards,

Nick

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

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/4151f971-0f15-4350-84d2-12c280d3fa1d%40googlegroups.com.

[Steve Heistand]

well that was way easier then I expected :)
thanks

s

On Sunday, January 1, 2017 at 3:45:55 PM UTC-8, Nick O'Leary wrote:

Hi Steve,

you should find the 'ui_control' node in your palette. This is a node that allows you to programatically control the dashboard - currently, the only thing it allows you to control is which tab is being displayed - exactly what you want.

All you do is pass the name of the tab you wish to be displayed into a ui_control node.

[{"id":"202f797c.021d56","type":"inject","z":"36c569f1.6c7ba6","name":"","topic":"","payload":"home","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":320,"wires":[["43ea2bff.6fe6e4"]]},{"id":"43ea2bff.6fe6e4","type":"ui_ui_control","z":"36c569f1.6c7ba6","name":"ui control","x":300,"y":360,"wires":[[]]},{"id":"23f7d29a.d72bce","type":"inject","z":"36c569f1.6c7ba6","name":"","topic":"","payload":"away","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":400,"wires":[["43ea2bff.6fe6e4"]]}]

Regards,

Nick

On 1 January 2017 at 23:35, Steve Heistand <steveh...@gmail.com> wrote:

Having looked over this thread Im still at a loss as to how its possible
even in an overly complicated way to programmatically change the flow
that is being currently shown in the browser.
any help/pointers would be appreciated.

thanks

s

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

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.