Individualiserung der Icons |
  
|
Individualiserung der Icons |
|
Im WebOffice flex (Flash)-Client kann der Administrator Piktogramme festlegen, welche insbesondere für Suchen, aber auch für Links und externe Anwendungen verwendet werden können. Hierzu werden verschiedene Piktogramme im Ordner <WebOffice Applikation>\pub\images\flexjs bereitgestellt, welche im Client eingebunden werden können:
Eingebundene Icons im WebOffice flex (Flash)-Client
Es können aber auch individualisierte Piktogramme verwendet werden, welche selbst erstellt oder von Anbietern wie z.B. https://www.flaticon.com bezogen werden können. Da es sich bei den im WebOffice flex (Flash)-Client verwendeten Icons um keine klassischen Bilder, sondern um Masken handelt, welche aus einem transparenten Symbol und einem Hintergrund in der BaseColor (im Normalfall weiß) bestehen, damit beispielsweise Hover-Effekte korrekt funktionieren, müssen die Bilder vor ihrer Einbindung noch entsprechend aufbereitet werden.
Folgende Punkte sollten beachtet werden, um individuelle Icons für die Suche mit dem WebOffice flex (Flash)-Client zu erstellen, und eine optimale Anzeige auch auf hochauflösenden Displays sicherzustellen:
•Die Größe sollte mindestens 48x48px betragen.
•Innerhalb der Icon-Leinwandgröße von 48x48px sollten die Icons selbst etwa 32x32px bis 36x36px groß sein und zentriert positioniert sein.
•Alle Icons sollten denselben Style aufweisen - entweder gefüllt oder umrahmt.
•Die Icons sollten einfärbig gehalten werden.
•Der WebOffice flex (Flash)-Client setzt auf flache Icons ohne 3D-Effekt, dementsprechend sollten auch die Suchen-Icons gewählt werden.
Individuelle Icons mit Gimp erstellen
Im Folgenden wird eine Anleitung gegeben, wie individuelle Icons von https://www.flaticon.com bezogen und mit Gimp aufbereitet werden können, um diese für den WebOffice flex (Flash)-Client bereitzustellen. Für andere Bildgrundlagen bzw. andere Rastergraphiksoftware sind die notwendigen Schritte äquivalent.
Der gewünschte Icon ist von https://www.flaticon.com in einer Größe von 32x32px als PNG-Bild kostenlos herunterzuladen und anschießend in Gimp zu öffnen.
Zuerst muss der Farbmodus auf RGB geändert werden ("Bild" --> "Modus" --> "RGB").
Anschließend wird mittels "Bild" --> "Leinwandgröße" diese auf 48x48px adaptiert. In diesem Dialog ist weiters das Bild mit dem entsprechenden Button zu zentrieren und "Ebenengröße ändern" auf "Ebenen in Bildgröße" umzustellen.
Anpassung der Leinwandgröße in Gimp
Anschließend muss im Ebenendialog auf die Ebene rechtsgeklickt und "Alphakanal entfernen" ausgewählt werden, um die Hintergrundtransparenz auf die Hintergrundfarbe (im Normalfall weiß) zu ändern.
Alphakanal entfernen in Gimp
In einem weiteren Schritt muss im Menü "Farben" der Punkt "Farbe zu Transparenz" ausgewählt werden, um das Symbol selbst transparent zu machen.
Icon transparent schalten in Gimp
Im sich öffnenden Dialog ist die Symbolfarbe auszuwählen - bei den Icons von Flaticon sind diese im Normalfall schwarz. Anschließend mit OK bestätigen.
Farbe des Icons in Gimp auswählen, um dieses transparent zu schalten
Mittels "Datei" --> "Exportieren" ist das Bild als PNG-Bild zu exportieren und im Folder <WebOffice Applikation>\pub\images\flexjs unter einer entsprechenden Bezeichnung abzulegen.
Anschließend muss im VertiGIS GmbH - Technical Documentation Team bei der jeweiligen Suche/Abfrage als "Bild für Suchpiktogramm" der Pfad zu dem erstellten Bild angegeben werden.
Piktogramm mittels VertiGIS GmbH - Technical Documentation Team einbinden
Nach Neupublizieren des Projekts steht das erstellte Piktogramm bei der jeweiligen Suche im WebOffice flex (Flash)-Client zur Verfügung.
Individuelles Suchsymbol im WebOffice flex (Flash)-Client