Realtime Node Framework (like Blenders Node Interface)

[minxomat 86]

Screenshot

 

 

 

 

 

Description

 

This lets you create bezier nodes between GUI controls. See screenshot for features. This is not an UDF.

 

Download

https://gist.github.com/minxomat/be51ae55cdf25c99c692

Edited April 30, 2015 by minx

[mesale0077 14]

cool

[jcpetu 2]

Hi Minx, this is a great job.Thanks a lot for sharing.

[JohnOne 1,598]

Have to ask a couple of questions.

First, what would one generally use bezier nodes for?

And second what is a bezier node?

[minxomat 86]

First, what would one generally use bezier nodes for?

To visualize a flow or connection of elements with different properties. Take a look at the Blender node system. This kind of visualisation is also used in a Color Grading (Davinci Resolve), Music Production (various synths) and VFX apps.

 

And second what is a bezier node?

A bezier connecting two nodes. It's control points are fixed at 50% width or height of the bezier.

Edited March 8, 2015 by minx

[jcpetu 2]

Minx, I attempted to change it a bit to make it On Event, but without success.

I added:

 $aMovables[$Bound][0] = GUICtrlCreateButton($sText, $iLeft, $iTop, $iWidth, $iHeight, 0x2000)
 GUICtrlSetOnEvent(-1, "NodeControl")
 

and the NodeControl out of the main loop:

expandcollapse popup

Func NodeControl()
    $cur = GUIGetCursorInfo()
    If Not IsArray($cur) Then Return
    If $cur[2] = 1 Then
        For $nCtrl = 0 To UBound($aMovables) - 1
            If $cur[4] = $aMovables[$nCtrl][0] Then
                $end = GUIGetCursorInfo()
                If Not IsArray($end) Then ContinueLoop
                $dx = $end[0] - $aMovables[$nCtrl][1]
                $dy = $end[1] - $aMovables[$nCtrl][2]
                $iDrawn = 0
                $iTimer = TimerInit()
                Do
                    $end = GUIGetCursorInfo()
                    $aMovables[$nCtrl][1] = $end[0] - $dx
                    $aMovables[$nCtrl][2] = $end[1] - $dy
                    If $aMovables[$nCtrl][1] <= 6 Then $aMovables[$nCtrl][1] = 6
                    If $aMovables[$nCtrl][2] <= 6 Then $aMovables[$nCtrl][2] = 6
                    If $aMovables[$nCtrl][1] + $aMovables[$nCtrl][3] >= ($iGUIWidth - 6) Then $aMovables[$nCtrl][1] = ($iGUIWidth - 6) - $aMovables[$nCtrl][3]
                    If $aMovables[$nCtrl][2] + $aMovables[$nCtrl][4] >= ($iGUIWidth - 26) Then $aMovables[$nCtrl][2] = ($iGUIHeight - 26) - $aMovables[$nCtrl][4]
                    $aMovables[$nCtrl][6] = 0x00FF00
                    $back = $g
                    $g = GUICtrlCreateGraphic(0, 0)
                    GUICtrlSetState(-1, 128)
                    DrawBounds()
                    For $tCtrl = 0 To UBound($aMovables) - 1
                        If $aMovables[$tCtrl][5] <> "" Then
                            $aNodes = StringSplit($aMovables[$tCtrl][5], ",", 3)
                            For $nConnection = 0 To UBound($aNodes) - 1
                                If Not IsNodeInObject($aNodes[$nConnection], $tCtrl) Then DrawConnection($tCtrl, $aNodes[$nConnection], $aMovables)
                                $iDrawn += 1
                            Next
                        EndIf
                    Next
                    GUICtrlDelete($back)
                    GUICtrlSetPos($aMovables[$nCtrl][0], $aMovables[$nCtrl][1], $aMovables[$nCtrl][2])
                    $aMovables[$nCtrl][6] = 0xFFFFFF
                Until $end[2] = 0
            EndIf
        Next
    EndIf
EndFunc   ;==>NodeControl

[minxomat 86]

Why would you do that? You can use OnEvent just fine with the handler in the main loop. If the user doesn't click anything, nothing will be redrawn (== no CPU time wasted).

[jcpetu 2]

It is just to combine with a program I made wich is actually On Event driven, to show the relationship among groups and users.

[minxomat 86]

No problem. You can have a Loop while using OnEvent. OnEvent only affects GUICtrl message handling.

[jcpetu 2]

OK, I'll make it.

Thanks a lot minx.

regards.

[spudw2k 209]

