vierer Button integrieren

[Andy Nightingale]

Hallo Leute,
ich habe ein Programm das erzeugt mir als PNG Datei einen fertigen Button mit allen "Zuständen". Also: Standard, Clicked, Hovered, Disabled. Wie kann ich so etwas in mein Programm in einen Button integrieren? So sind die Zustände:

B.jpg (5.12 KiB) 369 mal betrachtet

und so sieht das fertige PNG dann aus:

B2.jpg (2.54 KiB) 369 mal betrachtet

.-Grüße

[Mathias]

TBitBtn ist das Stichwort. Da kann man Glyphe einfügen.

[Andy Nightingale]

TBitBtn ist das Stichwort. Da kann man Glyphe einfügen.

Hallo Matthias,
ich habe unter Glyph (Eigenschaft) die PNG Datei geladen und unter GlyphShowMode always eingegeben...aber es funzt nicht....hast du dafür ein kleines Beispiel...Grüße

[kirchfritz]

Lade doch mal Deine PNG hoch. Dann könnte man konkretere Hilfe anbieten...

[paweld]

TBitBtn unterstützt drei Zustände: „normal“, „disabled“ und „clicked“. Außerdem müssen die Grafiken für die Zustände von links nach rechts und nicht von oben nach unten angeordnet sein. Anschließend gibst du eine entsprechende Datei an (Eigenschaft „Glyph“) und trägst in die Eigenschaft „NumGlyphs“ den Wert 3 ein.

Vier Zustände und ein Bild in dieser Form werden von der Komponente TBCImageButton aus dem Komponentenpaket „BGRA Controls“ problemlos verarbeitet.

[wp_xyz]

Ich dachte, Glyph würde es auch erlauben, die Icons vertikal anzuordnen, aber nein, im Quelltext sieht man, dass die Breite des Gesamtbitmaps durch die Höhe dividiert wird - daher müssen die Icons, wie paweld schon sagte, horizontal angeordnet sein. Seltsam, denn TImageList, kann beide Varianten, und letztendlich landen die Bilder sowieso in einer ImageList.

Im Quelltext sieht man auch, dass es insgesamt 5 mögliche Icon-Arten gibt, entsprechend den Werten der TButtonState-Aufzählung:

Code: Alles auswählen

type
  TButtonState =
  (
    bsUp,       // Button is up.
    bsDisabled, // Button disabled (grayed).
    bsDown,     // Button is down.
    bsExclusive,// Button is the only down in his group.
    bsHot       // Button is under mouse.
  );  

Um das zu testen, habe ich ein kleines Mini-Projekt beigefügt, für das ich in einer Bildbearbeitung fünf Zahlen-Icons aus den Lazarus-Images nebeneinander montiert habe: '0'..'4', entsprechend den 5 ButtonState-Zuständen. Wie man in dem Programm sieht, funktioniert das. Die Option bsExclusive wird beim TBitBtn nicht verwendet, weil man BitBtns nicht zu einer Radiobutton-ähnlichen Gruppe zusammenschalten kann (oder habe ich etwas übersehen?). Bei TSpeedButton (mit der Eigenschaft GroupIndex) ist das aber möglich, und hier wird Index 3 verwendet. Seltsam, dass man diese Option dann nicht ans Ende gesetzt hat, denn so muss jemand, der bei TBitBtn einen MouseOver-Effekt erzeugen will, ein nicht benötigtes Icon einfügen.

Wie dem auch seo, generell würde ich aber überhaupt nicht mit dem "altmodischen" Glyph-Property hantieren, sondern die ImageList verwenden, die seit längerer Zeit schon bei TBitBtn und TSpeedButton verfügbar bist. Das hat den Vorteil, dass bei der Verwendung mehrerer gleicher Buttons die Bilder nur einmal vorhanden sein müssen. Außerdem beherrscht die ImageList das LCLScaling, d.h. die Icon-Größe passt sich der Bildschirmauflösung an (wenn man die entsprechenden Regeln beachtet; bei Glyph kann man nur 1 Bildgröße eingeben, bei ImageList mehrere!). Für die verschiedenen Zustände gibt es jeweils eigene Image-Indices:
* ImageIndex --> normal
* DisabledImageIndex --> disabled
* HotImageIndex --> mouse-over
* PressedImageIndex --> geclickt

[wennerer]

Hallo,
suchst du sowas:

MultiButton.gif (66.76 KiB) 261 mal betrachtet

Dann kannst du wenn du möchtest meinen MultiButton testen. Hier siehst du mehr: viewtopic.php?t=14033

