IDE Lazarus Iconfinder

[corpsman]

So dann machen wir nen neuen Thread auf, wie unter https://lazarusforum.de/viewtopic.php?t=17540 gewünscht.

Es geht um den Lazarus Iconfinder

Da du hier in dem Beispiel-Screenshot Icons anzeigst, frage ich, ob es dir um die Anzeige von Icons oder von "normalen" Bildern (Fotos etc) geht? Im Fall von Icons (wo kein Umskalieren der Bilder nötig ist) sollte ich vielleicht darauf hinweisen, dass Lazarus seit Version 4 einen Icon-Viewer verfügbar hat, als Zusatzpackage "iconfinder" (unter "Package" > "Installierte Packages einrichten" zu installieren). Der Icon-Finder ist in die ImageList- und Picture-Editoren integriert. Das besondere dabei ist, dass in jedem Icon-Verzeichnis eine Datei "metadata.xml" mit Suchwörtern zu jedem Bild angelegt ist, so dass man Icons ganz schnell findet und in die eigene ImageListe oder das eigene Image integrieren kann. Leider gibt es noch ein paar Kleinigkeiten, um deren Behebung ich mich drücke (z.B. gibt es die Suchbegriffe nur auf Englisch), so dass ich noch keine große Bekanntmachung dazu gemacht habe.

Ich hab das ding nu installiert, aber ich finde nicht wo der Integriert sein soll

install_state.png (75.13 KiB) 803 mal betrachtet

[corpsman]

Schön, wenn der alte Code hilft.
Bist du dir mit den Änderungen sicher? Wenn ja, werde ich den pull request mergen, ohne Test.
Andererseits hast du ja unlängst geforkt, so könntest du ja erst mal da weitermachen und ich lasse meine alte Version noch in Ruhe?

Ich muss ja forken um Änderungen pushen zu können . Ich habe heute auch schon diverse weitere Features mit eingepflegt. Interessant ist, das du ja noch nen offenen Issue hast. Ich denke der kam daher, das beim Invalidate kein "Arrange" aufgerufen wurde, das hab ich mittlerweile auch drin, ein merge könnte diesen issue ggf also auch fixen.

Ich werde auf jeden Fall meine App weiter nutzen und ggf auch deinen Code weiter bearbeiten. Hab ewig gebraucht um raus zu finden wie dein "Hack" mit den Rahmenbildern ist. Aktuell suche ich noch ob ich die Scallierung bzw. das Stretchdraw beeinflussen kann, da das noch komische alias effekte hat ..

[wp_xyz]

Ich hab das ding nu installiert, aber ich finde nicht wo der Integriert sein soll

Der IconFinder taucht an drei Stellen in der IDE auf:

* Doppel-Klick auf einer ImageList: Unter "Hinzufügen" gibt es nun einen neuen Menpünkt "Mittels Icon-Suche hinzufügen", analog unter "Ersetzen". Dadurch wird der Icon-Finder gestartet. Wenn dort ein Icon per Doppelklick ausgewählt wird, erscheint es in der ImageList.
* Der Picture-Property-Editor, der sich beim Klick auf '...' neben der Picture-Eigenschaft eines TImage oder der Glyph-Eigenschaft eines TSpeedButtons oder TBitBtns öffnet, hat einen neuen Button "Icon-Suche", der den Icon-Finder startet. Das dort ausgewählte Icon wird ins Picture/Glyph übernommen.
* Unter "Werkzeuge" > "Einstellungen" > "Icon-Suche" > "Allgemein" findet man einen konfigurierbaren Icon-Finder, in dem man die Suchbegriffe für die Icons definieren kann oder weitere Icon-Verzeichnisse in die Suche einschließen kann.

[corpsman]

Ahh nu hab ich ihn gefunden, meine IDE ist auf englisch

Welche der gelisteten Verzeichnisse kann man denn da noch Bedenkenlos mit aufnehmen ?

icon_folders.png (86.13 KiB) 763 mal betrachtet

Und Boa ist das fancy, hab da mal meinen Silk Pfad mit eingebaut:

Preview_Added.png (158.19 KiB) 763 mal betrachtet

Alle Silk Icons sind nun so komisch Rot, liegt das daran, dass ich da noch keine metadata.xml für drin habe ?

[Edit]
und kann man die Metadaten aus dem Dialog heraus editieren oder macht man das immer über xed und metadata.xml ?

[corpsman]

@wp_xyz
So also ich hab mir mittels:

Code: Alles auswählen

Procedure TForm1.Button1Click(Sender: TObject);
Var
  meta, sl: TStringList;
  i: Integer;

  Procedure AddIcon(filename: String);
  Var
    aName: String;
  Begin
    aName := ExtractFileNameWithoutExt(filename);
    meta.add('    <icon filename="' + filename + '" width="16" height="16" style="Silk">');
    meta.add('      <keywords>');
    meta.add('        <keyword>' + aName + '</keyword>');
    meta.add('      </keywords>');
    meta.add('    </icon>');
  End;

