Symbole

Alle Symbole können an verschiedenen Orten auf der Visualisierung verwendet werden. So ist es möglich, diese als Variable oder Text zu definieren.

Um ein Symbol auf der Visualisierung auszugeben, wird dieses mittels Tag [icon:SYMBOLPFAD] direkt im Text deklariert. Der Symbolpfad kann mittels rechter Maustaste oder mit CTRL+C aus der Symbolbibliothek kopiert werden. Es sollte, wenn möglich, nur das Material Symbols gewählt werden, damit der Stil der Visualisierung gleich bleibt.

Symbolbibliothek

Alle verfügbaren Symbole können unter dem Kontextmenü Visualisierung ▸ Symbole aufgerufen und durchsucht werden. Es ist auch möglich einen eigenen Symbolsatz in die Bibliothek zu importieren. Das Verfahren wird weiter unten erklärt.

Hinweise: Der Name, der auf der Symbolliste angezeigt wird, ist nicht identisch mit dem Symbolpfad. Wird im Pfad kein Symbolsatz angegeben, so wird automatisch der Satz Glyphicons verwendet.

Der Filter in der Symbolbibliothek sucht auch nach den hinterlegten Tags. Wird dieses Verhalten nicht gewünscht, so kann der Filter mit einem = beginnen, um nur in den Namen zu suchen.

Symbolsatz Material Symbols (Standard)

Dieser Symolsatz ist komplett dynamisch und der Stil der Symbole wird automatisch entsprechend des Designs der Visualisierung konfiguriert. Ausserdem wird ein gefülltes Symbol automatisch verwendet, wenn das Symbol aktiv sein soll. Nicht jedes Symbol hat jedoch eine gefüllte Variante.

Die Symbole werden automatisch abgerundet, wenn der Schaltflächen-Radius grösser oder gleich 16 Pixel beträgt. Ist der Radius gleich 0px, so werden die scharfen Symbole verwendet. Im Editor werden jedoch stets die normalen Symbole verwendet.

Hinweis: Es wird empfohlen den Symbolsatz "Material Symbols" zu verwenden, um die Visualisierung einheitlich zu gestalten.

Symbolsatz Material Animated

Es gibt ausgewählte Symbole des Material Symbols, die animiert wurden, um Werte darzustellen. Diese Symbole haben nur eine Animation mit dem Symbol der Struktur. Bei der Auswahl werden dann weitere Variablen freigeschaltet.

Symbolsatz Philips Hue

Die Symbole von Philips Hue können frei verwendet werden, wenn die Hue Schnittstelle eingesetzt wird. Ausserdem gibt es einen zusätzlichen Hue-Symbolsatz der Community von Home Assistant HASS. Weitere Informationen finden Sie am Ende dieses Kapitels.

Symbolsatz Wetter

Dieser Symbolsatz zeigt die Wetter-Symbole der Visualisierung an. Diese werden nahtlos von diversen Schnittstellen unterstützt. Siehe das unterstehende Kapitel Wetter-Icons.

Symbolsatz Legacy (veraltet)

Der Legacy Symbolsatz beinhaltet alle Symbole der alten Visualisierung. Der Anzeigestil der neuen Oberfläche bleibt dabei gleich. Die Symbole sollten nicht mehr verwendet werden, da die Darstellung nicht für die neue Oberfläche optimiert wurden.

Diverse alte Symbole sind weiterhin animiert:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Versteckte Symbole

Es gibt auch versteckte Symbole für die Visualisierung. Diese werden in den unteren Kapiteln weiter erläutert.

Zum Aufrufen der Symbole ist nur ein URL-Präfix notwendig.

Eigene Symbolsätze

Es ist möglich einen eigenen Symbolsatz in das Projekt zu importieren. Jeder Symbolsatz muss als ZIP-Datei vorbereitet werden. Ein paar Beispieldaten können hier heruntergeladen werden:

Pro-Tipp: Nach dem erfolgreichen Import, können Sie den Symbolsatz als .antobj exportieren, um den Import zu vereinfachen. Klicken Sie dazu mit der rechten Maustaste auf einen Symbolsatz und wählen Sie Export aus.

Die folgenden Regeln definieren den Aufbau und die Anforderungen eines Symbolsatzes. Bitte lesen Sie diese sorgfältig durch und halten Sie sich genau daran.

