node-red-dashboard – control which client receives ui updates

[PeLi]

Currently all ui changes will be emitted to every client that is online.

I have modified ui.js and events.js so that you may control which client should receive which message.

There are lots of use cases where this is mandatory I believe. Assume the following simple use case:

You are showing the production status of certain production lines in your plant.

Person ‘A’ wants to see the status of line ‘A’, person ‘B’ wants to see the status of line ‘B’.

The dashboard itself is the same of course, it just receives different data (line A or line B).

Implementation:

Change in events.js / ui.js:

I am adding the socket.id to the message data sent from the client (events.js) to the server (ui.js). In my sample test-flow I am “injecting” the nodes that should only update one client rather than emit to everyone. Basically I am injecting a property ‘meOnly’ to the nodes’ config.

ui.js may then decide, based on the node being processed, whether to emit to all clients or to the one with the matching socket id.

This is a first, simple implementation – I very much suggest to include that mechanism to the core, as it opens a lot more scenarios that could be implemented. In future releases authentication, e.g. via passport, could be added as well.

Who ever wants to play with it, I have put my code changes on gist:

https://gist.github.com/pelis/b0366fefd8c33c7953f5efa6439b5a1a

[Nathanaël Lécaudé]

That's interesting, could be useful for forms !

[Ty George]

You are a mind reader, I was hoping something like this would be developed, has massive implications imo :)

[Natan Sanson]

Thank you, really helped. I worked on your solution adapting it to the dashboard version "2.3.3: Maintenance Release"

First of all not you don't have to create a new msg.client variable on event.js, you can use the msg.socketid available from the source code

I noticed some issues in passing a payload to the fields because if a "ui control" node sends the "connect" event to the fields, you cannot work on payload to add your extra variables

injectProps

meOnly

I tried your solution with a dropdown and i was not able to prefill values. So to make possible the update of these fields when they are connected to a "ui control" node, i added some code to read the properties not only from payload but even from msg scope.

This is the ui.js code to replace. No need to use gulp in order to apply this

ui.js

[Quentin Lindh]

This is a very interesting thread and relevant to multiple user scenarios I am currently struggling with.  An example flow showing the extra msg properties required to select the socketID  to emit data to would be very helpful.

Thanks and keep up the good work.

Quentin

[Quentin Lindh]

I am observing some odd behaviors with this modification to ui.js.  

I pass in the following properties to a template node - I add further properties in msg.payload which I display in the ui. 

var msg1={"InjectUiProps": true, "meOnly": true, "socketid":context.socketid, "payload": mydata};

 It all works with the correct data going to the correct socketID instance. 

 However (and this is very weird) passing in meOnly=true breaks the other clientside ui functionalities- in my case color changes in a radio button via css changes.  The full code running within the template is below.  Again this code works correctly with meOnly=false but the mouse-click based color change stops once i pass in meOnly=true;

I wonder what I am missing here- seems like odd behavior.

Thanks

<style>

    :focus {

        outline: 0;

    }

   .btn-row {

        margin-bottom: 10px;

    }

    

    .md-button.btn {

        color: #000;

        padding: 15px;

        margin: 0px 10px 0px 0px;

        background-color: #c3c3c3 ;

        border: 1px solid #ababab ;

        min-height: 48px !important;

        box-shadow: 4px 4px 6px 0 #dadada ;

    }

    

   .md-button.btn.btn-off.btn-selected {

        background-color: #F4511E  !important;

    }

    

    .md-button.btn.btn-on.btn-selected {

        background-color: #00FF00  !important;

    }

   .btn-name {

        text-align: center;

        font-weight: bold;

    }

    

</style>

   <div class="btn-row" layout="row" layout-sm="column" layout-align="center center" layout-wrap>

        

            

        <md-button

            ng-click="send({payload: '1', topic: 'click'});"

            ng-class="msg.payload === '1' ? 'btn-selected' : ''"

            class="btn btn-on" flex>

            ACTIVE

        </md-button>

            

        <md-button

            ng-click="send({payload: '0', topic: 'click'});"

            ng-class="msg.payload === '0' ? 'btn-selected' : ''"

            class="btn btn-off" flex>

            DISABLED

        </md-button>

        

            

    </div>   

[sama...@gmail.com]

Hello PeLi

Interesting development and that's what node-red-dashboard needs to be updated to.

Do you see it works with multi-user scenario so that each user can have own view of the dashboard?

Thanks and keep the good work!

[PeLi]

Hello,

yes, that's exactly the use-case I had in mind, you have one Dashboard which displays somthing based on a user selection.

e.g.

When user A wants to see the Dashboard for "Region A" I don't want that user B will also see "Region A" - he should still see whatever his selection is (now, even his selection gets changed).

 

For future scenarios, this could even be used to incorporate authorization capabilities such as passport (but that is out of scope for now I guess).

 