Begin
  sl := FindAllFiles('/sda5/sda5/Tools/Silk_Icons', '*.png', false);
  meta := TStringList.Create;
  meta.add('<?xml version="1.0" encoding="UTF-8"?>');
  meta.add('<metadata>');
  meta.add('  <icons>');
  For i := 0 To sl.Count - 1 Do Begin
    AddIcon(ExtractFileName(sl[i]));
  End;
  meta.add('  </icons>');
  meta.add('</metadata>');
  meta.SaveToFile('/sda5/sda5/Tools/Silk_Icons/metadata.xml');
  meta.free;
  sl.free;
End;

Das initiale metadata.xml erstellt.
Aber nun sind alle Bilder weg

Wo muss ich angeben, das er den Style "Silk" akzeptiert ?

[Edit]
und nen weiteren Feature request hätte ich auch noch, beim Tippen im Suchfeld sollte die Liste unten sofort aktualisiert werden, nicht erst nach "return"

[Edit2]
Also ich hab nu "silk" als Schlüsselwort hinzugefügt, dann gehts so wie im screenshoot

preview_mit_silk_keyword.png (55.01 KiB) 744 mal betrachtet

Und sollte das nicht rüber kommen, dein Iconfinder ist echt spitze (y)

[wp_xyz]

Welche der gelisteten Verzeichnisse kann man denn da noch Bedenkenlos mit aufnehmen ?
icon_folders.png

Diese voreingestellten Verzeichnisse sind Verzeichnisse im Images-Ordner der Lazarus-Installation und teilweise auch im Components-Ordner. Viele Icons davon sind Dubletten von images/general_purpose, oder sehr speziell auf die Anwendung zugeschnitten. Geh einfach mit deinem Dateimanager mal in diese Ordner rein und schau dir die Icons an, ob etwas dabei ist, was du brauchen könntest. Wenn ja, mache vor dem Ordner ein Kreuz, so das er mit in den Icon-Finder geladen wird.

Alle Silk Icons sind nun so komisch Rot, liegt das daran, dass ich da noch keine metadata.xml für drin habe ?

Genau. Wenn sie keine Meta-Daten haben, kann man sie in der Suche nicht finden.

und kann man die Metadaten aus dem Dialog heraus editieren oder macht man das immer über xed und metadata.xml ?

Das ist eine Konfigurationseinstellung, daher musst du den Icon-Finder aus dem "Tools"-Menü öffnen. Mache einen Doppelklick auf einem rot umrandeten Icon. Es öffnet sich ein Dialog, in dem du die Suchbegriffe für diese Icon eingeben kannst, je ein Suchwort pro Zeile. Den Inhalt des Memo kannst du in die Zwischen-Ablage kopieren und bei einem ähnlichen Icon wiederverwenden. Gib durchaus mehrere Suchbegriffe an. Einem "Plus"-Icon habe ich z.B. in der Regel die Begriffe "add;insert;plus" zugeordnet. Welche Suchwörter insgesamt schon vorhanden sind, wird in dem Dialog angezeigt, der sich mit dem '...'-Button neben dem Eingabefeld "Suchbegriffe hier eintragen" öffnet (da kann man sich auch logische Kombinationen von Suchbegriffen zusammenbasteln)

Mit Hilfe der Stil-Combobox hast du eine Möglichkeit, die Icons zu klassifizieren. Denn man möchte z.B. in einer Anwendung, die moderne einfarbige Strich-Icons verwendet, keine farb-strotzenden Win-XP-Icons haben.

Wenn diese Metadaten für ein Icon komplett eingegeben sind, verschwindet der rote Rahmen. Die Meta-Datei wird geschrieben mit "Metadaten speichern" bzw. wenn der Icon-Finder geschlossen wird.

[wp_xyz]

Wie schon gesagt, mit den Schlüsselwörtern umschreibe ich, was das Icon darstellt und wie man es verwenden könnte. Das erste silk-Icon in deinem letzten Screenshot zeigt einen Ordner mit Favoriten-Stern. Ich würde es verwenden bei Kommandos wie "Favoriten öffnen". Daher sollte es folgende Suchbegriffe haben:

folder
file
open
favorite
favourite // weiß nicht, welche Schreibweise richtig ist und welche ich bei der Suche verwenden werde --> daher beide
bookmark
star

Beim Suchen wird ein teilweise Übereinstimmung des Suchbegriffs erkannt. Unabhängig von dem o.e. Schreibweisen-Problem würde also dieses Icon gefunden, wenn man nur nach "fav" sucht (aber evtl auch noch anderes...).

Wie schon erwähnt, es ist geplant, in einer künftigen Version die Schlüsselworte einmal übersetzbar zu machen...

Ein Wort noch zu den Icon-Größen: Lazarus unterstützt ja, dass Icons verschiedener Größen in derselben Imageliste verwaltet werden. Damit das im Icon-Finder funktioniert, müssen alle Größen desselben Motivs denselben Namensstamm aufweisen und dann mit Unterstrich getrennt eine beliebige numerische Kennung haben, idealerweise die Größe, wobei IconFinder die echte Größe aus der Datei ausliest. IconFinder fasst alle unterschiedlichen Größen desselben Motivs zusammen und verwendet jeweils dieselben Metadaten. Man muss also, wenn man für ein 16x16-Icon die Metadaten eingetragen hat, dasselbe nicht 5x wiederholen, wenn man auch noch dasselbe Motiv in den Größen 24x24, 32x32, 36x36, 48x48 und 64x74 hat

