From Clomosy Docs

No edit summary
No edit summary
 
Line 34: Line 34:
</div>
</div>
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>BackgroundColor</li>
<li>BorderColor</li>
<li>BorderColor</li>
<li>BorderWidth</li>
<li>BackgroundColor</li>
<li>IsTransparent</li>
<li>IsTransparent</li>
<li>IsFill</li>
<li>IsFill</li>
<li>IsRound</li>
<li>RoundHeight</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>RoundWidth</li>
<li>IsRound</li>
<li>BorderWidth</li>
<li>PictureAutoFit</li>
<li>PictureAutoFit</li>
<li>PictureStretch</li>
<li>PictureStretch</li>
Line 48: Line 48:
</div>
</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>
</div>
<br>
<br>


<div class="alert alert-warning" role="alert" data-bs-theme="light">
<div class="alert alert-warning" role="alert" data-bs-theme="light">
To learn the purpose and usage of the <b>SetupComponent</b> and <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
To learn the purpose and usage of the <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
</div>
</div>


<b>Example</b><br>
<b>Example</b><br>


For clProSettings:<br>
<pre>
<pre>
Var   
Var   
Line 104: Line 77:
   ProImg1.clProSettings.PictureAutoFit = True;
   ProImg1.clProSettings.PictureAutoFit = True;
   ProImg1.SetclProSettings(ProImg1.clProSettings);
   ProImg1.SetclProSettings(ProImg1.clProSettings);
}
{
  Form1 = TclForm.Create(Self);
  SetImage;
  Form1.Run;
}
</pre>
For SetupComponent:<br>
<pre>
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"
}');
}
}



Latest revision as of 08:46, 16 April 2025

AComponent : Specifies the parent of the object to be defined.

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

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

  • Example

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

    Output:
    ProImage.png

    See Also