GermanBluefox / node-red-vis

Web visualisation for node-red.
Other
15 stars 7 forks source link

Some question help #15

Closed marksev1 closed 7 years ago

marksev1 commented 7 years ago

Hello,

with regular Node-red, not with IObroker, how would I make this work: https://www.npmjs.com/package/iobroker.vis-lcars https://github.com/ioBroker/ioBroker.vis-lcars ? :)

So I could have LCARS interface instead of normal one... :)

marksev1 commented 7 years ago

Ping.

GermanBluefox commented 7 years ago

It is strange, normally you should have the widgets set installed. and you can use it like this. Which widget sets can you see? image

marksev1 commented 7 years ago

I see them thank you! Closing issue :).

marksev1 commented 7 years ago

Tho' if i try the demo with the demo flow I don't get any data inside the debug panel of the node-red....hmmm..

gillerman commented 7 years ago

Thank you for looking into this.

From: marksev1 [mailto:notifications@github.com] Sent: Wednesday, November 16, 2016 5:17 PM To: GermanBluefox/node-red-vis node-red-vis@noreply.github.com Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

Tho' if i try the demo with the demo flow I don't get any data inside the debug panel of the node-red....hmmm..

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-261090194, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDT7O0AHl4QKFf7ErwoBE_K0m4-K5Lks5q-4DlgaJpZM4KwAqW.

marksev1 commented 7 years ago

Also I would be interested on where to find the LCARS demo UI the whole one, like its on the iobroker forum?

gillerman commented 7 years ago

Here are my note about getting Node-RED working with SVG:

How to access the msg object from browser JavaScript To access the msg from script and also to run scripts when the msg changes though it isn't exactly an obvious process! The following code will enable you to see what is going on and should be enough to let you write your own scripts: {{msg.payload}}

Similarly,

Push some data into the template, switch to the Dashboard UI page 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. So don't forget to check that the watched object contains something useful before relying on it being there. Anyway, the bottom line is that you can use the watch function to monitor the msg.payload (or of course the whole msg or something else suitable). 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. Sending and receiving messages to/from javascript in Dashboard Template node This is a simple flow demonstrating how to send messages to javascript in a Dashboard Template node and how to send messages back to the flow from javascript. In addition it shows how to send a message to node-red when the view is opened in a browser, which is useful for preloading data into the view when it is first opened. As is shown in the flow below, exactly the same code can be used in two templates, each picking up messages from node-red and sending responses back.

{{msg.payload}}

Sending and receiving messages to/from d3 JavaScript in a Dashboard Template node

test

Global context There is also a global context available that is shared by, and accessible to all nodes. For example to make the variable foo available globally across the canvas: global.set("foo","bar"); // this is now available to other nodes var myfoo = global.get("foo"); // And can then be read using .get This should now be "bar" The global context can also be pre-populated with objects when Node-RED starts. This is defined in the main settings.js file under the functionGlobalContext property.

From: marksev1 [mailto:notifications@github.com] Sent: Wednesday, November 16, 2016 5:19 PM To: GermanBluefox/node-red-vis node-red-vis@noreply.github.com Cc: John Gillerman john@gridcloudsys.com; Comment comment@noreply.github.com Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

Also I would be interested on where to find the LCARS demo UI the whole one, like its on the iobroker forum?

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-261090795, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDTywiXHUugxTFiFFEMSD9_g8akPQmks5q-4FsgaJpZM4KwAqW.

marksev1 commented 7 years ago

Wow looks very hard.

gillerman commented 7 years ago

This code is close to working:

From: marksev1 [mailto:notifications@github.com] Sent: Wednesday, November 16, 2016 5:42 PM To: GermanBluefox/node-red-vis node-red-vis@noreply.github.com Cc: John Gillerman john@gridcloudsys.com; Comment comment@noreply.github.com Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

Wow looks very hard.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-261096297, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDT6fcric11z_dP9Zxn_ni2mD6n0Epks5q-4angaJpZM4KwAqW.

marksev1 commented 7 years ago

So this I should put into template node and connect to vis node? Could you post the entire node-red flow maybe please?

gillerman commented 7 years ago

This code works:


From: marksev1 notifications@github.com Sent: Sunday, November 20, 2016 6:36 AM To: GermanBluefox/node-red-vis Cc: John Gillerman; Comment Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

So this I should put into template node and connect to vis node? Could you post the entire node-red flow maybe please?

You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-261772936, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDT6r1WrFN23T1_TYU1JcWxKnzrj1dks5rADDYgaJpZM4KwAqW.

marksev1 commented 7 years ago

Can you post example flow please, because I don't know how i should use this code?

Is it possible to set that the button changes color when I toggle it (LCARS vis buttons)?

gillerman commented 7 years ago

