From Clomosy Docs

No edit summary
No edit summary
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
If you want to add an image within the application, you can use the "TclImage" component. This component is defined as follows.
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewImage(AComponent: TCLComponent; xName: string): TclImage;
</div>


AddNewImage (TComponent, xName): TClImage
<span style="color:blue"><b>AComponent</b></span> : Specifies the parent of the object to be defined.<br>


<span style="color:blue">''TComponent''</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.
<span style="color:blue"><b>xName</b></span> : The name of the defined image should be written.<br>


<span style="color:blue">''xName''</span> : The name of the defined image should be written.
TclImage is used to add an image to a form. Adding visuals to an application makes it more attractive and user-friendly. For example, it can be used to display an application's logo or an explanatory graphic.<br>


<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
|-
|TclImage || Image1 : TclImage; || A variable belonging to the TclImage class is created.
|-
|AddNewImage ||Image1 = Form1.AddNewImage(Form1,'Image1'); || A new Image is added to the form.
|-
|setImage ||Form1.setImage(Image1,'https://clomosy.com/demos/bg.png'); ||It is used if you want to add an image to the Image object.
|-
|Clear ||Image1.MultiResBitmap.Clear; ||The Clear method clears images at all resolution levels within a MultiResBitmap property. So, when this method is called, all the images in the MultiResBitmap are deleted and rendered to an empty state.
|-
|Width || Image1.Width = 150; ||Allows adjusting the width of the image.
|-
|Height || Image1.Height = 50; ||Allows adjusting the height of the image.
|-
|Align  ||Image1.Align = alTop; ||With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the [[Object_Properties#Align | page]] to learn about these features.
|-
|Margins ||Image1.Margins.Left = 50; // Right, Top, Bottom ||With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.<br>[[File:TclImageMargins.png|frameless|200px]]
|-
| LoadFromFile ||Image1.Bitmap.LoadFromFile('C:\Users\Administrator\Desktop\logo.png') || The LoadFromFile method in Clomosy is used to load an image file and transfer it to a bitmap object. In the example, the expression Image1.Bitmap.LoadFromFile loads an image from a file path into the Bitmap property of a component named Image1.
|-
|SaveToStream || Image1.Bitmap.SaveToStream(FileStream); //FileStream:TCLFileStream;  || Bitmap image (TclImage) transfer to TCLFileStream. See the [[TclFileStream | page]] to learn about these features.
|-
|LoadFromStream || Image1.Bitmap.LoadFromStream(FileStream); //FileStream:TCLFileStream; || Transferring TCLFileStream data to bitmap image (TclImage). See the [[TclFileStream | page]] to learn about these features.
|}
</div>


Let's create a image.<br>
<h2>Example 1 </h2><br>
 
<pre>
1. Create a new project.<br>
var
 
  MyForm:TclForm;
2. You need to define TclImage on the form. To do this, you should add under the ''var'' parameter on the ide as follows. It is the name of your variable you typed at the beginning. You should define this as you want and add it as TclImage.<br>
  testImg : TclImage;
  '''var'''
  testImg : TclImage;  
 
3. Add the TclImage to the form. For this, you must add the begin end block and add it inside the form after the form is defined. By saying MyForm.AddNewImage, we actually add to the form we have defined. Here, you need to add your form definition as whatever you wrote it.<br>


  testImg:= ''MyForm''.AddNewImage(MyForm,'testImg');
{
MyForm = TclForm.Create(Self);
  testImg= MyForm.AddNewImage(MyForm,'testImg');
testImg.Align = alCenter;
testImg.Height = 250;
testImg.Width = 300;


4. If you do not want to define it in the form, you can add it in another component (such as Layout, Panel). Of course, before that, that component must be defined.
<span style="color:blue">testLayout</span> := MyForm.AddNewLayout(MyForm,'testLayout');
testImg:= MyForm.AddNewImage(<span style="color:blue">testLayout</span>,'testImg');
5. While defining the component, you can define it manually by typing. Another method is to write its shortcut. If you type "AddNewImage" while the shortcut is in the code block, a pop-up menu will appear.<br>
[[File:TclImageShortcut.png|frameless|400px]]<br><br>
As soon as you click, the following block will come automatically.<br>
AddNewImage(xOwner:TComponent; xName:String);
6. We gave the variable name while defining the TclImage in var. Now when you add this in begin end you should use this variable name in all definitions. Your code will throw an error when you write these variable names incorrectly.
7. Now it's time to show the picture we want on the screen. For this we should use the "SetImage" procedure.<br>
  MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png');
  MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png');
MyForm.AddNewEvent(testImg,tbeOnClick,'ShowMessage(''Picture clicked.'');');
MyForm.Run;


8. Now let's design our TclImage component. Let's set the width and height first. For this, you must make the following definitions.
}
</pre>


testImg.Height := 50;
<b>Output:</b><br>
testImg.Width := 150;
[[File:Image.png|frameless|450px]]<br>


9. With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the [https://www.docs.clomosy.com/index.php/Object_Properties#Align page] to learn about these features. We're going to call it the top part here. So we have to write "AlTop".
<h2>Example 2 (LoadFromFile):</h2><br>
testImg.Align := alTop;
In the example, a TclForm form is created and an image is downloaded from the internet to display on this form. First, a new TclForm instance named Form1 is created. The Form1.AddAssetFromUrl method is used to download an image from the specified URL to the project’s file directory. Then, a new TclImage instance is added to the form and configured to cover the entire form. The path of the downloaded image file is obtained using Clomosy.AppFilesPath and the Image1.Bitmap.LoadFromFile method is used to load the image.<br>


10. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
<pre>
var
  Form1: TclForm;
  Image1: TclImage;


testImg.Margins.Left:= 100;
{
testImg.Margins.Right:= 100;  
  Form1 = TclForm.Create(self);
testImg.Margins.Top:= 100;
  Form1.AddAssetFromUrl('https://clomosy.com/educa/bg2.png');
testImg.Margins.Bottom:= 10;
  try
    Image1 = Form1.AddNewImage(Form1,'Image1');
    Image1.Align = alClient;
    Image1.Bitmap.LoadFromFile(Clomosy.AppFilesPath+'bg2.png'); // Load image from file
    Form1.Run;
  except
    ShowMessage('An error was encountered while uploading the file.');
  }
}
</pre>


[[File:TclImageMargins.png|frameless|400px]]<br><br>
<h2>Example 3 (Save image to file):</h2><br>
The example creates a form (TclForm) and an image component (TclImage) and implements a function to load an image from a specific URL and save it to a file. First, Form1 and Image1 objects are created, and the image component is added to the form. The Image1 component is updated with a background image from the specified URL (https://clomosy.com/educa/bg2.png). The SaveFile procedure uses TCLMemoryStream to save the bitmap of Image1 to a memory stream and writes this data to a file (newImgBG.png) in Base64 format. The SaveFile procedure is linked to the click event of Image1, so when the form is run and the user clicks the image, the image is saved to the file. If any errors occur, an error message is displayed.<br>


11. To tell you the truth, you have created a simple application that does nothing yet. Let's save and start using our project. You can save in one of two ways:<br>
<pre>
Click the save icon (the button in the upper right corner) or press Ctrl + S to save the project and see what you've done on the platforms now.
var
  Form1: TclForm;
  Image1: TclImage;
  MemStream: TCLMemoryStream;


'''Example:'''<br>
void SaveFile;
'''var'''
{
MyForm:TclForm;
  try
testImg : TclImage;<br>
    MemStream = TCLMemoryStream.Create;
'''begin'''
    Image1.Bitmap.SaveToStream(MemStream);
MyForm := TclForm.Create(Self);
    // Save image to file
testImg:= MyForm.AddNewImage(MyForm,'testImg');
    Clomosy.Base64ToFile(clPathCombine('newImgBG.png',Clomosy.AppFilesPath),MemStream.AsBase64);
testImg.Align := alCenter;
  except
testImg.Height := 250;
    ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
testImg.Width := 300;<br>
  }
MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png');
}
MyForm.AddNewEvent(testImg,tbeOnClick,'ShowMessage(<nowiki>''Nature is everything.''</nowiki>);');
{
MyForm.Run;<br>
  Form1 = TclForm.Create(self);
'''end;'''
 
  Image1 = Form1.AddNewImage(Form1,'Image1');
  Image1.Align = alClient;
  Form1.SetImage(Image1,'https://clomosy.com/educa/bg2.png');
  Form1.AddNewEvent(Image1,tbeOnClick,'SaveFile');
 
  Form1.Run;
}
</pre>


'''Output:'''<br>
<h2> See Also </h2>
[[File:Image.png|frameless|450px]]
* [[Components]]
* [[Object Properties]]
* [[AddNewEvent]]
{{#seo:|title=TclImage Using in Clomosy - Clomosy Docs}}
{{#seo:|description=Learn how to use TclImage in Clomosy to add and manage images with features like alignment, margins, loading, and saving, enhancing application visuals.}}

Latest revision as of 15:10, 24 December 2024

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

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

TclImage is used to add an image to a form. Adding visuals to an application makes it more attractive and user-friendly. For example, it can be used to display an application's logo or an explanatory graphic.

Feature Use of Definition
TclImage Image1 : TclImage; A variable belonging to the TclImage class is created.
AddNewImage Image1 = Form1.AddNewImage(Form1,'Image1'); A new Image is added to the form.
setImage Form1.setImage(Image1,'https://clomosy.com/demos/bg.png'); It is used if you want to add an image to the Image object.
Clear Image1.MultiResBitmap.Clear; The Clear method clears images at all resolution levels within a MultiResBitmap property. So, when this method is called, all the images in the MultiResBitmap are deleted and rendered to an empty state.
Width Image1.Width = 150; Allows adjusting the width of the image.
Height Image1.Height = 50; Allows adjusting the height of the image.
Align Image1.Align = alTop; With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins Image1.Margins.Left = 50; // Right, Top, Bottom With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
TclImageMargins.png
LoadFromFile Image1.Bitmap.LoadFromFile('C:\Users\Administrator\Desktop\logo.png') The LoadFromFile method in Clomosy is used to load an image file and transfer it to a bitmap object. In the example, the expression Image1.Bitmap.LoadFromFile loads an image from a file path into the Bitmap property of a component named Image1.
SaveToStream Image1.Bitmap.SaveToStream(FileStream); //FileStream:TCLFileStream; Bitmap image (TclImage) transfer to TCLFileStream. See the page to learn about these features.
LoadFromStream Image1.Bitmap.LoadFromStream(FileStream); //FileStream:TCLFileStream; Transferring TCLFileStream data to bitmap image (TclImage). See the page to learn about these features.

Example 1


var
 MyForm:TclForm;
 testImg : TclImage;

{
 MyForm = TclForm.Create(Self);
 testImg= MyForm.AddNewImage(MyForm,'testImg');
 testImg.Align = alCenter;
 testImg.Height = 250;
 testImg.Width = 300;

 MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png');
 MyForm.AddNewEvent(testImg,tbeOnClick,'ShowMessage(''Picture clicked.'');');
 MyForm.Run;

}

Output:
Image.png

Example 2 (LoadFromFile):


In the example, a TclForm form is created and an image is downloaded from the internet to display on this form. First, a new TclForm instance named Form1 is created. The Form1.AddAssetFromUrl method is used to download an image from the specified URL to the project’s file directory. Then, a new TclImage instance is added to the form and configured to cover the entire form. The path of the downloaded image file is obtained using Clomosy.AppFilesPath and the Image1.Bitmap.LoadFromFile method is used to load the image.

var
  Form1: TclForm;
  Image1: TclImage;

{
  Form1 = TclForm.Create(self);
  Form1.AddAssetFromUrl('https://clomosy.com/educa/bg2.png');
  try
    Image1 = Form1.AddNewImage(Form1,'Image1');
    Image1.Align = alClient;
    Image1.Bitmap.LoadFromFile(Clomosy.AppFilesPath+'bg2.png'); // Load image from file
    Form1.Run;
  except
    ShowMessage('An error was encountered while uploading the file.');
  }
}

Example 3 (Save image to file):


The example creates a form (TclForm) and an image component (TclImage) and implements a function to load an image from a specific URL and save it to a file. First, Form1 and Image1 objects are created, and the image component is added to the form. The Image1 component is updated with a background image from the specified URL (https://clomosy.com/educa/bg2.png). The SaveFile procedure uses TCLMemoryStream to save the bitmap of Image1 to a memory stream and writes this data to a file (newImgBG.png) in Base64 format. The SaveFile procedure is linked to the click event of Image1, so when the form is run and the user clicks the image, the image is saved to the file. If any errors occur, an error message is displayed.

var
  Form1: TclForm;
  Image1: TclImage;
  MemStream: TCLMemoryStream;

void SaveFile;
{
  try
    MemStream = TCLMemoryStream.Create;
    Image1.Bitmap.SaveToStream(MemStream);
    // Save image to file
    Clomosy.Base64ToFile(clPathCombine('newImgBG.png',Clomosy.AppFilesPath),MemStream.AsBase64);
  except
    ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
  }
}
{
  Form1 = TclForm.Create(self);
  
  Image1 = Form1.AddNewImage(Form1,'Image1');
  Image1.Align = alClient;
  Form1.SetImage(Image1,'https://clomosy.com/educa/bg2.png');
  Form1.AddNewEvent(Image1,tbeOnClick,'SaveFile');
  
  Form1.Run;
}

See Also