PS: Falls du tolle Icons suchst dann schau mal da: viewtopic.php?t=14263

Viele Grüße
Bernd

[wp_xyz]

[...] müssen die Icons [...] horizontal angeordnet sein.

Mit ein paar kleinen Änderungen kann man die Buttons Unit so ergänzen, dass die Orientierung des Streifens erkannt wird, so dass auch die vertikale Anordnung der Glyphen funktioniert (von oben nach unten):

• Datei lcl/imagelistcache.pas: In procedure TImageListCache.RegisterBitmap die Zeile "Item^.FImageList := GetImageListFor(ABitmap.Width div ABitmapCount, ABitmap.Height);" austauschen gegen

  Code: Alles auswählen

        if ABitmap.Width > ABitmap.Height then
          Item^.FImageList := GetImageListFor(ABitmap.Width div ABitmapCount, ABitmap.Height)
        else
          Item^.FImageList := GetImageListFor(ABitmap.Width, ABitmap.Height div ABitmapCount);

• Ein paar Zeilen weiter unten, die Zeile "AStart := Item^.FImageList.AddSliced(ABitmap, ABitmapCount, 1);" austauschen gegen

  Code: Alles auswählen

      if ABitmap.Width > ABitmap.Height then
        // Horizontal strip
        AStart := Item^.FImageList.AddSliced(ABitmap, ABitmapCount, 1)
      else
        // Vertical strip
        AStart := Item^.FImageList.AddSliced(ABitmap, 1, ABitmapCount);

• Datei lcl/include/buttonglyph.inc: In procedure TButtonGlyph.SetGlyph den Block "if Original.Height > 0 then" bis zum "end" ersetzen durch

  Code: Alles auswählen

    if (FOriginal.Height > 0) and (FOriginal.Width > FOriginal.Height) and
      (FOriginal.Width mod FOriginal.Height = 0) then
    begin
      GlyphCount := FOriginal.Width div FOriginal.Height;
      if GlyphCount > High(TNumGlyphs) then
        GlyphCount := Low(TNumGlyphs);
      FNumGlyphs := TNumGlyphs(GlyphCount);
    end else
    if (FOriginal.Width > 0) and (FOriginal.Height > FOriginal.Width) and
      (FOriginal.Height mod FOriginal.Width = 0) then
    begin
      GlyphCount := FOriginal.Height div FOriginal.Width;
      if GlyphCount > High(TNumGlyphs) then
        GlyphCount := Low(TNumGlyphs);
      FNumGlyphs := TNumGlyphs(GlyphCount);
    end;

• IDE neu bauen.

