Can we extend Angular's UI functionality where we overlap elements like button, text, image etc., over each other to make better looking UI. I don't want to use template node for any custom UI development. I want to make my own custom nodes to develop any custom UI. But node-red's wrapper around Angular leaves little flexibility in terms of setting layout of page and arrangements of widgets.
I am just trying this and any suggestion towards solving the problem is appreciated.
I hope I've detailed the problem
Freedom over your personal dashboard design comes with https://flows.nodered.org/node/node-red-contrib-uibuilder .
node-red-dashboard and it's components are intentionally designed to be easy to use and look OK without spending too much time on it. If it had more freedom, it would probably require much more effort to build and then it loses it's powers. Take it as the prototyping tool if you like.
1 Like
Well, the reason I did not want to use template node is, simply, I dont want to write HTML CSS code. UIBuilder essentially requires one to write their own HTML/CSS/JS code.
Also, using UIBuilder will not allow me to use the inbuilt dashboard nodes.
Please comment if you have more ideas.
Well, you seem to want cake and eat it. Sadly, life rarely works out that way I'm afraid.
Dashboard is what it is, if you want to hack around with it you have to use the Dashboard Template. Similarly uibuilder is what it is. It is much easier to hack together fully custom ui's.
Either way, there is no escaping the need to write code.
Can we make custom UI nodes, for eg., image node and place a text node over it (both overlapping). I am trying a solution where any/all coding is not exposed in the editor and rather sits in JS file of my node.
Or can we edit how "groups" work in node red ? because "groups" in dashboard might have a setting which allows the arrangement of UI nodes
You may get some answers by examine https://github.com/bartbutenaers/node-red-contrib-ui-contextmenu. The first and only (correct me if I'm wrong) widget which has ability to be positioned fully by user choice.
I can only repeat the previous comments that Dashboard has a specific type of use-case. You said however, that you didn't want to write code but now you are saying simply that you want to hide the code from the users.
Yes, you can create your own Dashboard extensions but they still will generally need to work with the defined grid but perhaps something can be done.
With uibuilder, you can develop anything you like and if you want to hide code from end users, simply include a build step in your workflow to hide away most of the code into components and javascript which is then compressed for you by your build tool. That also lets you chose the front-end framework you are most comfortable working with whether that is Vue (included by default), jQuery, Angular (including the latest versions not just v1), REACT or even hand-crafted.
