[Solved] Custom Component Icon Issue

[Aruna]

I managed to get my custom component(s) working after going through this tutorial . If you take a look at the first attached screenshot it shows two custom components ( both tested and work).

Now, when I try to create icons for the package I am unable to do so and things get messy as can be seen in the second screenshot. What am I doing wrong?

[wp]

Take the packages "TDbf" or "TurboPower_Ipro" as an example (in the "components" of your Lazarus installation):

• Draw the icon for each component in a supported image format, ideally png.
• At least draw it in size 24x24 pixels.
• Store it under the name of the component, with the appropriate extension of the image format, e.g "tmycomponent.png"
• In order to have better image quality at higher screen resolutions you should draw also icons at 36x36 and 48x48 pixels. Store them with name appendix "_150" and "_200" where these numbers stand for the magnification percentage, e.g. "tmycomponent_150.png" and "tmycomponent_200.png"
• Repeat this for every component that you want to install.
• Not absolutely necessary, but when you have many icon files you should create a text file (say: "images.txt") which contains the icon names in every line
• If you did not do it before, compile the application "lazres", its sources are in folder "tools" of your Lazarus installation
• Run the following command

Code: [Select]

(path to lazres)/lazres myicons.res @images.txtor, if you only have a few icons

Code: [Select]

(path to lazres)/lazres myicons.res tmycomponent.png tmycomponent_150.png tmycomponent_200.png

• Finally link the generated resource file in the unit in which you register the components:

{$R myicons.res}

[Khrys]

Resource imports (.lrs) need to be inside a procedure (more specifically here: the  Register) procedure of your package:

Code: Pascal  [Select][+][-]

1. procedure Register();
2. begin
3.   {$i my_icon.lrs}
4.   RegisterComponents('LCL Demo By Aruna', [TArunaButton]);
5. end;

Lazarus resources of the  .lrs  format differ from "regular" resources (.rc/.res) in that they are simply a piece of Pascal code with data encoded in source format, as you can see on the second screenshot. The way of including this kind of resource in your program involves literally copying the contents of the resource file to wherever the import directive ({$i FILENAME}) is, exactly like  #include FILENAME  in C. Judging by the error message, I assume that the import directive is placed someplace outside any procedures.

[Aruna]

Resource imports (.lrs) need to be inside a procedure (more specifically here: the  Register) procedure of your package:

Thank you.

Code: Pascal  [Select][+][-]

1. procedure Register();
2. begin
3.   {$i my_icon.lrs}
4.   RegisterComponents('LCL Demo By Aruna', [TArunaButton]);
5. end;

I will try this thank you.

Lazarus resources of the  .lrs  format differ from "regular" resources (.rc/.res) in that they are simply a piece of Pascal code with data encoded in source format, as you can see on the second screenshot. The way of including this kind of resource in your program involves literally copying the contents of the resource file to wherever the import directive ({$i FILENAME}) is, exactly like  #include FILENAME  in C. Judging by the error message, I assume that the import directive is placed someplace outside any procedures.

Yes it was not in the register procedure. I had it in the implementation section.I have given the original source below.

Code: Pascal  [Select][+][-]

1. unit Demo1;  // Unit name/identifier will be used for custom control name ?
2.  
3. {$mode objfpc}{$H+}
4. interface
5.  
6. uses
7.   Classes, SysUtils, Controls, StdCtrls, Dialogs, LResources;
8.  
9. type
10.   TDemo1 = class(TButton) // or is it here ? // Unit name/identifier will be used for custom control name?
11.   protected
12.     procedure Click; override;
13.   end;
14.  
15. procedure Register;
16.  
17. implementation
18. //{$I my_icons.lrs}
19.  
20. procedure Register;
21. begin
22.   {$I my_icons.lrs}   // Khrys fix thank you Jesus it works :-)
23.   RegisterComponents('LCL Demo', [TDemo1]);
24. end;
25.  
26. procedure TDemo1.Click;
27. begin
28.   // Call the inherited method to retain default behavior
29.   inherited Click;
30.  
31.   // Add custom behavior
32.   ShowMessage('Custom button clicked!');
33. end;
34. end.

                   
I would have never found that out in a million years. My friend you are God sent. Have a look at the attached screenshot. This is what constantly humbles me, people who have probably spent years gaining the knowledge then freely sharing it so newbies like me can stop pulling out my remaining hair and going bald. Thank you very much @Khrys.

[Aruna]

Take the packages "TDbf" or "TurboPower_Ipro" as an example (in the "components" of your Lazarus installation):

• Draw the icon for each component in a supported image format, ideally png.
• At least draw it in size 24x24 pixels.
• Store it under the name of the component, with the appropriate extension of the image format, e.g "tmycomponent.png"
• In order to have better image quality at higher screen resolutions you should draw also icons at 36x36 and 48x48 pixels. Store them with name appendix "_150" and "_200" where these numbers stand for the magnification percentage, e.g. "tmycomponent_150.png" and "tmycomponent_200.png"
• Repeat this for every component that you want to install.
• Not absolutely necessary, but when you have many icon files you should create a text file (say: "images.txt") which contains the icon names in every line
• If you did not do it before, compile the application "lazres", its sources are in folder "tools" of your Lazarus installation
• Run the following command

Code: [Select]

(path to lazres)/lazres myicons.res @images.txtor, if you only have a few icons

Code: [Select]

(path to lazres)/lazres myicons.res tmycomponent.png tmycomponent_150.png tmycomponent_200.png

• Finally link the generated resource file in the unit in which you register the components:

{$R myicons.res}

Thank you very much @wp. Very much appreciate you taking the time. I think I will write down all the steps I had to go through and post it on the wiki as a tutorial ?

[wp]

I think I will write down all the steps I had to go through and post it on the wiki as a tutorial ?

I don't know... Isn't all this contained in the wiki article that you cited in the first post?

[Khrys]

I don't know... Isn't all this contained in the wiki article that you cited in the first post?

I just checked the article and it does place the  {$i *.lrs}  directive in the  initialization  section, but it doesn't explain why it has to be in such a place. The distinction between the  {$i *.lrs}  and  {$r *.rc} / {$r *.res}  kinds of resources should also have been emphasized more, since under the hood they work in completely different ways.

(Side note: the  initialization  and  finalization  sections themselves can be a bit confusing - especially for newcomers - because they aren't really explained anywhere in the wiki as far as I know, and also due to their weird syntax. They look like sections similiar to  interface  and  implementation, but expect a single statement instead - without requiring begin / end)

[TRon]

They look like sections similiar to  interface  and  implementation, but expect a single statement instead - without requiring begin / end)

That might be the case for the example in the wiki but they definitely can contain begin and end (e.g. multiple statements) , see also here