From Clomosy Docs

No edit summary
No edit summary
Line 8: Line 8:




Let's create a image.<br>
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"|Definition
|-
|TclImage || testImg : TclImage; || A variable belonging to the TclImage class is created.
|-
|AddNewImage ||testImg:= ''MyForm''.AddNewImage(MyForm,'testImg'); || A new Image is added to the form.
|-
|setImage ||MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png'); ||It is used if you want to add an image to the Image object.
|-
|Clear ||testImg.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 || testImg.Width := 150; ||Allows adjusting the width of the image.
|-
|Height || testImg.Height := 50; ||Allows adjusting the height of the image.
|-
|Align  ||testImg.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 ||testImg.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]]


1. Create a new project.<br>
|}


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>
'''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');
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');
8. Now let's design our TclImage component. Let's set the width and height first. For this, you must make the following definitions.
testImg.Height := 50;
testImg.Width := 150;
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".
testImg.Align := alTop;
10. With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
testImg.Margins.Left:= 100;
testImg.Margins.Right:= 100;
testImg.Margins.Top:= 100;
testImg.Margins.Bottom:= 10;
[[File:TclImageMargins.png|frameless|400px]]<br><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>
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.


'''Example:'''<br>
'''Example:'''<br>
:''Basic Syntax''
  '''var'''
  '''var'''
  MyForm:TclForm;
  MyForm:TclForm;
Line 68: Line 42:
  testImg.Width := 300;<br>
  testImg.Width := 300;<br>
  MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png');
  MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png');
  MyForm.AddNewEvent(testImg,tbeOnClick,'ShowMessage(<nowiki>''Nature is everything.''</nowiki>);');
  MyForm.AddNewEvent(testImg,tbeOnClick,'ShowMessage(<nowiki>''Picture clicked.''</nowiki>);');
  MyForm.Run;<br>
  MyForm.Run;<br>
  '''end;'''
  '''end;'''
:''TRObject Syntax''
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(<nowiki>''Picture clicked.''</nowiki>);');
  MyForm.Run;
}


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

Revision as of 11:45, 5 December 2023

If you want to add an image within the application, you can use the "TclImage" component. This component is defined as follows. 

AddNewImage (TComponent, xName): TClImage

TComponent : 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.


Feature Use of Definition
TclImage testImg : TclImage; A variable belonging to the TclImage class is created.
AddNewImage testImg:= MyForm.AddNewImage(MyForm,'testImg'); A new Image is added to the form.
setImage MyForm.setImage(testImg,'https://clomosy.com/demos/bg.png'); It is used if you want to add an image to the Image object.
Clear testImg.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 testImg.Width := 150; Allows adjusting the width of the image.
Height testImg.Height := 50; Allows adjusting the height of the image.
Align testImg.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 testImg.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


Example:

Basic Syntax
var
MyForm:TclForm;
testImg : TclImage;

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

end;
TRObject Syntax
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

Retrieved from "http:///index.php?title=TclImage&oldid=1480"