From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
  AddNewProImage(TComponent, xName): TClProImage
  AddNewProImage(TComponent, xName): TClProImage


It is used to add images into the project. All of the TclImage features are available. Apart from this, border color, rounding borders, image stretching and fitting features are available. Parameters used in json structure:<br>
It is used to add images into the project. All of the TclImage features are available. Apart from this, border color, rounding borders, image stretching and fitting features are available. <br>
 
'''The available SetupComponent properties for TclProButton are:'''<br>
* Width
* Width
* Height
* Height
Line 21: Line 23:
* ImgUrl
* ImgUrl


Let's start with the definition to use ProImage.<br>
<blockquote style="background-color:#CBEDD5">To learn the purpose and usage of the '''SetupComponent''' and '''clProSettings''' properties, please refer to [[JSON Design| the page]]. </blockquote>
<blockquote style="background-color:#F7F5EB">
 
'''Var'''<br>
Let's define the proButton at the beginning.<br>
testImg: TClProImage;
 
</blockquote>
Var
We define proImg in MyForm. Let's add border color, resizing features for the picture apart from the standard definitions. Next, let's do border rounding.<br>
  ProImg1: TClProImage;
<blockquote style="background-color:#F7F5EB">
 
testImg := MyForm.'''AddNewProImage'''(MyForm,'testImg');<br>
Let's add the object to the form. Then, we'll assign properties to our image using both the SetupComponent structure and clProSettings.<br>
  clComponent.SetupComponent(testImg,'{"Align" : "Center","MarginBottom":135,"Width" :150, "Height":150,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2","BorderWidth":2,<br>
 
  "ImgUrl":"https://img.icons8.com/external-wanicon-lineal-color-wanicon/512/external-information-communication-wanicon-lineal-color-wanicon.png", "ImgFit":"yes"}');
:''For clProSettings:''
</blockquote>
<pre>
'''Code:'''<br>
ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
ProImg1.Align = alCenter;
ProImg1.Width = 150;
ProImg1.Height = 150;
ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
ProImg1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
ProImg1.clProSettings.RoundHeight = 10;
ProImg1.clProSettings.RoundWidth = 10;
ProImg1.clProSettings.BorderWidth = 2;
ProImg1.clProSettings.IsFill = True;
ProImg1.clProSettings.IsRound = True;
ProImg1.clProSettings.PictureSource = 'https://clomosy.com/demos/computerNetwork.png';
ProImg1.clProSettings.PictureAutoFit = True;
ProImg1.SetclProSettings(ProImg1.clProSettings);
</pre>
 
:''For SetupComponent:''
<pre>
ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
clComponent.SetupComponent(ProImg1,'{"Align" : "Center", "Width":150, "Height":150, "RoundHeight":10, "RoundWidth":10, "BorderColor":"#fabd2", "BorderWidth":2, "ImgUrl":"https://clomosy.com/demos/computerNetwork.png", "ImgFit":"yes"}');
</pre>
 
'''Example:'''<br>
 
:'''TRObject Syntax'''
<pre>
Var 
  Form1:TclForm;
  ProImg1: TClProImage;
 
void SetImage;
{
  ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
  ProImg1.Align = alCenter;
  ProImg1.Width = 150;
  ProImg1.Height = 150;
  ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
  ProImg1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
  ProImg1.clProSettings.RoundHeight = 10;
  ProImg1.clProSettings.RoundWidth = 10;
  ProImg1.clProSettings.BorderWidth = 2;
  ProImg1.clProSettings.IsFill = True;
  ProImg1.clProSettings.IsRound = True;
  ProImg1.clProSettings.PictureSource = 'https://clomosy.com/demos/computerNetwork.png';
  ProImg1.clProSettings.PictureAutoFit = True;
  ProImg1.SetclProSettings(ProImg1.clProSettings);
}
 
{
  Form1 = TclForm.Create(Self);
  SetImage;
  Form1.Run;
}
</pre>


:'''Base Syntax'''
:'''Base Syntax'''
'''Var'''    
<pre>
MyForm:TclForm;
Var   
testImg: TClProImage;<br>
  Form1:TclForm;
'''procedure''' SetImage;
  ProImg1: TClProImage;
'''begin'''
 
   testImg := MyForm.AddNewProImage(MyForm,'testImg');
procedure SetImage;
   clComponent.SetupComponent(testImg,'{"Align" : "Center","MarginBottom":135,"Width" :150, "Height":150,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2","BorderWidth":2,
begin
   "ImgUrl":"https://clomosy.com/demos/computerNetwork.png", "ImgFit":"yes"}');
   ProImg1 := Form1.AddNewProImage(Form1,'ProImg1');
'''end;'''<br>
   ProImg1.Align := alCenter;
'''begin'''
  ProImg1.Width := 150;
   MyForm := TclForm.Create(Self);
  ProImg1.Height := 150;
  ProImg1.clProSettings.BorderColor := clAlphaColor.clHexToColor('#fabd2');
  ProImg1.clProSettings.FontColor := clAlphaColor.clDarkorchid;
  ProImg1.clProSettings.RoundHeight := 10;
  ProImg1.clProSettings.RoundWidth := 10;
  ProImg1.clProSettings.BorderWidth := 2;
  ProImg1.clProSettings.IsFill := True;
  ProImg1.clProSettings.IsRound := True;
   ProImg1.clProSettings.PictureSource := 'https://clomosy.com/demos/computerNetwork.png';
  ProImg1.clProSettings.PictureAutoFit := True;
  ProImg1.SetclProSettings(ProImg1.clProSettings);
