Hello All,
I want to have some custom things on node-red dashboard.
For example:
Some text boxes, buttons etc. along with drag-drop of Nodes which existing dashboard is supporting.
Can you please help on this.
Thanks in advance.
Sorry but your question is a bit vague.
Which dashboard do you have installed?
(Menu / pallet manager / nodes)
Enter dashboard and what do you see?
(Example)
(or take a screen shot and show if you want.)
But I fear this needs to be known first before we can move forward.
Hello @Trying_to_learn ,
Thanks for reply.
I followed guide here:
able to open dashboard / GUI at: http://127.0.0.1:1880/
as shown on github page..
But I want to do some customization in GUI that we see by default.. For example: adding buttons, diable some nodes etc.
I think you missed what I asked.
There are a lot of dashboards available. I know. I made my own life miserable in the early days by NOT using the one I should have - me trying to be a smart a$$ to my own shame.
So I still don't know which dashboard you have installed.
In the editor screen press <alt> p to get the pallet manager. Start typing dashboard and it will clearly show you the information requested.
Its is showing:
node-red
3.0.2
Yes, that is the version of Node-red.
I'm asking what is the
I need to know the complete name of the DASHBOARD you have installed.
Hi @Pioneerj.
What you see at 127.0.0.1:1880 is perhaps something like this:
In Node-red terms, this is the editor, not a dashboard.
The left hand column is the palette. It includes the nodes that are installed by default plus any you yourself have installed.
You can install a dashboard. A few different ones are available but the "official" one is node-red-dashboard.
Once it is installed, your palette will include buttons and text boxes etc which you can drag into your flow in the the main editor panel.
After deploying, you can see your dashboard at 127.0.0.1:1880/ui, something like this maybe with text, buttons, dropdowns and other dashboard widgets.
I recommend watching this playlist: Node-RED Essentials. The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.
1 Like
Thanks for that. I think you saved me there. I am not explaining myself very well.
Yes, I have watched tutorials and github resources .
I have used general terminology like GUI / Dashboard. But in Node-Red world it has different meaning.. 
Sorry for the confusion..
My question is like default editor which comes .. How can we edit to have some extra things on editor like button or textboxes, and remove default palatte nodes when it launch ..
Not after launch, but I want to have some specific button by default in editor.
Can you explain why you want to remove some of the default palette nodes? Do you perhaps need multiple copies of Node-red, such as in a classroom?
What kind of computer will you be using?
At the top of the editor screen, next to the "Deploy" button is the "hamburger" button, three horizontal lines. One of the options it gives is "Manage Palette" allowing you to install / uninstall nodes.
Yes...I checked "hamburger button" where we can manually enable/disable or install/uninstall nodes.
Computer is linux machine where I will be running node-red editor.
I want to have minimal default nodes on palatte with some of my custom nodes which will be fulfilling my need. I want to have custom editor / UI with some additional button / text boxes to perform some operations which is not related to node-red.
In other words, I want to have control on editor code what to show / add something and some custom actions. so, when I load editor it comes with my changes by default.
I don't know any way to achieve that.
Sure. thank you..
anyone is having idea on this ?
I suggest that you start by editing the thread title to something like How to customise the node red editor. Then the people who know about that are more likely to see it. If you search the forum you should be able to find some help, there have been a number of threads on things like adding buttons to the top bar and so on.
Do you want them hidden (still usable) - OR - completely unavailable to the Node-RED editor & server?
You will probably need to create a theme or a plugin to achieve that level of customisation.
Alternatively, you could simply put Node-RED editor into an <iframe> and serve your own web page which adds buttons around the iFrame.
@Steve-Mcl Thank you very much for reply.
Do you want them hidden (still usable) - OR - completely unavailable to the Node-RED editor & server?
=> Yes, As I don't need it .. whichever is easier I can go with that.. But I want to do it before editor launch.
You will probably need to create a theme or a plugin to achieve that level of customisation.
=> Ok sure. I will check about it. Any reference will be helpful..
Alternatively, you could simply put Node-RED editor into an <iframe> and serve your own web page which adds buttons around the iFrame.
=> Sure.. I will check about it
Hello @Steve-Mcl,
Iframe approach I will be checking feasiblity.
Can you please provide your suggestion on 1st and 2nd point ?
There are options the node-red settings.js you can use to disable/inhibit core nodes. e.g.
nodesExcludes:['90-exec.js','28-tail.js','10-file.js','23-watch.js'],
Also see:
- Select which nodes to show in interface - #5 by dceejay
- Remove 'tail' node from node-red
- Can I completely remove a node from the editor? - #12 by knolleary
For themes, there are lots floating around. This repository has several themes where you could get an idea from.
There is also this old theme flowforge/flowforge-nr-theme which adds menu items and sets hyperlinks etc. See this file where the favicon is updated and menu items are added to node-red. You could add as many features to the frontend as you need.
Lastly, there are plugins where you could add features to both the backend (node-red core) and the editor ui. For example this plugin adds a button to the nodes editor. This plugin adds a sidebar next to the debug sidebar.
Hello @Steve-Mcl ,
I am able to exclude nodes..Thanks.
Regarding your suggestion:
Alternatively, you could simply put Node-RED editor into an <iframe> and serve your own web page which adds buttons around the iFrame.
In this approach node-red editor will be in iframe and my button/UI components will be outside of iframe..
if I want to send some data from my UI component to node-red or some data from node-red editor / flow to my UI component..
Is there any way for that ?
