Hi Qll!

I just got a band new laptop :-D witth a 1920x1080 display. I set it up with Linux Mint 18 Xfce and have been working on the display resolution for the past day or so.

Almost everything is set up so I can see/read it. The big problem is with Lazarus IDE icons. The control buttons are so small that they are almost invisible which makes them extremely hard to use. I have changed the display resolution with xrandr. Most apps follow this. Those that don't do follow the system font setting.

How can I rescale the IDE buttons (with or without changing the font size) so they are visible?

Thanks,

Don Ziesig

Hello Don,
this is a "known" issue of the Lazarus IDE.

Is it already listed on the Lazarus Bugtracker?

If the problem is related to the size of the component palette buttons, I have a partial patch for it to work on...

Best regards,
Sandro Cumerlato

Index: components/ideintf/formeditingintf.pas
=================================================================== --- components/ideintf/formeditingintf.pas (revision 51215) +++ components/ideintf/formeditingintf.pas (working copy) @@ -20,8 +20,8 @@

   LCLClasses, ProjectIntf, ComponentEditors, ObjectInspector, UnitResources;

 const
-  ComponentPaletteImageWidth = 24;
-  ComponentPaletteImageHeight = 24;
+  ComponentPaletteImageWidth = 48;
+  ComponentPaletteImageHeight = 48;
   ComponentPaletteBtnWidth  = ComponentPaletteImageWidth + 3;
   ComponentPaletteBtnHeight = ComponentPaletteImageHeight + 3;
   DesignerBaseClassId_TForm = 0;

That needs a more flexible solution.
What do you purpose?

Mattias

Hello Mattias,
please take a look at the following image and at the attached "partial" patch:

​

Well, attached patch introduces a ButtonSizeSpinEdit and a ButtonSizeLabel within the ComponentPalette - IDE Options frame.

SpinEdit value is saved/restored to/from the Lazarus - IDE Options settings file.

*** TODO ***

1) implement ButtonSizeLabel localizations (recalling localizations from .po files, I huess).

2) connect ButtonSizeSpinEdit changed value to
ComponentPalette[Image/Btn][Width/Height],
these values are actually *hardcoded* within the
"components/ideintf/formeditingintf.pas"
file as listed here:

Index: components/ideintf/formeditingintf.pas
=================================================================== --- components/ideintf/formeditingintf.pas (revision 51215) +++ components/ideintf/formeditingintf.pas (working copy) @@ -20,8 +20,8 @@
LCLClasses, ProjectIntf, ComponentEditors, ObjectInspector, UnitResources;

 const
-  ComponentPaletteImageWidth = 24;
-  ComponentPaletteImageHeight = 24;
+  ComponentPaletteImageWidth = 48;
+  ComponentPaletteImageHeight = 48;
   ComponentPaletteBtnWidth  = ComponentPaletteImageWidth + 3;
   ComponentPaletteBtnHeight = ComponentPaletteImageHeight + 3;
   DesignerBaseClassId_TForm = 0;

...

Can you please take care of the missing part of the patch? I've looked within the Lazarus IDE source code, but it seems an hard task for me to implement it, sorry.

Thank you for your cooperation.

Sandro Cumerlato

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160823/e59790c9/attachment-0001.html> -------------- next part --------------
A non-text attachment was scrubbed...
Name: button_size.png
Type: image/png
Size: 23742 bytes
Desc: not available
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160823/e59790c9/attachment-0001.png> -------------- next part --------------
Index: components/ideintf/componentreg.pas
=================================================================== --- components/ideintf/componentreg.pas (revision 51215) +++ components/ideintf/componentreg.pas (working copy) @@ -84,6 +84,7 @@

     // Pages removed or renamed. They must be hidden in the palette.
     FHiddenPageNames: TStringList;
     FVisible: boolean;

+ FButtonSize: integer;

   public
     constructor Create;
     destructor Destroy; override;

@@ -95,6 +96,7 @@

   public
     property HiddenPageNames: TStringList read FHiddenPageNames;
     property Visible: boolean read FVisible write FVisible;

+ property ButtonSize: integer read FButtonSize write FButtonSize;

   end;

   { TCompPaletteUserOrder }
