Sign in Join

Live chat for Free Pascal, Lazarus, Delphi and every Pascal programmer.

Mailing lists / lazarus / 2015-12

ComponentPalette images size on HighDPI devices

6 messages · 3 people · –

Reply by email Subscribe to this list Your subscription

Read-only archive. Use j and k to move between messages.

Sandro Cumerlato

Hello,
I've found a simple way to improve ComponentPalette usability on HighDPI touch devices.

Compare the following images:

1_Lazarus-ComponentPalette-24x24.PNG vs
2_Lazarus-ComponentPalette-48x48.PNG

[image: Inline images 1]

[image: Inline images 2]

It is quite easy to enlarge buttons area (and improve usability expecially on touch devices), because the buttons size is hardcoded within source, look at the attached patch to see where it is located.

It would be nice to add an option in ComponentPalette IDE Options section to let users change buttons size, it could be placed after Palette is visible checkbox and before Pages section.

In my case 48x48 is good, but even 64x64 could be optimal.

I haven't tried if something similar can be applied to IDE CoolBar buttons too, but it seems resonable to think about it as well.

Sandro

p.s.: Waiting for Santa... :-)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus.freepascal.org/pipermail/lazarus/attachments/20151224/abddfe39/attachment-0001.html> -------------- next part --------------
A non-text attachment was scrubbed...
Name: 1_Lazarus-ComponentPalette-24x24.PNG
Type: image/png
Size: 26367 bytes
Desc: not available
URL: <http://lists.lazarus.freepascal.org/pipermail/lazarus/attachments/20151224/abddfe39/attachment-0002.png> -------------- next part --------------
A non-text attachment was scrubbed...
Name: 2_Lazarus-ComponentPalette-48x48.PNG
Type: image/png
Size: 27303 bytes
Desc: not available
URL: <http://lists.lazarus.freepascal.org/pipermail/lazarus/attachments/20151224/abddfe39/attachment-0003.png> -------------- next part --------------
Index: components/ideintf/formeditingintf.pas
=================================================================== --- components/ideintf/formeditingintf.pas (revision 51026) +++ 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;

Reply by email

Juha Manninen
to Sandro Cumerlato

On Thu, Dec 24, 2015 at 11:53 PM, Sandro Cumerlato <

Show quoted text 18 lines
wrote: I've found a simple way to improve ComponentPalette usability on HighDPI touch devices. ... It is quite easy to enlarge buttons area (and improve usability expecially on touch devices), because the buttons size is hardcoded within source, look at the attached patch to see where it is located. It would be nice to add an option in ComponentPalette IDE Options section to let users change buttons size, it could be placed after Palette is visible checkbox and before Pages section. In my case 48x48 is good, but even 64x64 could be optimal. I haven't tried if something similar can be applied to IDE CoolBar buttons too, but it seems resonable to think about it as well.

Yes, it would improve usability in HighDPI systems. However I think it should be automatic. When the system resolution gets higher, the images get more space.
The next step obviously is to fill the space with bigger images. Then we need 3 or more versions of every image.

However doing this for component palette + maybe IDE CoolBar is not enough. At least TToolButton in LCL should support it, and maybe other controls with icons. Then all applications would benefit.
IDE CoolBar is composed of Toolbars and ToolButtons, too.

If you code up with code to support that, I will be happy to apply it. Initially reserving more space around icons would suffice, bigger images would be used when they are available.

HighDPI issues are becoming more and more important as screen sizes and resolutions keep growing.
We really must address it!

Juha
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus.freepascal.org/pipermail/lazarus/attachments/20151227/03445a94/attachment.html>

Reply by email

Ondrej Pokorny
to Juha Manninen
Juha Manninen wrote
However doing this for component palette + maybe IDE CoolBar is not enough. At least TToolButton in LCL should support it

The correct place where to solve high-DPI issues is TControl.

It isn't a simple issue and it has to be judged properly.

I do write high-DPI aware LCL-applications already with the current LCL code. I don't think it can and should be fully automatic.

Juha Manninen wrote
HighDPI issues are becoming more and more important as screen sizes and resolutions keep growing. We really must address it!

Yes but first we need a proper concept. Fixing this for TToolButton/IDECoolBar doesn't help.

Btw Sandro it doesn't look like you didn't take screenshots from high-DPI device, am I wrong?

Ondrej

Reply by email

Ondrej Pokorny
to Juha Manninen
Juha Manninen wrote
On Sun, Dec 27, 2015 at 2:56 PM, Ondrej Pokorny wrote: > The correct place where to solve high-DPI issues is TControl. How exactly?

I'll think of a concept in the next days and will try to address high-DPI issues in the LCL.

Ondrej

Reply by email

Sandro Cumerlato
to Ondrej Pokorny: The correct place where to solve high-DPI issues is TControl. It isn't a simple issue and…
Ondrej Pokorny wrote 6 lines
... Btw Sandro it doesn't look like you didn't take screenshots from high-DPI device, am I wrong? Ondrej

My device is 2160x1440 (12 inches), quite dense, with a 150% scale factor set for texts, apps and other elements.

Sandro
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus.freepascal.org/pipermail/lazarus/attachments/20151228/a900cd49/attachment.html>

Reply by email