Hi, I appreciate what IBM developers put so much effort on the development and improvement of Node-Red; which is very useful in term of saving much more time in developing SCADA and HMI functions. May I suggest whether or not IBM developers update more function such as animation function shown on attachment for any software engineer or hobbyist can develop animation with JavaScript on Node-Red? Best regards, Francis
What you are showing here isn't what Node-RED does. It isn't in itself a presentation service but rather a low-code programming tool.
What you are showing would need to be in a node or set of nodes that produce and animate the output. Perhaps a little like a specialist version of Dashboard.
Undoubtedly would be a great project for someone to pick up.
Just to correct you on this, it isn't for "IBM developers" to do anything.
Node-RED is an open source project of the OpenJS Foundation. It is developed by the Node-RED community - some of whom are IBMers. But I left IBM earlier this year.
It is for those who want to contribute to the project, whoever they may work for, to help move it forward.
3 Likes
Hi, Thanks you for your correction. Do you know how I can develop animation on Node-red platform like all developers to contribute their programming results for Node-Red please? Best regards, Francis
So I would expect this to be a web-based display since that is the most flexible.
That means that you would need to start by looking at what technology is best for producing that kind of display in a web page. From that you can work backwards to see how best to be able to interact with Node-RED.
Node-RED is great at managing the DATA aspects - manipulation, inputs and outputs.
You could do worse than looking at how Dashboard works - with a number of dedicated nodes and some central configuration that manage the various components into a Single Page Application (SPA) web page.
There has, of course, been a lot of discussion recently about Dashboard and where it goes next given that it is based on Angular v1 which is at end of life. So there may be some really useful learning points there that might help steer your thinking.
You also have uibuilder which is also an extension for Node-RED that facilitates data-driven web UI's and that would be something that you might consider as a "helper". I've been busy recently trying to get uibuilder to a position where it can be used in a more "Dashboard-like" way with additional nodes and dedicated components. The difference to Dashboard being that uibuilder facilitates a more open, standardised way of developing the front-end while taking care of the communications with Node-RED for you. You might want to read some of my posts on the development of uibuilder v5 to get a feel for where things are going and I'd be more than happy to continue a thread on how uibuilder might help this kind of project.
Does that make any kind of sense?
Please note I have moved this discussion to its own thread as it is not related to the 2.1.0 release announcement.
1 Like
Hi @FrancisLeung,
By looking at the discussion I think I am misinterpreting your question. Do you want to build something like this? Or you want yo build it without the Node-RED dashboard? Or something else?
Bart
Hi Bart, yes, I would like such demonstration:
flow node dependencies:
- node-red-dashboard
- node-red-contrib-ui-level
- node-red-contrib-ui-svg
- node-red-contrib-drawsvg
- node-red-contrib-pid
- node-red-node-random
- node-red-contrib-message-sequencer
Unfortunately, there interfaced PLC is Seimen S7, not Mitsubishi or Omron PLC; may I enquire whether or not the above nodes can be applied for Mitsubishi or Omron PLC please?
Is there an easy method for us to add other images for animation, such as food mixer image working with chiller image or virtual circuit of electric current flowing over Arduino breadboard connected with sensor, etc., on the background of the webpage in HTML format directly?
I do not want to develop a long codes of HTML and JavaScript for an animation webpage for Node-Red dashboard; I hope whether or not it is possible to create a simple method for user to cut and past different images in svg or bitmap format on the webpage via nodes' properties of Node-Red directly in order to save time for creating image in term of long codes. Many Thanks for all guys to share your valuable opinion. 
I don't know anything about PLC. I strongly recommend you to create a separate discussion about that, mentioning PLC in the subject. In a discussion about dashboard animations, you won't get much response...
If you don't want to draw everything in svg shapes, you can indeed show existing images in the Node-RED dashboard (see wiki).
I have no idea what you mean about that. The svg node can display an svg drawing in the Node-RED dashboard. Is that want you want to achieve. If not then you can't use the svg node, and you will need to develop something yourself (e.g. using uibuilder).
Hi Bart,
yes, you answered my questions already. I will try to run node of ui-svg and uibuilder for creating an image which I want the pattern for the dashboard of Node-Red. Many thanks again. 
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
