# Creating an animated dashboard
**URL:** https://discourse.nodered.org/t/creating-an-animated-dashboard/52563
**Category:** Dashboard
**Created:** [22 October 2021 08:46 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563 "2021-10-22T08:46:48Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@FrancisLeung](https://discourse.nodered.org/u/FrancisLeung)
#### Post date: [22 October 2021 08:46 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/1 "2021-10-22T08:46:48Z")
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
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [22 October 2021 08:51 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/2 "2021-10-22T08:51:06Z")
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.
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [22 October 2021 08:56 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/3 "2021-10-22T08:56:24Z")
> [@FrancisLeung](#):
>
> Hi, I appreciate what IBM developers put so much effort
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.
---
### Author:  [@FrancisLeung](https://discourse.nodered.org/u/FrancisLeung)
#### Post date: [22 October 2021 09:00 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/4 "2021-10-22T09:00:40Z")
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
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [22 October 2021 09:26 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/5 "2021-10-22T09:26:26Z")
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?
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [22 October 2021 09:28 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/6 "2021-10-22T09:28:46Z")
Please note I have moved this discussion to its own thread as it is not related to the 2.1.0 release announcement.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [22 October 2021 10:29 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/7 "2021-10-22T10:29:12Z")
Hi @FrancisLeung,
By looking at the discussion I think I am misinterpreting your question. Do you want to build something like [this](https://discourse.nodered.org/t/plc-hmi-using-svg-dashboard-node/26377)? Or you want yo build it without the Node-RED dashboard? Or something else?
Bart
---
### Author:  [@FrancisLeung](https://discourse.nodered.org/u/FrancisLeung)
#### Post date: [23 October 2021 06:19 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/8 "2021-10-23T06:19:00Z")
Hi Bart, yes, I would like such demonstration:
flow node dependencies:
1. [node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard)
2. [node-red-contrib-ui-level](https://flows.nodered.org/node/node-red-contrib-ui-level)
3. [node-red-contrib-ui-svg](https://flows.nodered.org/node/node-red-contrib-ui-svg/in/590bc13ff3a5f005c7d2189bbb563976)
4. [node-red-contrib-drawsvg](https://flows.nodered.org/node/node-red-contrib-drawsvg)
5. [node-red-contrib-pid](https://flows.nodered.org/node/node-red-contrib-pid)
6. [node-red-node-random](https://flows.nodered.org/node/node-red-node-random)
7. [node-red-contrib-message-sequencer](https://flows.nodered.org/node/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. 🙂
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [23 October 2021 08:13 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/9 "2021-10-23T08:13:35Z")
> [@FrancisLeung](#):
>
> whether or not the above nodes can be applied for Mitsubishi or Omron PLC please?
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...
> [@FrancisLeung](#):
>
> Is there an easy method for us to add other images
If you don't want to draw everything in svg shapes, you can indeed show existing images in the Node-RED dashboard (see [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Add-an-image-to-an-SVG-drawing)).
> [@FrancisLeung](#):
>
> on the background of the webpage in HTML format directly?
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).
---
### Author:  [@FrancisLeung](https://discourse.nodered.org/u/FrancisLeung)
#### Post date: [25 October 2021 06:38 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/10 "2021-10-25T06:38:32Z")
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. 🙂 😀
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [24 November 2021 06:39 UTC](https://discourse.nodered.org/t/creating-an-animated-dashboard/52563/11 "2021-11-24T06:39:24Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.