end;
 
begin
   Form1 := TclForm.Create(Self);
   SetImage;
   SetImage;
   MyForm.Run;
   Form1.Run;
'''end;'''
end;
 
</pre>
:'''TRObject Syntax'''
  Var 
    MyForm:TclForm;
    testImg: TClProImage;
 
  void SetImage;
  {
    testImg = MyForm.AddNewProImage(MyForm,'testImg');
    clComponent.SetupComponent(testImg,'{"Align" : "Center","MarginBottom":135,"Width" :150, "Height":150,"RoundHeight":10,"RoundWidth":10,"BorderColor":"#fabd2","BorderWidth":2,
    "ImgUrl":"https://clomosy.com/demos/computerNetwork.png", "ImgFit":"yes"}');
  }
 
  {
    MyForm = TclForm.Create(Self);
    SetImage;
    MyForm.Run;
  }


'''Output:'''<br>
'''Output:'''<br>
[[File:ProImage.png|frameless|450px]]
[[File:ProImage.png|frameless|450px]]

Revision as of 12:23, 22 August 2024

AddNewProImage(TComponent, xName): TClProImage

It is used to add images into the project. All of the TclImage features are available. Apart from this, border color, rounding borders, image stretching and fitting features are available.

The available SetupComponent properties for TclProButton are:

  • Width
  • Height
  • PositionX
  • PositionY
  • Align
  • TextColor
  • BackgroundColor
  • MarginTop
  • MarginBottom
  • MarginRight
  • MarginLeft
  • RoundHeight
  • RoundWidth
  • BorderColor
  • BorderWidth
  • ImgFit
  • ImgStretch
  • ImgUrl

To learn the purpose and usage of the SetupComponent and clProSettings properties, please refer to the page.

Let's define the proButton at the beginning.

Var
 ProImg1: TClProImage;

Let's add the object to the form. Then, we'll assign properties to our image using both the SetupComponent structure and clProSettings.

For clProSettings:
ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
ProImg1.Align = alCenter;
ProImg1.Width = 150;
ProImg1.Height = 150;
ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
ProImg1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
ProImg1.clProSettings.RoundHeight = 10;
ProImg1.clProSettings.RoundWidth = 10;
ProImg1.clProSettings.BorderWidth = 2;
ProImg1.clProSettings.IsFill = True; 
ProImg1.clProSettings.IsRound = True;
ProImg1.clProSettings.PictureSource = 'https://clomosy.com/demos/computerNetwork.png';
ProImg1.clProSettings.PictureAutoFit = True;
ProImg1.SetclProSettings(ProImg1.clProSettings);
For SetupComponent:
 ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
 clComponent.SetupComponent(ProImg1,'{"Align" : "Center", "Width":150, "Height":150, "RoundHeight":10, "RoundWidth":10, "BorderColor":"#fabd2", "BorderWidth":2, "ImgUrl":"https://clomosy.com/demos/computerNetwork.png", "ImgFit":"yes"}');

Example:

TRObject Syntax
Var   
  Form1:TclForm;
  ProImg1: TClProImage;

void SetImage;
{
  ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
  ProImg1.Align = alCenter;
  ProImg1.Width = 150;
  ProImg1.Height = 150;
  ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
  ProImg1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
  ProImg1.clProSettings.RoundHeight = 10;
  ProImg1.clProSettings.RoundWidth = 10;
  ProImg1.clProSettings.BorderWidth = 2;
  ProImg1.clProSettings.IsFill = True; 
  ProImg1.clProSettings.IsRound = True;
  ProImg1.clProSettings.PictureSource = 'https://clomosy.com/demos/computerNetwork.png';
  ProImg1.clProSettings.PictureAutoFit = True;
  ProImg1.SetclProSettings(ProImg1.clProSettings);
}

{
  Form1 = TclForm.Create(Self);
  SetImage;
  Form1.Run;
}
Base Syntax
Var   
  Form1:TclForm;
  ProImg1: TClProImage;

procedure SetImage;
begin
  ProImg1 := Form1.AddNewProImage(Form1,'ProImg1');
  ProImg1.Align := alCenter;
  ProImg1.Width := 150;
  ProImg1.Height := 150;
  ProImg1.clProSettings.BorderColor := clAlphaColor.clHexToColor('#fabd2');
  ProImg1.clProSettings.FontColor := clAlphaColor.clDarkorchid;
  ProImg1.clProSettings.RoundHeight := 10;
  ProImg1.clProSettings.RoundWidth := 10;
  ProImg1.clProSettings.BorderWidth := 2;
  ProImg1.clProSettings.IsFill := True; 
  ProImg1.clProSettings.IsRound := True;
  ProImg1.clProSettings.PictureSource := 'https://clomosy.com/demos/computerNetwork.png';
  ProImg1.clProSettings.PictureAutoFit := True;
  ProImg1.SetclProSettings(ProImg1.clProSettings);
end;

begin
  Form1 := TclForm.Create(Self);
  SetImage;
  Form1.Run;
end;

Output:
ProImage.png