Very cool Minx!  I noticed the CPU is heavy when dragging nodes.  I inserted a sleep(10) (on line 120) after the for loops and it does not seem to have any major lag effect, but drops the CPU usage significantly.  I know a band-aid like this isn't desirable, but just thought I'd try and see what happens.  Regardless, Well done!

 

[minxomat 86]

-snip-

Well, I altered the script already to make it easier to handle for the CPU. Eventually, it completely broke down under the load of a realistic Node layout. Thus, I'm redesigning it using OpenGL and chunk-based refreshing now.

Before (pure AutoIt (also no GDI+)):

After (early prototype, using a better spring algorithm). OpenGL

Edited March 11, 2015 by minx

[mesale0077 14]

Before (pure AutoIt (also no GDI+)):

 source share please

[minxomat 86]

Before (pure AutoIt (also no GDI+)):

 source share please

It's a mess. Not my usual mess, a messy mess. Using 5 Nodes already pushes the limit. I implemented auto-resizing canvas, canvas dragging, Node selection etc. before givin up on this approach. The new version won't be much different, but the performance will be (a whole) lot better.

[ptrex 86]

Hello Minx,

This is really great !! 

I see lot's of applications using this in practice.

Speed and performance improvements are always welcome. 

I can imaging that the GDI wizard (UEZ) can be of big help here.

Great addition for AU3.

Thanks a lot for sharing, looking forward for the next release

rgds

ptrex

[minxomat 86]

Nah, OpenGL is the way to go here. There are inbuilt tools for chunk management. GDI+ is slower than GDI in most cases, which is why it doesn't make much sense here.

[MikahS 92]

Very cool script, Minx. 

[GerrOrneq 1]

@ minx,

Hi, I was amazed when I came across your posting.

I didn't know that AutoIt was capable of doing this sort of thing at all.

It seemed like it may be the answer to what I have been looking for for some time now.

I downloaded it and played about with it and then I realised "Whoa! I am like a caveman playing about with a smartphone, I can see what it is doing but am unable to comprehend how it does what it does."

But picking my way through it I tried to see if it would do as I would like it to and it wouldn't (or more probably, I stuffed up and cannot get it to do what I want!)

 

Perhaps you could tell me if the following is possible?

* To have the bezier curve change colour depending upon which direction the link goes in.

 i.e. in your example clicking on 'Render Framework' node lights up green to 3 nodes (SunX, AmbientLight &SunRed) going 'down' from 'Init' but if I click on any of the 3 nodes they go down further (green) and while I would still like to show those further 'down' links as green etc I would also like to show the 'upward' (back) links as say red or what ever.

My Very Limited understanding of the way it behaved when I tinkered with it suggests that it can only display one-way links.

I would need it to be able to display 3 types of links (3 colours) 1 for 'Up' links, 2 for 'Down' links & 3 for (Sideways/Parallel) links to a node that has an equivalent weight or value as the node being clicked on.

e.g. If it was for instance to display a family tree like the following:

[Mam]----[son1]----[Grandson]

|                  |

|              [son2]

[Dad]

Then Clicking on:

Mam should link blue to Dad, green to Son1 & Son2

Dad should link blue to Mam, green to Son1 & Son2

Son1 should link green to Grandson, Red back to Mam & Dad, then blue to Son2

(My usage will Not be for family trees but it seemed the simplest example of what linking I would like to perform.)

Hopefully I have explained it clearly enough.

* If the above is possible, how difficult would it be to create a UDF that could be called with the details and it would then display the linkages and return the ID of the node clicked on?

Say you had the above data in an array:

  ID     txt       Up       Same       Dwn

+----+------+-------+-----------+---------+

|   0  | Mam|          |       1      |   2, 3    |

+----+------+-------+-----------+---------+

|   1  | Dad |          |       0      |   2, 3    |

+----+------+-------+-----------+---------+

|   2  |Son1|   0, 1 |        3     |     4      |

+----+------+-------+-----------+---------+

|   3  |Son2|  0, 1  |        2     |             |

+----+------+-------+-----------+---------+

|   4  |Gson|     2   |               |             |

+----+------+-------+-----------+---------+

Then calling the UDF with array ID = 2 would read the array row 2 and populate the node freamework with the title 'Son1' and the other nodes 0, 1, 3, & 4. and colour the link apporpriately.

Thank You for the script and for letting me know if the above is possible.

br. DeMo.

[mLipok 795]

It is absolutely wonderful.

Surprising as it is simple and small.

Many times I thought about something like that, but there was no time to implement.

 

Thanks for sharing.

5*

 

Best regards,

mLipok