@@ -407,6 +409,7 @@
   inherited Create;
   FHiddenPageNames := TStringList.Create;
   FVisible := True;
+  FButtonSize := 24;
 end;
 destructor TCompPaletteOptions.Destroy;
@@ -426,6 +429,7 @@
   inherited Assign(Source);
   FHiddenPageNames.Assign(Source.FHiddenPageNames);
   FVisible := Source.FVisible;
+  FButtonSize := Source.FButtonSize;
 end;
 function TCompPaletteOptions.IsDefault: Boolean;
@@ -446,6 +450,7 @@
   Path := Path + BasePath;
   try
     FVisible:=XMLConfig.GetValue(Path+'Visible/Value',true);
+    FButtonSize:=XMLConfig.GetValue(Path+'ButtonSize/Value',24);
     // Pages
     FPageNames.Clear;
@@ -498,7 +503,8 @@
 begin
   try
     Path := Path + BasePath;
-    XMLConfig.SetDeleteValue(Path+'Visible/Value', FVisible,true);
+    XMLConfig.SetDeleteValue(Path+'Visible/Value', FVisible, true);
+    XMLConfig.SetDeleteValue(Path+'ButtonSize/Value', FButtonSize, 24);

     SubPath:=Path+'Pages/';
     XMLConfig.DeletePath(SubPath);

Index: components/ideintf/formeditingintf.pas
=================================================================== --- components/ideintf/formeditingintf.pas (revision 51215) +++ components/ideintf/formeditingintf.pas (working copy) @@ -20,8 +20,8 @@

   LCLClasses, ProjectIntf, ComponentEditors, ObjectInspector, UnitResources;

const
- ComponentPaletteImageWidth = 24;
- ComponentPaletteImageHeight = 24;
+ ComponentPaletteImageWidth = 48;
+ ComponentPaletteImageHeight = 48;

   ComponentPaletteBtnWidth  = ComponentPaletteImageWidth + 3;
   ComponentPaletteBtnHeight = ComponentPaletteImageHeight + 3;
   DesignerBaseClassId_TForm = 0;

