How to use ImageList in high-dpi display

[KingOrmon]

Hello,

 

When I use 32x32 icons in a toolbar and display is 4k, images are blurred

 

How can I use 64x64 images showing in 32x32 in this case

[Oliver Morsch]

Not the direct solution for your problem, but in my opinion it is better to use SVG or webfonts for icons. Best look at all screens. And color and size are easy to set with CSS.

 

I use this webfont: https://google.github.io/material-design-icons/#icon-font-for-the-web

[KingOrmon]

It works as expected:

 

.x-btn-icon-text-top .x-btn-icon-el {

background-size: 32px;

}

[Skepsis IT]

Not the direct solution for your problem, but in my opinion it is better to use SVG or webfonts for icons. Best look at all screens. And color and size are easy to set with CSS.

 

I use this webfont: https://google.github.io/material-design-icons/#icon-font-for-the-web

Oliver can you give us an example how you use it with unigui?

[cbr]

Oliver can you give us an example how you use it with unigui?

Hi Skepsis,

 

  a simple (server side) way to use the Google Material Icons is: 

 

1) add the reference to Material Icons in ServerModule

    procedure TUniServerModule.UniGUIServerModuleCreate(Sender: TObject);

    begin

      ...

      CustomMeta.Add(  '<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">' );

    end;

 

2) Insert in the form a TUniLabel with 

    AutoSize:    False

    Caption:     the icon name; see in https://design.google.com/icons

    Font.Name:  'Material Icons';

 

You can set the color and the size.

 

See the page https://design.google.com/icons  for available icons.

In the TUniLabel caption property, replace the space contained in the name with the char "_": if the icon name is  "shopping cart", write shopping_cart in the caption.

 

Cesare

GoogleMaterialIconsDemo.rar

[md9projetos]

Well I made my redneck solution while uniGUI does not support it,

not what you asked for,When the user clicks in a Image it calls an associated PopUpMenu

so it really thinks it was a button.

I think it should be the first thing to do after 1.0 improve the images resolution in all buttons.