Recent

Author Topic: 2D Flowchart  (Read 19809 times)

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #15 on: July 31, 2014, 11:37:56 pm »
I am a bit puzled by graphics performance in C# compared to FPC.

This flowchart component exist in C# and FPC now. The FPC one feels fast at start and get slower as you add symbols to draw - at my computer it start getting slow at ca 700 symbols. The C# version is much slower at start, but is still going strong with the same speed at 1700 symbols.

Obviously the rendering in .NET must be very good compared to native Windows.

I should note that if I run the C# on my dell with 8 cores it have problems even at 10 symbols because the CPU slows down the frequency when it's on batteries. This test was on an older 2-core at faster frequency - and .NET Forms is very dependant on a single core for GUI work.

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: 2D Flowchart
« Reply #16 on: July 31, 2014, 11:51:53 pm »
What exactly are you using to draw your graph when using Free Pascal? Straight LCL, BGRAGraphics, AggPas, fcl-image?  Are you continuously drawing and refreshing the display, or do you first paint in memory, then blit the image to the screen?
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

engkin

  • Hero Member
  • *****
  • Posts: 2513
Re: 2D Flowchart
« Reply #17 on: July 31, 2014, 11:55:53 pm »
Without some source code, it is hard to tell if you used the right method. Have you seen this page?

elraymonds

  • Newbie
  • Posts: 1
Re: 2D Flowchart
« Reply #18 on: August 01, 2014, 09:11:26 am »
You can use a flowchart software to create your flowchart diagram, then convert it to xml and embed it to your code. works for me

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #19 on: August 01, 2014, 12:39:00 pm »
You can use a flowchart software to create your flowchart diagram, then convert it to xml and embed it to your code. works for me

They have some nice work indeed. Sadly I need the full editor embedded on the desc-top + I want something I have the sorce code to so I am guaranteed it can do what I want.

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #20 on: August 01, 2014, 02:29:13 pm »
What exactly are you using to draw your graph when using Free Pascal? Straight LCL, BGRAGraphics, AggPas, fcl-image?  Are you continuously drawing and refreshing the display, or do you first paint in memory, then blit the image to the screen?

My first test was to draw rounded rectangles directly on TCanvas from a TScrollBox - in this stage I manage 10,000. As soon as I add text it drops to 800ich. This is not exact measurements it is more a indication of the point where I feel the editor get sticky and less nice to work with. I did set DoubleBuffered, but realized that did little + flicking is not my issue here. The screen is close to flicker free.

Without some source code, it is hard to tell if you used the right method. Have you seen this page?

I added BGRABitmap now, but the performance I get with antialiasing on is that it start getting sticky at 100-200ich symbols. I am testing with rounded rects without text as you can see below. I really like the quality of the BGRABitmap, but I am a bit concerned over my performance at the time being.

I will attempt an implementation based on BGRABitmap and see what I end up with. The real diagram will render and symbols are usually spread out so the behaviour will be nice at 1:1 zoom, but the problem is as the user zoom on large diagrams.

I have included my performance test below - This is just a brute force test to get a feeling about performance limitatioons and the path forward, but please feel free to suggest.

procedure TFlowChart.Paint;
var
    img:TBGRABitMap;
    x,zx :Integer;
    line: TBGRAPixel=(blue: 255; green: 0; red: 0; alpha: 255);
    back: TBGRAPixel=(blue: 255; green: 255; red: 0; alpha: 255);
begin
    Img := TBGRABitmap.Create(ClientWidth, ClientHeight, BGRAWhite);

    // draw grid
    x:=-1;
    while x < 2000 do
    begin
      x:=x+gridSize;
      zx:=x;//Round(x*zoom);
      img.DrawHorizLine(0,zx,2000,BGRABlack);
      img.DrawVertLine(zx,0,2000,BGRABlack);
    end;

    // draw n symbols brute force
    for x:=1 to 200 do
    begin

      Img.RoundRectAntialias(x,y,x+100,x+50,20,20,line,1,back);

    end;

    Img.Draw(Canvas, 0, 0, True);
    Img.Free;

end;     

Also thanks for all the  feedback and help. It is very nice for a newbie like myself to see that the community is stretching out to help.

Laksen

  • Hero Member
  • *****
  • Posts: 617
    • J-Software
Re: 2D Flowchart
« Reply #21 on: August 01, 2014, 02:38:52 pm »
Try to only allocate the bitmap once. Allocating it for each frame will be very slow.

