Draw pathing line connecting two forms?

[FiftyTifty]

I've been working with visual node-based software, it's so much nicer for visualizing connections since it, well, shows the connections that your UI has with the data itself. Rather than spreadsheet style IDs, which has 0 visualization of the connections.

This would actually be doable, except for 2 things:

1. There's no documented way of drawing a connection between two UI forms
2. There's no way of doing the above and making the line path around other forms

The closest I've been able to find is the Eye Candy Controls' TECScheme graph view, but that's a self-contained UI that just does a few floating shapes with its own connections. Rather than being something we can reuse with forms. E.g, drawing a line connection between a TEdit and a TCheckBox.

Here's an image of an existing program (the dialogue editor in Skyrim's Creation Kit software) showing the lines I'm talking about:

(https://i.imgur.com/v9dnVDo.png)

Other examples are Quadspinner's Gaea, Blender/3DS Max/Maya's material editor, Unreal Engine's blueprints.

[cdbc]

Hi
Just 'Spitballing' here... Maybe it's possible to concuct some kind of collaboration between fpc/laz & "Castle Game Engine"?!?
CGE is written in pascal and can do all sorts of cool things...
I'm thinking, maybe ...just maybe 
Anyway, just 2 cents worth
Regards Benny

[FiftyTifty]

Man that'd be awesome if I had the skillset for that. But I don't think someone who is barely able to cludge together a couple TEdits is ready for something like that. Maybe one day!

I've been doing some reading, and apparently we can draw on the default window, Form1? By using Form1.Canvas. Haven't gotten it to draw the lines unfortunately. Here's what I've come up with:

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, Forms, Controls, Graphics, Dialogs, StdCtrls;
9.  
10. type
11.  
12.   { TForm1 }
13.   TEditArray = array of TEdit;
14.   TForm1 = class(TForm)
15.     procedure FormShow(Sender: TObject);
16.   private
17.  
18.   public
19.  
20.   end;
21.  
22. var
23.   Form1: TForm1;
24.  
25. implementation
26.  
27. {$R *.lfm}
28.  
29. { TForm1 }
30.  
31. procedure TForm1.FormShow(Sender: TObject);
32. var
33.   arrayEdit: TEditArray;
34.   editCurrent: TEdit;
35.   iCounter, iPosX, iPosY, iDestX, iDestY: integer;
36. begin
37.  
38.   SetLength(arrayEdit, 6);
39.   for iCounter := 0 to 5 do begin
40.  
41.     arrayEdit[iCounter] := TEdit.Create(Form1);
42.     editCurrent := arrayEdit[iCounter];
43.     editCurrent.SetBounds(10 * (iCounter * 10), editCurrent.GetDefaultHeight * iCounter, 50, 30);
44.     editCurrent.Text := 'Test! - ' + IntToStr(iCounter);
45.     editCurrent.Parent := Form1;
46.  
47.   end;
48.  
49.   for iCounter := 1 to Length(arrayEdit) - 1 do begin
50.  
51.       editCurrent := arrayEdit[iCounter - 1];
52.       iPosX := editCurrent.Left + editCurrent.Width;
53.       iPosY := editCurrent.Top + (editCurrent.Height div 2);
54.  
55.       editCurrent := arrayEdit[iCounter];
56.       iDestX := editCurrent.Left;
57.       iDestY := editCurrent.Top + (editCurrent.Height div 2);
58.  
59.       Form1.Canvas.Pen.Style := psSolid;
60.       Form1.Canvas.Pen.Color := clBlack;
61.       Form1.Canvas.Line(iPosX, iPosY, iDestX, iDestY);
62.       //ShowMessage('PosX = ' + IntToStr(iPosX) + ', PosY = ' + IntToStr(iPosY) + ', DestX = ' + IntToStr(iDestX) + ', DestY = ' + IntToStr(iDestY));
63.       Form1.Canvas.MoveTo(0,0);
64.       Form1.Invalidate;
65.  
66.   end;
67.  
68. end;
69.  
70. end.
71.  

Really basic, just spawn a bunch of TEdits, reposition them, and draw lines. But they don't show, even with/without Form1.Canvas.Refresh or Form1.Canvas.Invalidate.

My idea right now is I'll just do basic 2 point lines, and redraw them all whenever one of the forms are changed.

[wp]

A tree-graphing tool comes with Lazarus, the TLvlGraphControl. I used it to draw the class hierarchy of the series in TAChart (https://wiki.lazarus.freepascal.org/TAChart_documentation#Series) - see attached project.

[Handoko]

Maybe this simple code can give OP some ideas:
https://forum.lazarus.freepascal.org/index.php/topic,41036.msg284131.html#msg284131

Note:
The code in the link above has a bug, it will crash on certain conditions.

[FiftyTifty]

A tree-graphing tool comes with Lazarus, the TLvlGraphControl. I used it to draw the class hierarchy of the series in TAChart (https://wiki.lazarus.freepascal.org/TAChart_documentation#Series) - see attached project.

This is interesting. I'll take another look at using the graphs if I can't figure out why I can't draw a line on TForm1. I think with a chart I'll have to give up using forms, and instead display the data as simple text in the chart UI.

Maybe this simple code can give OP some ideas:
https://forum.lazarus.freepascal.org/index.php/topic,41036.msg284131.html#msg284131

Note:
The code in the link above has a bug, it will crash on certain conditions.

That's really cool! Shows I'm not far off what I want to do with TForm1. Just don't know why my lines aren't drawing.

Edit: Handoko I love you. The problem was that I didn't have the line code in the OnPaint event. Moved it over, and now we got lines! This way, I don't have to faff with the chart or weird overlay stuff. I can draw the lines directly between the forms.

Awesome stuff, thanks for the help you two.

[wp]

A tree-graphing tool comes with Lazarus, the TLvlGraphControl. I used it to draw the class hierarchy of the series in TAChart (https://wiki.lazarus.freepascal.org/TAChart_documentation#Series) - see attached project.

This is interesting. I'll take another look at using the graphs if I can't figure out why I can't draw a line on TForm1. I think with a chart I'll have to give up using forms, and instead display the data as simple text in the chart UI.

No, you cannot draw any lines here. Everything is drawn automatically, you just must must write some code to define which nodes are linked, and the nodes are placed and connected automatically. It is true, you have little control on how the LvlGraphControl works.