However, I have not looked into the latest code-base and the current standings. Should this whole matter/idea become a "push request" candidate we would have to look into this again in more detail, particularly regarding the “odd” behaviors reported in this thread.

Cheers - Peter

[Dave C-J]

Right now the underlying Node-RED instance is a per user runtime, and the dashboard is a single view into that instance. There are no immediate plans (here) to add any user management to the dashboard. We're happy to discuss thoughts and ideas.

[Quentin Lindh]

Natan,

I have been fing this to be a vey useful and powerful addition to the dashboard although I understand the modification is out of bounds of intended node-red usage.  I have been able to make some ui primatives work well well such as "switch" and "number picker"  But not the "dropdown" I see your reference to making the dropdown element function and wonder what I may be missing.  I an attaching an example flow which should  show my experience.

[{"id":"9667ba8f.865ac8","type":"ui_dropdown","z":"39f16eb3.8bda92","name":"","label":"meOnly","group":"afbe464f.2b4ca8","order":2,"width":0,"height":0,"passthru":true,"options":[{"label":"a","value":"a","type":"str"},{"label":"b","value":"b","type":"str"},{"label":"c","value":"c","type":"str"}],"payload":"","topic":"","x":532.5000801086426,"y":536.0002002716064,"wires":[["57306329.cb796c"]]},{"id":"b60b1866.d116d8","type":"ui_dropdown","z":"39f16eb3.8bda92","name":"target","label":"target","group":"afbe464f.2b4ca8","order":3,"width":0,"height":0,"passthru":true,"options":[{"label":"a","value":"a","type":"str"},{"label":"b","value":"b","type":"str"},{"label":"c","value":"c","type":"str"}],"payload":"","topic":"","x":873.6666870117188,"y":495.00019216537476,"wires":[[]]},{"id":"57306329.cb796c","type":"function","z":"39f16eb3.8bda92","name":"","func":"msg.InjectUiProps=true;\nmsg.meOnly=true;\nreturn msg;","outputs":1,"noerr":0,"x":695.5000114440918,"y":528.0002002716064,"wires":[["b60b1866.d116d8","928ed6bd.7fb948"]]},{"id":"22323842.a1df38","type":"ui_dropdown","z":"39f16eb3.8bda92","name":"all","label":"all","group":"afbe464f.2b4ca8","order":1,"width":0,"height":0,"passthru":true,"options":[{"label":"a","value":"a","type":"str"},{"label":"b","value":"b","type":"str"},{"label":"c","value":"c","type":"str"}],"payload":"","topic":"","x":512.6666564941406,"y":460.00010681152344,"wires":[["9999e229.aa016"]]},{"id":"9999e229.aa016","type":"function","z":"39f16eb3.8bda92","name":"","func":"msg.InjectUiProps=false;\nmsg.meOnly=false;\nreturn msg;","outputs":1,"noerr":0,"x":688.666633605957,"y":472.0000305175781,"wires":[["b60b1866.d116d8","928ed6bd.7fb948"]]},{"id":"928ed6bd.7fb948","type":"ui_text","z":"39f16eb3.8bda92","group":"afbe464f.2b4ca8","order":4,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":883.5000190734863,"y":441.00006675720215,"wires":[]},{"id":"afd5391b.f3c128","type":"comment","z":"39f16eb3.8bda92","name":"explanation","info":"after deployment, selecting form the \"all\" dropdown \nin which injectUIProps is set to false and myOnly is false\nthe target dropdown updates as does the text field\nhowever selecting from the meOnly dropdown which sets the values to true\nand therefore should emit to only one socketid results in no change to the target \ndropdown although the text element works fine.  \nthe target element stops accepting input changes from the \"all\" dropdown after this.\n","x":663.5000305175781,"y":377.33333587646484,"wires":[]},{"id":"afbe464f.2b4ca8","type":"ui_group","name":"Group 1","tab":"2b575422.633fbc","order":1,"disp":true,"width":6},{"id":"2b575422.633fbc","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

   
Any insights would be much appreciated as I am otherwise very pleased by how this works.

Thanks!

On Tuesday, February 28, 2017 at 3:27:39 AM UTC-8, Natan Sanson wrote:

[Natan Sanson]

Hi Quentin, I did a lot of modifications after what I posted here. I have in mind to publish in a couple of weeks a full user interface that works, hoping that this can be added to the original nod-red dashboard

Hope you can wait for it

Best regards,

    Natan

[Quentin Lindh]

That is very cool, I think it is a very valuable addition to the dashboard concept although I understand that it ups the complexity of the flows significantly and may be outside of the main use case for node-red-dashboard-  I will looks forwards to seeing what you are putting together.  Let me know if i can be of any help.

Thanks,

Quentin

[Natan Sanson]

Here it is

https://groups.google.com/forum/#!topic/node-red/kjBP82Pqhi4

[Quentin Lindh]

Great, thanks I am going to start testing it out now..