[{"id":"2f635cee.80ecd4","type":"ui_button","z":"29288854.03af38","name":"Green","group":"b7c9949.a48fa68","order":0,"width":"2","height":"1","label":"Green","color":"","icon":"","payload":"green","payloadType":"str","topic":"color","x":584.9999847412109,"y":91,"wires":[["3ca2d9e2.f5f346"]]},{"id":"3ca2d9e2.f5f346","type":"ui_template","z":"29288854.03af38","group":"b7c9949.a48fa68","name":"ColorRect","order":0,"width":0,"height":0,"format":"<div ng-model=\"msg.payload\"> \n<svg class=\"classVP\">\n<script type=\"text/javascript\" src=\"d3\d3.min.js\">\n\n\n

\n\n\n\n\n ","storeOutMessages":false,"fwdInMessages":false,"x":772.3332977294922,"y":72.33332824707031,"wires":[[]]},{"id":"75c13f81.2cc64","type":"ui_button","z":"29288854.03af38","name":"Blue","group":"b7c9949.a48fa68","order":0,"width":"2","height":"1","label":"Blue","color":"","icon":"","payload":"blue","payloadType":"str","topic":"color","x":586.9999847412109,"y":54,"wires":[["3ca2d9e2.f5f346"]]},{"id":"b7c9949.a48fa68","type":"ui_group","z":"","name":"d3","tab":"7008b9bd.de4b88","order":1,"disp":true,"width":"15"},{"id":"7008b9bd.de4b88","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":2}]

From: marksev1 [mailto:notifications@github.com] Sent: Sunday, November 20, 2016 1:01 PM To: GermanBluefox/node-red-vis node-red-vis@noreply.github.com Cc: John Gillerman john@gridcloudsys.com; Comment comment@noreply.github.com Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

Can you post example flow please, because I don't know how i should use this code?

Is it possible to set that the button changes color when I toggle it (LCARS vis buttons)?

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-261793804, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDT_GFxMbQiytweMVxtppvDbOIMU2Wks5rAIrXgaJpZM4KwAqW.

marksev1 commented 7 years ago

Edit: disregard previous post, its valid :).

gillerman commented 7 years ago

What version of Node-RED and the dashboard are you using?

[{"id":"2f635cee.80ecd4","type":"ui_button","z":"29288854.03af38","name":"Green","group":"b7c9949.a48fa68","order":0,"width":"2","height":"1","label":"Green","color":"","icon":"","payload":"green","payloadType":"str","topic":"color","x":584.9999847412109,"y":91,"wires":[["3ca2d9e2.f5f346"]]},{"id":"3ca2d9e2.f5f346","type":"ui_template","z":"29288854.03af38","group":"b7c9949.a48fa68","name":"ColorRect","order":0,"width":0,"height":0,"format":"<div ng-model=\"msg.payload\"> \n<svg class=\"classVP\">\n<script type=\"text/javascript\" src=\"d3\d3.min.js\">\n\n\n

\n\n\n\n\n ","storeOutMessages":false,"fwdInMessages":false,"x":772.3332977294922,"y":72.33332824707031,"wires":[[]]},{"id":"75c13f81.2cc64","type":"ui_button","z":"29288854.03af38","name":"Blue","group":"b7c9949.a48fa68","order":0,"width":"2","height":"1","label":"Blue","color":"","icon":"","payload":"blue","payloadType":"str","topic":"color","x":586.9999847412109,"y":54,"wires":[["3ca2d9e2.f5f346"]]},{"id":"b7c9949.a48fa68","type":"ui_group","z":"","name":"d3","tab":"7008b9bd.de4b88","order":1,"disp":true,"width":"15"},{"id":"7008b9bd.de4b88","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":2}]

From: marksev1 [mailto:notifications@github.com] Sent: Sunday, November 20, 2016 4:21 PM To: GermanBluefox/node-red-vis node-red-vis@noreply.github.com Cc: John Gillerman john@gridcloudsys.com; Comment comment@noreply.github.com Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

There is some problem with this json it doesn't import in node-red ok.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-261806655, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDTx1WgViLrgKqi2_1ZKmhXpl8x0f_ks5rALmmgaJpZM4KwAqW.

marksev1 commented 7 years ago

Gillerman are you trolling me, I don't need some square changing color, i'd like to connect node-red-vis dashboard with debug inside node-red?

gillerman commented 7 years ago

I don’t think I have ever been accused of trolling anyone ever before. I had thought you wanted to run your visualization within a node-red dashboard. The code I sent you shows you how a Node-RED template can receive an event and then do subsequent processing using d3. But I think you are correct, we seem to have reached a point of diminishing returns.

From: marksev1 [mailto:notifications@github.com] Sent: Monday, November 21, 2016 3:58 PM To: GermanBluefox/node-red-vis node-red-vis@noreply.github.com Cc: John Gillerman john@gridcloudsys.com; Comment comment@noreply.github.com Subject: Re: [GermanBluefox/node-red-vis] Some question help (#15)

Gillerman are you trolling me, I don't need some square changing color, i'd like to connect node-red-vis dashboard with debug inside node-red?

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/GermanBluefox/node-red-vis/issues/15#issuecomment-262064921, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJZDT-h1toHWleHRbYuIiyeLSF6uqv60ks5rAgXRgaJpZM4KwAqW.

marksev1 commented 7 years ago

I will close this issue for now.