Building interactive dashboards with SVG

[Luc]

Hello,

I would like to add a dashboard builder and viewer to one of my lazarus application.
You know, the kind of nice looking dashboard and graphs/charts/gauges with some animations or additional infos when user is over a widget…
In short the same feeling you can find in some html5 powered report tools like zoho reports or devexpress dashboard.
 
I started to have a look at several components, especially svg rendering since I'm thinking about using svg rendering before sending the final result to a bitmap.

I already found some interesting components or libraries :

Graphics rendering
Vectorial : Agg, fpVectorial, VPR (Not sure it can be use with lazarus), cairo
Raster : Graphics32, BGRA

Dashboard designer
TcyResizer (cindy components pack)
RttiGrid (lazarus RTTI package)
TAchart with BGRA, Agg or fpVectorial rendering

Before starting to code, I would like some advices to be sure I'm not taking the wrong direction…

I'm first wondering which svg lib is the best to add user interaction (selecting graphics objects, resizing them etc.) and adding animation (the easiest to use, the fastest, dependencies on *.dll or *.so, platform limitation)

I would also like to know if it is possible to 'mix'  lcl components or if some other kind of components exist (Tlabel, Tedit, Tcheckboxes, TdrawGrid…) to use them directly on the rendering surface or if each component need its own svg canvas (for the later, I don't think I'm  skilled enough to create this kind of components)

Well... a lot of questions

maybe someone already though about this kind of dashboards or know others components or libraries that could help.

Many thanks
Luc

[Graeme]

I have had a very good experience with AggPas (included with fpGUI), but I know Lazarus also includes a copy of AggPas in the "components" directory. AggPas includes a very good SVG rendering support, combined with all the great features AggPas provides too, you end up with an awesome 2D graphics library.

AggPas includes a TAgg2D class for slightly easier usage (but with limited features) - that can be used in combination with LCL or fpGUI based applications. There is also a Agg_2D unit, which means you can even use AggPas in pure console mode (eg: Web Servers) which is awesome too.

[Luc]

Thanks Graeme for sharing your experience.

AggPas could be a good choice. It is very impressive and nice looking. I found a fork based on AggPas and written by Christian W BUDDE https://github.com/CWBudde/ but didn't have time to have a look at the code yet. Christian also has a html5 canvas delphi implementation that could be interesting.

Now I have to figure out how to design components and animate them with SVG. A starting point could be to design the widget (mainly gauges for begining) with Inkscape, then add some color customisation and animations by parsing/modifying the svg/xml at runtime.

Do you know a easy way to parse and replace svg elements ? Maybe AggPas already includes this kind of "tools"...









 

[Graeme]

I found a fork based on AggPas and written by Christian W BUDDE https://github.com/CWBudde/ but didn't have time to have a look at the code yet.

I had a look at that fork in the past. From what I can see the only "major" changes was to replace the Object types with Records or Classes. This was primarily done because Delphi removed (broke) support for Object types. FPC on the other hand has no such problem.

The switch to Classes also means more work for developers, having to explicitly instantiated class instances and free them later. Using Object types makes this a little easier with less effort by the programmer. Delphi's "new Record type with methods" is pretty much Object types - I have no idea why Delphi does some of the things they do. The Object type is an excellent and useful part of the Object Pascal language - even today.

Christian also has a html5 canvas delphi implementation that could be interesting.

Interesting, though I don't really know how it differs from a TCanvas or TfpgCanvas class - I'm not very familiar with HTML these days.

Do you know a easy way to parse and replace svg elements ? Maybe AggPas already includes this kind of "tools"...

I know AggPas includes its own stand-alone XML parses (because SVG is just XML really). So it might contain functionality you can use - I didn't check.

[aradeonas]

Luc if you want vector I think you should use fpGUI, it can very good and portable and I think its your best choice because you dont have to make component system from ground base.
Also if you can share what you will done or screenshots,I always interested on better looking UIs and I like to know what others do.

[Luc]

Yes, fpGUI would be nice but the initial app is done using Lazarus and I don't think you can mix a fpGUI form with a Lazarus FCL one.

I would be happy to give a try if someone has already done this.

for the charting part, I first tried to use TChart and did some experiment with BGRA and AggPas drawers.

TChart charts looks a little bit old fashion compared to html5 charting libraries, AggPas Text output is not always very accurate when drawing marks (maybe because of SVG and Font scaling).

I ended using BGRA. Then, as I also need to embed the charts in FastReport (5.3), I began to create a tfrxChartView component wrapping TChart.
With FastReport, plain drawing works, not looking very nice, but once I add BGRADrawer, some (not all) of the charts series loose colors and turn black, marks are not properly drawn, especially with antialiasing on...

I'm currently looking at ChartDirector (Commercial component with Com + ActiveX). I'm able to use the OLEServer, save the charts to file as image and load it back to display it, but can't have the view component (ActiveX) working for now (I'm loosing end-user interaction with the chart).

http://www.advsofteng.com/gallery.html
http://www.advsofteng.com/download.html

Another one could be TMS Chart. It would be great if they could  add Lazarus support...

BR
Luc

[aradeonas]

I think you can work with TChart and BGRA together (there was tries as I remember,search for it) and for reports an easy way can be making an bitmap and opening it in FastReport but with more work you can change FastReport's chart with your custom  version.

[Luc]

Yes, you can work with BGRA + TChart

here is a sample of code.

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

1. // BGRA - TChart
2.  
3. procedure TfrxChartView.Draw(Canvas: TCanvas; ScaleX, ScaleY, OffsetX,
4.   OffsetY: Extended);
5. var
6.   bmp: TBGRABitmap;
7.   id: IChartDrawer;
8.   rp: TChartRenderingParams;
9. begin
10.   bmp := TBGRABitmap.Create(Round(Width * ScaleX), Round(Height * ScaleY));
11.   FChart.DisableRedrawing;
12.   try
13.     id := TBGRABitmapDrawer.Create(bmp);
14.     BeginDraw(Canvas, ScaleX, ScaleY, OffsetX, OffsetY);
15.     DrawBackground;
16.     FillChart;
17.     FChart.Width:= Round(Width * ScaleX);
18.     FChart.Height:= Round(Height * ScaleY);
19.     id.DoGetFontOrientation := @CanvasGetFontOrientationFunc;
20.     rp := FChart.RenderingParams;
21.     FChart.Draw(id, Rect(0, 0,  FChart.Width, FChart.Height));
22.     FChart.RenderingParams := rp;
23.     Canvas.StretchDraw(Rect(FX, FY, FX1, FY1), bmp.Bitmap);
24.   finally
25.     FChart.EnableRedrawing;
26.     bmp.Free;
27.     DrawFrame;
28.   end;
29. end;  
30.  

But no matter what I tried, sometime the BMP draws some of the series with black areas...

[aradeonas]

I think you should take a look at a demo in BGRA-Control package that is about TChart.