Create Custom Blocks for your Diagram in Delphi, WEB Core and Lazarus



With TMS FNC Blox you have the ability to create high-quality diagrams and flowcharts with the help of some quick and easy selection tools.

As this is a FNC product, this means that you can use this in multiple frameworks with the same code. These are VCL, FMX/Firemonkey, Lazarus and TMS WEB Core.

Webinar: Visually create and execute workflows in Delphi apps

First of all we want to invite you to our webinar which is scheduled for the 27th of October. In this webinar Bruno will show you how you can easily get started with TMS FNC Blox and along the way we will create a more advanced diagram with custom blocks and the ability to visualize the flow steps in real-time. And ultimately we will use our blocks to create some basic visual programming tool.

Custom Blocks

As a lot of our FNC components, TMS FNC Blox is highly customizable. A lot of people have the need for their own blocks and in this video Holger shows you how easy it is to create them from scratch. Below the video you can find the steps and the code.

Next week we will create a block that uses an image to get your blocks to an even higher visual level.

We will create a block for the basic digital logic AND gate. So first of all we'll add the class. 

uses
  FMX.TMSFNCBloxControl, FMX.TMSFNCBloxCoreBlock;

type
 TAndPortBlock = class(TTMSFNCBloxBlock)
 public
   constructor Create; override;
   procedure GetBlockPath(APath: TTMSFNCBloxPath; ADrawer: TTMSFNCBloxBlockDrawer); override;
 end;

We'll override the constructor to add the LinkPoints, these are the points to which we can connect the lines.

When we add them, we need to select the position based on the OriginalRect and can choose the direction in which the line should connnect.

constructor TAndPortBlock.Create;
var
  w, h: Double;
begin
  inherited;

  w := OriginalRect.Right - OriginalRect.Left;
  h := OriginalRect.Bottom - OriginalRect.Top;

  LinkPoints.Clear;
  LinkPoints.AddLink(0, h / 4, aoLeft);
  LinkPoints.AddLink(0, 3 * h / 4, aoLeft);
  LinkPoints.AddLink(w, h / 2, aoRight);
end;

The other method that we need to customize is GetBlockPath. This procedure is used to draw the block. We will construct the path based on some basic drawing functions.

uses
 FMX.TMSFNCBloxCoreElement, FMX.TMSFNCBloxCorePaintInfo, FMX.TMSFNCBloxCoreTypes, FMX.TMSFNCBloxCoreLinkPoint;

procedure TAndPortBlock.GetBlockPath(APath: TTMSFNCBloxPath; ADrawer: TTMSFNCBloxBlockDrawer);
var
  poly: TTMSFNCBloxPointArray;
  w, h: Double;
begin
  inherited;
  APath.Reset;

  w := OriginalRect.Right - OriginalRect.Left;
  h := OriginalRect.Bottom - OriginalRect.Top;

  APath.AddLine(0, h/4, w/4, h/4);
  APath.CloseFigure(False);

  APath.AddLine(0, 3 * h / 4, w/4, 3 * h / 4);
  APath.CloseFigure(False);

  APath.AddLine(w/4, 0, w/4, h);
  APath.AddLine(w/4, 0, w/2, 0);
  APath.AddArc(w/4, 0, w/2, h, 270, 180);
  APath.AddLine(w/2, h, w/4, h);
  APath.CloseFigure(False);

  APath.AddLine(3 * w / 4, h / 2, w, h / 2);
end;

Now we just need to add it to our BloxControl and Selector and this is done with the RegisterElements event of the TMSFNCBloxControl. There we'll have to call the RegisterElement procedure and in this method you can choose how the block is called in the TTMSFNCBloxSelector.

uses
  FMX.TMSFNCBloxUIRegistration;

procedure TForm.TMSFNCBloxControl1RegisterElements(Sender: TObject);
begin
  RegisterElement(TAndPortBlock, '', 'AND Port', 'All Port Blocks');
end;

If you are interested you can try it for yourself with TMS FNC Blox.