TImageList - Bildlisteneditor - Bedienung ?

[wennerer]

Hallo,
ich komme leider mit der Bedienung des Bildlisteneditors der TImageList Komponente nicht zurecht.
Im Wiki Artikel https://wiki.lazarus.freepascal.org/TImageList wird darauf hingewiesen das mehrere Bildgrößen unterstützt werden.
Ich habe einen SpeedButton und eine ImageList auf die Form gezogen. Dann die ImageList im OI in den Eigenschaften dem SpeedButton zugewiesen. Nun in die ImageList Komponente auf der Form doppel geklickt. Es öffnet sich der Bildlisteneditor:

BildlistenEditor.png (111.13 KiB) 2020 mal betrachtet

Hier habe ich den Button "Neue Größe/Auflösung" geklickt und 24 und 32 hinzugefügt. Dann ein paar Icons hinzugefügt. Sieht dann so wie im Screenshot aus. Aber wie kann ich nun unterschiedliche Größen auswählen? Wahrscheinlich verstehe ich da was Grundsätzliches nicht. Kann mir jemand erklären wie das geht oder gibt es im Netz irgendwo eine ausführliche Beschreibung?

Viele Grüße
Bernd

[theo]

Steht doch da:

Every LCL control that supports ImageList has now a new [Images]Width property to decide what custom width at 96 PPI (100% scale) is to be used. Example: TToolBar.Images/ImageWidth, TListView.LargeImages/LargeImagesWidth.

[wennerer]

Hallo,
ja das hab ich schon gelesen und probiert. Ich sehe da aber keinen Unterschied ob ich verschiedene Größen in der ImageList anlege oder nicht. Das Ergebnis sieht für mich immer gleich aus? Was macht der Button "Neue Größe/Auflösung" also?

Viele Grüße
Bernd

[wp_xyz]

Die verschiedenen Größen kommen nur dann zur Geltung, wenn dein Programm mit einer anderen Auflösung läuft. Wenn ImageList.Scaled auf true gesetzt ist, sucht sich die ImageListe dann diejenigen Bilder heraus, die zur aktuellen Auflösung am besten passen.

Menü-Icons sind üblicherweise 16x16 Pixel groß - auf Bildschirmen mit 96ppi, und die ImageListe hat in Width und Height den Wert 16. Wenn das Programm später unter 144ppi (150%) auf gleich großem Bildschirm läuft, müssten die Icons 24x24 Pixel groß sein, damit sie, in Millimetern, dieselbe visuelle Größe haben. Um das zu ermöglichen, kannst due mit dem Button "Neue Größe/Auflösung" den Wert 24 eintragen. Damit kann die ImageListe neben den 16x16-Bildern auch 24x24-Bilder speichern (es wird sogar aus irgend einer Bildgröße der geladenen Bilder auf die vorgegebenen Größen skaliert.).

Du musst also folgende Entscheidungen treffen:
- Wie groß sollen die Bilder bei 96ppi sein? Den Wert trägst du als ImageList.Width und .Height ein -- genauso wie bisher.
- Welche Auflösungen soll das Programm noch unterstützen? Bei 150% (144ppi) musst du dann über "Neue Größe/Auflösung" den 1.5-fachen Wert eintragen, bei 200% (192 ppi) den doppelten Wert.

Nicht vergessen, ImageList.Scaled auf true zu setzen. Damit passt sich die Bildgröße, bei aktiviertem LCL-Scaling, an diese vorbereiteten Auflösungen an.

[fliegermichl]

Wie kann man dann aber erreichen, daß Buttons doppelt so groß dargestellt werden?. Das Problem hatte ich auch schon, daß manche Anwender große Buttons haben wollen, andere aber kleinere (bei gleicher Auflösung)

[Ally]

Hallo fliegermichl,

das oben beschriebene dient ja ausschließlich dazu das Programm High-DPI-fähig zu machen.
Was du machen möchtest ist noch mal eine ganz andere Baustelle.
Ich würde für die "großen Buttons" einfach noch eine ImageList mit den drei entsprechenden Auflösungen anlegen und die dann den "großen Buttons" zuweisen.
Dabei kommt es je nach Buttongröße zwar möglicherweise zu Überschneidungen, Pflege und Handling der ImageListen sind aber sicherlich einfacher.

Gruß Roland

[wp_xyz]