Index: ide/frames/componentpalette_options.lfm
=================================================================== --- ide/frames/componentpalette_options.lfm (revision 51215) +++ ide/frames/componentpalette_options.lfm (working copy) @@ -7,11 +7,11 @@
ClientWidth = 589
TabOrder = 0
Visible = False
- DesignLeft = 494
- DesignTop = 307
+ DesignLeft = 644
+ DesignTop = 315
object PagesGroupBox: TGroupBox
AnchorSideLeft.Control = Owner
- AnchorSideTop.Control = cbPaletteVisible
+ AnchorSideTop.Control = ButtonSizeSpinEdit
AnchorSideTop.Side = asrBottom
AnchorSideRight.Control = Splitter1
AnchorSideRight.Side = asrBottom
@@ -18,13 +18,13 @@
AnchorSideBottom.Control = Owner
AnchorSideBottom.Side = asrBottom
Left = 0
- Height = 440
- Top = 28
+ Height = 394
+ Top = 74
Width = 195
Anchors = [akTop, akLeft, akRight, akBottom]
BorderSpacing.Top = 6
Caption = 'PagesGroupBox'
- ClientHeight = 419
+ ClientHeight = 364
ClientWidth = 191
Constraints.MinWidth = 100
TabOrder = 0
@@ -34,7 +34,7 @@
AnchorSideRight.Control = PageMoveUpBtn
AnchorSideBottom.Control = AddPageButton
Left = 1
- Height = 326
+ Height = 251
Top = 0
Width = 156
Anchors = [akTop, akLeft, akRight, akBottom]
@@ -54,9 +54,9 @@
AnchorSideTop.Side = asrBottom
AnchorSideBottom.Control = ImportDividerBevel
Left = 1
- Height = 29
- Top = 332
- Width = 49
+ Height = 35
+ Top = 257
+ Width = 77
Anchors = [akLeft, akBottom]
AutoSize = True
BorderSpacing.Top = 6
@@ -70,10 +70,10 @@
AnchorSideLeft.Side = asrBottom
AnchorSideTop.Control = AddPageButton
AnchorSideBottom.Side = asrBottom
- Left = 59
- Height = 29
- Top = 332
- Width = 101
+ Left = 87
+ Height = 35
+ Top = 257
+ Width = 146
AutoSize = True
BorderSpacing.Left = 9
BorderSpacing.Bottom = 6
@@ -118,8 +118,8 @@
AnchorSideRight.Side = asrBottom
AnchorSideBottom.Control = ImportButton
Left = 1
- Height = 17
- Top = 367
+ Height = 25
+ Top = 298
Width = 190
Caption = 'Import / Export'
Anchors = [akLeft, akRight, akBottom]
@@ -133,10 +133,10 @@
AnchorSideTop.Side = asrCenter
AnchorSideBottom.Control = PagesGroupBox
AnchorSideBottom.Side = asrBottom
- Left = 77
- Height = 29
- Top = 384
- Width = 65
+ Left = 108
+ Height = 35
+ Top = 323
+ Width = 98
AutoSize = True
BorderSpacing.Left = 13
BorderSpacing.Bottom = 6
@@ -151,9 +151,9 @@
AnchorSideBottom.Control = PagesGroupBox
AnchorSideBottom.Side = asrBottom
Left = 1
- Height = 29
- Top = 384
- Width = 63
+ Height = 35
+ Top = 323
+ Width = 94
Anchors = [akLeft, akBottom]
AutoSize = True
BorderSpacing.Top = 3
@@ -177,7 +177,7 @@
Anchors = [akTop, akLeft, akRight, akBottom]
BorderSpacing.Left = 6
Caption = 'ComponentsGroupBox'
- ClientHeight = 447
+ ClientHeight = 438
ClientWidth = 384
TabOrder = 1
object ComponentsListView: TListView
@@ -187,7 +187,7 @@
AnchorSideBottom.Control = ComponentsGroupBox
AnchorSideBottom.Side = asrBottom
Left = 1
- Height = 445
+ Height = 436
Top = 1
Width = 349
Anchors = [akTop, akLeft, akRight, akBottom]
@@ -276,13 +276,46 @@
object cbPaletteVisible: TCheckBox
AnchorSideTop.Side = asrBottom
Left = 1
- Height = 22
+ Height = 29
Top = 0
- Width = 115
+ Width = 154
BorderSpacing.Top = 6
Caption = 'Palette is visible'
TabOrder = 3

   end

+ object ButtonSizeSpinEdit: TSpinEdit
+ AnchorSideLeft.Control = Owner
+ AnchorSideTop.Control = cbPaletteVisible
+ AnchorSideTop.Side = asrBottom
+ AnchorSideRight.Control = ButtonSizeLabel
+ Left = 0
+ Height = 33
+ Top = 35
+ Width = 72
+ BorderSpacing.Top = 6
+ Increment = 24
+ MaxValue = 96
+ MinValue = 24
+ TabOrder = 4
+ Value = 24
+ end
+ object ButtonSizeLabel: TLabel
+ AnchorSideLeft.Control = ButtonSizeSpinEdit
+ AnchorSideLeft.Side = asrBottom
+ AnchorSideTop.Control = cbPaletteVisible
+ AnchorSideTop.Side = asrBottom
+ AnchorSideRight.Control = Splitter1
+ AnchorSideRight.Side = asrBottom
+ Left = 78
+ Height = 25
+ Top = 38
+ Width = 117
+ Anchors = [akTop, akLeft, akRight]
+ BorderSpacing.Left = 6
+ BorderSpacing.Top = 9
+ Caption = 'Button size'
+ ParentColor = False
+ end
object ImportDialog: TOpenDialog
left = 168
top = 432
Index: ide/frames/componentpalette_options.pas
=================================================================== --- ide/frames/componentpalette_options.pas (revision 51215) +++ ide/frames/componentpalette_options.pas (working copy) @@ -26,10 +26,9 @@