Regeln

  • Präfix
    • Darf nur _, a–z und 0–9 enthalten.
    • Grossbuchstaben werden automatisch in Kleinbuchstaben umgewandelt.
    • Reservierte Namen wie sys, src oder doc sind ungültig.
    • Muss mit einem Buchstaben (a–z) beginnen. Nur Zahlen sind nicht erlaubt.
    • Nachgestellte Unterstriche (_) werden entfernt.
    • Muss mindestens 3 Zeichen lang sein.
    • Mehrfache Unterstriche (__) werden zu einem einzigen reduziert.
  • Symbol-Namen
    • Werden automatisch in Kleinbuchstaben umgewandelt.
    • Erlaubte Zeichen sind -, _, a–z und 0–9.
    • Zu lange Namen und Präfixe sind zu vermeiden.
    • Ein Präfix muss eindeutig sein und sollte nur einmal verwendet werden.
    • Wenn ein Symbol denselben Namen und dasselbe Präfix wie ein Systemsymbol hat, kann es dieses ersetzen.
  • Dateibeschränkungen
    • Maximale Dateigrösse nach Bereinigung: 10 kB. Grössere Dateien werden abgelehnt.
    • SVG-Dateien müssen bereinigt sein:
      • Zeilenumbrüche werden automatisch entfernt.
      • Folgende Elemente werden gelöscht: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Folgende Attribute werden gelöscht: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Icons mit eingebetteten Skripten, Bildern, CSS oder externen Ressourcen werden abgelehnt.
      • Wenn Styles Farben oder Style-Blöcke enthalten, kann der Import ebenfalls abgelehnt werden.
  • SVG-Header-Anforderungen
    • Muss enthalten: viewBox, width und height. Fehlende Werte werden, falls möglich, automatisch ergänzt.
    • Muss den Namespace enthalten: xmlns="http://www.w3.org/2000/svg". Wenn er fehlt oder fehlerhaft ist, wird er automatisch ergänzt.
    • Der Icon-Name muss exakt zu den Dimensionen passen, sonst wird das Icon abgelehnt.
    • Die Dimensionen müssen quadratisch sein (Breite = Höhe). Standard: 24px.
    • Widersprüchliche Styles oder unpassende Dimensionen sind zu vermeiden.
  • Allgemeines
    • Schlecht erstellte Icons können die Darstellung stark verlangsamen oder sogar fehlerhaft machen.
    • Achten Sie unbedingt auf die Urheberrechte der Symbole.
    • Alle Vektoren werden auf drei Kommastellen gerundet.

Struktur

  • Die Datei iconset.ini ist zwingend erforderlich, um den Symbolsatz zu erkennen.
    • Sie kann im Root-Verzeichnis der ZIP-Datei oder in einem Unterordner liegen.
    • Muss in Kleinbuchstaben vorliegen (iconset.ini).
    • Symbol-Dateinamen selbst sind nicht case-sensitiv.
  • Der Import sucht nicht automatisch nach SVG-Dateien.
    • Der Icon-Ordner muss explizit in iconset.ini definiert werden (Gross-/Kleinschreibung beachten).
    • In der ZIP-Datei-Vorlage wurde ein Ordner namens icons/ definiert.
  • Unterordner
    • Unterordner im definierten Ordner (icons/) dienen als Kategorien.
    • Symbolnamen müssen über alle Kategorien hinweg eindeutig sein.
    • Namensregeln im Symbolordner:
      • Minimum: Nur Dimension und Dateiendung (z. B. 24.svg).
      • Varianten wie filled24.svg oder round_filled_24.svg sind gültig.
      • Dateinamen mit mehreren Zahlen (z. B. 24_48.svg) sind ungültig.
      • Style-Varianten werden erkannt durch:
        • Gefüllt: Muss filled oder fill enthalten.
        • Rund: Muss round enthalten.
        • Kantig: Muss sharp enthalten.
        • Rund und kantig können nicht miteinander kombiniert werden.
      • Wenn mehrere Regeln zutreffen, wird die zuletzt erkannte Datei verwendet (die Auswahl kann zufällig wirken).
  • Weitere Regeln
    • Keine verschachtelten Unter-Unterordner werden durchsucht (diese können für Backups oder Originale genutzt werden).
    • Dateien ohne .svg werden ignoriert.
    • In einem Symbolordner kann eine Datei namens tags.txt liegen, um zusätzliche Tags zur Suche hinzuzufügen..
      • Tags können mit ,, ; oder Zeilenumbrüchen getrennt werden.

Spezielle Symbolsätze

Es gibt auch diverse spezielle Symbolsätze die wie die eigenen Symbolsätze importiert werden können, jedoch nicht nach den obigen Vorgaben konfiguriert werden müssen.

Hass Hue Icons

Einer davon ist der von der Gibhub Seite hass-hue-icons. Dieser ist ein zusätzlicher Hue-Symbolsatz der Community von Home Assistant HASS und darf nur für nicht-kommerzielle Projekte verwendet werden, da dieser unter der Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International-Lizenz steht. Deshalb wird der Symbolsatz nicht mit Antcas Control mitgeliefert. Die Symbole können jedoch jederzeit mit der ZIP-Datei hass-hue-icons-main.zip als neuen Symbolsatz in das Projekt importiert werden. Beachten Sie dabei die Lizenzbedingungen des Projektes auf der Github-Webseite.

Quelle: https://github.com/arallsopp/hass-hue-icons.

Material Design Icons von Pictogrammers

Ein weiterer ist der von Pictogrammers. Dazu muss die Datei mdi-###.json in eine ZIP-Datei gepackt und importiert werden. Die Datei kann in der Entwicklerkonsole des Browsers ausfindig gemacht und heruntergeladen werden. Es wird versucht die Outline-Symbole mit den gefüllten zu kombinieren. Die Bibliothek ist fast gleich mit den Material Symbols. Jedoch gibt es viele Community-Erweiterungen. Falls Sie andere Symbolsätze in die Bibliothek integrieren möchten, können Sie gerne bei uns nachfragen.

Quelle: https://pictogrammers.com/library/mdi/

Untergeordnete Seiten