From Clomosy Docs

No edit summary
No edit summary
Line 1: Line 1:
AddNewProImage(TComponent, xName): TClProImage
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewProImage(AComponent: TCLComponent; xName: string): TClProImage;
</div>


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>
<span style="color:blue"><b>AComponent</b></span> : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.<br>


'''The available SetupComponent properties for TclProImage are:'''<br>
<span style="color:blue"><b>xName</b></span> : The name of the defined image should be written.<br>
* Width
* Height
* PositionX
* PositionY
* Align
* TextColor
* BackgroundColor
* MarginTop
* MarginBottom
* MarginRight
* MarginLeft
* RoundHeight
* RoundWidth
* BorderColor
* BorderWidth
* ImgFit
* ImgStretch
* ImgUrl


<blockquote style="background-color:#CBEDD5">To learn the purpose and usage of the '''SetupComponent''' and '''clProSettings''' properties, please refer to [[Pro Object Properties| the page]]. </blockquote>


Let's define the proImage at the beginning.<br>
TclProImage is used to add an image to a form. Adding visuals to an application makes it more attractive and user-friendly.<br>
All of the TclImage features are available. Apart from this, border color, rounding borders, image stretching and fitting features are available. <br>


  Var
<div class="alert alert-info" role="alert" data-bs-theme="light">
  ProImg1: TClProImage;
Refer to the [[TclImage]] page for standard image usage.
</div>
 
<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition
|-
|TclProImage || ProImage1 : TclProImage; || A variable belonging to the TclProImage class is created.
|-
|AddNewProImage || ProImage1  = Form1.AddNewProImage(Form1,'ProImage1'); || A new image is added to the form.
|}
</div>


Let's add the object to the form. Then, we'll assign properties to our image using both the SetupComponent structure and clProSettings.<br>
In addition to the features of a standard image, TclProImage offers new and advanced features, which we will explain in detail below.<br>


:''For clProSettings:''
<div class="row">
<pre>
<div class="col-lg-6">
ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
ProImg1.Align = alCenter;
<div style="font-size: 16px;font-weight: bold;text-align:left;">
ProImg1.Width = 150;
  clProSettings Properties
ProImg1.Height = 150;
</div>
ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
ProImg1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
<li>BorderColor</li>
ProImg1.clProSettings.RoundHeight = 10;
<li>BorderWidth</li>
ProImg1.clProSettings.RoundWidth = 10;
<li>BackgroundColor</li>
ProImg1.clProSettings.BorderWidth = 2;
<li>IsTransparent</li>
ProImg1.clProSettings.IsFill = True;  
<li>IsFill</li>
ProImg1.clProSettings.IsRound = True;
<li>IsRound</li>
ProImg1.clProSettings.PictureSource = 'https://clomosy.com/demos/computerNetwork.png';
<li>RoundHeight</li>
ProImg1.clProSettings.PictureAutoFit = True;
<li>RoundWidth</li>
ProImg1.SetclProSettings(ProImg1.clProSettings);
<li>PictureAutoFit</li>
</pre>
<li>PictureStretch</li>
<li>PictureSource</li>
</div>
</div>
</div>
<div class="col-lg-6">
<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
<div style="font-size: 16px;font-weight: bold;text-align:left;">
SetupComponent Properties
</div>
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>Width</li>
<li>Height</li>
<li>PositionX</li>
<li>PositionY</li>
<li>Align</li>
<li>BackgroundColor</li>
<li>MarginTop</li>
<li>MarginBottom</li>
<li>MarginRight</li>
<li>MarginLeft</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>BorderColor</li>
<li>BorderWidth</li>
<li>ImgFit</li>
<li>ImgStretch</li>
<li>ImgUrl</li>
</div>
</div>
</div>
</div>
<br>


:''For SetupComponent:''
<div class="alert alert-warning" role="alert" data-bs-theme="light">
<pre>
To learn the purpose and usage of the <b>SetupComponent</b> and <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
</div>
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>
<b>Example</b><br>


:'''TRObject Syntax'''
For clProSettings:<br>
<pre>
<pre>
Var   
Var   
Line 71: Line 96:
   ProImg1.Height = 150;
   ProImg1.Height = 150;
   ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
   ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
  ProImg1.clProSettings.FontColor = clAlphaColor.clDarkorchid;
   ProImg1.clProSettings.RoundHeight = 10;
   ProImg1.clProSettings.RoundHeight = 10;
   ProImg1.clProSettings.RoundWidth = 10;
   ProImg1.clProSettings.RoundWidth = 10;
Line 89: Line 113:
</pre>
</pre>


:'''Base Syntax'''
For SetupComponent:<br>
<pre>
<pre>
Var   
Var   
Line 95: Line 119:
   ProImg1: TClProImage;
   ProImg1: TClProImage;


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


begin
{
   Form1 := TclForm.Create(Self);
   Form1 = TclForm.Create(Self);
   SetImage;
   SetImage;
   Form1.Run;
   Form1.Run;
end;
}
</pre>
</pre>


'''Output:'''<br>
<b>Output:</b><br>
[[File:ProImage.png|frameless|450px]]
[[File:ProImage.png|frameless|450px]]<br>
 
<h2> See Also </h2>
* [[Components]]
* [[Pro Object Properties]]
* [[Object Properties]]

Revision as of 14:45, 12 November 2024

AComponent : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.

xName : The name of the defined image should be written.


TclProImage is used to add an image to a form. Adding visuals to an application makes it more attractive and user-friendly.
All of the TclImage features are available. Apart from this, border color, rounding borders, image stretching and fitting features are available.

Feature Use of Definition
TclProImage ProImage1 : TclProImage; A variable belonging to the TclProImage class is created.
AddNewProImage ProImage1 = Form1.AddNewProImage(Form1,'ProImage1'); A new image is added to the form.

In addition to the features of a standard image, TclProImage offers new and advanced features, which we will explain in detail below.

clProSettings Properties

  • BorderColor
  • BorderWidth
  • BackgroundColor
  • IsTransparent
  • IsFill
  • IsRound
  • RoundHeight
  • RoundWidth
  • PictureAutoFit
  • PictureStretch
  • PictureSource

    • SetupComponent Properties

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


    • Example

    For clProSettings:

    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.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;
}

    For SetupComponent:

    Var   
  Form1:TclForm;
  ProImg1: TClProImage;

void SetImage;
{
  ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
  clComponent.SetupComponent(ProImg1,'{
  "Align" : "Center",
  "Width":150,
  "Height":150,
  "BorderColor":"#fabd2",
  "BorderWidth":2,
  "RoundHeight":10,
  "RoundWidth":10,		
  "ImgUrl":"https://clomosy.com/demos/computerNetwork.png",
  "ImgFit":"yes"
}');
}

{
  Form1 = TclForm.Create(Self);
  SetImage;
  Form1.Run;
}

    Output:
    ProImage.png

    See Also

    Retrieved from "http:///index.php?title=TclProImage&oldid=3084"