Just clear it in the start of the Paint routine instead.

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: 2D Flowchart
« Reply #22 on: August 01, 2014, 02:50:38 pm »
Yup, allocating a bitmap on every paint is a BIG performance killer.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #23 on: August 01, 2014, 11:13:25 pm »
Try to only allocate the bitmap once. Allocating it for each frame will be very slow.

Just clear it in the start of the Paint routine instead.

Agree, but it makes marginal difference in this case.

The snip below and the call to RoundRectAntialias is responsible for 99% of the performance issue. It behaves nice with 1 to ca 50, but start getting sticky from there and up.

    for x:=1 to 200 do
    begin

      img.RoundRectAntialias(x,x,x+100,x+50,20,20,line,1,back);

    end;

I am wondering if I am doing something utterly wrong ?

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: 2D Flowchart
« Reply #24 on: August 05, 2014, 05:37:21 pm »
I have included my performance test below - This is just a brute force test

Attached is a AggPas version of your demo. Though I am still not sure how you actually do your tests and limitations.  Can you post a screenshot of what you actually want to accomplish?

Either way, here is a AggPas console version (no fpGUI dependencies, hence the drawing API is  more complex looking). I painted 200 rounded rectangle in 468ms. In comparison, 200 standard rectangles take 20ms less, so rounded or not doesn't really make a difference to AggPas. Drawing 10,000 rounded rectangles completed in 800ms.

Some notes:
  The rectangle lines are painted with alpha suppport for good measure (solid lines look so ugly). I also painted with a 2 pixel width line. AggPas supports sub-pixels too, so for fine lines you can paint with a 0.4 pixel width if you want. :)

NOTE:
  • This test was run on a super crappy and slow work laptop. My home desktop will be about 300+% faster.
  • I didn't use a high resolution timer, only Now(), so the time results might not be that accurate.

Code: [Select]
c:\devel\tests>console_aggpas_graphtest.exe
Grid drawing: time spent: 00.016
Rounded rect drawing: time spent: 00.452
Total time: 00.468

I've also attached the PNG image this example app generates.

Edit:
Here is the results of the same application running on my desktop PC using 64-bit FreeBSD. As expected, quite a bit faster than my work laptop.
Code: [Select]
[aggpas_console]$ ./console_aggpas_graphtest
Grid drawing: time spent: 00.006
Rounded rect drawing: time spent: 00.136
Total time: 00.142
« Last Edit: August 05, 2014, 09:23:18 pm by Graeme Geldenhuys »
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #25 on: August 06, 2014, 12:38:31 pm »
Thanks. I will disect that then I get home. What I want to achieve is a path forward on graphics that satisfy my requirements for quality and performance. The 2d flowchart is only a test case because it expose what I want to see. In my version I also have scrolling and zooming. If it can handle those it will handle real-time instrumentation.

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #26 on: August 14, 2014, 03:36:08 pm »
Attached is a AggPas version of your demo. Though I am still not sure how you actually do your tests and limitations.  Can you post a screenshot of what you actually want to accomplish?

I compiled and ran your test, but I don't see any drawings?

zamtmn

  • Sr. Member
  • ****
  • Posts: 365
Re: 2D Flowchart
« Reply #27 on: August 14, 2014, 08:27:20 pm »
janvb
Take a look also at ZCAD http://sourceforge.net/projects/zcad/ It's not quite 2D Flowchart, but complete vector editor.
Simple graphics program based on ZCAD engine - http://sourceforge.net/projects/zcad/files/simplecad.7z/download

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: 2D Flowchart
« Reply #28 on: August 15, 2014, 12:12:44 am »
I compiled and ran your test, but I don't see any drawings?
It's a console program that generates a PNG image of the same name as the application. It was a quick and simple example to enable me to time AGGPAS drawing speed from start to end. The drawing code was based on your BGRABitmap example.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

janvb

  • Jr. Member
  • **
  • Posts: 76
Re: 2D Flowchart
« Reply #29 on: August 16, 2014, 04:53:07 pm »

It's a console program that generates a PNG image of the same name as the application. It was a quick and simple example to enable me to time AGGPAS drawing speed from start to end. The drawing code was based on your BGRABitmap example.

Keep in mind that I am new to FPC, how do I get started with fpGUI w/Aggpas on a TForm? Do you have any getting started turorial?