Bilder und Icons

Sie haben die Möglichkeit in den Verzeichnissen icons und img Ihre Logos, Bilder und Icons zu verwalten.

- - - - add.svg
      - alkis.svg
      - ...
    - - apple-splash-640-1136.jpg
        ...
      - atlas.png
        logo_primary.png
        logo_secondary.png
        ...
      - favicon.ico
      - logo192.png
      - logo512.png
      - ...

Icons

Icons werden an verschiedenen Stellen von Terratwin verwendet. Dazu gehören Werkzeugicons, Icons für Dialoge oder sonstige Buttons. Die Icons sollten im SVG-Format vorliegen und in der Größe 24x24 Pixel sein. Die Stroke-Color sollte ausschließlich schwarz (#000000) sein. Alle SVG-Icons sollten in dem Ordner icons abgelegt werden.

Bilder

Auch Bilder im Format JPG oder PNG können in Terratwin verwendet werden. Diese sollten in dem Ordner img abgelegt werden.

Logos und Favicon

Direkt im Verzeichnis img befinden sich die Logos für das Manifest.json und das Favicon. Diese sind für die Darstellung der Anwendung in der Browserleiste und auf dem Homescreen Ihres Geräts zuständig. Falls Sie noch über keine Logos mit diesem Format oder kein favicon verfügen können Sie diese bspw. gemeinsam auf dieser Seite erstellen: favicon.io

Das Logo sollten quadratisch sein und mindestens einmal mit 192x192 Pixel und einmal mit 512x512 Pixel vorliegen. Da einige Betriebssystemeversionen die Logos abrunden, empfiehlt es sich, die Logos mit ausreichend Außenabstand zu maskieren.

Beispiel für optimale Darstellung als maskierbares Icon, Quelle: https://web.dev/learn/pwa/web-app-manifest

Nähere Informationen dazu finden Sie hier

Apple Logos

Apple benötigt die Darstellung als PWA weitere Logogrößen. Um diese zu erstellen können Sie den pwa-asset-generator verwenden. Nähere Informationen finden Sie auch hier: pwa-asset-generator

Hierfür müssen Sie folgende Schritte durchführen:

Installieren Sie Node.js .
Erstellen Sie einen Ordner, in dem sich das Logo (z. B. logo.png) befindet, das Sie konvertieren möchten.
Navigieren Sie über Powershell, CMD oder Ihren Code-Editor (z. B. VSCode ) zu Ihrem erstellten Ordner.
Führen Sie den folgenden Befehl aus, um die Dependency zu installieren:
```
npm install pwa-asset-generator
```
Nach der Installation können Sie mit dem folgenden Befehl Ihre Apple Touch Icons erstellen:
```
npx pwa-asset-generator [source-file]
```
- [source-file] steht hierbei für den Namen des Logos, also in diesem Beispiel logo.png.
- Der vollständige Befehl wäre in diesem Fall:
```
npx pwa-asset-generator logo.png
```

Sonstige Bilder

Innerhalb des Ordners custom können Sie sonstige Bilder ablegen, z.B. für

die Links innerhalb des Menus
die Tabs beim Themen hinzufügen