Hi all,
I've been thinking about this idea for a couple months now. It's not a new idea by any means, but I'd like to open a discussion about it.
In a nutshell:
I think Node-RED would benefit from an intuitive, visual UI editor for creating rich web apps. Dashboard is too limited, and UI Builder is too difficult for non web developers.
A visual (i.e. drag-and-drop) editor - where users would be able to contribute widgets/UI elements to a library - would be a leap forward in usability and deployment times for any IoT project.
To complement this would be the ability to serve flows as client-side JS from within Node-RED, which would need to be nicely integrated with the UI builder.
At the moment, as far as I can see there is no software on the market that incorporates a large, user-driven library of UI elements with a visual UI builder for fast web app development. I think Node-RED is a perfect candidate for this functionality. I understand development of such a feature would not be simple, but it seems like the natural next step for Node-RED.
Wouldn't it be amazing if we could build and deploy a complete IoT project and rich web app from within Node-RED with minimal programming effort?
Please let me know what you think. I look forward to hearing your ideas and criticism.
Regards,
David
Hi,
we do have a pull request being worked on - https://github.com/node-red/node-red-dashboard/pull/482 - that will go some way to adding graphical layout to the existing dashboard. It won't be WYSIWYG but is a step in that direction.
There are several other dashboard projects around that are also looking to try different ways to build dashboards - eg https://flows.nodered.org/node/node-red-contrib-polymer and https://flows.nodered.org/node/node-red-contrib-component-dashboard
Longer answer is that yes it would be amazing if such a tool existed... we are just waiting for someone to step up and do it... - are you that person ?
Hi Dave,
I would love to do it, but my JS knowledge is minimal (I'm a mechatronics engineer).
Perhaps I can make a start, but I'd need to spend a few months learning before I'll be able to produce code that isn't complete garbage.
I have thought about the concept in more detail than what I've written above, but I'm not sure about the architecture or what framework I should use to develop it.
What do you think about the idea of client-side flows?
Well, you've hit the core of the issue I'm afraid. We all would like what you've described 
Sadly, we've not yet found a way to do it that is compatible with our available time and skills 
There are a few visual web ui tools that exist for certain frameworks so you can use those with uibuilder to ease the problem if you feel that your web skills aren't quite there. However, I would also say, don't be put off by the apparent learning curve of uibuilder. Using the VueJS/bootstrap-vue example from the WIKI (which will become the default installation with v2 of uibuilder), you will find that building quite complex ui's is relatively easy even with limited web development skills.
I am certain that lots of us will continue to worry away at this issue - hopefully we will find an answer eventually.
Thanks for your reply.
Actually I find uibuilder easy enough to use with the help of a couple templates I've found, and I reckon with a little more learning I'd probably be able to start a small business selling dashboard monitoring solutions... but I think this would be missing the big picture.
It would be much cooler if we could create a tool that would allow a novice put together a production-grade dashboard solution in a couple days without prior JS knowledge (in the same way that Node-RED enables a novice to wire together their devices with no prior JS knowledge).
In my mind this is the last missing piece of the puzzle (along with client flows).
I am happy to devote my free time to such a project but I would need guidance from the community about best practice implementation and architecture.
Sounds good. It would be great to see a tool like that.
I've had a few ideas that would build widgets/components on top of uibuilder but how to go further and produce a full graphical ui editor is currently beyond my skill. But if I can help, I'd be happy to.
A bit of a tangent:
I'm sure you're all aware of the huge interest in Node-RED from the factory automation industry due to smart manufacturing/Industry 4.0 hype - hence Hitachi's huge contribution to the codebase. From my viewpoint, it seems as though every manufacturing company wants to implement this ethereal "smart factory", but none really knows how. Many large software/consulting companies - including I believe IBM and Hitachi - offer smart manufacturing consulting and solutions, but they charge high prices which are only really accessible to large manufacturing enterprise. There are small software firms offering basic dashboard monitoring implementations for SME, but due to a lack of R&D budget I guess, their solutions are somewhat simplistic (usually just a dashboard to monitor machine uptime and productivity).
So I think a visual UI builder for Node-RED would make smart manufacturing more accessible to industry, and hopefully spur innovation and growth in the area.
1 Like
Wow, if you think it's beyond your skill level then I probably don't stand a chance 
Well if you don't at least start, you will never know 
and if you do, who knows where it will take you - an adventure at least.
1 Like
