Node or Flow based Programming UI Component

[PranitModak]

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

[falkoschindler]

This sounds interesting, but rather challenging. Any help towards implementing such an element is greatly appreciated!

[rodja]

pranitrock over at Discord seems to have a first proof-of-concept.

[Stefan2016]

I found this discussion, when I was searching for a flowchart library to be used within nicegui. Any updates regarding this?
I am just looking to solve this use case: users can draw custom flow charts within a nicegui app and those flow charts will be saved and possibly exported

[PranitModak]

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.

[PranitModak]

@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.mp4

Interacting with node canvas and deleting nodes:

nice-flow1.mp4

[rodja]

Looks good so far.

[Stefan2016]

@PranitModak that looks cool! Looking forward to test it on my own.

[NaMoCv]

How is the current progress of the work?

[ghost]

How is the current progress of the work? Where can I get the code for a study? tks!

[mingminyu]

Any progress of this work, if nicegui can intergerate vue flow, it must more powerful in pipeline work

[lapnd]

Hi @PranitModak
Can you share the code?
Thank you!

[blockoutdev]

@PranitModak Is this one still actively being worked on? I need it for my project. would be willing to help!

[WorkSync]

The author just redfined the meaning of "a week" and gave no responses to the community. Now I have to switch to "pyqt" and "Orange3" to finish my project which needs node editor.

May I ask how you integrated pyqt5 with nickegui? I am currently trying to embed a nickegui in pyqt5

[zhuyubei]

The author just redfined the meaning of "a week" and gave no responses to the community. Now I have to switch to "pyqt" and "Orange3" to finish my project which needs node editor.

May I ask how you integrated pyqt5 with nickegui? I am currently trying to embed a nickegui in pyqt5

No.Pure PyQt，without nicegui.

[WorkSync]

The author just redfined the meaning of "a week" and gave no responses to the community. Now I have to switch to "pyqt" and "Orange3" to finish my project which needs node editor.

May I ask how you integrated pyqt5 with nickegui? I am currently trying to embed a nickegui in pyqt5

No.Pure PyQt，without nicegui.

I want to integrate Vue or React into PyQt to make the front-end more beautiful. Is there any way , Please help me .

[zhuyubei]

The author just redfined the meaning of "a week" and gave no responses to the community. Now I have to switch to "pyqt" and "Orange3" to finish my project which needs node editor.

May I ask how you integrated pyqt5 with nickegui? I am currently trying to embed a nickegui in pyqt5

No.Pure PyQt，without nicegui.

I want to integrate Vue or React into PyQt to make the front-end more beautiful. Is there any way , Please help me .

By be what you need is this: https://github.com/zhiyiYo/PyQt-Fluent-Widgets

[WorkSync]

The author just redfined the meaning of "a week" and gave no responses to the community. Now I have to switch to "pyqt" and "Orange3" to finish my project which needs node editor.

May I ask how you integrated pyqt5 with nickegui? I am currently trying to embed a nickegui in pyqt5

No.Pure PyQt，without nicegui.

I want to integrate Vue or React into PyQt to make the front-end more beautiful. Is there any way , Please help me .

By be what you need is this: https://github.com/zhiyiYo/PyQt-Fluent-Widgets

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.

[123swk123]

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!

[blockoutdev]

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

[atticus-lv]

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

[Cane-xx]

Nice find. I really like the interactivity. Hope someone can port it over to work with NiceGUI.

[123swk123]

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.

[123swk123]

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.

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

• Basic framework integration of jointjs on nicegui
• JointJS module exposure to NiceGUI, this gives more transparent control to NiceGui.
  • dia
  • graph
  • paper
  • shapes

[123swk123]

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

[ljilekor]

Hi everyone,

Just a suggestion regarding nodes for visual programming.
A powerful framework : LiteGraph.js demo

An ultimate example of use : ComfyUI
Really amazing stuff, the most versatile open source ai tool for CG.

Nicegui implementation would be grrreat!

[ljilekor]

Python and Qt based Pyflow is inspired on the highly efficient Unreal blueprints

[Cane-xx]

I personally only need the most basic flowchart/flow diagram functionality (https://en.wikipedia.org/wiki/Flowchart), not to use the flowchart as a UI for controlling something else. If sky is the limit, then the previous mentioned "Vue Flow" (https://vueflow.dev/) is more aligned with my future needs. But hey I get it, everyone is interested in AI these days...