FileForums - Progress: CIU Designer

FileForums (https://fileforums.com/index.php)

- Conversion Tutorials (https://fileforums.com/forumdisplay.php?f=55)

- - Progress: CIU Designer (https://fileforums.com/showthread.php?t=105121)

I am not sure how far you have gone with development however there are some information that could be helpful which I'd like to share as I've created a similar project for installer creator once before.

Colors used by FireMonkey framework are reversed compared to VCL (what Inno uses) so the function RGBtoBGR will be useful to you when you decide to add color picker.

The font sizes are different as well because the DPI used in VCL (72 dpi) is different from FMX (96 dpi) whatever font values used during design mode should be multiplied by the factor 72/96 and by 96/72 when going from inno to fmx.

In order to make the code for paging through the wizard simple (welcome, system, install), introduce TTabControl and make tabs for each one of these pages and to make the tabcontrol itself transparent, you'll need to set its StyleLookup property to "transparentedit", this applies to everything that you want to make transparent in FMX, just set the StyleLookup value to this vale.

To get a list of fonts supported by Fmx you should use Printer from FMX.Printers.Win

Code:

var

  Printer: TPrinterWin;

begin

  Printer := TPrinterWin.Create; 

  ComboBox1.BeginUpdate;

  try

    ComboBox1.Items.AddStrings(Printer.Fonts);

  finally

    ComboBox1.EndUpdate;

  end;

  Printer.Free;

It's wise to introduce class objects for things such as buttons because not only does this mean you'll write less code but this way you can consolidate any bugs/issues encountered with one simple fix.

Something like this:

Code:

type

  TDesignButton = class(TSelection)

  private

    FRectangle: TRectangle;

    FLabel: TLabel;

    procedure MyMouseEnter(Sender: TObject);

    procedure MyMouseLeave(Sender: TObject);

  public

    constructor Create(AOwner: TComponent); override;

    destructor Destroy; override;

    procedure SetText(AText: String);

    procedure SetFont(AName: String; ASize: Single; AColor: TAlphaColor);

    procedure SetFontStyle(ABold, AItalic: Boolean);

    procedure SetAlignment(AHorzAlign, AVertAlign: TTextAlign;

      AOffsetX, AOffsetY: Single);

    procedure SetImage(AFilename: String);

  end;



constructor TDesignButton.Create(AOwner: TComponent);

begin

  inherited Create(Owner);

  Self.HideSelection := True;

  Self.ShowHandles := False;

  Self.OnMouseEnter := MyMouseEnter;

  Self.OnMouseLeave := MyMouseLeave;

  FRectangle := TRectangle.Create(Self);

  FRectangle.Parent := Self;

  FRectangle.Align := TAlignLayout.Client;

  FRectangle.HitTest := False;

  FRectangle.Fill.Bitmap.WrapMode := TWrapMode.TileStretch;

  FRectangle.Stroke.Thickness := 0;

  FLabel := TLabel.Create(FRectangle);

  FLabel.Parent := FRectangle;

  FLabel.Align := TAlignLayout.Client;

  FLabel.HitTest := False;

  FLabel.Text := '';

  FLabel.StyledSettings := [];

end;



destructor TDesignButton.Destroy;

begin

  inherited Destroy;

end;



procedure TDesignButton.MyMouseEnter(Sender: TObject);

begin

  Self.HideSelection := False;

  Self.ShowHandles := True;

end;



procedure TDesignButton.MyMouseLeave(Sender: TObject);

begin

  Self.HideSelection := True;

  Self.ShowHandles := False;

end;



procedure TDesignButton.SetText(AText: String);

begin

  FLabel.Text := AText;

end;



procedure TDesignButton.SetFont(AName: String; ASize: Single;

  AColor: TAlphaColor);

begin

  FLabel.Font.Family := AName;

  FLabel.Font.Size := ASize;

  FLabel.FontColor := AColor;

end;



procedure TDesignButton.SetFontStyle(ABold, AItalic: Boolean);

begin

  FLabel.Font.Style := [];

  if ABold then

    FLabel.Font.Style := FLabel.Font.Style + [TFontStyle.fsBold];

  if AItalic then

    FLabel.Font.Style := FLabel.Font.Style + [TFontStyle.fsItalic];

end;



procedure TDesignButton.SetAlignment(AHorzAlign, AVertAlign: TTextAlign;

  AOffsetX, AOffsetY: Single);

begin

  FLabel.TextAlign := AHorzAlign;

  FLabel.VertTextAlign := AVertAlign;

  FLabel.Margins.Left := AOffsetX;

  FLabel.Margins.Right := -AOffsetX;

  FLabel.Margins.Top := AOffsetY;

  FLabel.Margins.Bottom := -AOffsetY;

end;



procedure TDesignButton.SetImage(AFilename: String);

begin

  FRectangle.Fill.Kind := TBrushKind.Bitmap;

  FRectangle.Fill.Bitmap.Bitmap.LoadFromFile(AFilename);

end;

with its usage being:

Code:

var

  BackButton, NextButton: TDesignButton;



procedure TForm2.FormShow(Sender: TObject);

begin

  BackButton := TDesignButton.Create(Form2);

  BackButton.Parent := Form2;

  BackButton.SetBounds(20, 20, 100, 30);

  BackButton.SetText('Back');

  BackButton.SetFont('Agency FB', 14, claGreen);

  BackButton.SetFontStyle(True, False);

  BackButton.SetAlignment(TTextAlign.Center, TTextAlign.Center, -10, 0);

  BackButton.SetImage('back.png');



  NextButton := TDesignButton.Create(Form2);

  NextButton.Parent := Form2;

  NextButton.SetBounds(140, 20, 100, 30);

  NextButton.SetText('Next');

  NextButton.SetFont('Agency FB', 14, claDeepPink);

  NextButton.SetFontStyle(True, False);

  NextButton.SetAlignment(TTextAlign.Center, TTextAlign.Center, 10, 0);

  NextButton.SetImage('Next.png');

end;

I have uploaded a compiled demo of what to expect as a result, but you can improve upon this by introducing Get* functions, eg. GetText, GetFontName, GetFontSize etc etc....

Thanks Razor for the information that might help.
A designer for the CIU has always been a complicated project, and often abandoned. I'm hoping that this time it can be completed, even if we have to wait a long time.

A suggestion of mine for the project is to include a "Reset Size" button or something like "Adjust To Image" so that when clicking the button display image or another component can be automatically resized to the real dimension of the png image.
Background images, LogoBG and some others cannot be resized, and those that can be resized by botva2 lose focus. So the design is better if it includes the dimensions of the components the same as the real image, but it should be allowed to freely adjust the dimensions so that the image file can be corrected later if necessary.

Quote:

Originally Posted by Razor12911 (Post 497843)

Code:

var

  Printer: TPrinterWin;

begin

  Printer := TPrinterWin.Create; 

  ComboBox1.BeginUpdate;

  try

    ComboBox1.Items.AddStrings(Printer.Fonts);

  finally

    ComboBox1.EndUpdate;

  end;

  Printer.Free;

Code:

type

  TDesignButton = class(TSelection)

  private

    FRectangle: TRectangle;

    FLabel: TLabel;

    procedure MyMouseEnter(Sender: TObject);

    procedure MyMouseLeave(Sender: TObject);

  public

    constructor Create(AOwner: TComponent); override;

    destructor Destroy; override;

    procedure SetText(AText: String);

    procedure SetFont(AName: String; ASize: Single; AColor: TAlphaColor);

    procedure SetFontStyle(ABold, AItalic: Boolean);

    procedure SetAlignment(AHorzAlign, AVertAlign: TTextAlign;

      AOffsetX, AOffsetY: Single);

    procedure SetImage(AFilename: String);

  end;



constructor TDesignButton.Create(AOwner: TComponent);

begin

  inherited Create(Owner);

  Self.HideSelection := True;

  Self.ShowHandles := False;

  Self.OnMouseEnter := MyMouseEnter;

  Self.OnMouseLeave := MyMouseLeave;

  FRectangle := TRectangle.Create(Self);

  FRectangle.Parent := Self;

  FRectangle.Align := TAlignLayout.Client;

  FRectangle.HitTest := False;

  FRectangle.Fill.Bitmap.WrapMode := TWrapMode.TileStretch;

  FRectangle.Stroke.Thickness := 0;

  FLabel := TLabel.Create(FRectangle);

  FLabel.Parent := FRectangle;

  FLabel.Align := TAlignLayout.Client;

  FLabel.HitTest := False;

  FLabel.Text := '';

  FLabel.StyledSettings := [];

end;



destructor TDesignButton.Destroy;

begin

  inherited Destroy;

end;



procedure TDesignButton.MyMouseEnter(Sender: TObject);

begin

  Self.HideSelection := False;

  Self.ShowHandles := True;

end;



procedure TDesignButton.MyMouseLeave(Sender: TObject);

begin

  Self.HideSelection := True;

  Self.ShowHandles := False;

end;



procedure TDesignButton.SetText(AText: String);

begin

  FLabel.Text := AText;

end;



procedure TDesignButton.SetFont(AName: String; ASize: Single;

  AColor: TAlphaColor);

begin

  FLabel.Font.Family := AName;

  FLabel.Font.Size := ASize;

  FLabel.FontColor := AColor;

end;



procedure TDesignButton.SetFontStyle(ABold, AItalic: Boolean);

begin

  FLabel.Font.Style := [];

  if ABold then

    FLabel.Font.Style := FLabel.Font.Style + [TFontStyle.fsBold];

  if AItalic then

    FLabel.Font.Style := FLabel.Font.Style + [TFontStyle.fsItalic];

end;



procedure TDesignButton.SetAlignment(AHorzAlign, AVertAlign: TTextAlign;

  AOffsetX, AOffsetY: Single);

begin

  FLabel.TextAlign := AHorzAlign;

  FLabel.VertTextAlign := AVertAlign;

  FLabel.Margins.Left := AOffsetX;

  FLabel.Margins.Right := -AOffsetX;

  FLabel.Margins.Top := AOffsetY;

  FLabel.Margins.Bottom := -AOffsetY;

end;



procedure TDesignButton.SetImage(AFilename: String);

begin

  FRectangle.Fill.Kind := TBrushKind.Bitmap;

  FRectangle.Fill.Bitmap.Bitmap.LoadFromFile(AFilename);

end;

with its usage being:

Code:

var

  BackButton, NextButton: TDesignButton;



procedure TForm2.FormShow(Sender: TObject);

begin

  BackButton := TDesignButton.Create(Form2);

  BackButton.Parent := Form2;

  BackButton.SetBounds(20, 20, 100, 30);

  BackButton.SetText('Back');

  BackButton.SetFont('Agency FB', 14, claGreen);

  BackButton.SetFontStyle(True, False);

  BackButton.SetAlignment(TTextAlign.Center, TTextAlign.Center, -10, 0);

  BackButton.SetImage('back.png');



  NextButton := TDesignButton.Create(Form2);

  NextButton.Parent := Form2;

  NextButton.SetBounds(140, 20, 100, 30);

  NextButton.SetText('Next');

  NextButton.SetFont('Agency FB', 14, claDeepPink);

  NextButton.SetFontStyle(True, False);

  NextButton.SetAlignment(TTextAlign.Center, TTextAlign.Center, 10, 0);

  NextButton.SetImage('Next.png');

end;

I have uploaded a compiled demo of what to expect as a result, but you can improve upon this by introducing Get* functions, eg. GetText, GetFontName, GetFontSize etc etc....

Thanks for the information bro. Time to change a lot of code where I use the TImage from. :D

Pretty Nice GUI Customized Installer

Gonna take a few changes to buttons from TImage to TDesignButton. Thanks again to Razor12911 who give some more details to make more progress button. Right now it's gonna be difficult to set the X, Y, Width, and Height from how to get the function from where I replace it.

I just upload some source files if you need my help with this solution. My brain got stuck for a moment. Link

Also, I've just made a little progress to make work these buttons before. :)

Time to add some a few setup settings?

Hello I hope the project is not dead?

Due to being a lot of busy for a few months, I've mostly forgotten that project is mostly dead... I'm back. Sorry for making you guys worried. :)

ha the best news for the future year.. I follow you because the project interests me a lot. I don't know how to code. but didn't drop anything. I am starting to use ciu and your program will make my task much easier.

the main thing is that it continues

[InstallOptions] is complete. Only a few things to get finish the job.
Anyway, Here's the Update 3 in case you would like to test the project. :)

At a glance only ApplicationName<LNG>= must not be correct snd functional.

ApplicationName<LNG>= there are 36 variations of the ApplicationName= key
Example: ApplicationNameAL=, ApplicationNameAR=, ApplicationNameBIA=, ApplicationNameCNS=, ApplicationNameCNT=, ApplicationNameCZ=, ApplicationNameDE=, etc

EDIT:
For the keys with boolean values (0/1), I particularly prefer a checkbox that is visually easier to understand. But either way it's good.

For the Lang= key it could be a checkbox group, one for each language and then when saving the INI it would form the key with the languages separated by a comma.

Hi @Carldric Clement...
Does the "CIU Designer" project continue?
Any updates for us?
Thanks!

Sabah Kaamatan Festival preparations

I had to put the project on hold first. maybe this month I won't be able to continue for a while because there are many things that cannot be avoided from the busyness of problems that need to be taken care of for now. So maybe you want to ask about the project next month, I will continue.