uses
Classes, SysUtils, Graphics, Forms, Controls, StdCtrls, Dialogs, Buttons,
- ComCtrls, ExtCtrls, FileUtil, LCLProc, LCLType, Menus, IDEProcs, Laz2_XMLCfg,
- EnvironmentOpts, LazarusIDEStrConsts, IDEOptionsIntf,
- IDEImagesIntf, DividerBevel, ComponentReg, IDEOptionDefs,
- PackageDefs;
+ ComCtrls, ExtCtrls, FileUtil, LCLProc, LCLType, Menus, Spin, IDEProcs,
+ Laz2_XMLCfg, EnvironmentOpts, LazarusIDEStrConsts, IDEOptionsIntf,
+ IDEImagesIntf, DividerBevel, ComponentReg, IDEOptionDefs, PackageDefs;

 type
   { TCompPaletteOptionsFrame }
@@ -41,6 +40,7 @@
     ComponentsListView: TListView;
     CompMoveDownBtn: TSpeedButton;
     DeleteMenuItem: TMenuItem;
+    ButtonSizeLabel: TLabel;
     RenameMenuItem: TMenuItem;
     PagesPopupMenu: TPopupMenu;
     ExportButton: TBitBtn;
@@ -54,6 +54,7 @@
     PagesGroupBox: TGroupBox;
     RestoreButton: TBitBtn;
     ExportDialog: TSaveDialog;
