Getting Started with PlotLab: FireMonkey vs VCL IntegrationPlotLab is a powerful plotting and charting library for Delphi and C++Builder that targets both the traditional VCL framework and the cross-platform FireMonkey (FMX) framework. Choosing between VCL and FireMonkey (or supporting both) affects UI design, platform targets, component usage, and integration details. This article walks you through what PlotLab offers, the differences between integrating it with VCL and FireMonkey, setup steps, code examples, performance considerations, and best practices for building maintainable charting features.
Why PlotLab?
PlotLab provides a feature-rich set of plotting components designed for scientific, engineering, and business charting needs. Key features include:
- Flexible series types (line, scatter, bar, area, surface, heatmap, etc.)
- High-resolution rendering with anti-aliasing
- Interactive tools: zooming, panning, cursors, tooltips, and selection
- Export to images and vector formats
- Support for large datasets with optimized drawing
- Customizable axes, grid lines, annotations, and legends
When integrating PlotLab, you gain immediate access to a mature plotting toolkit with customization and performance tuning options suited for both desktop-only and cross-platform applications.
VCL vs FireMonkey: High-level Differences
VCL (Visual Component Library)
- Desktop-only (Windows) native controls and look-and-feel.
- Mature, stable, and highly performant for Windows-specific UIs.
- Uses Windows GDI/GDI+ or Direct2D for rendering depending on settings.
FireMonkey (FMX)
- Cross-platform: Windows, macOS, iOS, Android (and Linux with third-party support).
- GPU-accelerated rendering using a backend (Direct2D/Direct3D on Windows, Metal on macOS/iOS, OpenGL ES on mobile).
- Different component architecture and styling model compared to VCL.
If you target only Windows and want native controls and predictable behavior, VCL is a solid choice. If you need a single codebase across desktop and mobile, FireMonkey is the way to go.
Installation and Setup
- Obtain PlotLab and its components for your Delphi/C++Builder version.
- Add the PlotLab package(s) to your IDE:
- Install the design-time package(s) via Component > Install Packages or the IDE’s package manager.
- For VCL:
- Make sure the runtime package is accessible and palette components appear under a PlotLab category.
- For FireMonkey:
- Install FMX-specific packages; PlotLab typically provides FMX components with the same or similar API surface as VCL counterparts.
- Add the required units/headers to your project (Delphi: uses clauses; C++Builder: includes).
First Example: Creating a Simple Line Plot
Below are concise examples showing how to create a basic line plot in both VCL and FMX. The API names may vary slightly depending on PlotLab versions — adapt unit names and class names to your installed package.
VCL (Delphi)
uses Vcl.Forms, PlotLab.VCL.Chart, PlotLab.Series; procedure TForm1.FormCreate(Sender: TObject); var Chart: TplChart; // hypothetical PlotLab chart class Series: TplLineSeries; i: Integer; begin Chart := TplChart.Create(Self); Chart.Parent := Self; Chart.Align := alClient; Series := TplLineSeries.Create(Chart); Series.Title := 'Sine Wave'; Chart.AddSeries(Series); for i := 0 to 360 do Series.AddPoint(i, Sin(i * Pi / 180)); Chart.Invalidate; end; FireMonkey (Delphi)
uses FMX.Forms, PlotLab.FMX.Chart, PlotLab.Series; procedure TForm1.FormCreate(Sender: TObject); var Chart: TplChart; Series: TplLineSeries; i: Integer; begin Chart := TplChart.Create(Self); Chart.Parent := Self; Chart.Align := TAlignLayout.Client; Series := TplLineSeries.Create(Chart); Series.Title := 'Sine Wave'; Chart.AddSeries(Series); for i := 0 to 360 do Series.AddPoint(i, Sin(i * Pi / 180)); Chart.Repaint; end; Notes:
- FireMonkey uses TAlignLayout constants; VCL uses alClient.
- Methods like AddSeries, AddPoint, Invalidate/Repaint are common but check your PlotLab version for exact names.
Handling Touch and Mouse Interaction
VCL
- Mouse events dominate (OnMouseDown, OnMouseMove, OnMouseUp).
- Use mouse wheel for zooming; provide keyboard shortcuts if appropriate.
FireMonkey
- Supports both mouse and touch gestures.
- FMX has a gesture and multi-touch framework (OnGesture, TGestureManager) — PlotLab FMX components often expose pinch/zoom and pan behavior natively.
- Ensure hit-testing and gesture conflicts are resolved in parent controls (e.g., scrollable containers).
Rendering and Performance Considerations
- VCL rendering is CPU-driven; for very large datasets, consider simplifying series (decimation, downsampling) or using FastLine/optimized series types.
- FireMonkey leverages GPU acceleration; it handles many points faster, but GPU overhead and shader differences across platforms can affect visuals and precision.
- For both frameworks:
- Use buffer-based drawing or double-buffering where possible.
- Avoid updating the full chart frequently; update series data and call Invalidate/Repaint selectively.
- Consider progressive rendering for very large datasets (draw a rough overview quickly, then refine).
Cross-Platform Data & UI Strategy
If you plan to support both VCL and FMX:
- Separate business logic and data from UI code. Keep plotting data in platform-agnostic units or classes.
- Encapsulate chart construction and configuration behind an interface or factory so you can produce either a VCL chart or an FMX chart from the same higher-level code.
- Use conditional compilation where necessary:
{$IFDEF MSWINDOWS} // VCL-specific code {$ELSE} // FMX-specific code {$ENDIF} - Design UI workflows that translate between mouse-centric and touch-centric interactions.
Exporting and Printing
- PlotLab components typically support exporting to bitmap formats (PNG, BMP) and vector formats (PDF, SVG) — check which formats are implemented per framework.
- VCL printing integrates with Windows printing subsystems; FMX has cross-platform printing support but behaves differently per OS.
- For consistent export results across platforms, consider exporting to an intermediate vector format (SVG/PDF) when supported.
Theming and Styling
VCL
- Visuals follow Windows themes; you can customize colors, pens, and brushes programmatically.
- Classic look-and-feel; simpler to match native controls.
FireMonkey
- Styling system is flexible: styles and stylebooks can change the appearance of the chart controls and UI components.
- Take care with platform differences in fonts, DPI scaling, and control metrics.
Common Pitfalls
- Assuming identical API behavior between VCL and FMX components — verify method/property names.
- Neglecting DPI and scaling differences, especially on high-DPI displays and mobile screens.
- Not separating platform-specific code early, which makes later cross-platform support harder.
Best Practices
- Keep plotting logic testable and UI-agnostic.
- Provide user controls for downsampling and data windowing to keep interactive performance smooth.
- Use consistent color palettes and legends to help users interpret data across platforms.
- Profile rendering on target devices (especially mobile) to find bottlenecks.
- Document platform-specific behaviors in your codebase (e.g., gesture behaviors in FMX).
Example: Encapsulating Chart Creation
A simple factory approach keeps UI code clean:
type IChartWrapper = interface procedure AddLineSeries(const ATitle: string; const AData: TArray<Double>); procedure SaveToPNG(const AFileName: string); end; function CreateChartWrapper(AOwner: TComponent): IChartWrapper; Implement two versions (VCL and FMX) that both fulfill IChartWrapper, and call CreateChartWrapper from shared code.
Conclusion
PlotLab is a versatile plotting library that can serve both VCL and FireMonkey applications. Choose VCL for Windows-native, highly predictable UIs and FireMonkey for cross-platform reach. Keep plotting logic separated from UI details, watch for rendering and input differences, and optimize for the data sizes and devices you target. With careful design, you can share most of your plotting code and deliver consistent charting experiences across platforms.
Leave a Reply