Ich habe die Änderungen inzwischen in Laz/main eingebaut (siehe auch: https://gitlab.com/freepascal.org/lazar ... ws/1002606). Motivation ist, dass TImageList einen vertikalen Streifen speichert, TBitBtn und TSpeedButton aber plötzlich einen horizontalen Streifen wollen. Und das ist inkonsistent.

Das beigefügte Projekt ist eine Modification des bereits geposteten, in dem die genannten Änderungen vorausgesetzt werden.

[Andy Nightingale]

[...] müssen die Icons [...] horizontal angeordnet sein.

Mit ein paar kleinen Änderungen kann man die Buttons Unit so ergänzen, dass die Orientierung des Streifens erkannt wird, so dass auch die vertikale Anordnung der Glyphen funktioniert (von oben nach unten):

• Datei lcl/imagelistcache.pas: In procedure TImageListCache.RegisterBitmap die Zeile "Item^.FImageList := GetImageListFor(ABitmap.Width div ABitmapCount, ABitmap.Height);" austauschen gegen

  Code: Alles auswählen

        if ABitmap.Width > ABitmap.Height then
          Item^.FImageList := GetImageListFor(ABitmap.Width div ABitmapCount, ABitmap.Height)
        else
          Item^.FImageList := GetImageListFor(ABitmap.Width, ABitmap.Height div ABitmapCount);

• Ein paar Zeilen weiter unten, die Zeile "AStart := Item^.FImageList.AddSliced(ABitmap, ABitmapCount, 1);" austauschen gegen

  Code: Alles auswählen

      if ABitmap.Width > ABitmap.Height then
        // Horizontal strip
        AStart := Item^.FImageList.AddSliced(ABitmap, ABitmapCount, 1)
      else
        // Vertical strip
        AStart := Item^.FImageList.AddSliced(ABitmap, 1, ABitmapCount);

• Datei lcl/include/buttonglyph.inc: In procedure TButtonGlyph.SetGlyph den Block "if Original.Height > 0 then" bis zum "end" ersetzen durch

  Code: Alles auswählen

    if (FOriginal.Height > 0) and (FOriginal.Width > FOriginal.Height) and
      (FOriginal.Width mod FOriginal.Height = 0) then
    begin
      GlyphCount := FOriginal.Width div FOriginal.Height;
      if GlyphCount > High(TNumGlyphs) then
        GlyphCount := Low(TNumGlyphs);
      FNumGlyphs := TNumGlyphs(GlyphCount);
    end else
    if (FOriginal.Width > 0) and (FOriginal.Height > FOriginal.Width) and
      (FOriginal.Height mod FOriginal.Width = 0) then
    begin
      GlyphCount := FOriginal.Height div FOriginal.Width;
      if GlyphCount > High(TNumGlyphs) then
        GlyphCount := Low(TNumGlyphs);
      FNumGlyphs := TNumGlyphs(GlyphCount);
    end;

• IDE neu bauen.

Ich habe die Änderungen inzwischen in Laz/main eingebaut (siehe auch: https://gitlab.com/freepascal.org/lazar ... ws/1002606). Motivation ist, dass TImageList einen vertikalen Streifen speichert, TBitBtn und TSpeedButton aber plötzlich einen horizontalen Streifen wollen. Und das ist inkonsistent.

Das beigefügte Projekt ist eine Modification des bereits geposteten, in dem die genannten Änderungen vorausgesetzt werden.

Hi WP,
leider check ich das "noch"nicht ganz. Verstehe ich das richtig das du den Code von Lazarus mit dieser Komponente geändert hast? Soweit bin ich leider nicht.-aber das wäre wahrscheinlich genau das was ich bräuchte. Ich hab mich auch extra bei diesem Gitlab angemeldet um zu sehen was das ist...aber es kommt die Meldung "Ansicht nicht gefunden".-es muß auf geteilt stehen in der Sichtbarkeit.-geht leider nicht. Ich werd mal versuchen Step by Step deiner Abänderung zu folgen.-danke für deine Mühe. Grüße

[paweld]

@wp_xyz: Ich bestätige, dass es nach der Umsetzung der Änderungen auch bei vertikal angeordneten Grafiken einwandfrei funktioniert. - Lazarus trunk, FPC 3.2-fixes

[wp_xyz]

@wp_xyz: Ich bestätige, dass es nach der Umsetzung der Änderungen auch bei vertikal angeordneten Grafiken einwandfrei funktioniert. - Lazarus trunk, FPC 3.2-fixes

Leider nur "fast". Wenn die Bilder nicht mehr quadratisch sind, sondern länglich, kommt es ziemlich bald zu dem Sonderfall, dass Bitmap.Width > Bitmap.Height bleibt, selbst wenn die Einzelbilder vertikal angeordnet sind, z.B. zwei EinzelBilder 21*10 --> bei horizontaler Anordnung sind das 42x10, also Breite > Höhe, aber bei vertikaler Anordnung hat man 21x20, also immer noch Breite > Höhe, und die vertikale Anordnung wird nicht erkannt. Ich denke, man braucht eine neue Property wie GlyphImageLayout (=gilHorizontal, gilVertical), die man statt des Längen-Vergleichs verwenden kann. Aber vielleicht habe ich da auch wieder etwas übersehen?

leider check ich das "noch"nicht ganz. Verstehe ich das richtig das du den Code von Lazarus mit dieser Komponente geändert hast? Soweit bin ich leider nicht.-aber das wäre wahrscheinlich genau das was ich bräuchte. Ich hab mich auch extra bei diesem Gitlab angemeldet um zu sehen was das ist...aber es kommt die Meldung "Ansicht nicht gefunden".-es muß auf geteilt stehen in der Sichtbarkeit.-geht leider nicht. Ich werd mal versuchen Step by Step deiner Abänderung zu folgen.-danke für deine Mühe. Grüße

Ändere einfach die genannten Dateien in deinem Lazarus-Verzeichnis wie beschrieben (vorher ein Backup der zu ändernden Dateien machen), dann die IDE neu übersetzen ("Werkzeug" > "Kompiliere Lazarus mit Profil"). Fertig.

Die Änderungen habe ich auch im Lazarus-GitLab-Repositorium vorgenommen (ich habe dort Schreibrechte), so dass sie in der bald erscheinenden Version 5.0 enthalten sein werden.