+    ButtonSizeSpinEdit: TSpinEdit;
     Splitter1: TSplitter;
     procedure AddPageButtonClick(Sender: TObject);
     procedure ComponentsListViewChange(Sender: TObject; Item: TListItem;
@@ -194,6 +195,7 @@
   fLocalOptions.Assign(Opts);
   fLocalUserOrder.Options := fLocalOptions;
   cbPaletteVisible.Checked := Opts.Visible;
+  ButtonSizeSpinEdit.Value := Opts.ButtonSize;
   ActualReadSettings;
 end;
@@ -213,6 +215,7 @@
 begin
   Opts := (AOptions as TEnvironmentOptions).Desktop.ComponentPaletteOptions;
   Opts.Visible := cbPaletteVisible.Checked;
+  Opts.ButtonSize := ButtonSizeSpinEdit.Value;
   MainIDEBar.DoSetViewComponentPalette(cbPaletteVisible.Checked);
   if not fConfigChanged then Exit;
   ActualWriteSettings(Opts);

Will this need to draw again all the hundreds icons of Lazarus components in higher resolution? Proper solution would be to distribute *.svg icons packed in *.lrs or *.res resource files of packages and Lazarus will contain something like "rsvg-convert" and will convert *.svg to *.png (*.bmp, *.ico) during installation.

V.

Will this need to draw again all the hundreds icons of Lazarus components in higher resolution? Proper solution would be to distribute *.svg icons packed in *.lrs or *.res resource files of packages and Lazarus will contain something like "rsvg-convert" and will convert *.svg to *.png (*.bmp, *.ico) during installation.

Scaling works bad with small icons. The svg might be useful on 4k+ displays.
Why convert on installation?

Mattias

Hello Vojtěch,
patch doesn't alter icon visualization, just increase (and make usable and even touchable!) all the Componet Palette buttons, even on HighDPI devices.

SVG icons distribution is another matter: I believe that the Lazarus project should use *only* the SVG file format to store icons (and other images in general) within the svn trunk repository.

Furthermore, to avoid lossless of quality during conversion a different set of SVG files should be created: icon1_24x24.svg, icon1_48x48.svg, icon1_96x96.svg, and so on for all the images/icons used... If you are thinking that this is too much work to manage then think to the benefits.

"rsvg-convert" tool is a good solution to convert from SVG to PNG, since fpvectorial is still immature for such purpose.

Best regards,
Sandro Cumerlato

Vojtěch Čihák wrote

Proper solution would be to distribute *.svg icons packed in *.lrs or *.res resource files of packages and Lazarus will contain something like "rsvg-convert" and will convert *.svg to *.png (*.bmp, *.ico) during installation.

why? why not just use SVG as is? no conversion needed...

What do you mean? I'm quite sure that SVG visualization requires a rendering engine, my "favourite" one is LibRsvg (+ Cairo).

Sandro Cumerlato

On 23 August 2016 at 14:45, wrote:
...

why? why not just use SVG as is? no conversion needed...

Indeed, PNG images scaling is a bad practise.

In contrary, scaling and adapting to different resolutions a SVG image is quite simple. Consider that in most cases icon1_24x24.svg content could be equal to icon1_48x48.svg and equal to icon1_96x96.svg, because changing the SVG document paper size (in pixels) and scaling initial content should be enough... if you need more details for the 96x96 image then you can modify icon1_96x96.svg file content only.

Sandro Cumerlato

On 23 August 2016 at 14:23, Mattias Gaertner wrote: ...

Scaling works bad with small icons. The svg might be useful on 4k+ displays.

...

Mattias

Hi Sandro,

I tried your "patch" but it did not change anything in the appearance of the buttons.

I am searching the bug tracker but have not found anything like this (It may be there but it is not obvious).

After a little more searching, if I can't find an issue, I will submit one.

Thanks,

Don Ziesig

Hello Don,
I just tested my workaround and it works as expected.

Don't forget to *rebuild* the Lazarus IDE (Tools -> Build Lazarus with Profile: Normal IDE).

Before patch:

​

After patch:

​

Component Palette Buttons are enlarged to 48x48 pixels.

You can find a fresh new patch (against svn trunk revision 52865) attached to this message.

Kind regards,
Sandro Cumerlato

Donald Ziesig wrote

Hi Sandro, I tried your "patch" but it did not change anything in the appearance of

the

buttons. I am searching the bug tracker but have not found anything like this (It

may

be there but it is not obvious). After a little more searching, if I can't find an issue, I will submit

one.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160824/2acd4c7d/attachment-0001.html> -------------- next part --------------
A non-text attachment was scrubbed...
Name: Lazarus IDE - Standard.png
Type: image/png
Size: 16392 bytes
Desc: not available
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160824/2acd4c7d/attachment-0002.png> -------------- next part --------------
A non-text attachment was scrubbed...
Name: Lazarus IDE - Patched.png
Type: image/png
Size: 15083 bytes
Desc: not available
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160824/2acd4c7d/attachment-0003.png> -------------- next part --------------
Index: components/ideintf/formeditingintf.pas
=================================================================== --- components/ideintf/formeditingintf.pas (revisione 52865) +++ components/ideintf/formeditingintf.pas (copia locale) @@ -20,8 +20,8 @@

   LCLClasses, ProjectIntf, ComponentEditors, ObjectInspector, UnitResources;

 const
-  ComponentPaletteImageWidth = 24;
-  ComponentPaletteImageHeight = 24;
+  ComponentPaletteImageWidth = 48;
+  ComponentPaletteImageHeight = 48;
   ComponentPaletteBtnWidth  = ComponentPaletteImageWidth + 3;
   ComponentPaletteBtnHeight = ComponentPaletteImageHeight + 3;
   DesignerBaseClassId_TForm = 0;

Sandro Cumerlato wrote

I'm quite sure that SVG visualization requires a rendering engine

Correct, at the moment LCL can't render or handle SVG images like it does BMP, PNG etc (for example: The ImageList doesn't support SVG format, Button.Glyph doesn't support SVG etc).

As for rendering SVG images, you don't necessarily need an external library. AggPas (implemented in pure Object Pascal) can render SVG images quite well. The Lazarus install includes AggPas as standard.

Regards,
Graeme

Hi Sandro,

I did rebuild the IDE and I checked the date on the executable fie. The date matched the rebuild time. Unfortunately, the button sizes did not change. Also, I just realized that your patch did not change the sizes of the other buttons (which suffer from the same problem). I will try your patch from SVN later today,

Thanks,

Don Ziesig

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160824/64196626/attachment-0001.html> -------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 16392 bytes
Desc: not available
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160824/64196626/attachment-0002.png> -------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 15083 bytes
Desc: not available
URL: <http://lists.lazarus-ide.org/pipermail/lazarus/attachments/20160824/64196626/attachment-0003.png>

I can confirm only that my workaround works under Windows, I haven't tested other OSs. Maybe someone else can try it under Linux, etc..

My patch alter the Component Palette Buttons only, it is the GUI part that I suffered the most (in addition to the visual Form editor of course)... other commands can be easily accessed by keyboard shortcuts or menu items...

Sandro