Node or Flow based Programming UI Component #1113
Replies: 11 comments 20 replies
-
|
This sounds interesting, but rather challenging. Any help towards implementing such an element is greatly appreciated! |
Beta Was this translation helpful? Give feedback.
-
|
pranitrock over at Discord seems to have a first proof-of-concept. |
Beta Was this translation helpful? Give feedback.
-
|
I found this discussion, when I was searching for a flowchart library to be used within nicegui. Any updates regarding this? |
Beta Was this translation helpful? Give feedback.
-
|
Sorry guys was a bit busy last few weeks but yes I have the component ready and working. I had coded it for version 1.2.x will have to modify it a bit to suit with 1.3.x framework. Shall push my PR by this week. |
Beta Was this translation helpful? Give feedback.
-
|
@Stefan2016 @rodja @falkoschindler Although I am facing few challenges in event handling of the nodes this is what I have achieved so far. Adding below element as is simple as this: (Flow is the element being included here) Adding new nodes: nice-flow.mp4Interacting with node canvas and deleting nodes: nice-flow1.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Looks good so far. |
Beta Was this translation helpful? Give feedback.
-
|
@PranitModak that looks cool! Looking forward to test it on my own. |
Beta Was this translation helpful? Give feedback.
-
|
How is the current progress of the work? |
Beta Was this translation helpful? Give feedback.
-
|
How is the current progress of the work? Where can I get the code for a study? tks! |
Beta Was this translation helpful? Give feedback.
-
|
Any progress of this work, if nicegui can intergerate vue flow, it must more powerful in pipeline work |
Beta Was this translation helpful? Give feedback.
-
|
Hi @PranitModak |
Beta Was this translation helpful? Give feedback.
-
|
@PranitModak Is this one still actively being worked on? I need it for my project. would be willing to help! |
Beta Was this translation helpful? Give feedback.
-
May I ask how you integrated pyqt5 with nickegui? I am currently trying to embed a nickegui in pyqt5 |
Beta Was this translation helpful? Give feedback.
-
No.Pure PyQt，without nicegui. |
Beta Was this translation helpful? Give feedback.
-
I want to integrate Vue or React into PyQt to make the front-end more beautiful. Is there any way , Please help me . |
Beta Was this translation helpful? Give feedback.
-
By be what you need is this: https://github.com/zhiyiYo/PyQt-Fluent-Widgets |
Beta Was this translation helpful? Give feedback.
-
Thank you for recommending this. Actually, I have already tried it and I hope to integrate with the front-end ecosystem to completely liberate the UI. |
Beta Was this translation helpful? Give feedback.
-
|
here is my initial implementation for one of my project use case, it allows you to define a node and add fields based on user choice.
https://github.com/123swk123/nodegraph-editor-nicegui any comments and suggestions are welcome! |
Beta Was this translation helpful? Give feedback.
-
|
looks sleek! Ideally you'd want to control the inputs and outputs of each node separately though. typical use case each node is tied to function with some set of inputs and outputs. the node graph lets you string outputs from one node into the inputs of another node. there will be at least one node whose outputs aren't connected to anything, evaluating said node by recursively evaluating its inputs gets you the output of the overall graph. for this to be useful it would probably make more sense to set the inputs and output connection points of a node using two separate lists of objects that include a name and type for the connection point |
Beta Was this translation helpful? Give feedback.
-
|
I think vue-flow is a good choice https://vueflow.dev/, it basic on react flow, a powerful flow editor that has many feats. It provide a example of using with quasar https://github.com/bcakmakoglu/vue-flow/tree/master/examples/quasar |
Beta Was this translation helpful? Give feedback.
-
|
Nice find. I really like the interactivity. Hope someone can port it over to work with NiceGUI. |
Beta Was this translation helpful? Give feedback.
-
|
for my next project its heavily based on flow graph function so I am planning to integrate with either JointJS or vueflow. currently I am more inclined towards JointJS. probably I will be done with it by end of the year. |
Beta Was this translation helpful? Give feedback.
-
Here is the JointJS on NiceGUI. Basic integration is done, and we can incrementally add features in Vue3 and automatically expose them to NiceGUI. Over the next few weeks, I will be slowly working on this and trying to add as many features as possible.
https://github.com/123swk123/jointjs-nicegui
|
Beta Was this translation helpful? Give feedback.
-
|
probably you should try Qt on webgl (Qt GUI on webbrowser) and use Vue to integrate the bussiness logic and server side rending
or another option is to use Qt WASM which might be the best solution and less hassle to integrate.
~SwK
|
Beta Was this translation helpful? Give feedback.
-
NODE FLOW UI Component
There is vue library/addon which helps creating node based applications which are used some of the top trending web apps today.
Vue-Flow Github : https://github.com/bcakmakoglu/vue-flow
Vue-Flow Home : https://vueflow.dev
It would be really great if we can integrate this in NiceGUI.
Also this library offers each node execution which if we can connect it to backed python for function block execution, then we get a really good node or flow based programming sandbox builder in place.
@rodja
Beta Was this translation helpful? Give feedback.
All reactions