2018년 2월 12일 월요일

New components to create FMX apps from various designs

http://fmxdesign.com has released a component that allows you to develop Delphi FMX apps with great design.


This components support the FireMonkey platforms which are Android, IOS, OSX, and Windows.

Component products are in three groups.
Rapid Design UX for Good Design Apps, Rapid Design Chart for easy chart creation and
And a free component, Rapid Design LAB.
A free component, Rapid Design LAB, provides a circle gauge and an analog clock where developers can change images.
There are many sample images of the panel and needle, so there is no problem if you do not have the image file separately.
In the case of Analog Clock, the transparent panel allows the developer to use the picture as a clock background.

There is also a component that can freely draw various shapes from triangle.





Commercial components, Rapid Design UX and Chart, provide a free trial version.
The trial version has no functional limitations, and a message appears at run time.

Rapid Design UX is made up of 23 components, which allows the developer to freely set colors and sizes without using styles.
It also provides popular toast messages and pop-up dialog boxes on mobile.
(TRDToastMessage, TRDPopupDialog, TRDInputQueryBox)
These can be used at design time by simply changing the desired attributes by changing the button text etc. at the time of method call after setting properties such as color.

There are four types of buttons that can be used for navigation.
(TRDNavigationButtons, TRDNavigationSlider, TRDButtonSet, TRDToggleButtons)
They have the advantage of being able to develop quickly because the size and spacing of the buttons are automatically adjusted according to the number of added image icons.
Buttons that do not use icons are automatically sized and spaced when you enter only the number of buttons.
It also has the advantage of reducing the amount of coding by processing each button click event in a single method.



The Rapid Design Chart provides the four most commonly used charts.
(TRDChartBarVert, TRDChartBarHori, TRDChartLine, TRDChartPie)
If you put the data in Lines in the same way as putting data in TMemo, it is easy to use because the chart is created automatically.
In addition, you can create a multi-chart simply by stacking layers by making each chart's background transparent.


It is very easy to use, so try the free trial version.
For more information, see http://fmxdesign.com or YouTube videos.

I will post the detailed usage of each component again next time.



2017년 9월 6일 수요일

A line drawing with two positions (x1, y1) and (x2, y2) with TLine.

A line drawing with two positions(x1, y1) and (x2, y2) with TLine.

TLine's attributes are height and width, and TLine's coordinates are x, y position at the top left, so it is not easy to draw lines by specifying (x1, y1) and (x2, y2).

I have created a method that draws two positions using TLine's Rotation Angle attribute.

The principle is to find only the line width and rotation angle value with two postion.
First, you can specify the properties of TLine as shown in the figure.
The important thing is RotationCenter.
If RotationCenter has default values ​​of 0.5 and 0.5, it rotates around the center of the line.
RotationCenter should be changed to (0,0) to rotate around the end point of the line (x1.y1).



The line width and rotation angle designation can be calculated as shown in the figure.
Red color line is a TLine.



I wrote the sample code using the above method.
The position.X values is x2>x1 when the rotation angle range is 0 ~ 180.
If the SIN value exceeds 180, the +/- value changes.
So, as in the sample code, if x1>x2 then, change two position.
The drawing order is not considered.

Even if you do not understand the principle of line drawing, you can draw a line by inputting the Thickness of two Position and line as parameters.
Of course, color change is also possible.

procedure TForm1.Draw_Line2P( x1,y1, x2,y2, thick : single );
var
  d, xtemp, ytemp, rAngle : single;
  drawLine : TLine;
begin
  if x1 > x2 then
  begin
    xtemp := x1;     ytemp := y1;
    x1 := x2;          y1 := y2;
    x2 := xtemp;     y2 := ytemp;
  end;

  d := SQRT( Power( x2-x1, 2 ) + Power( y2-y1, 2 ) );   // Uses System.Math
  rAngle := RadToDeg( ArcSin( (y2-y1)/d ));

  drawLine := TLine.Create(self);
  drawLine.Parent := self;
  drawLine.LineLocation := TLineLocation.Inner;
  drawLine.LineType := TLineType.Bottom;
  drawLine.RotationCenter.X := 0;
  drawLine.RotationCenter.Y := 0;
  drawLine.Stroke.Thickness := thick;
  drawLine.Height := 1;
  drawLine.Width  := d;
  drawLine.Position.X := x1;
  drawLine.Position.Y := y1;
  drawLine.RotationAngle := rAngle;
end;