Recent

Author Topic: How to resize images for toolbar buttons  (Read 376 times)

istoica

  • New member
  • *
  • Posts: 11
How to resize images for toolbar buttons
« on: January 11, 2019, 01:46:22 pm »
I have tried almost everything, still, unable to resize the image before displaying it in a toolbar button, so far I have this code:

Code: Pascal  [Select]
  1. function TMainForm.LoadIcon(IconName: string): boolean;
  2. var IconImage: TImage;
  3. var IconPath: string;
  4. begin
  5.   IconPath := Concat(ExtractFilePath(ParamStr(0)), AssetsBase, Concat(IconName, '.png'));
  6.   IconImage := TImage.Create(self);
  7.   try
  8.     IconImage.Stretch := True;
  9.     IconImage.Proportional := True;
  10.     IconImage.Center := True;
  11.     IconImage.Width := 32;
  12.     IconImage.Height := 32;
  13.     IconImage.Picture.LoadFromFile(IconPath);
  14.     MainToolbarImageList.Add(IconImage.Picture.Bitmap, nil);
  15.   finally
  16.     IconImage.Free;
  17.   end;
  18.   LoadIcon := True;
  19. end;
  20.  

That I use like this:

Code: Pascal  [Select]
  1. LoadIcon('git-branch'); ToolButton1.ImageIndex := 1;
  2.  

But the image is not resized.
Also, when using the list itself to add images,  if I import with center selected, it only displays a black square.

What am I doing wrong ?

sash

  • Full Member
  • ***
  • Posts: 179
Re: How to resize images for toolbar buttons
« Reply #1 on: January 11, 2019, 02:29:21 pm »
1. Most basic way is to use TCanvas.StretchDraw.
2. For toolbar icons usually they prepare (at designtime) several Imagelists with different resolutions like 16x16, 24x24 and so on, and then pick (at runtime) a suitable one.
Lazarus 1.8.4 Unversioned directory FPC 3.0.4 x86_64-linux-gtk2 -- Ubuntu 18.04 XFCE

istoica

  • New member
  • *
  • Posts: 11
Re: How to resize images for toolbar buttons
« Reply #2 on: January 11, 2019, 02:31:40 pm »
Thank you, went on this path.
Do you know if there is a way to still display the button caption ? But at the bottom ?
I do not want to stretch my question.

wp

  • Hero Member
  • *****
  • Posts: 5282
Re: How to resize images for toolbar buttons
« Reply #3 on: January 11, 2019, 02:35:46 pm »
Do you have Laz trunk or one of the v2.0 release candidates? The imagelist in these versions has been reworked and supports automatic scaling. So, when you Add an image it will be scaled automatically to the size given by ImageList.Width and .Height, and to the other sizes specified in the ImageList editor as "Add more resolutions".

Thid works for me on Laz trunk:
Code: Pascal  [Select]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. begin
  3.   ToolButton1.ImageIndex := LoadIcon('git-branch.png');
  4.   Toolbar1.Invalidate;
  5. end;
  6.  
  7. function TForm1.LoadIcon(IconName: string): Integer;
  8. var
  9.   pic: TPicture;
  10. begin
  11.   Result := -1;
  12.   pic := TPicture.Create;
  13.   try
  14.     pic.LoadFromFile(IconName);
  15.     Result := ImageList1.Add(pic.Bitmap, nil);
  16.   finally
  17.     pic.Free;
  18.   end;
  19. end;

As you can see above, I would not recommend to load the image into a TImage component - this is a visual control and has too much overhead. Just load it into a TPicture, if you need automatic format detection, or into the corresponding bitmap type directly, a TPortableNetworkgraphic here.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

wp

  • Hero Member
  • *****
  • Posts: 5282
Re: How to resize images for toolbar buttons
« Reply #4 on: January 11, 2019, 02:43:01 pm »
Do you know if there is a way to still display the button caption ? But at the bottom ?
You are talking of a toolbutton? There is a property ShowCaption which is true for the button by default, but false for the Toolbar. The Toolbar.ShowCaptions therefore is some kind of "master switch" to turn captions off. Set Toolbar.ShowCaptions to true to see the button captions. Unfortunately Autosizing of the Toolbar with captions does not work, set Toolbar.ButtonSize to something like 40 (for 16x16 images, use a correspondingly larger value for larger images), and Toolbar.AutoSize to true. This shows the caption below the icon. If you want the text at the right of the caption you must also set Toolbar.List to true.
Lazarus trunk / fpc 3.0.4 / all 32-bit on Win-10

zoltanleo

  • Full Member
  • ***
  • Posts: 146
Re: How to resize images for toolbar buttons
« Reply #5 on: January 11, 2019, 09:23:10 pm »
I have tried almost everything, still, unable to resize the image before displaying it in a toolbar button, so far I have this code:
Try this

Code: Pascal  [Select]
  1. { TForm1 }
  2.  
  3. procedure TForm1.RadioGroup1Click(Sender: TObject);
  4. var
  5.   iw: Integer;
  6. begin
  7.   case RadioGroup1.ItemIndex of
  8.     0: iw:= 16;
  9.     1: iw:= 24;
  10.     2: iw:= 32;
  11.     3: iw:= 48;
  12.   end;
  13.  
  14.   with ToolBar1 do
  15.   begin
  16.     ImagesWidth:= iw;
  17.     Height:= ImagesWidth + 8;
  18.     ButtonHeight:= ImagesWidth;
  19.     ButtonWidth:= ButtonHeight + 1;
  20.   end;
  21. end;
  22.  
  23. procedure TForm1.FormCreate(Sender: TObject);
  24. begin
  25.   RadioGroup1.ItemIndex:= 0;
  26.   RadioGroup1Click(Sender);
  27. end;

Win7 Ultim x64/Deb 9.5 amd64:
Lazarus 2.1(r.59890); FPC 3.3.1 (r.40739),
IBX by -Rik-; FB 3.0.3

Sorry for my bad English, I'm using translator ;)

istoica

  • New member
  • *
  • Posts: 11
Re: How to resize images for toolbar buttons
« Reply #6 on: January 14, 2019, 10:46:32 am »
Excellent, just what I needed, thank you so much!