In dem Screenshot sehe ich, dass du den gezeigten Silk-Icons den Stil "outline" gegeben hast. Da fällt mir ein, dass ich diese Stile noch nicht erklärt habe:

* "classic" meint "klassische" Icons mit viele Farben und insbesondere Farbverläufen, so wie man sie also zu XP, Win7 hatten. (Hier würde ich die Silk-Icons einordnen, denn sie harmonieren so halbwegs mit den anderen "classic" Icons aus der Lazarus general-purpose Kollektion)
* "flat" sind die flachen Icons, die unter Windows 8, 10, 11 aktuell sind: stark vereinfachte Symbole, keine pseudo-realistischen Farbverläufe, sondern "flache" konstante Farben.
* "outline" sind noch eine Stufe abstrakter, hier sieht man nur dem Umriss. Das Icon verwendet nur eine einzige Farbe.
* "outline 2-color": im Prinzip wie "outline" nur sind nun zwei Farben im Einsatz

Leider ist diese Stil-Liste im Programm hard-coded, so dass man sie nicht erweitern kann. Muss mir da mal was überlegen...

[corpsman]

@wp_xyz
Danke für die Erklärung, ich habe mein Script noch mal laufen lassen und nu sind die alle auf Classic, durch das Schlüsselwort "Silk" ist auch alles tip top.

Meinen "Feature" Request habe ich auch mal ausprobiert, wenn ich folgende Änderungen durchführe ist es 1a

Code: Alles auswählen

procedure TIconViewerFrame.btnExecuteFilterClick(Sender: TObject);
var
  filter: String;
begin
  filter := cmbFilterByKeywords.Text;
  FIconViewer.FilterByIconKeywords := filter;
  AddKeywordFilterToHistory(filter);
  cmbFilterByKeywords.Text := filter;   // Must be after AddKeywordFilterToHistory!
  cmbFilterByKeywords.SelStart := length(filter); // <-- Added by Corpsman
  UpdateIconCount;
end;     

in iconviewer.lfm

object cmbFilterByKeywords: TComboBox
AnchorSideLeft.Control = FilterPanel
AnchorSideTop.Control = cmbFilterBySize
AnchorSideTop.Side = asrCenter
AnchorSideRight.Control = btnKeywordEditor
AnchorSideBottom.Side = asrBottom
Left = 6
Height = 28
Top = 3
Width = 228
Anchors = [akTop, akLeft, akRight]
BorderSpacing.Left = 6
BorderSpacing.Right = 2
BorderSpacing.Bottom = 6
DropDownCount = 24
ItemHeight = 0
TabOrder = 0
TextHint = 'Enter keywords here'
OnChange = cmbFilterByKeywordsEditingDone <-- Einfügen
OnEditingDone = cmbFilterByKeywordsEditingDone <-- Löschen
end

wenn du das ( oder was vergleichbares ) einbauen würdest fände ich das spitze

[theo]

Aktuell suche ich noch ob ich die Scallierung bzw. das Stretchdraw beeinflussen kann, da das noch komische alias effekte hat ..

Die Idee des Thumbviewers ist es, aus grässeren Fotos möglichst schnell und flüssig kleine Vorschaubilder zu machen.
Wenn du Icons anschauen willst, ist der Iconfinder bestimmt geeigneter.

[corpsman]

*g*
ja das Teil ist spitze und mit den Modifikationen die ich gemacht habe genau was ich will, der Hammer ist, dass man in der IDE Suchen und dann direkt ins Projekt übernehmen kann (y)

[wp_xyz]

wenn du das ( oder was vergleichbares ) einbauen würdest fände ich das spitze

Bin nicht sicher, ob dein Patch schon alles enthält. Denn du kannst in der Suchleiste auch einen logischen Ausdruck eintragen, z.B. "file and not folder". Was passiert hier während des Eintippens, wenn der Ausdruck noch nicht komplett eingetippt ist? (z.B. "file and n")

[corpsman]

das funktioniert wunderbar, und sobald ich den text "vollständig" geschrieben habe ist es dann wie erwartet.

file_and_not.png (4.66 KiB) 468 mal betrachtet

[wp_xyz]

ok, erledigt.

[corpsman]

(y), einfach die Lazarus quellen neu pullen und recompilen ?

[wp_xyz]

(y), einfach die Lazarus quellen neu pullen und recompilen ?

Ja. Der alte Code ist auch noch erreichbar, wenn man die Variable SearchWhileTyping auf false setzt. Hat momentan noch kein GUI, so dass man das im Code ändern muss, wenn man wirklich alle möglichen riesigen Icon-Sammlungen eingebunden hat und sich wundert, dass beim Eintippen eines Suchwortes die IDE nur noch träge reagiert. Falls sich jemand darüber beschwert, werde ich schon eine Lösung finden, wie man einfacher zwischen altem und neuem Verhalten umschalten kann.