Ich habe - natürlich - wieder ein wichtiges Detail vergessen: es gibt noch die Eigenschaft ImagesWidth, die jedes Control, das eine ImageList verwendet, besitzt. Das ist die Bildgröße, die bei der Standardauflösung von 96ppi aus der ImageList extrahiert wird; Default ist immer 0, was bedeutet, dass - wie oben beschrieben - die Width und Height Angaben der ImageList genommen werden.

Beispiel:

• Klicke eine ImageList aufs Formular - Doppelklick darauf und die zusätzlichen Bildgrößen 24 und 32 definieren. Dann ein oder mehrere Bilder in die ImageListe laden: dazu den Button "Mehrere Größen hinzufügen" klicke, zum Ordner mit den Bildern navigieren (wobei alle Bildgrößen im selben Ordner liegen sollten, so wie in "images/components" des Lazarus-Ordners), und das 16x16, 24x24 und 32x32-Bild mit gedrückter CTRL-Taste durch Anklicken auswählen.
• Klicke einen TSpeedButton aufs Formular, mache ihn etwas größer als normal. Verbinde seine Images mit der ImageList und setze seinen ImageIndex auf ein passendes Bild.
• Mit ImagesWidth kannst du nun auswählen, welche Bildgröße aktuell von dem Button verwendet wird. Dabei sind auch Zwischengrößen möglich. Wobei beim Interpolieren zu größeren Bildern in die Qualität deutlich leidet - das ist halt so bei Pixel-Bildern.

Ein wichtiger Anwendungsfall wäre z.B. eine TListView, die zwei ImageList-Komponenten für die größen und kleinen Icons benötigt (SmallImages, LargeImages). Nun reicht es aus, nur die großen Bilder in eine einzige ImageList zu laden und diese sowohl bei LargeImages und SmallImages zu verwenden. Den Unterschied in der Bildgröße erreicht man, wenn man das entsprechende ImagesWidth auf den jeweiligen Wert setzt, also SmallImagesWidth 16 und LargeImageWidth 32. Da die Skalierung von groß nach klein gut funktioniert, sieht man bei den kleinen Bildern kaum Qualitätsverlust.

[wennerer]

Hallo,
zu erst mal vielen Dank für die Antworten. Insbesondere an wp_xyz für die ausführlichen Erklärungen!!!

wp_xyz schrieb:
Die verschiedenen Größen kommen nur dann zur Geltung, wenn dein Programm mit einer anderen Auflösung läuft.......

An Bildschirm Skalierung hab ich leider gar nicht gedacht. Ja das leuchtet mir jetzt ein. Allerdings kenne ich das nur unter Windows. In Linux Mint 19.3 hab ich das bisher nicht gefunden (habe auch eben nochmal gesucht). Geht das überhaupt in Linux?

wp_xyz schrieb:
Ich habe - natürlich - wieder ein wichtiges Detail vergessen: es gibt noch die Eigenschaft ImagesWidth,.....

Habe das nach der Anleitung getestet. Funktioniert super, das hatte ich gesucht.
Eine kleine Anmerkung noch dazu, beim Herumprobieren ist mir aufgefallen das es oft reicht wenn man nur das größte Bild in die ImageList läd. Dieses wird dann herunter skaliert auf die gewünschte Größe. Ich konnte fast keinen Qualitätsunterschied feststellen. Kommt aber auch vielleicht etwas auf das Bild an.

In der linken ImageList sind mehrere Größen geladen, in der rechten nur 16 und 48. Wer mal testen will ich hab es mal angehängt.

ImageList.png (7.05 KiB) 1866 mal betrachtet

Viele Grüße
Bernd

[wp_xyz]

Eine kleine Anmerkung noch dazu, beim Herumprobieren ist mir aufgefallen das es oft reicht wenn man nur das größte Bild in die ImageList läd. Dieses wird dann herunter skaliert auf die gewünschte Größe. Ich konnte fast keinen Qualitätsunterschied feststellen. Kommt aber auch vielleicht etwas auf das Bild an.

Richtig, das wollte ich eigentlich am Ende ausdrücken, ist aber in der allgemeinen Beschreibung untergegangen. Eine kleine Warnung jedoch: bei den halbzahligen Skalierungen (150%) kann es zu Unschärfen kommen: Wenn eine Linie bei 32x32 2 Pixel breit ist, wird sie bei 16x16 1 Pixel breit, aber bei 24x24 1.5 Pixel, was mit einer Unschärfe verbunden ist. Bei ultimativen Qualitätsansprüchen sollte man also die 150% Bilder auch mit dazu laden.